@extends('layout.admin')

@section('head')
    @extends('layout.header')
    @section('header_title', 'Leaves')
@endsection

@section('content')
    <style>
        .leaves-shell {
            --leave-sidebar-bg: #fff;
        }

        .leaves-toolbar {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            margin-bottom: 1.25rem;
        }

        .leaves-toolbar .lead {
            color: var(--salon-muted);
            font-size: 0.95rem;
            margin: 0;
            max-width: 52rem;
        }

        .modal-add-leave .modal-content {
            border-radius: var(--salon-radius);
            border: 1px solid var(--salon-border);
            box-shadow: 0 18px 50px rgba(28, 38, 74, 0.18);
        }

        .modal-add-leave .modal-header,
        .modal-edit-leave .modal-header {
            border-bottom: 1px solid var(--salon-border);
        }

        .modal-add-leave .modal-footer,
        .modal-edit-leave .modal-footer {
            border-top: 1px solid var(--salon-border);
        }

        .leaves-table-actions .btn {
            min-width: 2rem;
        }

        .leaves-table-actions {
            white-space: nowrap;
        }

        #example2 thead th {
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.03em;
            color: var(--salon-muted);
            border-bottom-width: 1px;
        }
    </style>

    <div class="content-wrapper">
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>Leaves</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item active">Leaves</li>
                        </ol>
                    </div>
                </div>
            </div>
        </section>

        <section class="content leaves-shell">
            <div class="container-fluid">
                <div class="leaves-toolbar">
                    <p class="lead mb-0">
                        @if (!empty($isAdmin))
                            Record time off for your team. Pending requests appear in the schedule only after they are approved.
                            @if (!empty($canApproveLeave))
                                Use <strong>New leave request</strong> to add a row, then approve or reject from the list.
                            @else
                                You can add requests, but only users assigned under <strong>Settings → Leave settings</strong> can approve or reject.
                            @endif
                        @else
                            Submit your own leave requests here. An administrator will approve or reject them.
                            You can edit or delete pending requests only.
                        @endif
                    </p>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#add_leave_modal">
                        <i class="fas fa-calendar-plus mr-1"></i> New leave request
                    </button>
                </div>

                @if (empty($isAdmin) && isset($leaveBalanceRows) && $leaveBalanceRows->isNotEmpty())
                    <div class="card card-outline card-secondary mb-3">
                        <div class="card-header py-2">
                            <h3 class="card-title mb-0">Leave balance</h3>
                            <span class="text-muted small">Monthly types refresh on the 1st; yearly types on your joining-date anniversary.</span>
                        </div>
                        <div class="card-body py-2">
                            <div class="d-flex flex-wrap align-items-center">
                                @foreach ($leaveBalanceRows as $bal)
                                    @php
                                        $bd = (float) $bal->balance_days;
                                        $bdStr = rtrim(rtrim(number_format($bd, 2, '.', ''), '0'), '.');
                                        if ($bdStr === '') {
                                            $bdStr = '0';
                                        }
                                    @endphp
                                    <span class="badge badge-light border text-dark mr-2 mb-1 px-2 py-1">
                                        {{ $bal->leaveType->name ?? '—' }}:
                                        <strong>{{ $bdStr }}</strong>
                                        d
                                    </span>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endif

                <div class="card card-outline card-primary">
                    <div class="card-header border-0 d-flex flex-wrap align-items-center justify-content-between">
                        <h3 class="card-title mb-0">{{ !empty($isAdmin) ? 'All leave requests' : 'My leave requests' }}</h3>
                        <span class="text-muted small d-none d-md-inline">Sorted by start date in the table below</span>
                    </div>
                    <div class="card-body pt-2">
                        <div class="table-responsive">
                            <table id="example2" class="table table-hover table-striped table-bordered mb-0">
                                <thead class="thead-light">
                                    <tr>
                                        <th style="width: 2.5rem;">#</th>
                                        <th>Employee</th>
                                        <th>Type</th>
                                        <th>Dates</th>
                                        <th>Half day</th>
                                        <th>Description</th>
                                        <th>Status</th>
                                        <th style="min-width: 10rem;">Approver</th>
                                        <th style="min-width: 9rem;">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($leaves as $leave)
                                        @php
                                            $pending = !$leave->approved_at && !$leave->rejected_at;
                                        @endphp
                                        <tr>
                                            <td>{{ $loop->iteration }}</td>
                                            <td class="font-weight-bold">{{ $leave->employee->Full_Name }}</td>
                                            <td>{{ $leave->leave_type }}</td>
                                            <td>
                                                <span class="text-nowrap">{{ $leave->start_date }}</span>
                                                <span class="text-muted">→</span>
                                                <span class="text-nowrap">{{ $leave->end_date }}</span>
                                            </td>
                                            <td>
                                                @if ($leave->half_day == 1 || $leave->half_day === '1')
                                                    <span class="badge badge-info">Half — {{ $leave->half_day_type ?? '—' }}</span>
                                                @else
                                                    <span class="badge badge-secondary">Full day</span>
                                                @endif
                                            </td>
                                            <td>{{ \Illuminate\Support\Str::limit($leave->description, 48) }}</td>
                                            <td>
                                                @if ($leave->approved_at)
                                                    <span class="badge badge-success">Approved</span>
                                                @elseif ($leave->rejected_at)
                                                    <span class="badge badge-danger">Rejected</span>
                                                @else
                                                    <span class="badge badge-warning text-dark">Pending</span>
                                                @endif
                                            </td>
                                            <td>
                                                @if ($pending)
                                                    <span class="text-muted small d-block">Awaiting approval</span>
                                                    <span class="small">{{ $pendingApproverLabel }}</span>
                                                @else
                                                    <strong>{{ optional($leave->user)->Name ?? '—' }}</strong>
                                                @endif
                                            </td>
                                            <td class="leaves-table-actions">
                                                <div class="btn-group btn-group-sm" role="group">
                                                    @if ($pending)
                                                        <button type="button" class="btn btn-outline-primary btn-edit-leave"
                                                            title="Edit"
                                                            data-id="{{ $leave->idLeaves }}"
                                                            data-employee-name="{{ e($leave->employee->Full_Name) }}"
                                                            data-id-employee="{{ $leave->id_employee }}"
                                                            data-leave-type="{{ e($leave->leave_type) }}"
                                                            data-start-date="{{ e($leave->start_date) }}"
                                                            data-end-date="{{ e($leave->end_date) }}"
                                                            data-half-day="{{ $leave->half_day }}"
                                                            data-half-day-type="{{ e($leave->half_day_type ?? '') }}"
                                                            data-description="{{ e($leave->description) }}">
                                                            <i class="fas fa-edit"></i>
                                                        </button>
                                                        <button type="button" class="btn btn-outline-danger"
                                                            title="Delete"
                                                            onclick="delete_leave('{{ $leave->idLeaves }}')">
                                                            <i class="fas fa-trash"></i>
                                                        </button>
                                                    @endif
                                                    @if (!empty($canApproveLeave) && $pending)
                                                        <button type="button" class="btn btn-outline-success"
                                                            title="Approve"
                                                            onclick="approve_leave('{{ $leave->idLeaves }}')">
                                                            <i class="fas fa-check"></i>
                                                        </button>
                                                        <button type="button" class="btn btn-outline-secondary"
                                                            title="Reject"
                                                            onclick="reject_leave('{{ $leave->idLeaves }}')">
                                                            <i class="fas fa-times"></i>
                                                        </button>
                                                    @endif
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="9" class="text-center text-muted py-5">
                                                <i class="far fa-calendar-times fa-2x d-block mb-2 opacity-50"></i>
                                                No leave records yet. Click <strong>New leave request</strong> to add the first one.
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    {{-- Add leave (same field IDs as leaves.js) --}}
    <div class="modal fade modal-add-leave" id="add_leave_modal" tabindex="-1" role="dialog"
        aria-labelledby="add_leave_modal_label" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="add_leave_modal_label">New leave request</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="save_leaves_form">
                    {{ csrf_field() }}
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="id_employee">Employee</label>
                                    @if (!empty($isAdmin))
                                        <select class="form-control" id="id_employee" name="id_employee" required>
                                            <option value="" disabled selected>Select an employee</option>
                                            @foreach ($employee as $employees)
                                                <option value="{{ $employees->idEmployee }}">{{ $employees->Full_Name }}</option>
                                            @endforeach
                                        </select>
                                    @else
                                        <input type="hidden" id="id_employee" name="id_employee" value="{{ session('userid') }}">
                                        <p class="form-control-plaintext border rounded px-3 py-2 mb-0 bg-light">
                                            {{ $employee->first()->Full_Name ?? '—' }}
                                        </p>
                                        <small class="text-muted">This request is for your account only.</small>
                                    @endif
                                    <span style="color:red" class="validation-message small" id="id_employee-validation"></span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="leave_type">Leave type</label>
                                    <select class="form-control" id="leave_type" name="leave_type" required>
                                        <option value="" disabled selected>Select type</option>
                                        @forelse ($leaveTypes ?? [] as $lt)
                                            <option value="{{ $lt->name }}">
                                                {{ $lt->name }}@if ($lt->days_per_year !== null) — {{ $lt->days_per_year }} days/yr @endif
                                            </option>
                                        @empty
                                            <option value="Annual Leaves">Annual Leaves</option>
                                            <option value="Medical Leaves">Medical Leaves</option>
                                            <option value="No Pay Leaves">No Pay Leaves</option>
                                            <option value="Other Leaves">Other Leaves</option>
                                        @endforelse
                                    </select>
                                    <span class="validation-message small text-danger" id="leave_type-validation"></span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="start_date">Start date</label>
                                    <input type="date" name="start_date" class="form-control" id="start_date" required>
                                    <span style="color:red" class="validation-message small" id="start_date-validation"></span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="end_date">End date</label>
                                    <input type="date" name="end_date" class="form-control" id="end_date" required>
                                    <span style="color:red" class="validation-message small" id="end_date-validation"></span>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="custom-control custom-checkbox mb-2">
                                    <input type="checkbox" class="custom-control-input" id="half_day" name="half_day" value="1">
                                    <label class="custom-control-label" for="half_day">Half day only (morning or afternoon)</label>
                                </div>
                                <div id="half_day_options" style="display: none;" class="pl-4 border-left border-primary mb-3">
                                    <div class="form-group mb-0">
                                        <label for="half_day_type">Which half?</label>
                                        <select class="form-control" id="half_day_type" name="half_day_type">
                                            <option value="" disabled selected>Select half day</option>
                                            <option value="Morning">Morning</option>
                                            <option value="Afternoon">Afternoon</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group mb-0">
                                    <label for="description">Description / note</label>
                                    <input type="text" name="description" class="form-control" id="description"
                                        placeholder="Short reason (visible to admins)" required>
                                    <span style="color:red" class="validation-message small" id="description-validation"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save mr-1"></i> Save leave
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade modal-edit-leave" id="update_leave_details" tabindex="-1" role="dialog"
        aria-labelledby="update_leave_modal_label" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="update_leave_modal_label">Edit leave</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="update_leave_form">
                    {{ csrf_field() }}
                    <div class="modal-body">
                        <div class="row">
                            <input type="hidden" id="u_idLeaves" name="u_idLeaves">
                            <input type="hidden" id="u_id_employee" name="u_id_employee">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="u_employee_name">Employee</label>
                                    <input type="text" name="u_employee_name" class="form-control bg-light" id="u_employee_name" readonly>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="u_leave_type">Leave type</label>
                                    <select class="form-control" id="u_leave_type" name="u_leave_type" required>
                                        @if (($leaveTypes ?? collect())->isEmpty())
                                            <option value="Annual Leaves">Annual Leaves</option>
                                            <option value="Medical Leaves">Medical Leaves</option>
                                            <option value="No Pay Leaves">No Pay Leaves</option>
                                            <option value="Other Leaves">Other Leaves</option>
                                        @else
                                            @foreach ($leaveTypes as $lt)
                                                <option value="{{ $lt->name }}">
                                                    {{ $lt->name }}@if ($lt->days_per_year !== null) — {{ $lt->days_per_year }} days/yr @endif
                                                </option>
                                            @endforeach
                                        @endif
                                        @foreach ($legacyLeaveTypeNames ?? [] as $legacy)
                                            <option value="{{ $legacy }}">{{ $legacy }} (legacy)</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="u_half_day_wrap">&nbsp;</label>
                                    <div class="custom-control custom-checkbox pt-2" id="u_half_day_wrap">
                                        <input type="checkbox" class="custom-control-input" id="u_half_day" name="u_half_day" value="1">
                                        <label class="custom-control-label" for="u_half_day">Half day</label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="u_start_date">Start date</label>
                                    <input type="date" name="u_start_date" class="form-control" id="u_start_date" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="u_end_date">End date</label>
                                    <input type="date" name="u_end_date" class="form-control" id="u_end_date" required>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div id="u_half_day_options" style="display: none;" class="pl-4 border-left border-primary mb-3">
                                    <div class="form-group mb-0">
                                        <label for="u_half_day_type">Which half?</label>
                                        <select class="form-control" id="u_half_day_type" name="u_half_day_type">
                                            <option value="" disabled selected>Select half day</option>
                                            <option value="Morning">Morning</option>
                                            <option value="Afternoon">Afternoon</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group mb-0">
                                    <label for="u_description">Description</label>
                                    <input type="text" name="u_description" class="form-control" id="u_description">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save mr-1"></i> Update leave
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="../plugins/jquery/jquery.min.js"></script>
    <script src="../plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="../plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
    <script src="../plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
    <script src="../plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
    <script src="../plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
    <script src="../plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
    <script src="../plugins/jszip/jszip.min.js"></script>
    <script src="../plugins/pdfmake/pdfmake.min.js"></script>
    <script src="../plugins/pdfmake/vfs_fonts.js"></script>
    <script src="../plugins/datatables-buttons/js/buttons.html5.min.js"></script>
    <script src="../plugins/datatables-buttons/js/buttons.print.min.js"></script>
    <script src="../plugins/datatables-buttons/js/buttons.colVis.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="../plugins/select2/js/select2.full.min.js"></script>
    <script src="../plugins/jquery-validation/jquery.validate.min.js"></script>
    <script src="../plugins/jquery-validation/additional-methods.min.js"></script>
    <script src="../dist/js/adminlte.min.js"></script>
    <script src="../dist/js/demo.js"></script>
    <script src="../JS/validate.js"></script>
    <script src="../JS/leaves.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(function() {
            @if ($leaves->count() > 0)
                $('#example2').DataTable({
                    paging: true,
                    lengthChange: true,
                    pageLength: 10,
                    lengthMenu: [10, 25, 50, 100],
                    searching: true,
                    ordering: true,
                    order: [
                        [3, 'desc']
                    ],
                    info: true,
                    autoWidth: false,
                    responsive: true,
                    columnDefs: [{
                            orderable: false,
                            targets: [8]
                        },
                        {
                            responsivePriority: 1,
                            targets: 1
                        },
                        {
                            responsivePriority: 2,
                            targets: 6
                        },
                    ],
                    language: {
                        search: 'Filter:',
                        lengthMenu: 'Show _MENU_ rows',
                        info: 'Showing _START_–_END_ of _TOTAL_',
                        emptyTable: 'No leave records.',
                    },
                });
            @endif

            $('#add_leave_modal').on('shown.bs.modal', function() {
                $('.validation-message').hide();
            });

            $(document).on('click', '.btn-edit-leave', function() {
                var $b = $(this);
                view_leave(
                    $b.attr('data-id'),
                    $b.attr('data-employee-name'),
                    $b.attr('data-id-employee'),
                    $b.attr('data-leave-type'),
                    $b.attr('data-start-date'),
                    $b.attr('data-end-date'),
                    $b.attr('data-half-day'),
                    $b.attr('data-half-day-type'),
                    $b.attr('data-description')
                );
            });
        });
    </script>
@endsection