@extends('layouts.app')

@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;
    }

    .table-striped tbody tr:nth-of-type(odd) {
        background-color: rgba(0, 0, 0, 0.02);
    }

    .breadcrumb-modern {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        padding: 1.5rem 2rem;
        border-radius: 12px;
        margin-bottom: 2rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .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 px-4">
        <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
            
            {{-- Title Section: Kutumia icon na title kwenye mstari mmoja --}}
            <div class="d-flex align-items-center gap-2">
                {{-- Icon Kubwa na Rangi --}}
                <i class="bx bx-bar-chart-alt-2 fs-4 text-primary" style="color: #17479E !important;"></i> 
                <h5 class="fw-bold mb-0 text-dark">Contributions Differences Analysis</h5>
            </div>
            
            {{-- Breadcrumb Path Section --}}
            <nav aria-label="breadcrumb" class="d-none d-sm-block">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item">
                        <a href="{{ route('dashboard') }}" class="text-decoration-none text-muted">
                            <i class="bx bx-home-alt me-1"></i> Dashboard
                        </a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                        <span class="fw-semibold" style="color: #17479E;">Differences</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 --}}
            @if($differences instanceof \Illuminate\Pagination\LengthAwarePaginator)
            <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($differences->total()) }}
                </span>
            </div>
            @endif
        </div>
    </div>

    {{-- CARD BODY: Form ya Filters --}}
    <div class="card-body p-4">
        <form method="GET" action="{{ route('deduction667.differences.index') }}">
            
            <div class="row g-4">
                
                {{-- DATE RANGE FILTER --}}
                <div class="col-lg-5 col-md-6">
                    <label for="month_range" class="form-label fw-semibold text-dark mb-2">
                        <i class="bi bi-calendar-range text-primary me-2"></i>
                        Date Range (Consecutive Months)
                    </label>
                    <input type="text" 
                           name="month_range" 
                           id="month_range" 
                           class="form-control"
                           value="{{ request('month_range') }}"
                           placeholder="Select consecutive months">
                    <input type="hidden" name="start_date" id="start_date" value="{{ request('start_date') }}">
                    <input type="hidden" name="end_date" id="end_date" value="{{ request('end_date') }}">
                    <small class="text-muted mt-1 d-block">
                        <i class="bi bi-info-circle me-1"></i>
                        Select two consecutive months 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 Departments</option>
                        @foreach ($departments as $department)
                            <option class="text-uppercase" 
                                    value="{{ $department }}" 
                                    {{ request('deptName') === $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 --}}
                        @if($differences instanceof \Illuminate\Pagination\LengthAwarePaginator && $differences->total() > 0)
                        <a href="{{ route('deduction667.differences.export', request()->query()) }}" 
                           class="btn btn-success w-100">
                            <i class="bi bi-download me-2"></i>
                            Export CSV
                        </a>
                        @endif
                    </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="setLastTwoMonths()">
                            <i class="bi bi-calendar2-range me-1"></i>
                            Last 2 Months
                        </button>
                        <button type="button" class="btn btn-sm btn-outline-primary quick-filter-btn" onclick="setThisAndLastMonth()">
                            <i class="bi bi-calendar-check me-1"></i>
                            This & Last Month
                        </button>
                        <a href="{{ route('deduction667.differences.index') }}" 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>

