@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content_header')
    <h1>Dashboard</h1>
@stop

@section('content')
    <div class="row">
        <div class="col-lg-3 col-6">
            <div class="small-box bg-info">
                <div class="inner">
                    <h3>{{ $totalInventory }}</h3>
                    <p>Total Inventory Items</p>
                </div>
                <div class="icon">
                    <i class="fas fa-boxes"></i>
                </div>
                <a href="{{ route('inventory.index') }}" class="small-box-footer">
                    More info <i class="fas fa-arrow-circle-right"></i>
                </a>
            </div>
        </div>

        <div class="col-lg-3 col-6">
            <div class="small-box bg-success">
                <div class="inner">
                    <h3>{{ auth()->user()->name }}</h3>
                    <p>Welcome Back!</p>
                </div>
                <div class="icon">
                    <i class="fas fa-user"></i>
                </div>
                <a href="#" class="small-box-footer">
                    Profile <i class="fas fa-arrow-circle-right"></i>
                </a>
            </div>
        </div>

        <div class="col-lg-3 col-6">
            <div class="small-box bg-warning">
                <div class="inner">
                    <h3>{{ $notifications->count() }}</h3>
                    <p>New Notifications</p>
                </div>
                <div class="icon">
                    <i class="fas fa-bell"></i>
                </div>
                <a href="{{ route('notifications.index') }}" class="small-box-footer">
                    View All <i class="fas fa-arrow-circle-right"></i>
                </a>
            </div>
        </div>

        <div class="col-lg-3 col-6">
            <div class="small-box bg-danger">
                <div class="inner">
                    <h3>{{ date('H:i') }}</h3>
                    <p>Current Time</p>
                </div>
                <div class="icon">
                    <i class="fas fa-clock"></i>
                </div>
                <a href="#" class="small-box-footer">
                    {{ date('d M Y') }} <i class="fas fa-calendar"></i>
                </a>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title"><i class="fas fa-list"></i> Recent Inventory Items</h3>
                </div>
                <div class="card-body">
                    <table class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>Reference Number</th>
                                <th>Date Open File</th>
                                <th>Seller Name</th>
                                <th>Buyer Name</th>
                                <th>Address</th>
                                <th>Status</th>
                                <th>Created By</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($recentInventory as $item)
                                <tr>
                                    <td><strong>{{ $item->reference_number }}</strong></td>
                                    <td>{{ $item->date_open_file ? \Carbon\Carbon::parse($item->date_open_file)->format('d M Y') : '-' }}</td>
                                    <td>{{ $item->nama_penjual }}</td>
                                    <td>{{ $item->nama_pembeli }}</td>
                                    <td>{{ substr($item->alamat, 0, 30) }}{{ strlen($item->alamat) > 30 ? '...' : '' }}</td>
                                    <td>
                                        <span class="badge badge-info">{{ Str::words($item->status, 50) }}</span>
                                    </td>
                                    <td>{{ $item->creator->name ?? '-' }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="text-center">No inventory items yet</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@stop

@section('css')
    <style>
        .small-box {
            border-radius: 5px;
        }

        html, body {
            height: 100%;
        }

        .wrapper {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        .content-wrapper {
            flex: 1;
            padding-bottom: 20px;
        }

        /* Pagination styling - MATCH notification index */
        .pagination {
            margin-top: 20px !important;
            gap: 5px !important;
        }

        .pagination .page-link {
            padding: 0.3rem 0.5rem !important;
            font-size: 0.8rem !important;
            line-height: 1.2 !important;
            min-width: auto !important;
            height: auto !important;
        }

        .pagination .page-link svg {
            width: 12px !important;
            height: 12px !important;
            max-width: 12px !important;
            max-height: 12px !important;
        }

        .pagination .page-item.active .page-link {
            background-color: #007bff !important;
            border-color: #007bff !important;
        }

        .pagination .page-link span {
            font-size: 0.8rem !important;
            display: inline !important;
        }

        .pagination .page-link i {
            font-size: 0.8rem !important;
        }

        .page-link {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
        }

        /* Table styling for Recent Inventory */
        .card-body .table {
            table-layout: fixed;
            width: 100%;
            font-size: 0.85rem;
        }

        .card-body .table td {
            vertical-align: middle;
            padding: 8px;
        }

        .card-body .table thead th {
            white-space: nowrap;
            font-weight: 600;
            background-color: #f8f9fa;
            padding: 10px 8px;
        }

        /* Reference Number */
        .card-body .table th:nth-child(1),
        .card-body .table td:nth-child(1) {
            width: 85px;
        }

        /* Date Open File */
        .card-body .table th:nth-child(2),
        .card-body .table td:nth-child(2) {
            width: 75px;
        }

        /* Seller Name */
        .card-body .table th:nth-child(3),
        .card-body .table td:nth-child(3) {
            width: 100px;
        }

        /* Buyer Name */
        .card-body .table th:nth-child(4),
        .card-body .table td:nth-child(4) {
            width: 100px;
        }

        /* Address */
        .card-body .table th:nth-child(5),
        .card-body .table td:nth-child(5) {
            width: 110px;
            white-space: normal;
            word-wrap: break-word;
            word-break: break-word;
        }

        /* Status - GIVE MORE SPACE */
        .card-body .table th:nth-child(6),
        .card-body .table td:nth-child(6) {
            width: 300px;
            white-space: normal;
            word-wrap: break-word;
            word-break: break-word;
            font-size: 0.75rem;
            line-height: 1.3;
            overflow: hidden;
        }

        .card-body .table td:nth-child(6) .badge {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Created By */
        .card-body .table th:nth-child(7),
        .card-body .table td:nth-child(7) {
            width: 70px;
            white-space: normal;
            word-wrap: break-word;
            word-break: break-word;
        }
    </style>
@stop

@section('js')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        // Load notification count
        loadNotificationCount();

        function loadNotificationCount() {
            $.ajax({
                url: "{{ route('notifications.unread') }}",
                type: 'GET',
                success: function(response) {
                    if (response.count > 0) {
                        $('#notification-menu .badge').text(response.count);
                    }
                }
            });
        }

        // Auto refresh every 30 seconds
        setInterval(loadNotificationCount, 30000);

        // Display latest notification using SweetAlert
        $(document).ready(function() {
            @if(session('success'))
                // Get the latest unread notification
                $.ajax({
                    url: "{{ route('notifications.unread') }}",
                    type: 'GET',
                    success: function(response) {
                        if (response.notifications && response.notifications.length > 0) {
                            const notification = response.notifications[0];
                            const iconMap = {
                                'success': 'success',
                                'error': 'error',
                                'warning': 'warning',
                                'info': 'info',
                                'danger': 'error'
                            };

                            Swal.fire({
                                icon: iconMap[notification.type] || 'info',
                                title: notification.title,
                                text: notification.message,
                                timer: 3000,
                                showConfirmButton: false
                            });
                        }
                    },
                    error: function(xhr) {
                        console.log('Error fetching notification:', xhr);
                    }
                });
            @endif
        });
    </script>
@stop

{{-- <!-- Footer -->
    <footer>
        <p>Developed By: <strong>Shahril Mohd Isa</strong> | Year: <strong>{{ date('Y') }}</strong></p>
    </footer> --}}