@extends('main')

@section('css')
    <link rel="stylesheet" href="{{ url('public/assets/vendor/jquery-datatable/dataTables.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ url('public/assets/vendor/bootstrap-datepicker/css/bootstrap-datepicker3.min.css') }}">
    <style>
        .table tbody tr td, .table tbody th td {
            vertical-align: middle;
            white-space: nowrap;
        }
        tr:nth-child(even) { background-color: #EFF3F6; }
        th {
            color: black;
            font-weight: bold;
            font-size: 14px;
            text-align: center;
        }
        td { text-align: center; }
    </style>
@endsection

@section('content')
    <div id="main-content">
        <div class="container-fluid">
            <div class="card">
                <h5 class="card-header" style="background-color: #138496; color: white;">Showing Leave Requests</h5>
                <div class="card-body">

                    <div class="row mb-3">
                        <div class="col-lg-4">
                            <p><b>Date</b></p>
                            <div class="input-daterange input-group" data-provide="datepicker">
                                <input type="text" id="startDate" class="form-control input-sm" name="startDate">
                                <span class="input-group-addon text-center" style="width: 40px;">to</span>
                                <input type="text" id="endDate" class="form-control input-sm" name="endDate">
                            </div>
                        </div>
                        <div class="col-lg-4 d-flex align-items-end">
                            <button class="btn btn-info" onclick="onDateSearch()">Search</button>
                        </div>
                        <div class="col-lg-4">
                            <label>Status</label>
                            <select id="status" class="form-control" onchange="onStatusSearch()">
                                <option value="">Select Status</option>
                                <option value="Pending">Pending</option>
                                <option value="Manager Pending">Manager Pending</option>
                                <option value="Manager Approved">Manager Approved</option>
                                <option value="Approved">Approved</option>
                                <option value="Rejected">Rejected</option>
                            </select>
                        </div>
                    </div>

                    <div class="mb-3">
                        <button class="btn btn-success" onclick="batchApprove()">Approve Selected</button>
                        <button class="btn btn-danger" onclick="batchReject()">Reject Selected</button>
                    </div>

                    <div class="table-responsive show-leave-table">
                        <table id="showLeave" class="table table-bordered table-hover table-striped">
                            <thead>
                            <tr>
                                <th><input type="checkbox" id="select-all"></th>
                                <th>Name</th>
                                <th>Employee ID</th>
                                <th>Application Date</th>
                                <th>Start</th>
                                <th>End</th>
                                <th>Days</th>
                                <th>Category</th>
                                <th>Remark</th>
                                <th>Reject Cause</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>

                    <!-- Modal Placeholders -->
                    <div id="requestEditModal" class="modal fade" tabindex="-1">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div id="editModalBody"></div>
                            </div>
                        </div>
                    </div>

                    <div id="rejectEditModal" class="modal fade" tabindex="-1">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div id="editRejectModalBody"></div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script src="{{ url('public/assets/js/pages/tables/jquery-datatable.js') }}"></script>
    <script src="{{ url('public/assets/bundles/datatablescripts.bundle.js') }}"></script>
    <script src="{{ url('public/assets/vendor/bootstrap-datepicker/js/bootstrap-datepicker.min.js') }}"></script>

    <script>
        $(document).ready(function () {
            $('#startDate, #endDate').datepicker({
                format: 'dd/mm/yyyy',
                todayHighlight: true,
                autoclose: true
            });

            let table = $('#showLeave').DataTable({
                processing: true,
                serverSide: true,
                stateSave: true,
                ajax: {
                    url: '{{ route("showLeave-list") }}',
                    type: 'POST',
                    data: function (d) {
                        d._token = '{{ csrf_token() }}';
                        d.startDate = $('#startDate').val();
                        d.endDate = $('#endDate').val();
                        d.status = $('#status').val();
                    }
                },
                rowCallback: function (row, data) {
                    const bgColors = {
                        "Pending": "rgba(255,152,0,1)",
                        "Manager Pending": "rgba(255,152,0,1)",
                        "Manager Approved": "rgb(60,179,113)",
                        "Rejected": "rgba(255,99,71,1)"
                    };
                    $(row).css('background-color', bgColors[data.applicationStatus] || '');
                },
                columns: [
                    {
                        data: null,
                        orderable: false,
                        searchable: false,
                        render: data => `<input type="checkbox" class="row-check" value="${data.id}">`
                    },
                    { data: 'fullName' ,name:'fullName'},
                    { data: 'EmployeeId' ,name:'employeeinfo.EmployeeId'},
                    { data: 'applicationDate' ,name:'hrmleaves.applicationDate'},
                    { data: 'startDate' ,name:'hrmleaves.startDate'},
                    { data: 'endDate' ,name:'hrmleaves.endDate'},
                    { data: 'noOfDays' ,name:'hrmleaves.noOfDays'},
                    { data: 'categoryName' ,name:'hrmleavecategories.categoryName'},
                    { data: 'remarks' ,name:'hrmleaves.remarks'},
                    { data: 'rejectCause' ,name:'hrmleaves.rejectCause'},
                    { data: 'applicationStatus' ,name:'hrmleaves.applicationStatus'},
                    {
                        data: function (data) {
                            return `
                        <div class="d-flex justify-content-center">
                            <div class="dropdown">
                                <button class="btn btn-primary dropdown-toggle btn-sm" data-toggle="dropdown"></button>
                                <div class="dropdown-menu">
                                    <button class="dropdown-item" data-panel-id="${data.id}" onclick="approve(this)">Approve</button>
                                    <button class="dropdown-item" data-panel-id="${data.id}" onclick="editReject(this)">Reject</button>
                                    <button class="dropdown-item" data-panel-id="${data.id}" onclick="editLeaveRequest(this)">Edit</button>
                                </div>
                            </div>
                            <button class="btn btn-outline-secondary btn-sm ml-2" title="document" data-panel-id="${data.id}" onclick="documentShow(this)">
                                <i class="fa fa-file"></i>
                            </button>
                        </div>`;
                        },
                        orderable: false,
                        searchable: false
                    }
                ]
            });

            $('#select-all').on('click', function () {
                $('.row-check').prop('checked', this.checked);
            });

            $('#showLeave tbody').on('change', '.row-check', function () {
                if (!this.checked) $('#select-all').prop('checked', false);
            });
        });

        function getSelectedIds() {
            return $('.row-check:checked').map(function () {
                return this.value;
            }).get();
        }

        function batchApprove() {
            let ids = getSelectedIds();
            if (ids.length === 0) return alert("Please select at least one row.");
            if (!confirm("Approve selected requests?")) return;

            $.post('{{ route("approve.request.batch") }}', { _token: '{{ csrf_token() }}', ids }, function () {
                alert("Approved successfully.");
                $('#showLeave').DataTable().ajax.reload();
            }).fail(() => alert("Something went wrong."));
        }

        function batchReject() {
            let ids = getSelectedIds();
            if (ids.length === 0) return alert("Please select at least one row.");
            if (!confirm("Reject selected requests?")) return;

            $.post('{{ route("reject.request.batch") }}', { _token: '{{ csrf_token() }}', ids }, function () {
                alert("Rejected successfully.");
                $('#showLeave').DataTable().ajax.reload();
            }).fail(() => alert("Something went wrong."));
        }

        function onDateSearch() {
            $('#showLeave').DataTable().ajax.reload();
        }

        function onStatusSearch() {
            $('#showLeave').DataTable().ajax.reload();
        }

        function editLeaveRequest(x) {
            let id = $(x).data('panel-id');
            $.post('{{ route("leaveRequest.edit") }}', { _token: '{{ csrf_token() }}', id }, function (data) {
                $('#editModalBody').html(data);
                $('#requestEditModal').modal('show');
            });
        }

        function editReject(x) {
            let id = $(x).data('panel-id');
            $.post('{{ route("reject.edit") }}', { _token: '{{ csrf_token() }}', id }, function (data) {
                $('#editRejectModalBody').html(data);
                $('#rejectEditModal').modal('show');
            });
        }

        function approve(x) {
            let id = $(x).data('panel-id');
            if (!confirm("Approve?")) return;
            $.post('{{ route("approve.request") }}', { _token: '{{ csrf_token() }}', id }, function () {
                $('#showLeave').DataTable().ajax.reload();
            });
        }

        function documentShow(x) {
            let id = $(x).data('panel-id');
            let url = '{{ route("document.show", ":id") }}'.replace(":id", id);
            window.open(url, '_blank');
        }
    </script>
@endsection