@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    <div class="d-flex justify-content-between align-items-center">
                        <h4 class="mb-0 text-white">
                            <i class="fas fa-money-check-alt"></i> Disbursements
                        </h4>
                        <div>
                            <button type="button" class="btn btn-light" data-bs-toggle="modal" data-bs-target="#filterModal">
                                <i class="fas fa-filter"></i> Filter
                            </button>
                            @if(\Auth::user()->can('create disbursements') || true)
                                <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#newDisbursementModal">
                                    <i class="fas fa-plus"></i> New Disbursement
                                </button>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            <i class="fas fa-check-circle"></i> {{ session('success') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    @if(session('error'))
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <i class="fas fa-exclamation-circle"></i> {{ session('error') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    <div class="table-responsive">
                        <table id="disbursements-table" class="table table-bordered table-striped table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>Date</th>
                                    <th>Order #</th>
                                    <th>Supplier</th>
                                    <th>Personnel</th>
                                    <th>Amount</th>
                                    <th>Balance</th>
                                    <th>Reason</th>
                                    <th>Status</th>
                                    <th style="width: 150px;">Actions</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- New Disbursement Modal -->
<div class="modal fade" id="newDisbursementModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title">
                    <i class="fas fa-plus"></i> New Disbursement
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form action="{{ route('disbursements.create') }}" method="GET" id="newDisbursementForm">
                    <div class="mb-3">
                        <label for="disbursement_date" class="form-label fw-bold">
                            <i class="fas fa-calendar-alt text-success"></i> Select Disbursement Date <span class="text-danger">*</span>
                        </label>
                        <input type="date" 
                               name="date" 
                               id="disbursement_date" 
                               class="form-control form-control-lg" 
                               max="{{ date('Y-m-d') }}"
                               value="{{ date('Y-m-d') }}"
                               required>
                        <small class="text-muted">
                            <i class="fas fa-info-circle"></i> You can only select today or past dates.
                        </small>
                    </div>

                    @php
                        $recentDates = \App\Models\Disbursement::selectRaw('DISTINCT date')
                            ->orderBy('date', 'desc')
                            ->take(5)
                            ->pluck('date');
                    @endphp

                    @if($recentDates->count() > 0)
                        <div class="mb-3">
                            <label class="form-label fw-bold">
                                <i class="fas fa-history text-info"></i> Recent Disbursement Dates
                            </label>
                            <div class="list-group">
                                @foreach($recentDates as $recentDate)
                                    <button type="button" 
                                            class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
                                            onclick="setDisbursementDate('{{ $recentDate }}')">
                                        <span>
                                            <i class="fas fa-calendar-day"></i>
                                            {{ \Carbon\Carbon::parse($recentDate)->format('D, d M Y') }}
                                        </span>
                                        <i class="fas fa-chevron-right text-muted"></i>
                                    </button>
                                @endforeach
                            </div>
                        </div>
                    @endif

                    <div class="alert alert-info mb-0">
                        <i class="fas fa-exclamation-circle"></i>
                        <strong>Note:</strong> Future dates are not allowed for disbursements.
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times"></i> Cancel
                </button>
                <button type="button" class="btn btn-success" onclick="submitNewDisbursement()">
                    <i class="fas fa-arrow-right"></i> Continue
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Filter Modal -->
<div class="modal fade" id="filterModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title">
                    <i class="fas fa-filter"></i> Filter Disbursements
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="filterForm">
                    <div class="mb-3">
                        <label class="form-label">
                            <i class="fas fa-calendar-alt"></i> Date
                        </label>
                        <input type="date" name="date" id="filter_date" class="form-control">
                    </div>

                    <div class="mb-3">
                        <label class="form-label">
                            <i class="fas fa-truck"></i> Supplier
                        </label>
                        <select name="supplier_id" id="filter_supplier" class="form-control select2">
                            <option value="">All Suppliers</option>
                            @foreach($suppliers as $supplier)
                                <option value="{{ $supplier->id }}">{{ $supplier->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">
                            <i class="fas fa-user"></i> Personnel
                        </label>
                        <select name="personel_id" id="filter_personel" class="form-control select2">
                            <option value="">All Personnel</option>
                            @foreach($personels as $personel)
                                <option value="{{ $personel->id }}">{{ $personel->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">
                            <i class="fas fa-tasks"></i> Status
                        </label>
                        <select name="status" id="filter_status" class="form-control">
                            <option value="">All Status</option>
                            <option value="Pending">Pending</option>
                            <option value="Approved">Approved</option>
                            <option value="Rejected">Rejected</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times"></i> Close
                </button>
                <button type="button" class="btn btn-warning" onclick="clearFilters()">
                    <i class="fas fa-undo"></i> Clear
                </button>
                <button type="button" class="btn btn-primary" onclick="applyFilters()">
                    <i class="fas fa-check"></i> Apply Filters
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Form -->
<form id="delete-form" method="POST" style="display: none;">
    @csrf
    @method('DELETE')
</form>

@endsection

@section('customcss')
<style>
    .table th {
        font-weight: 600;
        font-size: 0.9rem;
    }
    
    .table td {
        vertical-align: middle;
    }
    
    .btn-group-sm .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
    }
    
    .badge {
        font-size: 0.85rem;
        padding: 0.4em 0.6em;
    }

    .select2-container--default .select2-selection--single {
        height: 38px;
        padding: 0.375rem 0.75rem;
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 24px;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 36px;
    }

    .list-group-item {
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .list-group-item:hover {
        background-color: #f0f8ff;
        border-color: #28a745;
    }

    .list-group-item.active {
        background-color: #28a745;
        border-color: #28a745;
    }

    .form-control-lg {
        font-size: 1.1rem;
        padding: 0.75rem 1rem;
    }
</style>
@endsection

@section('customjs')
<script>
    $(document).ready(function() {
        // Initialize Select2
        $('.select2').select2({
            theme: 'bootstrap-5',
            dropdownParent: $('#filterModal'),
            width: '100%',
            placeholder: 'Select an option'
        });

        // Initialize DataTable
        var table = $('#disbursements-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('disbursements.index') }}",
                data: function(d) {
                    d.date = $('#filter_date').val();
                    d.supplier_id = $('#filter_supplier').val();
                    d.personel_id = $('#filter_personel').val();
                    d.status = $('#filter_status').val();
                }
            },
            columns: [
                { data: 'date', name: 'disbursements.date' },
                { data: 'orderNo', name: 'disbursements.orderNo' },
                { data: 'supplier', name: 'suppliers.name', orderable: false },
                { data: 'personel', name: 'personels.name', orderable: false },
                { 
                    data: 'amount', 
                    name: 'disbursements.amount',
                    className: 'text-end',
                    render: function(data, type, row) {
                        return '<strong>' + data + '</strong>';
                    }
                },
                { 
                    data: 'balance', 
                    name: 'disbursements.balance',
                    className: 'text-end',
                    render: function(data, type, row) {
                        return data;
                    }
                },
                { 
                    data: 'reason', 
                    name: 'disbursements.reason',
                    render: function(data, type, row) {
                        if (data && data.length > 50) {
                            return '<span title="' + data + '">' + data.substring(0, 50) + '...</span>';
                        }
                        return data || '-';
                    }
                },
                { 
                    data: 'status_badge', 
                    name: 'disbursements.status',
                    className: 'text-center',
                    orderable: false
                },
                { 
                    data: 'action', 
                    name: 'action', 
                    orderable: false, 
                    searchable: false,
                    className: 'text-center'
                }
            ],
            order: [[0, 'desc'], [1, 'asc']],
            pageLength: 25,
            lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
            dom: '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>rtip',
            language: {
                search: "_INPUT_",
                searchPlaceholder: "Search disbursements...",
                lengthMenu: "Show _MENU_ entries",
                info: "Showing _START_ to _END_ of _TOTAL_ disbursements",
                infoEmpty: "No disbursements found",
                infoFiltered: "(filtered from _MAX_ total disbursements)",
                processing: '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span>'
            }
        });

        // Auto-hide alerts after 5 seconds
        setTimeout(function() {
            $('.alert').fadeOut('slow');
        }, 5000);

        // Reset new disbursement form when modal is closed
        $('#newDisbursementModal').on('hidden.bs.modal', function() {
            document.getElementById('newDisbursementForm').reset();
            document.getElementById('disbursement_date').value = '{{ date("Y-m-d") }}';
        });

        // Reset new disbursement form when modal is opened
        $('#newDisbursementModal').on('shown.bs.modal', function() {
            document.getElementById('disbursement_date').focus();
        });
    });

    // Set disbursement date from recent dates
    function setDisbursementDate(date) {
        document.getElementById('disbursement_date').value = date;
        
        // Highlight selected date
        $('.list-group-item').removeClass('active');
        event.currentTarget.classList.add('active');
    }

    // Submit new disbursement form
    function submitNewDisbursement() {
        const selectedDate = new Date(document.getElementById('disbursement_date').value);
        const today = new Date();
        today.setHours(0, 0, 0, 0);

        if (!document.getElementById('disbursement_date').value) {
            alert('Please select a date.');
            document.getElementById('disbursement_date').focus();
            return false;
        }

        if (selectedDate > today) {
            alert('Invalid date! You cannot select a future date.');
            document.getElementById('disbursement_date').focus();
            return false;
        }

        // Show loading state
        const btn = event.currentTarget;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Loading...';
        btn.disabled = true;

        document.getElementById('newDisbursementForm').submit();
    }

    // Apply filters
    function applyFilters() {
        $('#disbursements-table').DataTable().ajax.reload();
        $('#filterModal').modal('hide');
    }

    // Clear filters
    function clearFilters() {
        $('#filterForm')[0].reset();
        $('.select2').val(null).trigger('change');
        $('#disbursements-table').DataTable().ajax.reload();
    }

    // Delete disbursement
    function deleteDisbursement(id) {
        if (confirm('Are you sure you want to delete this disbursement?\n\nThis action cannot be undone and will:\n- Remove the disbursement record\n- Reverse supplier ledger entries\n- Update day summary totals\n- Create an audit trail entry')) {
            var form = document.getElementById('delete-form');
            form.action = '/disbursements/' + id;
            form.submit();
        }
    }
</script>
@endsection