@extends('layouts.template.main')

@section('content')
    <main>
        <header class="page-header page-header-compact page-header-light border-bottom bg-white mb-4">
            <div class="container-xl px-4">
                <div class="page-header-content">
                    <div class="row align-items-center justify-content-between pt-3">
                        <div class="col-auto mb-3">
                            <h1 class="page-header-title">
                                <div class="page-header-icon">
                                    <i data-feather="file-text"></i>
                                </div>
                                Danh sách đơn xin nghỉ phép/đi làm muộn
                            </h1>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <!-- Main page content-->
        <div class="container-xl px-4 mt-4">
            <div class="row">
                <div class="col-xl-12">
                    <div class="card mb-4">
                        <div class="card-header">Xem tất cả đơn xin nghỉ phép/đi làm muộn</div>
                        <div class="card-body">

                            @if(session('success'))
                                <div class="alert alert-success" role="alert">
                                    {{ session('success') }}
                                </div>
                            @endif

                            <div class="mb-4">
                                <!-- Action Buttons -->
                                <div class="d-flex gap-2 mb-3">
                                    <a href="{{ route('leave_notices.create') }}" class="btn btn-primary">
                                        <i data-feather="plus" class="me-1"></i> Tạo đơn mới
                                    </a>
                                </div>

                                <!-- Filters -->
                                <div class="card bg-light mb-4">
                                    <div class="card-body">
                                        <form method="GET" action="{{ route('leave_notices.index') }}" id="filterForm">
                                            <div class="row g-3">
                                                <div class="col-md-3">
                                                    <label class="form-label">Tháng</label>
                                                    <input type="month" name="month" class="form-control" value="{{ request('month', now()->format('Y-m')) }}" onchange="this.form.submit()">
                                                </div>
                                                
                                                @if (auth()->user()->hasRole(['admin', 'hr']))
                                                    <div class="col-md-3">
                                                        <label class="form-label">Nhân viên</label>
                                                        <select name="employee_id" class="form-select" onchange="this.form.submit()">
                                                            <option value="">-- Tất cả nhân viên --</option>
                                                            @foreach($employees as $emp)
                                                                <option value="{{ $emp->id }}" {{ request('employee_id') == $emp->id ? 'selected' : '' }}>
                                                                    {{ $emp->name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                @endif

                                                <div class="col-md-3">
                                                    <label class="form-label">Trạng thái</label>
                                                    <select name="status" class="form-select" onchange="this.form.submit()">
                                                        <option value="">-- Tất cả trạng thái --</option>
                                                        <option value="Pending" {{ request('status') == 'Pending' ? 'selected' : '' }}>Đang chờ duyệt</option>
                                                        <option value="Approved" {{ request('status') == 'Approved' ? 'selected' : '' }}>Đã duyệt</option>
                                                        <option value="Rejected" {{ request('status') == 'Rejected' ? 'selected' : '' }}>Từ chối</option>
                                                    </select>
                                                </div>
                                                
                                                <div class="col-md-3 d-flex align-items-end gap-2">
                                                    <button type="submit" class="btn btn-primary w-100">
                                                        <i data-feather="filter" class="me-1"></i> Lọc
                                                    </button>
                                                    <a href="{{ route('leave_notices.index') }}" class="btn btn-secondary w-100">
                                                        <i data-feather="x" class="me-1"></i> Xóa lọc
                                                    </a>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>

                            <div class="table-responsive">
                                <table class="table table-striped table-hover table-bordered">
                                    <thead class="table-light">
                                        <tr>
                                            <th>Nhân viên</th>
                                            <th>Từ ngày</th>
                                            <th>Đến ngày</th>
                                            <th>Loại đơn</th>
                                            <th class="text-center">Trạng thái</th>
                                            <th class="text-center">Thao tác</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($leaves as $leave)
                                            <tr>
                                                <td>{{ $leave->employee->name ?? 'N/A' }}</td>
                                                <td>{{ \Carbon\Carbon::parse($leave->start_date)->format('d/m/Y') }}</td>
                                                <td>{{ \Carbon\Carbon::parse($leave->end_date)->format('d/m/Y') }}</td>
                                                <td>
                                                    {{ $leave->leave_type_name ?? $leave->leave_type }}
                                                    @if($leave->is_half_day)
                                                        <span class="badge bg-info-soft text-info">Nửa ngày</span>
                                                    @endif
                                                </td>
                                                <td>
                                                @if(auth()->user()->hasRole('admin') || auth()->user()->hasRole('hr'))
                                                    <select class="form-select form-select-sm status-select" data-id="{{ $leave->id }}" style="min-width: 120px;">
                                                        <option value="Pending" {{ $leave->status == 'Pending' ? 'selected' : '' }}>Đang chờ</option>
                                                        <option value="Approved" {{ $leave->status == 'Approved' ? 'selected' : '' }}>Đã duyệt</option>
                                                        <option value="Rejected" {{ $leave->status == 'Rejected' ? 'selected' : '' }}>Từ chối</option>
                                                    </select>
                                                @else
                                                    @if ($leave->status == 'Approved')
                                                        <span class="badge bg-success-soft text-success">Đã duyệt</span>
                                                    @elseif($leave->status == 'Pending')
                                                        <span class="badge bg-warning-soft text-warning">Đang chờ</span>
                                                    @else
                                                        <span class="badge bg-danger-soft text-danger">Từ chối</span>
                                                    @endif
                                                @endif
                                            </td>
                                                <td class="text-center">
                                                    <div class="d-flex justify-content-center gap-1">
                                                        <a href="{{ route('leave_notices.show', array_merge(['leave_notice' => $leave->id], request()->query())) }}"
                                                           class="btn btn-datatable btn-icon btn-transparent-dark"
                                                           title="Xem chi tiết">
                                                            <i data-feather="eye"></i>
                                                        </a>

                                                            <form action="{{ route('leave_notices.destroy', array_merge(['leave_notice' => $leave->id], request()->query())) }}"
                                                                  method="POST" class="d-inline"
                                                                  onsubmit="return confirm('Bạn có chắc chắn muốn xóa đơn này?')">
                                                                @csrf
                                                                @method('DELETE')
                                                                <button type="submit"
                                                                        class="btn btn-datatable btn-icon btn-transparent-dark"
                                                                        title="Xóa đơn">
                                                                    <i data-feather="trash-2"></i>
                                                                </button>
                                                            </form>
                                                    </div>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="6" class="text-center py-4 text-muted">Không tìm thấy đơn nào.</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>

                            <div class="mt-3">
                                {{ $leaves->links() }}
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
@push('scripts')
<script>
    $(document).ready(function() {
        $('.status-select').on('change', function() {
            var id = $(this).data('id');
            var status = $(this).val();
            var select = $(this);

            // Disable select during request
            select.prop('disabled', true);

            $.ajax({
                url: "{{ route('leave_notices.quick_update') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    id: id,
                    status: status
                },
                success: function(response) {
                    select.prop('disabled', false);
                    if(response.success) {
                        // Optional: Toast message
                        alert(response.message);
                    } else {
                        alert(response.message || 'Có lỗi xảy ra.');
                    }
                },
                error: function(xhr) {
                    select.prop('disabled', false);
                    var msg = 'Có lỗi xảy ra khi cập nhật.';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        msg = xhr.responseJSON.message;
                    }
                    alert(msg);
                }
            });
        });
    });
</script>
@endpush
@endsection