{{-- MAIN RESULTS CARD --}}
@if($differences instanceof \Illuminate\Pagination\LengthAwarePaginator && $differences->total() > 0)
    <div class="card shadow-sm">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table modern-table table-striped mb-0">
                    <thead>
                        <tr>
                            <th>SN</th>
                            <th>Name</th>
                            <th>Monthly Salary</th>
                            <th>Vote Code</th>
                            <th>Department</th>
                            <th>Change</th>
                            
                            {{-- Kurekebisha hitilafu ya 'access array offset on value of type int' --}}
                            @php
                                // Pata items za ukurasa wa sasa kama Collection
                                $dataCollection = collect($differences->items());
                                
                                // Filter na kupata MonthYears zote kwa uangalifu
                                $monthYears = $dataCollection->flatMap(function($diff) {
                                    if (is_array($diff) && isset($diff['details'])) {
                                        return array_keys($diff['details']);
                                    }
                                    return [];
                                })->unique()->sort()->values()->toArray();
                            @endphp
                            
                            @foreach($monthYears as $my)
                                <th>{{ \Carbon\Carbon::parse($my . '-01')->format('M Y') }}</th>
                            @endforeach
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($differences as $difference)
                            <tr>
                                {{-- SN sahihi inazingatia ukurasa --}}
                                <td class="fw-semibold">{{ ($differences->currentPage() - 1) * $differences->perPage() + $loop->iteration }}</td>

                                <td class="text-uppercase">{{ $difference['firstName'] }} {{ $difference['middleName'] }} {{ $difference['lastName'] }}</td>
                                <td>{{ number_format($difference['monthlySalary'], 2) }}</td>
                                <td>{{ $difference['voteCode'] }}</td>
                                <td class="text-uppercase">{{ $difference['deptName'] }}</td>
                                <td>
                                    @if ($difference['change_comment'] === 'Increase')
                                        <span class="badge bg-success-subtle text-success">
                                            <i class="bi bi-arrow-up"></i> Increase
                                        </span>
                                    @elseif ($difference['change_comment'] === 'Decrease')
                                        <span class="badge bg-danger-subtle text-danger">
                                            <i class="bi bi-arrow-down"></i> Decrease
                                        </span>
                                    @endif
                                </td>
                                @foreach($monthYears as $my)
                                    <td>{{ number_format($difference['details'][$my] ?? 0, 2) }}</td>
                                @endforeach
                                <td>
                                    <a href="#" class="btn btn-sm btn-primary">
                                        <i class="bi bi-eye me-1"></i> View
                                    </a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="100%" 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.</p>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        {{-- PAGINATION FOOTER --}}
        @if($differences->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 {{ $differences->firstItem() }} to {{ $differences->lastItem() }} of {{ $differences->total() }} entries
                </div>
                <div>
                    {{ $differences->appends(request()->except('page'))->links('pagination::bootstrap-5') }}
                </div>
            </div>
        </div>
        @endif
    </div>
@elseif(request()->filled('start_date') && request()->filled('end_date'))
    <div class="alert alert-info d-flex align-items-center">
        <i class="bi bi-info-circle fs-4 me-3"></i>
        <div>
            <strong>No Differences Found</strong><br>
            <small>No differences in deduction amounts found for Deduction Code 667 within the selected date range and department.</small>
        </div>
    </div>
@endif

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        // Flatpickr Initialization
        flatpickr("#month_range", {
            mode: "range",
            maxDate: new Date().fp_incr(0),
            dateFormat: "Y-m-d",
            onClose: function(selectedDates, dateStr, instance) {
                if (selectedDates.length === 2) {
                    const startDate = selectedDates[0];
                    const endDate = selectedDates[1];

                    const startMonth = startDate.getMonth();
                    const startYear = startDate.getFullYear();
                    const endMonth = endDate.getMonth();
                    const endYear = endDate.getFullYear();

                    const isConsecutive =
                        (startYear === endYear && endMonth === startMonth + 1) ||
                        (endYear === startYear + 1 && startMonth === 11 && endMonth === 0);

                    if (!isConsecutive) {
                        alert("Please select a date range within two consecutive months.");
                        instance.clear();
                        $("#start_date").val('');
                        $("#end_date").val('');
                        $("input[name='month_range']").val('');
                    } else {
                        const formattedStartDate = instance.formatDate(startDate, 'Y-m-d');
                        const formattedEndDate = instance.formatDate(endDate, 'Y-m-d');
                        $("#start_date").val(formattedStartDate);
                        $("#end_date").val(formattedEndDate);
                        $("input[name='month_range']").val(dateStr);
                    }
                } else if (selectedDates.length > 2) {
                    alert("Please select only two dates for the range.");
                    instance.clear();
                    $("#start_date").val('');
                    $("#end_date").val('');
                    $("input[name='month_range']").val('');
                } else {
                    $("#start_date").val('');
                    $("#end_date").val('');
                    $("input[name='month_range']").val('');
                }
            }
        });

        // Select2 Initialization
        $('.select2, #deptName').select2();
    });

    // Quick Filter Functions
    function setLastTwoMonths() {
        const now = new Date();
        const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
        const twoMonthsAgo = new Date(now.getFullYear(), now.getMonth() - 2, 1);
        
        const flatpickrInstance = document.querySelector("#month_range")._flatpickr;
        const endOfLastMonth = new Date(now.getFullYear(), now.getMonth(), 0);
        
        flatpickrInstance.setDate([twoMonthsAgo, endOfLastMonth]);
    }

    function setThisAndLastMonth() {
        const now = new Date();
        const firstOfThisMonth = new Date(now.getFullYear(), now.getMonth(), 1);
        const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
        
        const flatpickrInstance = document.querySelector("#month_range")._flatpickr;
        flatpickrInstance.setDate([lastMonth, now]);
    }
</script>
@endsection