@extends('layouts.app')

@section('title', 'Attendance Requests')

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

@section('content')

<div class="row">
    <div class="col-12">
    <div class="card card-primary card-outline card-tabs">
        <div class="card-header p-0 pt-1 border-bottom-0">
            <ul class="nav nav-tabs" id="requestTabs" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="my-requests-tab" data-toggle="pill" href="#my-requests" role="tab" aria-controls="my-requests" aria-selected="true">My Requests</a>
                </li>
                @if(auth()->user()->canAccess('attendance.manage_requests') || Auth::user()->hasRole('Admin'))
                <li class="nav-item">
                    <a class="nav-link" id="team-requests-tab" data-toggle="pill" href="#team-requests" role="tab" aria-controls="team-requests" aria-selected="false">Team Requests</a>
                </li>
                @endif
            </ul>
        </div>
        <div class="card-body">
            <div class="tab-content" id="requestTabsContent">
                <!-- My Requests Tab -->
                <div class="tab-pane fade show active" id="my-requests" role="tabpanel" aria-labelledby="my-requests-tab">
                    <div class="card card-outline card-info mb-3">
                        <div class="card-header py-2">
                            <h3 class="card-title text-sm font-weight-bold"><i class="fas fa-filter mr-1"></i>Filter My Requests</h3>
                        </div>
                        <div class="card-body py-2">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group mb-0">
                                        <label class="small mb-0">Start Date</label>
                                        <input type="date" id="my_start_date" class="form-control form-control-sm">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group mb-0">
                                        <label class="small mb-0">End Date</label>
                                        <input type="date" id="my_end_date" class="form-control form-control-sm">
                                    </div>
                                </div>
                                <div class="col-md-4 pt-3">
                                    <button id="applyMyFilter" class="btn btn-sm btn-primary">Filter</button>
                                    <button id="resetMyFilter" class="btn btn-sm btn-default ml-1"><i class="fas fa-undo"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="table-responsive">
                         <table class="table table-hover table-bordered table-striped w-100" id="myRequestsTable">
                            <thead>
                                <tr>
                                    <th>Date</th>
                                    <th>Punch In</th>
                                    <th>Punch Out</th>
                                    <th>Reason</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>

                <!-- Team Requests Tab -->
                <div class="tab-pane fade" id="team-requests" role="tabpanel" aria-labelledby="team-requests-tab">
                    <div class="card card-outline card-info mb-3">
                        <div class="card-header py-2">
                            <h3 class="card-title text-sm font-weight-bold"><i class="fas fa-filter mr-1"></i>Filter Team Requests</h3>
                        </div>
                        <div class="card-body py-2">
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="form-group mb-0">
                                        <label class="small mb-0">Start Date</label>
                                        <input type="date" id="team_start_date" class="form-control form-control-sm">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group mb-0">
                                        <label class="small mb-0">End Date</label>
                                        <input type="date" id="team_end_date" class="form-control form-control-sm">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group mb-0">
                                        <label class="small mb-0">Employee</label>
                                        <select id="team_employee_id" class="form-control form-control-sm select2-ajax w-100">
                                            <option value="">All Employees</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3 pt-3">
                                    <button id="applyTeamFilter" class="btn btn-sm btn-primary">Filter</button>
                                    <button id="resetTeamFilter" class="btn btn-sm btn-default ml-1"><i class="fas fa-undo"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="table-responsive">
                         <table class="table table-hover table-bordered table-striped w-100" id="teamRequestsTable">
                            <thead>
                                <tr>
                                    <th>Employee</th>
                                    <th>Date</th>
                                    <th>Punch In</th>
                                    <th>Punch Out</th>
                                    <th>Reason</th>
                                    <th>Status</th>
                                    <th style="width: 150px;">Action</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@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 myTable = $('#myRequestsTable').DataTable({
        processing: true,
        serverSide: true,
        autoWidth: false,
        ajax: {
            url: "{{ route('attendance-requests.data') }}?mine=true",
            data: function (d) {
                d.start_date = $('#my_start_date').val();
                d.end_date = $('#my_end_date').val();
            }
        },
        columns: [
            {data: 'date', name: 'date'},
            {data: 'punch_in', name: 'punch_in'},
            {data: 'punch_out', name: 'punch_out'},
            {data: 'reason', name: 'reason'},
            {data: 'status', name: 'status'}
        ],
        dom: "<'row'<'col-sm-6'l><'col-sm-6'f>>" +
             "<'row'<'col-sm-12'tr>>" +
             "<'row'<'col-sm-5'i><'col-sm-7'p>>",
        scrollX: true
    });

    @if((Auth::user()->employee && Auth::user()->employee->subordinates->count() > 0) || Auth::user()->hasRole('Admin'))
    var teamTable = $('#teamRequestsTable').DataTable({
        processing: true,
        serverSide: true,
        autoWidth: false,
        ajax: {
            url: "{{ route('attendance-requests.data') }}?team=true",
            data: function (d) {
                d.start_date = $('#team_start_date').val();
                d.end_date = $('#team_end_date').val();
                d.employee_id = $('#team_employee_id').val();
            }
        },
        columns: [
            {data: 'employee', name: 'employee'},
            {data: 'date', name: 'date'},
            {data: 'punch_in', name: 'punch_in'},
            {data: 'punch_out', name: 'punch_out'},
            {data: 'reason', name: 'reason'},
            {data: 'status', name: 'status'},
            {data: 'action', name: 'action', orderable: false, searchable: false}
        ],
        dom: "<'row'<'col-sm-6'l><'col-sm-6'f>>" +
             "<'row'<'col-sm-12'tr>>" +
             "<'row'<'col-sm-5'i><'col-sm-7'p>>",
        scrollX: true
    });
    @endif

    $('#applyMyFilter').click(function(){ myTable.draw(); });
    $('#resetMyFilter').click(function(){
        $('#my_start_date, #my_end_date').val('');
        myTable.draw();
    });

    $('#applyTeamFilter').click(function(){ teamTable.draw(); });
    $('#resetTeamFilter').click(function(){
        $('#team_start_date, #team_end_date').val('');
        $('#team_employee_id').val(null).trigger('change');
        teamTable.draw();
    });

    // Handle tab switching layout issues
    $('a[data-toggle="pill"], a[data-toggle="tab"]').on('shown.bs.tab', function() {
        setTimeout(function() {
            if ($.fn.DataTable.isDataTable('#myRequestsTable')) {
                $('#myRequestsTable').DataTable().columns.adjust();
            }
            if ($.fn.DataTable.isDataTable('#teamRequestsTable')) {
                $('#teamRequestsTable').DataTable().columns.adjust();
            }
        }, 150);
    });

    $(window).on('resize', function() {
        if ($.fn.DataTable.isDataTable('#myRequestsTable')) $('#myRequestsTable').DataTable().columns.adjust();
        if ($.fn.DataTable.isDataTable('#teamRequestsTable')) $('#teamRequestsTable').DataTable().columns.adjust();
    });

    $('body').on('click', '.approve-request', function() {
        var id = $(this).data('id');
        Swal.fire({
            title: 'Approve Request?',
            text: 'You are about to approve this attendance regularisation request.',
            input: 'text',
            inputPlaceholder: 'Add remarks (optional)',
            showCancelButton: true,
            confirmButtonText: 'Approve',
            confirmButtonColor: '#00875A'
        }).then((result) => {
            if (result.isConfirmed) {
                $.post("{{ url('attendance-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
                    });
                    teamTable.draw();
                });
            }
        });
    });

    $('body').on('click', '.reject-request', function() {
        var id = $(this).data('id');
        Swal.fire({
            title: 'Reject Request?',
            text: 'Are you sure you want to reject this request?',
            input: 'text',
            inputPlaceholder: 'Add reason for rejection',
            showCancelButton: true,
            confirmButtonText: 'Reject',
            confirmButtonColor: '#DE350B'
        }).then((result) => {
            if (result.isConfirmed) {
                $.post("{{ url('attendance-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
                    });
                    teamTable.draw();
                });
            }
        });
    });
});
</script>
@endpush