@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 breadcrumb-card">
        <div class="card-body py-3">
            <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
                
                {{-- SEHEMU YA TITLE --}}
                <div class="d-flex align-items-center gap-3">
                    <div class="icon-wrapper">
                        <i class="bx bx-line-chart fs-4" style="color: #17479E;"></i>
                    </div>
                    {{-- Tumia h5 badala ya h6 na kuweka rangi nyeusi --}}
                    <h5 class="fw-bold mb-0 text-dark">Deduction Analysis (Code: 667)</h5> 
                </div>
                
                {{-- SEHEMU YA BREADCRUMB --}}
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item">
                            <a href="{{ route('dashboard') }}">
                                <i class="bx bx-home-alt me-1"></i> Dashboard
                            </a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">
                            {{-- Tumia badge kwa muonekano maridadi zaidi --}}
                            <span class="badge bg-primary text-white" style="font-weight: 500;">
                                Analysis
                            </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;">Filtered Records:</span>
                <span class="badge bg-primary px-3 py-2" style="font-size: 0.95rem; font-weight: 600;">
                    {{ number_format($count) }}
                </span>
            </div>
        </div>
    </div>

    {{-- CARD BODY: Form ya Filters --}}
    <div class="card-body p-4">
        <form method="GET" action="{{ route('deductions.contribution_analysis') }}" id="filterForm">
            
            <div class="row g-4">
                
                {{-- ROW 1: Check Date, Department, Deduction Filter --}}
                <div class="col-lg-4 col-md-6">
                    <label for="checkDate" class="form-label fw-semibold text-dark mb-2">
                        <i class="bi bi-calendar-event text-primary me-2"></i>
                        Check Date
                    </label>
                    <input type="text" 
                           name="checkDate" 
                           id="checkDate" 
                           class="form-control"
                           value="{{ request('checkDate') }}"
                           placeholder="Select check date" 
                           required>
                    <small class="text-muted mt-1 d-block">
                        <i class="bi bi-info-circle me-1"></i>
                        Select the payment date to analyze
                    </small>
                </div>
                
                <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>

                <div class="col-lg-4 col-md-6">
                    <label for="deduction_filter" class="form-label fw-semibold text-dark mb-2">
                        <i class="bi bi-funnel text-primary me-2"></i>
                        Deduction Filter
                    </label>
                    <select name="deduction_filter" 
                            id="deduction_filter" 
                            class="form-select">
                        <option value="">All</option>
                        <option value="greater" {{ request('deduction_filter') == 'greater' ? 'selected' : '' }}>Greater Than</option>
                        <option value="greater_or_equal" {{ request('deduction_filter') == 'greater_or_equal' ? 'selected' : '' }}>Greater Than or Equal</option>
                        <option value="less" {{ request('deduction_filter') == 'less' ? 'selected' : '' }}>Less Than</option>
                        <option value="less_or_equal" {{ request('deduction_filter') == 'less_or_equal' ? 'selected' : '' }}>Less Than or Equal</option>
                        <option value="between" {{ request('deduction_filter') == 'between' ? 'selected' : '' }}>In Between</option>
                        <option value="exact" {{ request('deduction_filter') == 'exact' ? 'selected' : '' }}>Exactly</option>
                    </select>
                    <small class="text-muted mt-1 d-block">
                        <i class="bi bi-info-circle me-1"></i>
                        Set amount comparison type
                    </small>
                </div>

                {{-- ROW 2: Amount Inputs and Action Buttons --}}
                <div class="col-lg-3 col-md-6">
                    <label for="deduction_min" class="form-label fw-semibold text-dark mb-2">
                        <i class="bi bi-cash text-primary me-2"></i>
                        Min Amount
                    </label>
                    <input type="text" 
                           name="deduction_min" 
                           id="deduction_min" 
                           class="form-control money-input" 
                           placeholder="0" 
                           value="{{ request('deduction_min') }}">
                    <small class="text-muted mt-1 d-block">
                        <i class="bi bi-info-circle me-1"></i>
                        Enter minimum deduction amount
                    </small>
                </div>

                <div class="col-lg-3 col-md-6" id="deduction_max_div" style="display: {{ request('deduction_filter') == 'between' ? 'block' : 'none' }};">
                    <label for="deduction_max" class="form-label fw-semibold text-dark mb-2">
                        <i class="bi bi-cash-stack text-primary me-2"></i>
                        Max Amount
                    </label>
                    <input type="text" 
                           name="deduction_max" 
                           id="deduction_max" 
                           class="form-control money-input" 
                           placeholder="0" 
                           value="{{ request('deduction_max') }}">
                    <small class="text-muted mt-1 d-block">
                        <i class="bi bi-info-circle me-1"></i>
                        Enter maximum deduction amount
                    </small>
                </div>

                {{-- ACTION BUTTONS --}}
                <div class="col-lg-6 col-md-12">
                    <label class="form-label fw-semibold text-dark mb-2 d-none d-lg-block">
                        &nbsp;
                    </label>
                    <div class="d-flex gap-2">
                        {{-- Filter Button --}}
                        <button type="submit" class="btn btn-primary flex-fill">
                            <i class="bi bi-funnel me-2"></i>
                            Apply Filter
                        </button>
                        
                        {{-- Export Button --}}
                        @if($count > 0)
                        <a href="{{ route('deductions.export_analysis', request()->query()) }}" 
                           class="btn btn-success flex-fill">
                            <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="setThisMonth()">
                            <i class="bi bi-calendar-check me-1"></i>
                            This Month
                        </button>
                        <button type="button" class="btn btn-sm btn-outline-primary quick-filter-btn" onclick="setLastMonth()">
                            <i class="bi bi-calendar-month me-1"></i>
                            Last Month
                        </button>
                        <a href="{{ route('deductions.contribution_analysis') }}" 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>

