@extends('layouts.app')

@section('title', 'Leave Management')

@section('panel-actions')
    <a href="{{ route('leave-requests.create') }}" class="btn btn-primary py-1 px-3" style="font-size: 13px;">
        <i class="fas fa-plus me-1"></i> Apply for Leave
    </a>
@endsection

@section('content')
<div class="row">
    <div class="col-12">
        <!-- Summary Widgets -->
        <div class="row mb-4">
            <div class="col-md-4">
                <div class="info-box premium-info-box bg-premium-warning shadow-sm">
                    <span class="info-box-icon"><i class="fa-solid fa-clock-rotate-left"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text text-uppercase">Pending Requests</span>
                        <span class="info-box-number h5 mb-0" id="widget_pending">0</span>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="info-box premium-info-box bg-premium-success shadow-sm">
                    <span class="info-box-icon"><i class="fa-solid fa-calendar-check"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text text-uppercase">Approved Leaves</span>
                        <span class="info-box-number h5 mb-0" id="widget_approved">0</span>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="info-box premium-info-box bg-premium-danger shadow-sm">
                    <span class="info-box-icon"><i class="fa-solid fa-calendar-xmark"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text text-uppercase">Rejected History</span>
                        <span class="info-box-number h5 mb-0" id="widget_rejected">0</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@if(session('success'))
    <div class="alert alert-success alert-dismissible">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
        <h5><i class="icon fas fa-check"></i> Success!</h5>
        {{ session('success') }}
    </div>
@endif

<div class="card card-primary card-outline shadow-sm border-0">
    <div class="card-header p-0 pt-1 border-bottom-0">
        <ul class="nav nav-tabs nav-fill" id="leaveTabs" role="tablist">
            <li class="nav-item">
                <a class="nav-link active font-weight-bold" id="my-leaves-tab" data-toggle="tab" href="#my-leaves" role="tab">
                    <i class="fas fa-user-tag mr-1"></i> My Leaves
                </a>
            </li>
            @if((Auth::user()->employee && Auth::user()->employee->subordinates->count() > 0) || Auth::user()->hasRole('Admin'))
            <li class="nav-item">
                <a class="nav-link font-weight-bold" id="team-leaves-tab" data-toggle="tab" href="#team-leaves" role="tab">
                    <i class="fas fa-hourglass-start mr-1"></i> Pending Requests
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link font-weight-bold" id="approved-leaves-tab" data-toggle="tab" href="#approved-leaves" role="tab">
                    <i class="fas fa-check-double mr-1"></i> Approved History
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link font-weight-bold" id="rejected-leaves-tab" data-toggle="tab" href="#rejected-leaves" role="tab">
                    <i class="fas fa-ban mr-1"></i> Rejected History
                </a>
            </li>
            @endif
        </ul>
    </div>
    <div class="card-body p-4">

