@extends('layouts.app')

@section('content')
    <div id="page-container" class="fade page-sidebar-fixed page-header-fixed page-with-wide-sidebar">
        @include('partials.header')
        @include('partials.sidebar')

        <div id="content" class="content">
            <ol class="breadcrumb float-xl-right">
                <li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
                <li class="breadcrumb-item active">Dashboard</li>
            </ol>

            <h1 class="page-header">
                Dashboard
            </h1>

            <!-- Room Statistics Overview -->
            <div class="row mb-4">
                <div class="col-lg-3 col-md-6">
                    <div class="card bg-primary text-white mb-4">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <div class="h4 mb-0" id="total-rooms">{{ $roomStats['total_rooms'] }}</div>
                                    <small>Total Rooms</small>
                                </div>
                                <div class="fa fa-bed fa-2x opacity-50"></div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="small">
                                <span class="text-success">
                                    <i class="fa fa-arrow-up"></i> {{ $roomStats['occupancy_rate'] }}% Occupied
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6">
                    <div class="card bg-success text-white mb-4">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <div class="h4 mb-0" id="checked-in-rooms">{{ $roomStats['checked_in'] }}</div>
                                    <small>Checked In</small>
                                </div>
                                <div class="fa fa-user-check fa-2x opacity-50"></div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="small">
                                <span class="text-light">
                                    <i class="fa fa-users"></i> {{ $roomStats['recent_checkins'] }} checked in
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6">
                    <div class="card bg-info text-white mb-4">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <div class="h4 mb-0" id="rooms-with-guests">{{ $roomStats['with_guests'] }}</div>
                                    <small>With Guests</small>
                                </div>
                                <div class="fa fa-users fa-2x opacity-50"></div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="small">
                                <span class="text-light">
                                    <i class="fa fa-star"></i> {{ $roomStats['engaged_rooms'] }} engaged
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6">
                    <div class="card bg-warning text-white mb-4">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <div class="h4 mb-0" id="unassigned-greetings">{{ $roomStats['unassigned_greetings'] }}
                                    </div>
                                    <small>No Greeting</small>
                                </div>
                                <div class="fa fa-exclamation-triangle fa-2x opacity-50"></div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="small">
                                <a href="{{ route('welcome_greetings.index') }}" class="text-white">
                                    <i class="fa fa-cog"></i> Manage Greetings
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Charts and Details Row -->
            <div class="row mb-4">
                <!-- Occupancy Chart -->
                <div class="col-lg-4 col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class="fa fa-chart-pie text-primary"></i> Room Occupancy
                            </h5>
                        </div>
                        <div class="card-body">
                            <canvas id="occupancyChart" width="100" height="100"></canvas>
                        </div>
                    </div>
                </div>

                <!-- Room Type Distribution -->
                <div class="col-lg-4 col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class="fa fa-chart-bar text-success"></i> Room Types
                            </h5>
                        </div>
                        <div class="card-body">
                            <canvas id="roomTypeChart" width="100" height="100"></canvas>
                        </div>
                    </div>
                </div>

                <!-- Welcome Greeting Assignment -->
                <div class="col-lg-4 col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class="fa fa-comment text-info"></i> Greeting Status
                            </h5>
                        </div>
                        <div class="card-body">
                            <canvas id="greetingChart" width="100" height="100"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Room Details Tables -->
            <div class="row mb-4">
                <!-- Recent Check-ins -->
                <div class="col-lg-6">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class="fa fa-users text-success"></i> Checked In Rooms
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-sm" id="recent-checkins-table">
                                    <thead>
                                        <tr>
                                            <th>Room</th>
                                            <th>Guest</th>
                                            <th>Type</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <!-- Data will be loaded via AJAX -->
                                        <tr>
                                            <td colspan="4" class="text-center text-muted">
                                                <i class="fa fa-spinner fa-spin"></i> Loading...
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="card-footer">
                            <a href="{{ route('rooms.index') }}" class="btn btn-sm btn-outline-primary">
                                <i class="fa fa-eye"></i> View All Rooms
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Rooms Needing Attention -->
                <div class="col-lg-6">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class="fa fa-exclamation-triangle text-warning"></i> Needs Attention
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-sm" id="needs-attention-table">
                                    <thead>
                                        <tr>
                                            <th>Room</th>
                                            <th>Guest</th>
                                            <th>Issue</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <!-- Data will be loaded via AJAX -->
                                        <tr>
                                            <td colspan="3" class="text-center text-muted">
                                                <i class="fa fa-spinner fa-spin"></i> Loading...
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="card-footer">
                            <button type="button" class="btn btn-sm btn-outline-info" onclick="refreshRoomDetails()">
                                <i class="fa fa-refresh"></i> Refresh
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Hidden Orders Section (Existing Functionality) -->
            <div class="row" style="display: none;" id="orders-section">
                <div class="col">
                    <div class="panel panel-inverse" data-sortable-id="index-1">
                        <div class="panel-heading">
                            <h2>Order Resto & Service</h2>
                        </div>
                        <div class="panel-body">
                            <div class="row" id="orders-container">
                                <!-- Orders will be dynamically loaded here -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class="fa fa-bolt text-warning"></i> Quick Actions
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="flex-wrap" role="group">
                                <a href="{{ route('rooms.create') }}" class="btn btn-custom">
                                    <i class="fa fa-plus"></i> Add New Room
                                </a>
                                <a href="{{ route('welcome_greetings.index') }}" class="btn btn-custom">
                                    <i class="fa fa-comment"></i> Manage Greetings
                                </a>
                                <button type="button" class="btn btn-custom" onclick="refreshDashboard()">
                                    <i class="fa fa-refresh"></i> Refresh Data
                                </button>
                                {{-- <button type="button" class="btn btn-custom" onclick="toggleOrdersSection()"
                                    id="toggle-orders-btn">
                                    <i class="fa fa-eye"></i> Show Orders
                                </button> --}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <a href="javascript:;" class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade"
            data-click="scroll-top">
            <i class="fa fa-angle-up"></i>
        </a>
    </div>

    <!-- Add this CSS to your existing styles section in index.blade.php -->
    <style>
        /* Ensure all text and icons in statistics cards are white */
        .card.bg-primary .card-body,
        .card.bg-primary .card-body *,
        .card.bg-success .card-body,
        .card.bg-success .card-body *,
        .card.bg-info .card-body,
        .card.bg-info .card-body *,
        .card.bg-warning .card-body,
        .card.bg-warning .card-body * {
            color: white !important;
        }

        /* Ensure icons in statistics cards are white */
        .card.bg-primary .fa,
        .card.bg-success .fa,
        .card.bg-info .fa,
        .card.bg-warning .fa {
            color: white !important;
        }

        /* Ensure footer text in statistics cards is white */
        .card.bg-primary .card-footer,
        .card.bg-primary .card-footer *,
        .card.bg-success .card-footer,
        .card.bg-success .card-footer *,
        .card.bg-info .card-footer,
        .card.bg-info .card-footer *,
        .card.bg-warning .card-footer,
        .card.bg-warning .card-footer * {
            color: white !important;
        }

        /* Override any specific text color classes that might interfere */
        .card.bg-primary .text-success,
        .card.bg-success .text-light,
        .card.bg-info .text-light,
        .card.bg-warning .text-white {
            color: white !important;
        }
    </style>

    <!-- Chart.js and Custom Scripts -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>
        // Dashboard data and charts
        let roomStatsData = @json($roomStats);
        let occupancyChart, roomTypeChart, greetingChart;

        // Initialize dashboard
        $(document).ready(function() {
            initializeCharts();
            loadRoomDetails();

            // Set up auto-refresh every 5 minutes
            setInterval(refreshDashboard, 300000);

            // Initialize existing order functionality
            fetchOrders();
            setInterval(fetchOrders, 30000);

            // Event delegation for status update dropdown
            $(document).on('change', '.update-status', function() {
                var orderId = $(this).data('order-id');
                var statusId = $(this).val();
                if (statusId) {
                    updateOrderStatus(orderId, statusId);
                }
            });
        });

        // Initialize Charts
        function initializeCharts() {
            // Occupancy Chart
            const occupancyCtx = document.getElementById('occupancyChart').getContext('2d');
            occupancyChart = new Chart(occupancyCtx, {
                type: 'doughnut',
                data: {
                    labels: ['Checked In', 'Checked Out'],
                    datasets: [{
                        data: [
                            roomStatsData.charts_data.occupancy.checked_in,
                            roomStatsData.charts_data.occupancy.checked_out
                        ],
                        backgroundColor: ['#28a745', '#6c757d'],
                        borderWidth: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom'
                        }
                    }
                }
            });

            // Room Type Chart
            const roomTypeCtx = document.getElementById('roomTypeChart').getContext('2d');
            const roomTypeLabels = roomStatsData.room_type_distribution.map(item => item.room_type || 'Unknown');
            const roomTypeCounts = roomStatsData.room_type_distribution.map(item => item.count);

            roomTypeChart = new Chart(roomTypeCtx, {
                type: 'bar',
                data: {
                    labels: roomTypeLabels,
                    datasets: [{
                        label: 'Rooms',
                        data: roomTypeCounts,
                        backgroundColor: '#007bff',
                        borderColor: '#0056b3',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                stepSize: 1
                            }
                        }
                    }
                }
            });

            // Greeting Assignment Chart
            const greetingCtx = document.getElementById('greetingChart').getContext('2d');
            greetingChart = new Chart(greetingCtx, {
                type: 'doughnut',
                data: {
                    labels: ['Assigned', 'Unassigned'],
                    datasets: [{
                        data: [
                            roomStatsData.charts_data.greeting_assignments.assigned,
                            roomStatsData.charts_data.greeting_assignments.unassigned
                        ],
                        backgroundColor: ['#17a2b8', '#ffc107'],
                        borderWidth: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom'
                        }
                    }
                }
            });
        }

        // Load room details
        function loadRoomDetails() {
            $.ajax({
                url: '{{ route('dashboard.room-details') }}',
                method: 'GET',
                success: function(response) {
                    if (response.success) {
                        updateRecentCheckinsTable(response.data.recent_checkins);
                        updateNeedsAttentionTable(response.data.needs_attention);
                    }
                },
                error: function() {
                    console.error('Failed to load room details');
                }
            });
        }

        // Update recent check-ins table
        function updateRecentCheckinsTable(data) {
            const tbody = $('#recent-checkins-table tbody');
            tbody.empty();

            if (data.length === 0) {
                tbody.append(`
                    <tr>
                        <td colspan="4" class="text-center text-muted">No checked-in rooms</td>
                    </tr>
                `);
                return;
            }

            data.forEach(function(room) {
                tbody.append(`
                    <tr>
                        <td><strong>${room.room}</strong></td>
                        <td>${room.guest}</td>
                        <td><span class="badge">${room.room_type}</span></td>
                        <td><span class="badge badge-success">Checked In</span></td>
                    </tr>
                `);
            });
        }

        // Update needs attention table
        function updateNeedsAttentionTable(data) {
            const tbody = $('#needs-attention-table tbody');
            tbody.empty();

            if (data.length === 0) {
                tbody.append(`
                    <tr>
                        <td colspan="3" class="text-center text-success">
                            <i class="fa fa-check-circle"></i> All rooms look good!
                        </td>
                    </tr>
                `);
                return;
            }

            data.forEach(function(room) {
                tbody.append(`
                    <tr>
                        <td><strong>${room.room}</strong></td>
                        <td>${room.guest}</td>
                        <td><small class="text-warning">${room.issue}</small></td>
                    </tr>
                `);
            });
        }

        // Refresh dashboard data
        function refreshDashboard() {
            showLoadingIndicator();

            $.ajax({
                url: '{{ route('dashboard.room-stats') }}',
                method: 'GET',
                success: function(response) {
                    if (response.success) {
                        roomStatsData = response.data;
                        updateDashboardStats();
                        updateCharts();
                        loadRoomDetails();
                        showSuccessMessage('Dashboard refreshed successfully');
                    }
                },
                error: function() {
                    showErrorMessage('Failed to refresh dashboard');
                },
                complete: function() {
                    hideLoadingIndicator();
                }
            });
        }

        // Update dashboard statistics
        function updateDashboardStats() {
            $('#total-rooms').text(roomStatsData.total_rooms);
            $('#checked-in-rooms').text(roomStatsData.checked_in);
            $('#rooms-with-guests').text(roomStatsData.with_guests);
            $('#unassigned-greetings').text(roomStatsData.unassigned_greetings);
        }

        // Update charts with new data
        function updateCharts() {
            // Update occupancy chart
            occupancyChart.data.datasets[0].data = [
                roomStatsData.charts_data.occupancy.checked_in,
                roomStatsData.charts_data.occupancy.checked_out
            ];
            occupancyChart.update();

            // Update room type chart
            const roomTypeLabels = roomStatsData.room_type_distribution.map(item => item.room_type || 'Unknown');
            const roomTypeCounts = roomStatsData.room_type_distribution.map(item => item.count);

            roomTypeChart.data.labels = roomTypeLabels;
            roomTypeChart.data.datasets[0].data = roomTypeCounts;
            roomTypeChart.update();

            // Update greeting chart
            greetingChart.data.datasets[0].data = [
                roomStatsData.charts_data.greeting_assignments.assigned,
                roomStatsData.charts_data.greeting_assignments.unassigned
            ];
            greetingChart.update();
        }

        // Refresh room details only
        function refreshRoomDetails() {
            const button = event.target.closest('button');
            const originalHtml = button.innerHTML;
            button.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Refreshing...';
            button.disabled = true;

            loadRoomDetails();

            setTimeout(() => {
                button.innerHTML = originalHtml;
                button.disabled = false;
            }, 1000);
        }

        // Toggle orders section visibility
        function toggleOrdersSection() {
            const ordersSection = $('#orders-section');
            const toggleBtn = $('#toggle-orders-btn');

            if (ordersSection.is(':visible')) {
                ordersSection.slideUp();
                toggleBtn.html('<i class="fa fa-eye"></i> Show Orders');
            } else {
                ordersSection.slideDown();
                toggleBtn.html('<i class="fa fa-eye-slash"></i> Hide Orders');
                // Refresh orders when showing
                fetchOrders();
            }
        }

        // Show loading indicator
        function showLoadingIndicator() {
            // You can implement a global loading indicator here
            console.log('Loading...');
        }

        // Hide loading indicator
        function hideLoadingIndicator() {
            console.log('Loading complete');
        }

        // Show success message
        function showSuccessMessage(message) {
            // Simple alert for now, you can implement toast notifications
            console.log('Success: ' + message);
        }

        // Show error message
        function showErrorMessage(message) {
            console.error('Error: ' + message);
            alert('Error: ' + message);
        }

        // === EXISTING ORDER FUNCTIONALITY (HIDDEN BY DEFAULT) ===

        function fetchOrders() {
            $.ajax({
                url: '{{ route('fetch.orders') }}',
                method: 'GET',
                success: function(data) {
                    var ordersContainer = $('#orders-container');
                    ordersContainer.empty(); // Clear the current orders

                    data.forEach(function(order) {
                        var statusClass = 'label-default';
                        var statusText = 'N/A';

                        if (order.status_id == 1) {
                            statusClass = 'label-green';
                            statusText = 'Accept';
                        } else if (order.status_id == 2) {
                            statusClass = 'label-primary';
                            statusText = 'Order';
                        } else if (order.status_id == 3) {
                            statusClass = 'label-info';
                            statusText = 'Process';
                        } else if (order.status_id == 4) {
                            statusClass = 'label-success';
                            statusText = 'Done';
                        } else if (order.status_id == 5) {
                            statusClass = 'label-danger';
                            statusText = 'Cancel';
                        }

                        var orderHtml = `
                        <div class="col-md-4 mb-4">
                            <div class="card">
                                <div class="card-header">
                                    ${order.type === 'resto' ? '<h5 class="card-title"><span class="label label-secondary">Resto Order</span></h5>' : '<h5 class="card-title"><span class="label label-primary">Service Order</span></h5>'}
                                    <h5 class="card-title">Room: ${order.room ? order.room : 'N/A'}</h5>
                                    <h6 class="card-subtitle text-muted">${order.order_date}</h6>
                                </div>
                                <div class="card-body">
                                    <h4><span class="label ${statusClass}">Status: ${statusText}</span></h4>
                                    <div style="margin-top: 50px">
                                        <select class="form-control update-status" data-order-id="${order.id}">
                                            <option value="">Change Status</option>
                                            <option value="1" ${order.status_id == 1 ? 'selected' : ''}>Accept</option>
                                            <option value="2" ${order.status_id == 2 ? 'selected' : ''}>Order</option>
                                            <option value="3" ${order.status_id == 3 ? 'selected' : ''}>Process</option>
                                            <option value="4" ${order.status_id == 4 ? 'selected' : ''}>Done</option>
                                            <option value="5" ${order.status_id == 5 ? 'selected' : ''}>Cancel</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="card-footer">
                                    <a href="#modal-dialog-${order.id}" class="btn btn-sm btn-success" data-toggle="modal">Show Details</a>
                                </div>
                            </div>
                        </div>

                        <div class="modal fade" id="modal-dialog-${order.id}">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h4 class="modal-title">Order Details</h4>
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                    </div>
                                    <div class="modal-body">
                                        <h5>Orders for Room ${order.room_name} on ${order.order_date}</h5>
                                        <ul>
                                            ${order.type === 'resto' ? data.filter(o => o.type === 'resto' && o.room_name === order.room_name && o.order_date === order.order_date).map(o => `
                                                                                                                                    <li>
                                                                                                                                        <p>Menu: ${o.menu_name ?? 'N/A'}</p>
                                                                                                                                        <p>Quantity: ${o.qty}</p>
                                                                                                                                    </li>
                                                                                                                                `).join('') : data.filter(o => o.type === 'service' && o.room_name === order.room_name && o.order_date === order.order_date).map(o => `
                                                                                                                                    <li>
                                                                                                                                        <p>Service: ${o.menu_name ?? 'N/A'}</p>
                                                                                                                                        <p>Description: ${o.description}</p>
                                                                                                                                        <p>Quantity: ${o.qty}</p>
                                                                                                                                    </li>
                                                                                                                                `).join('')}
                                        </ul>
                                    </div>
                                    <div class="modal-footer">
                                        <a href="javascript:;" class="btn btn-white" data-dismiss="modal">Close</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    `;
                        ordersContainer.append(orderHtml);
                    });
                },
                error: function() {
                    console.error('Failed to fetch orders');
                }
            });
        }

        function updateOrderStatus(orderId, statusId) {
            $.ajax({
                url: "{{ route('update.order.status', ':orderId') }}".replace(':orderId', orderId),
                method: 'POST',
                data: {
                    status_id: statusId,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        fetchOrders(); // Refresh the orders after successful update
                        showSuccessMessage('Order status updated successfully');
                    } else {
                        showErrorMessage('Failed to update order status');
                    }
                },
                error: function(xhr, status, error) {
                    console.error(xhr.responseText);
                    showErrorMessage('An error occurred while updating the order status');
                }
            });
        }
    </script>

    <style>
        /* Custom dashboard styles */
        .opacity-50 {
            opacity: 0.5;
        }

        .card {
            border: none;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            transition: box-shadow 0.15s ease-in-out;
        }

        .card:hover {
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        }

        .card-body .h4 {
            font-weight: 700;
        }

        .table-sm td {
            padding: 0.5rem;
            vertical-align: middle;
        }

        .btn-group.flex-wrap {
            gap: 0.5rem;
        }

        .btn-group.flex-wrap .btn {
            margin-bottom: 0.5rem;
        }

        /* Chart containers */
        #occupancyChart,
        #roomTypeChart,
        #greetingChart {
            height: 200px !important;
        }

        /* Loading states */
        .loading {
            opacity: 0.6;
            pointer-events: none;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .btn-group.flex-wrap .btn {
                width: 100%;
                margin-bottom: 0.5rem;
            }

            .h4 {
                font-size: 1.25rem;
            }
        }

        /* Badge styles */
        .badge {
            font-size: 0.75em;
        }

        /* Alert enhancements */
        .text-success {
            color: #28a745 !important;
        }

        .text-warning {
            color: #ffc107 !important;
        }

        .text-muted {
            color: #6c757d !important;
        }

        /* Card footer styles */
        .card-footer {
            background-color: rgba(0, 0, 0, 0.03);
            border-top: 1px solid rgba(0, 0, 0, 0.125);
        }

        .card-footer .small {
            font-size: 0.875em;
        }
    </style>
@endsection