{{-- UJUMBE WA LAZIMA WA KUCHAGUA TAREHE --}}
@if(!request()->filled('checkDate'))
    <div class="alert alert-warning d-flex align-items-center">
        <i class="bi bi-exclamation-triangle fs-4 me-3"></i>
        <div>
            <strong>Check Date Required</strong><br>
            <small>Tafadhali chagua <strong>Tarehe ya Check</strong> (Check Date) kuanza uchambuzi.</small>
        </div>
    </div>

{{-- KUONYESHA DATA --}}
@elseif($count > 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>Check No.</th>
                            <th>Name</th>
                            <th>Monthly Salary</th>
                            <th>Deduction Amount</th>
                            <th>Department</th>
                            <th>Check Date</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($deductions as $deduction)
                            <tr>
                                <td class="fw-semibold">{{ ($deductions->currentPage() - 1) * $deductions->perPage() + $loop->iteration }}</td>
                                <td>{{ $deduction->checkNumber }}</td>
                                <td class="text-uppercase">{{ trim("{$deduction->firstName} {$deduction->middleName} {$deduction->lastName}") }}</td>
                                <td>{{ number_format($deduction->monthlySalary, 2) }}</td>
                                <td>
                                    <span class="badge bg-success-subtle text-success px-2 py-1">
                                        {{ number_format($deduction->deductionAmount, 2) }}
                                    </span>
                                </td>
                                <td class="text-uppercase">{{ $deduction->deptName }}</td>
                                <td>{{ \Carbon\Carbon::parse($deduction->checkDate)->format('d-m-Y') }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" 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($deductions->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 {{ $deductions->firstItem() }} to {{ $deductions->lastItem() }} of {{ $deductions->total() }} entries
                </div>
                <div>
                    {{ $deductions->links('pagination::bootstrap-5') }}
                </div>
            </div>
        </div>
        @endif
    </div>

{{-- HAKUNA DATA --}}
@else
    <div class="alert alert-info d-flex align-items-center">
        <i class="bi bi-info-circle fs-4 me-3"></i>
        <div>
            <strong>No Records Found</strong><br>
            <small>Hakuna rekodi zozote za makato (Deduction Code 667) zilizopatikana kulingana na vigezo ulivyoweka.</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">

<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        
        // Flatpickr Initialization
        flatpickr("#checkDate", {
            dateFormat: "Y-m-d",
            maxDate: new Date(),
        });

        const deductionFilter = document.getElementById('deduction_filter');
        const deductionMaxDiv = document.getElementById('deduction_max_div');
        const deductionMinInput = document.getElementById('deduction_min');
        const deductionMaxInput = document.getElementById('deduction_max');

        const toggleMaxInput = () => {
            if (deductionFilter.value === '' || deductionFilter.value === 'between') {
                 deductionMinInput.removeAttribute('required');
            } else {
                 deductionMinInput.setAttribute('required', 'required');
            }

            if (deductionFilter.value === 'between') {
                deductionMaxDiv.style.display = 'block';
                deductionMaxInput.setAttribute('required', 'required');
            } else {
                deductionMaxDiv.style.display = 'none';
                deductionMaxInput.removeAttribute('required');
            }
        };

        deductionFilter.addEventListener('change', toggleMaxInput);
        toggleMaxInput();

        // LIVE MONEY FORMATTING - Ongeza commas LIVE wakati user anaandika
        const formatMoneyLive = (input) => {
            // Save cursor position
            let cursorPosition = input.selectionStart;
            let oldLength = input.value.length;
            
            // Ondoa commas zote
            let value = input.value.replace(/,/g, '');
            
            // Ikiwa ni empty au si number, acha tu
            if (!value || value === '') {
                return;
            }
            
            // Split kwa decimal point
            let parts = value.split('.');
            
            // Format integer part na commas
            parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
            
            // Rejoin na decimal (limit to 2 decimal places)
            if (parts[1]) {
                parts[1] = parts[1].substring(0, 2);
                value = parts.join('.');
            } else {
                value = parts[0];
            }
            
            // Set new value
            input.value = value;
            
            // Restore cursor position (adjust for added/removed commas)
            let newLength = input.value.length;
            cursorPosition = cursorPosition + (newLength - oldLength);
            input.setSelectionRange(cursorPosition, cursorPosition);
        };

        // Apply formatting kwa input zote za money
        const moneyInputs = document.querySelectorAll('.money-input');
        moneyInputs.forEach(input => {
            // Format on load ikiwa kuna value
            if (input.value) {
                let value = input.value.replace(/,/g, '');
                let parts = value.split('.');
                parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
                input.value = parts[1] ? parts.join('.') : parts[0];
            }

            // Format LIVE wakati user anaandika - using 'input' event
            input.addEventListener('input', function(e) {
                formatMoneyLive(this);
            });

            // Allow only numbers, decimal point, and comma
            input.addEventListener('keypress', function(e) {
                const char = String.fromCharCode(e.which);
                const currentValue = this.value;
                
                // Allow numbers
                if (/\d/.test(char)) {
                    return true;
                }
                
                // Allow only one decimal point
                if (char === '.' && !currentValue.includes('.')) {
                    return true;
                }
                
                // Block everything else
                e.preventDefault();
            });
        });

        // BEFORE SUBMIT: Ondoa commas ili backend ipokee numbers clean
        document.getElementById('filterForm').addEventListener('submit', function() {
            moneyInputs.forEach(input => {
                if (input.value) {
                    input.value = input.value.replace(/,/g, '');
                }
            });
        });
    });

    // Quick Filter Functions
    function setThisMonth() {
        const now = new Date();
        const firstDay = new Date(now.getFullYear(), now.getMonth(), 1);
        
        const flatpickrInstance = document.querySelector("#checkDate")._flatpickr;
        flatpickrInstance.setDate(firstDay);
    }

    function setLastMonth() {
        const now = new Date();
        const firstDayLastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
        
        const flatpickrInstance = document.querySelector("#checkDate")._flatpickr;
        flatpickrInstance.setDate(firstDayLastMonth);
    }
</script>
@endsection