<div class="tab-content" id="leaveTabsContent">
    <div class="tab-pane fade show active" id="my-leaves" role="tabpanel">
        <div class="card card-outline card-info shadow-none border">
            <div class="card-header py-2">
                <h3 class="card-title text-info"><i class="fas fa-filter mr-2"></i>Filter Records</h3>
            </div>
            <div class="card-body">
                <div class="row align-items-end">
                    <div class="col-md-4">
                        <div class="form-group mb-0">
                            <label class="small font-weight-bold">Start Date</label>
                            <input type="date" id="my_leave_start" class="form-control form-control-sm">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group mb-0">
                            <label class="small font-weight-bold">End Date</label>
                            <input type="date" id="my_leave_end" class="form-control form-control-sm">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <button id="applyMyLeaveFilter" class="btn btn-primary btn-sm px-3 shadow-sm">
                            <i class="fas fa-filter mr-1"></i> Filter
                        </button>
                        <button id="resetMyLeaveFilter" class="btn btn-light btn-sm ml-1 text-muted border">
                            <i class="fas fa-undo"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="card border mt-4">
            <div class="card-header bg-light py-2">
                <h3 class="card-title text-muted"><i class="fas fa-history mr-2"></i>My Leave History</h3>
            </div>
            <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover table-bordered table-striped w-100 mb-0" id="myLeavesTable">

                    <thead>
                        <tr>
                            <th>Type</th>
                            <th>Start Date</th>
                            <th>End Date</th>
                            <th>Reason</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
    </div>

    @if((Auth::user()->employee && Auth::user()->employee->subordinates->count() > 0) || Auth::user()->hasRole('Admin'))
    <div class="tab-pane fade" id="team-leaves" role="tabpanel">
        <!-- Team Filter Section -->
        <div class="card card-outline card-info shadow-none border">
            <div class="card-header py-2">
                <h3 class="card-title text-info"><i class="fas fa-search mr-2"></i>Lookup Requests</h3>
            </div>
            <div class="card-body">
                <div class="row align-items-end">
                    <div class="col-md-3">
                        <div class="form-group mb-0">
                            <label class="small font-weight-bold">Start Date</label>
                            <input type="date" id="team_from_date" class="form-control form-control-sm">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group mb-0">
                            <label class="small font-weight-bold">End Date</label>
                            <input type="date" id="team_to_date" class="form-control form-control-sm">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group mb-0">
                            <label class="small font-weight-bold">Leave Type</label>
                            <select id="team_leave_type" class="form-control form-control-sm">
                                <option value="">All Types</option>
                                @foreach($leaveTypes as $type)
                                <option value="{{ $type->id }}">{{ $type->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <button id="applyLeaveFilter" class="btn btn-primary btn-sm px-3 shadow-sm">
                            <i class="fas fa-filter mr-1"></i> Filter
                        </button>
                        <button id="resetLeaveFilter" class="btn btn-light btn-sm ml-1 text-muted border">
                            <i class="fas fa-undo"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Pending Requests Table -->
        <div class="card border mt-4">
            <div class="card-header bg-warning-light py-2" style="background-color: #fffbef;">
                <h3 class="card-title text-warning"><i class="fas fa-exclamation-circle mr-2"></i>Awaiting Approval</h3>
            </div>
            <div class="card-body p-0">
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover table-bordered table-striped w-100 mb-0" id="teamLeavesTable">

                        <thead>
                            <tr>
                                <th>Employee</th>
                                <th>Type</th>
                                <th>Start Date</th>
                                <th>End Date</th>
                                <th>Reason</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
    </div>

    <!-- Approved History -->
    <div class="tab-pane fade" id="approved-leaves" role="tabpanel">
        <div class="card card-outline card-info shadow-none border">
            <div class="card-header py-2">
                <h3 class="card-title text-info"><i class="fas fa-history mr-2"></i>Archive Search</h3>
            </div>
            <div class="card-body">
                <div class="row align-items-end">
                    <div class="col-md-3">
                        <div class="form-group mb-0">
                            <label class="small font-weight-bold">Start Date</label>
                            <input type="date" id="approved_from_date" class="form-control form-control-sm">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group mb-0">
                            <label class="small font-weight-bold">End Date</label>
                            <input type="date" id="approved_to_date" class="form-control form-control-sm">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group mb-0">
                            <label class="small font-weight-bold">Employee</label>
                            <input type="text" id="approved_employee" class="form-control form-control-sm" placeholder="Name or ID">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <button id="applyApprovedFilter" class="btn btn-primary btn-sm px-4 shadow-sm w-100">
                            <i class="fas fa-filter mr-1"></i> Filter
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="card border mt-4">
            <div class="card-header bg-success-light py-2" style="background-color: #f0fdf4;">
                <h3 class="card-title text-success"><i class="fas fa-check-circle mr-2"></i>Approved Authorizations</h3>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover table-bordered table-striped w-100 mb-0" id="approvedLeavesTable">

                        <thead>
                            <tr>
                                <th>Employee</th>
                                <th>Type</th>
                                <th>Start Date</th>
                                <th>End Date</th>
                                <th>Reason</th>
                                <th>Approved By</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="tab-pane fade" id="rejected-leaves" role="tabpanel">
        <div class="card card-outline card-info shadow-none border">
            <div class="card-header py-2">
                <h3 class="card-title text-info"><i class="fas fa-search-minus mr-2"></i>Rejection History Filter</h3>
            </div>
            <div class="card-body">
                <div class="row align-items-end">
                    <div class="col-md-3">
                        <div class="form-group mb-0">
                            <label class="small font-weight-bold">Start Date</label>
                            <input type="date" id="rejected_leave_start" class="form-control form-control-sm">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group mb-0">
                            <label class="small font-weight-bold">End Date</label>
                            <input type="date" id="rejected_leave_end" class="form-control form-control-sm">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group mb-0">
                            <label class="small font-weight-bold">Employee</label>
                            <select id="rejected_leave_emp" class="form-control form-control-sm select2-ajax w-100">
                                <option value="">Select Employee</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <button id="applyRejectedFilter" class="btn btn-primary btn-sm px-4 shadow-sm w-100">
                            <i class="fas fa-filter mr-1"></i> Filter
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="card border mt-4">
            <div class="card-header bg-danger-light py-2" style="background-color: #fff1f2;">
                <h3 class="card-title text-danger"><i class="fas fa-times-circle mr-2"></i>Rejected Applications</h3>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover table-bordered table-striped w-100 mb-0" id="rejectedLeavesTable">

                        <thead>
                            <tr>
                                <th>Employee</th>
                                <th>Type</th>
                                <th>Start Date</th>
                                <th>End Date</th>
                                <th>Reason</th>
                                <th>Rejected By</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
    @endif
</div>
</div>
</div> <!-- .card-tabs CLOSED -->
@endsection

@push('scripts')
<script>
$(function() {
    $('.select2-ajax').select2({
        theme: 'bootstrap4',
        ajax: {
            url: "{{ route('employees.search') }}",
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return { term: params.term };
            },
            processResults: function (data) {
                return { results: data.results };
            },
            cache: true
        },
        placeholder: 'Search...',
        allowClear: true
    });

    var myLeaveTable = $('#myLeavesTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ route('leave-requests.data') }}?mine=true",
            data: function (d) {
                d.start_date = $('#my_leave_start').val();
                d.end_date = $('#my_leave_end').val();
            }
        },
        columns: [
            {data: 'leave_type', name: 'leave_type'},
            {data: 'start_date', name: 'start_date'},
            {data: 'end_date', name: 'end_date'},
            {data: 'reason', name: 'reason'},
            {data: 'status', name: 'status'}
        ],
        scrollX: true,
        drawCallback: function(settings) {
            updateDashboardWidgets(settings);
        }
    });

    function updateDashboardWidgets(settings) {
        if (settings.json && settings.json.aggregates) {
            const agg = settings.json.aggregates;
            $('#widget_pending').text(agg.pending);
            $('#widget_approved').text(agg.approved);
            $('#widget_rejected').text(agg.rejected);
        }
    }

    $('#applyMyLeaveFilter').click(function(){ myLeaveTable.draw(); });
    $('#resetMyLeaveFilter').click(function(){
        $('#my_leave_start, #my_leave_end').val('');
        myLeaveTable.draw();
    });

    @if((Auth::user()->employee && Auth::user()->employee->subordinates->count() > 0) || Auth::user()->hasRole('Admin'))
    var teamLeaveTable = $('#teamLeavesTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ route('leave-requests.data') }}?team=true",
            data: function (d) {
                d.start_date = $('#team_leave_start').val();
                d.end_date = $('#team_leave_end').val();
                d.employee_id = $('#team_leave_emp').val();
            }
        },
        columns: [
            {data: 'employee', name: 'employee'},
            {data: 'leave_type', name: 'leave_type'},
            {data: 'start_date', name: 'start_date'},
            {data: 'end_date', name: 'end_date'},
            {data: 'reason', name: 'reason'},
            {data: 'action', name: 'action', orderable: false, searchable: false}
        ],
        scrollX: true,
        drawCallback: function(settings) {
            updateDashboardWidgets(settings);
        }
    });

    var approvedLeaveTable = $('#approvedLeavesTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ route('leave-requests.data') }}?team=true&status=approved",
            data: function (d) {
                d.start_date = $('#approved_leave_start').val();
                d.end_date = $('#approved_leave_end').val();
                d.employee_id = $('#approved_leave_emp').val();
            }
        },
        columns: [
            {data: 'employee', name: 'employee'},
            {data: 'leave_type', name: 'leave_type'},
            {data: 'start_date', name: 'start_date'},
            {data: 'end_date', name: 'end_date'},
            {data: 'reason', name: 'reason'},
            {data: 'action_by_name', name: 'action_by_name'}
        ],
        scrollX: true,
        drawCallback: function(settings) {
            updateDashboardWidgets(settings);
        }
    });

    var rejectedLeaveTable = $('#rejectedLeavesTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ route('leave-requests.data') }}?team=true&status=rejected",
            data: function (d) {
                d.start_date = $('#rejected_leave_start').val();
                d.end_date = $('#rejected_leave_end').val();
                d.employee_id = $('#rejected_leave_emp').val();
            }
        },
        columns: [
            {data: 'employee', name: 'employee'},
            {data: 'leave_type', name: 'leave_type'},
            {data: 'start_date', name: 'start_date'},
            {data: 'end_date', name: 'end_date'},
            {data: 'reason', name: 'reason'},
            {data: 'action_by_name', name: 'action_by_name'}
        ],
        scrollX: true,
        drawCallback: function(settings) {
            updateDashboardWidgets(settings);
        }
    });

    $('#applyLeaveFilter').click(function(){ teamLeaveTable.draw(); });
    $('#applyApprovedFilter').click(function(){ approvedLeaveTable.draw(); });
    $('#applyRejectedFilter').click(function(){ rejectedLeaveTable.draw(); });

    $('#resetLeaveFilter').click(function(){
        $('#team_leave_start, #team_leave_end').val('');
        $('#team_leave_emp').val(null).trigger('change');
        teamLeaveTable.draw();
    });

    // Fix layout issues when switching tabs
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        const target = $(e.target).attr('href');
        if (target === '#team-leaves' && typeof teamLeaveTable !== 'undefined') teamLeaveTable.columns.adjust().draw();
        if (target === '#approved-leaves' && typeof approvedLeaveTable !== 'undefined') approvedLeaveTable.columns.adjust().draw();
        if (target === '#rejected-leaves' && typeof rejectedLeaveTable !== 'undefined') rejectedLeaveTable.columns.adjust().draw();
    });
    @endif

    $('body').on('click', '.approve-leave', function() {
        var id = $(this).data('id');
        Swal.fire({
            title: 'Approve Leave?',
            text: 'You are about to approve this leave request.',
            input: 'text',
            inputPlaceholder: 'Add remarks (optional)',
            showCancelButton: true,
            confirmButtonText: 'Approve',
            confirmButtonColor: '#00875A'
        }).then((result) => {
            if (result.isConfirmed) {
                $.post("{{ url('leave-requests') }}/" + id + "/approve", {
                    _token: "{{ csrf_token() }}",
                    remarks: result.value
                }, function(response) {
                    Swal.fire({
                        title: 'Approved!',
                        text: response.success,
                        icon: 'success',
                        toast: true,
                        position: 'top-end',
                        showConfirmButton: false,
                        timer: 3000
                    });
                    teamLeaveTable.draw();
                });
            }
        });
    });

    $('body').on('click', '.reject-leave', function() {
        var id = $(this).data('id');
        Swal.fire({
            title: 'Reject Leave?',
            text: 'Are you sure you want to reject this leave request?',
            input: 'text',
            inputPlaceholder: 'Add reason for rejection',
            showCancelButton: true,
            confirmButtonText: 'Reject',
            confirmButtonColor: '#DE350B'
        }).then((result) => {
            if (result.isConfirmed) {
                $.post("{{ url('leave-requests') }}/" + id + "/reject", {
                    _token: "{{ csrf_token() }}",
                    remarks: result.value
                }, function(response) {
                    Swal.fire({
                        title: 'Rejected!',
                        text: response.success,
                        icon: 'info',
                        toast: true,
                        position: 'top-end',
                        showConfirmButton: false,
                        timer: 3000
                    });
                    teamLeaveTable.draw();
                });
            }
        });
    });
});
</script>
@endpush