@extends('layouts.app')

@section('title', 'My Invoices - SecureSoftPay')

@push('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
    body { background-color: #f8f9fa; }
    
    .page-wrapper { display: flex; max-width: 1400px; margin: 120px auto 50px; gap: 40px; padding: 0 15px; align-items: flex-start; }
    
    /* === সাইডবার ডিজাইন === */
    .page-sidebar { width: 250px; flex-shrink: 0; margin-top: 85px; }
    .sidebar-widget h3 { font-size: 18px; font-weight: 700; margin-bottom: 15px; color: #333; }
    .sidebar-widget ul { list-style: none; padding: 0; }
    .sidebar-widget ul li a { display: flex; align-items: center; gap: 10px; padding: 12px; text-decoration: none; color: #333; font-weight: 500; font-size: 14px; border-radius: 6px; transition: all 0.2s; }
    .sidebar-widget ul li a.active, .sidebar-widget ul li a:hover { background-color: #eef2ff; color: #0052cc; }
    .sidebar-widget ul a i { width: 20px; text-align: center; }

    /* === মেইন কন্টেন্ট ডিজাইন === */
    .page-main-content { flex-grow: 1; min-width: 0; }
    .page-header-container { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
    .page-header { text-align: left; }
    .page-header h1 { font-size: 32px; font-weight: 700; color: #212529; margin-bottom: 5px; }
    .breadcrumb { color: #6c757d; font-size: 14px; }

    /* === সার্চ বার === */
    .search-box { position: relative; }
    .search-box input { padding: 8px 15px 8px 35px; border-radius: 4px; border: 1px solid #ced4da; width: 250px; font-size: 14px; }
    .search-box i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #adb5bd; }

    /* === টেবিল কার্ড === */
    .table-card { background: #fff; border: 1px solid #dee2e6; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.02); }
    .table-top-bar { padding: 15px; border-bottom: 1px solid #dee2e6; display: flex; align-items: center; gap: 10px; background-color: #fff; }
    .data-table { width: 100%; border-collapse: collapse; }
    .data-table thead tr { background-color: #f1f3f5; color: #495057; }
    .data-table th { padding: 12px 15px; text-align: left; font-weight: 600; font-size: 13px; text-transform: uppercase; border-bottom: 1px solid #dee2e6; }
    .data-table td { padding: 15px; text-align: left; border-bottom: 1px solid #e9ecef; vertical-align: middle; background-color: #fff; }
    .data-table tbody tr { cursor: pointer; transition: background-color 0.2s; }
    .data-table tbody tr:hover td { background-color: #f8f9fa; }
    
    .invoice-link { font-weight: 600; color: #0052cc; text-decoration: none; }
    
    /* === স্ট্যাটাস ব্যাজ === */
    .status-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 4px; }
    .status-Paid { background-color: #eaf7f0; color: #198754; }
    .status-Unpaid { background-color: #fbeae5; color: #dc3545; }
    .status-Refunded { background-color: #fff3cd; color: #ffc107; }
    .status-Cancelled { background-color: #f8f9fa; color: #6c757d; }
    
    /* =========================================
       🔥 পেজিনেশন ফিক্স (হুবহু বক্স ডিজাইন)
       ========================================= */
    .table-footer { padding: 15px; border-top: 1px solid #dee2e6; display: flex; justify-content: space-between; align-items: center; background-color: #fff; }
    .showing-text { font-size: 13px; color: #6c757d; }

    .pagination { display: flex !important; list-style: none !important; padding: 0 !important; margin: 0 !important; gap: 2px; }
    .pagination li { list-style: none !important; margin: 0 !important; }
    .pagination li a, .pagination li span { 
        display: block; padding: 5px 12px; border: 1px solid #ddd; 
        background: #fff; text-decoration: none !important; color: #0052cc; 
        font-size: 13px; border-radius: 3px; 
    }
    .pagination li.active span { background: #0052cc !important; color: white !important; border-color: #0052cc; }
    .pagination li.disabled span { color: #ccc; background: #fafafa; pointer-events: none; }
    .pagination svg { display: none !important; } /* Laravel এর বড় অ্যারো লুকানোর জন্য */

    @media (max-width: 992px) { 
        .page-wrapper { flex-direction: column; } 
        .page-sidebar { width: 100%; margin-top: 20px; order: 1; } 
        .page-main-content { order: 2; } 
        .page-header-container { flex-direction: column; align-items: flex-start; } 
        .search-box { margin-top: 15px; width: 100%; } 
        .search-box input { width: 100%; } 
    }
</style>
@endpush

@section('content')
<div class="page-wrapper">
    <!-- বাম পাশের সাইডবার -->
    <aside class="page-sidebar">
        <div class="sidebar-widget">
            <h3>Billing</h3>
            <ul>
                <li><a href="{{ route('my-invoices') }}" class="active"><i class="fas fa-file-invoice"></i> My Invoices</a></li>
                <li><a href="#"><i class="fas fa-file-alt"></i> My Quotes</a></li>
                <li><a href="{{ route('add-funds') }}"><i class="fas fa-wallet"></i> Add Funds</a></li>
            </ul>
        </div>
    </aside>

    <!-- ডান পাশের মেইন কন্টেন্ট -->
    <main class="page-main-content">
        <div class="page-header-container">
            <div class="page-header">
                <h1>My Invoices</h1>
                <div class="breadcrumb">Portal Home / Client Area / My Invoices</div>
            </div>
            <div class="search-box">
                <i class="fas fa-search"></i>
                <input type="text" id="invoiceSearchInput" placeholder="Enter search term...">
            </div>
        </div>
        
        <div class="table-card">
            <div class="table-top-bar">
                <span style="font-size: 14px; color: #555;">View</span>
                <select style="padding: 5px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px;">
                    <option>All Entries</option>
                </select>
            </div>

            <div style="overflow-x:auto;">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>Invoice # <i class="fas fa-sort"></i></th>
                            <th>Invoice Date <i class="fas fa-sort"></i></th>
                            <th>Due Date <i class="fas fa-sort"></i></th>
                            <th>Total <i class="fas fa-sort"></i></th>
                            <th>Status <i class="fas fa-sort"></i></th>
                        </tr>
                    </thead>
                    <tbody id="invoicesTableBody">
                        @include('partials.invoices_table_body', ['invoices' => $invoices])
                    </tbody>
                </table>
            </div>

            <!-- টেবিল ফুটার এবং পেজিনেশন -->
            <div class="table-footer" id="tableFooter">
                <div class="showing-text">
                    Showing {{ $invoices->firstItem() ?? 0 }} to {{ $invoices->lastItem() ?? 0 }} of {{ $invoices->total() }} entries
                </div>
                
                <div class="pagination-wrapper">
                    {{-- Bootstrap-4 ফরম্যাটে পেজিনেশন কল করা হয়েছে --}}
                    {{ $invoices->links('pagination::bootstrap-4') }}
                </div>
            </div>
        </div>
    </main>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('invoiceSearchInput');
    const tableBody = document.getElementById('invoicesTableBody');
    const tableFooter = document.getElementById('tableFooter');
    let searchTimeout;

    searchInput.addEventListener('keyup', function() {
        const query = this.value.trim();
        
        clearTimeout(searchTimeout);

        searchTimeout = setTimeout(() => {
            if (query.length === 0) {
                window.location.reload();
                return;
            }

            if(tableFooter) tableFooter.style.visibility = 'hidden';

            fetch(`{{ route('ajax.invoices.search') }}?q=${encodeURIComponent(query)}`)
                .then(response => response.text())
                .then(html => {
                    tableBody.innerHTML = html;
                })
                .catch(error => {
                    console.error('Search Error:', error);
                    tableBody.innerHTML = '<tr><td colspan="5" style="text-align:center; color:red; padding: 20px;">Error loading results.</td></tr>';
                });
        }, 300);
    });
});
</script>
@endpush