@extends('layouts.app')

@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
@endpush

@section('content')
<style>
    :root {
        --ura-primary: #17479E;
        --ura-gradient: linear-gradient(135deg, #17479E 0%, #00BCD4 100%);
        --ura-shadow: 0 8px 25px rgba(23, 71, 158, 0.15);
    }

    .filter-card {
        background: white;
        border-radius: 16px;
        box-shadow: var(--ura-shadow);
        overflow: hidden;
        margin-bottom: 2rem;
    }

    .form-control, .form-select {
        border: 2px solid rgba(23, 71, 158, 0.1);
        border-radius: 8px;
        padding: 0.75rem 1rem;
        transition: all 0.3s ease;
    }

    .form-control:focus, .form-select:focus {
        border-color: var(--ura-primary);
        box-shadow: 0 0 0 0.2rem rgba(23, 71, 158, 0.25);
    }

    /* Reference Table Style from bulk-sms.blade.php */
    .table {
        border-collapse: collapse;
        border-spacing: 0;
        background: white;
        width: 100%;
        margin: 0;
        border: 1px solid #dee2e6;
    }

    .table thead th {
        background: #CEEDF5 !important;
        color: #17479E !important;
        font-weight: 600;
        border: 1px solid #dee2e6 !important;
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        white-space: nowrap;
        transition: all 0.3s ease;
    }

    .table thead th:hover {
        background: #B8E2F0 !important;
    }

    .table tbody tr {
        transition: all 0.2s ease;
        background: white;
    }

    .table tbody tr:nth-child(even) {
        background: #f8f9fa;
    }

    .table tbody tr:hover {
        background: #e3f2fd !important;
    }

    .table tbody td {
        padding: 0.75rem 1rem !important;
        vertical-align: middle;
        border: 1px solid #dee2e6;
        font-size: 0.875rem;
        color: #495057;
    }

    .table-responsive {
        overflow-x: auto;
        margin-bottom: 1.5rem;
    }

    /* Legacy modern-table class support */
    .modern-table {
        border-collapse: collapse;
        border-spacing: 0;
        background: white;
        width: 100%;
        margin: 0;
        border: 1px solid #dee2e6;
    }

    .modern-table thead th {
        background: #CEEDF5 !important;
        color: #17479E !important;
        font-weight: 600;
        border: 1px solid #dee2e6 !important;
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        white-space: nowrap;
        transition: all 0.3s ease;
    }

    .modern-table thead th:hover {
        background: #B8E2F0 !important;
    }

    .modern-table tbody tr {
        transition: all 0.2s ease;
        background: white;
    }

    .modern-table tbody tr:nth-child(even) {
        background: #f8f9fa;
    }

    .modern-table tbody tr:hover {
        background: #e3f2fd !important;
    }

    .modern-table tbody td {
        padding: 0.75rem 1rem !important;
        vertical-align: middle;
        border: 1px solid #dee2e6;
        font-size: 0.875rem;
        color: #495057;
    }

    .breadcrumb-modern h6 {
        color: var(--ura-primary);
        font-weight: 700;
        font-size: 1.5rem;
        margin: 0;
    }

    .breadcrumb-modern .breadcrumb {
        background: transparent;
        margin: 0;
        padding: 0;
    }

    .breadcrumb-modern .breadcrumb-item a {
        color: #6c757d;
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .breadcrumb-modern .breadcrumb-item a:hover {
        color: var(--ura-primary);
    }

    .breadcrumb-modern .breadcrumb-item.active {
        color: var(--ura-primary);
        font-weight: 600;
    }

    .icon-wrapper {
        background: rgba(23, 71, 158, 0.1);
        padding: 0.5rem;
        border-radius: 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .quick-filter-btn {
        border-radius: 20px;
        padding: 0.4rem 1rem;
        font-size: 0.875rem;
        transition: all 0.3s ease;
    }

    .quick-filter-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(23, 71, 158, 0.2);
    }
</style>

{{-- PAGE HEADER WITH BREADCRUMB --}}
<div class="card border-0 shadow-sm mb-4" style="background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);">
    <div class="card-body py-3">
        <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
            
            {{-- Title Section --}}
            <div class="d-flex align-items-center gap-3">
                <div class="icon-wrapper">
                    <i class="fas fa-search-dollar text-primary fs-4" style="color: #17479E !important;"></i>
                </div>
                <h5 class="fw-bold mb-0 text-dark">Loan Repayment Tracing</h5>
            </div>
            
            {{-- Breadcrumb Path --}}
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item">
                        <a href="{{ route('dashboard') }}" class="text-decoration-none text-secondary">
                            <i class="fas fa-home me-1"></i> Dashboard
                        </a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                        <span class="badge bg-primary text-white" style="font-weight: 500;">
                            Repayment Tracing
                        </span>
                    </li>
                </ol>
            </nav>
            
        </div>
    </div>
</div>

{{-- IMPROVED FILTER CARD --}}
<div class="card filter-card mb-4">
    
    {{-- CARD HEADER: Title na Count --}}
    <div class="card-header py-3" style="background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); border-bottom: 2px solid rgba(23, 71, 158, 0.1);">
        <div class="d-flex justify-content-between align-items-center">
            {{-- Title kuu ya Filter --}}
            <div class="d-flex align-items-center gap-2">
                <div class="icon-wrapper">
                    <i class="bi bi-funnel-fill text-primary fs-5"></i>
                </div>
                <h6 class="mb-0 fw-bold text-dark">Filter Options</h6>
            </div>
            
            {{-- Count ya records --}}
            <div class="d-flex align-items-center gap-2">
                <span class="text-muted fw-normal" style="font-size: 0.9rem;">Total Records:</span>
                <span class="badge bg-primary px-3 py-2" style="font-size: 0.95rem; font-weight: 600;">
                    {{ number_format($filteredCount) }}
                </span>
            </div>
        </div>
    </div>

    {{-- CARD BODY: Form ya Filters --}}
    <div class="card-body p-4">
        <form method="GET" action="{{ route('deductions.variance') }}">
            
            <div class="row g-4">
                
                {{-- DATE RANGE FILTER --}}
                <div class="col-lg-5 col-md-6">
                    <label for="check_date" class="form-label fw-semibold text-dark mb-2">
                        <i class="bi bi-calendar-range text-primary me-2"></i>
                        Date Range (2 Months)
                    </label>
                    <input type="text" 
                           name="check_date" 
                           id="check_date" 
                           class="form-control"
                           value="{{ request('check_date', $startDate->format('Y-m-d') . ' to ' . $endDate->format('Y-m-d')) }}"
                           placeholder="Select date range">
                    <small class="text-muted mt-1 d-block">
                        <i class="bi bi-info-circle me-1"></i>
                        Select a two-month period for comparison
                    </small>
                </div>
                
                {{-- DEPARTMENT FILTER --}}
                <div class="col-lg-4 col-md-6">
                    <label for="deptName" class="form-label fw-semibold text-dark mb-2">
                        <i class="bi bi-building text-primary me-2"></i>
                        Department
                    </label>
                    <select name="deptName" 
                            id="deptName" 
                            class="form-select">
                        <option value="All" {{ $departmentFilter === 'All' ? 'selected' : '' }}>
                            All Departments
                        </option>
                        @foreach ($departments as $department)
                            <option class="text-uppercase" 
                                    value="{{ $department }}" 
                                    {{ $departmentFilter === $department ? 'selected' : '' }}>
                                {{ $department }}
                            </option>
                        @endforeach
                    </select>
                    <small class="text-muted mt-1 d-block">
                        <i class="bi bi-info-circle me-1"></i>
                        Filter by specific department
                    </small>
                </div>
                
                {{-- ACTION BUTTONS --}}
                <div class="col-lg-3 col-md-12">
                    <label class="form-label fw-semibold text-dark mb-2 d-none d-lg-block">
                        &nbsp;
                    </label>
                    <div class="d-flex flex-column gap-2">
                        {{-- Filter Button --}}
                        <button type="submit" class="btn btn-primary w-100">
                            <i class="bi bi-funnel me-2"></i>
                            Apply Filter
                        </button>
                        
                        {{-- Export Button --}}
                        <a href="{{ route('deductions.export_csv', ['check_date' => request('check_date'), 'deptName' => $departmentFilter]) }}" 
                           class="btn btn-success w-100">
                            <i class="bi bi-download me-2"></i>
                            Export CSV
                        </a>
                    </div>
                </div>
                
            </div>
            
            {{-- QUICK FILTERS --}}
            <div class="row mt-4 pt-3" style="border-top: 1px dashed rgba(23, 71, 158, 0.2);">
                <div class="col-12">
                    <div class="d-flex flex-wrap align-items-center gap-2">
                        <small class="text-muted fw-semibold me-2">
                            <i class="bi bi-lightning-fill me-1"></i>
                            Quick Filters:
                        </small>
                        <button type="button" class="btn btn-sm btn-outline-primary quick-filter-btn" onclick="setCurrentMonth()">
                            <i class="bi bi-calendar-check me-1"></i>
                            Current Month
                        </button>
                        <button type="button" class="btn btn-sm btn-outline-primary quick-filter-btn" onclick="setLastTwoMonths()">
                            <i class="bi bi-calendar2-range me-1"></i>
                            Last 2 Months
                        </button>
                        <a href="{{ route('deductions.variance') }}" class="btn btn-sm btn-outline-secondary quick-filter-btn ms-auto">
                            <i class="bi bi-arrow-clockwise me-1"></i>
                            Reset All
                        </a>
                    </div>
                </div>
            </div>
            
        </form>
    </div>
</div>

{{-- DATA TABLE CARD --}}
<div class="card shadow-sm">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table modern-table table-striped mb-0" id="dataTable">
                <thead>
                    <tr>
                        <th>Check No.</th>
                        <th>Name</th>
                        <th>Deduction ({{ \Carbon\Carbon::parse($startDate)->format('M Y') }})</th>
                        <th>Deduction ({{ \Carbon\Carbon::parse($endDate)->format('M Y') }})</th>
                        <th>Difference</th>
                        <th>Balance</th>
                        <th>Description</th>
                        <th>Month</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($filteredData as $data)
                        <tr>
                            <td class="fw-semibold">{{ $data['check_number'] }}</td>
                            <td class="text-muted text-uppercase">{{ $data['name'] }}</td>
                            <td>{{ is_numeric($data['deduction_month_1']) ? number_format((float)$data['deduction_month_1'], 2) : $data['deduction_month_1'] }}</td>
                            <td>{{ is_numeric($data['deduction_month_2']) ? number_format((float)$data['deduction_month_2'], 2) : $data['deduction_month_2'] }}</td>
                            <td>
                                <span class="badge bg-danger px-2 py-1">
                                    {{ is_numeric($data['difference']) ? number_format((float)$data['difference'], 2) : $data['difference'] }}
                                </span>
                            </td>
                            <td>{{ is_numeric($data['balance']) ? number_format((float)$data['balance'], 2) : $data['balance'] }}</td>
                            <td class="text-muted text-uppercase">{{ $data['deduction_description'] }}</td>
                            <td class="text-muted text-uppercase">{{ $data['month_computed'] }}</td>
                            <td>
                                <a href="{{ route('deductions.details', ['checkNumber' => $data['check_number']]) }}" 
                                   class="btn btn-sm btn-primary">
                                    <i class="bi bi-eye me-1"></i>
                                    View
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9" class="text-center py-5">
                                <i class="bi bi-inbox fs-1 text-muted d-block mb-3"></i>
                                <p class="text-muted mb-0">No records found for the selected filters.</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    
    {{-- PAGINATION FOOTER --}}
    @if($filteredData->hasPages())
    <div class="card-footer bg-light border-top">
        <div class="d-flex justify-content-between align-items-center">
            <div class="text-muted small">
                Showing {{ $filteredData->firstItem() }} to {{ $filteredData->lastItem() }} of {{ $filteredData->total() }} entries
            </div>
            <div>
                {{ $filteredData->links('pagination::bootstrap-5') }}
            </div>
        </div>
    </div>
    @endif
</div>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        // Flatpickr Initialization
        flatpickr("#check_date", {
            mode: "range",
            dateFormat: "Y-m-d",
            defaultDate: "{{ request('check_date', $startDate->format('Y-m-d') . ' to ' . $endDate->format('Y-m-d')) }}".split(' to '),
            onChange: function(selectedDates) {
                if (selectedDates.length > 0) {
                    const startDate = selectedDates[0];
                    const firstMonthEnd = new Date(startDate.getFullYear(), startDate.getMonth() + 1, 0);
                    const secondMonthEnd = new Date(startDate.getFullYear(), startDate.getMonth() + 2, 0);
                    this.set('minDate', startDate);
                    this.set('maxDate', secondMonthEnd);
                }
            }
        });

        // DataTable Initialization (Pagination disabled - using Laravel pagination)
        $('#dataTable').DataTable({
            "paging": false, 
            "searching": true,
            "ordering": true,
            "info": false,
            "language": {
                "search": "Search:",
                "emptyTable": "No records found"
            },
            "columnDefs": [
                { "orderable": false, "targets": 8 } // Disable sorting on Action column
            ]
        });
    });

    // Quick Filter Functions
    function setCurrentMonth() {
        const now = new Date();
        const start = new Date(now.getFullYear(), now.getMonth(), 1);
        const end = new Date(now.getFullYear(), now.getMonth() + 1, 0);
        
        const flatpickrInstance = document.querySelector("#check_date")._flatpickr;
        flatpickrInstance.setDate([start, end]);
    }

    function setLastTwoMonths() {
        const now = new Date();
        const start = new Date(now.getFullYear(), now.getMonth() - 1, 1);
        const end = new Date(now.getFullYear(), now.getMonth(), 0);
        
        const flatpickrInstance = document.querySelector("#check_date")._flatpickr;
        flatpickrInstance.setDate([start, end]);
    }
</script>
@endpush