@extends('admin.layouts.app')
@section('title', get_setting('site_name').' | Leave Types')
@section('content')
    <style>
        .lt-wrap .card { border-radius: 14px; border: 1px solid #edf0f6; box-shadow: 0 0.125rem 0.5rem rgba(15, 23, 42, 0.04); }
        .lt-wrap .card-header { background: #fff; border-bottom: 1px solid #edf0f6; font-weight: 700; }
        .lt-wrap label { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: rgba(15,23,42,.55); }
        .lt-table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: rgba(15,23,42,.65); border-top: 0; white-space: nowrap; }
        .lt-table tbody td { vertical-align: middle; }
        .lt-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; text-transform: capitalize; }
        .lt-badge.paid { background: rgba(34,197,94,.12); color: #166534; }
        .lt-badge.unpaid { background: rgba(239,68,68,.12); color: #991b1b; }
        .lt-group-card { border: 1px solid #edf0f6; border-radius: 12px; margin-bottom: 14px; overflow: hidden; }
        .lt-group-card:last-child { margin-bottom: 0; }
        .lt-group-head { background: #f8fafc; border-bottom: 1px solid #edf0f6; padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
        .lt-group-name { font-weight: 800; color: #0f172a; }
        .lt-group-meta { font-size: 12px; color: #64748b; }
        .lt-group-meta span { display: inline-flex; align-items: center; background: #fff; border: 1px solid #e2e8f0; border-radius: 999px; padding: 2px 10px; margin-right: 6px; }
        .lt-action-btns { display: inline-flex; gap: 4px; }
        .lt-stat { background: #fff; border: 1px solid #edf0f6; border-radius: 10px; padding: 10px 14px; text-align: center; height: 100%; }
        .lt-stat .num { font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
        .lt-stat .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #64748b; }
        .lt-empty { text-align: center; padding: 32px 16px; color: #64748b; }
        .lt-modal .modal-content { border: none; border-radius: 12px; box-shadow: 0 0.5rem 2rem rgba(15, 23, 42, 0.15); }
        .lt-modal .modal-header, .lt-modal .modal-footer { border-color: #edf0f6; }
        .lt-modal-label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: rgba(15,23,42,.55); margin-bottom: 6px; }
    </style>

    <div class="container-fluid lt-wrap">
        <div class="row mt-3">
            <div class="col-12 d-flex flex-wrap justify-content-between align-items-center mb-3">
                <div>
                    <h4 class="page-title mb-0">Leave Setup</h4>
                    <p class="text-muted mb-0">Manage leave groups and configure leave types with annual quotas.</p>
                </div>
            </div>

            @if (session()->has('message'))
                <div class="col-12"><div class="alert alert-success">{{ session('message') }}</div></div>
            @endif
            @if (session()->has('error'))
                <div class="col-12"><div class="alert alert-danger">{{ session('error') }}</div></div>
            @endif

            <div class="col-12 mb-3">
                <div class="form-row">
                    <div class="col-6 col-md-3 mb-2">
                        <div class="lt-stat">
                            <div class="num text-primary">{{ $leave_groups->count() }}</div>
                            <div class="lbl">Leave Groups</div>
                        </div>
                    </div>
                    <div class="col-6 col-md-3 mb-2">
                        <div class="lt-stat">
                            <div class="num text-success">{{ $totalTypes }}</div>
                            <div class="lbl">Leave Types</div>
                        </div>
                    </div>
                    <div class="col-6 col-md-3 mb-2">
                        <div class="lt-stat">
                            <div class="num text-info">{{ $leave_groups->sum('staff_count') }}</div>
                            <div class="lbl">Assigned Staff</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 mb-3">
                <div class="card h-100">
                    <div class="card-header d-flex flex-wrap align-items-center justify-content-between">
                        <span>Leave Groups</span>
                        @can('Leave-setup')
                            <button type="button" class="btn btn-sm btn-primary" onclick="leave_group_add()">
                                <i class="las la-plus"></i> Add Group
                            </button>
                        @endcan
                    </div>
                    <div class="card-body table-responsive p-0">
                        <table class="table table-hover lt-table mb-0">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Types</th>
                                    <th class="text-right">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($leave_groups as $key => $group)
                                    <tr>
                                        <td>{{ $key + 1 }}</td>
                                        <td class="font-weight-bold">{{ $group->name }}</td>
                                        <td>
                                            <span class="lt-group-meta">
                                                <span>{{ $group->leave_types_count }} types</span>
                                                <span>{{ $group->staff_count }} staff</span>
                                            </span>
                                        </td>
                                        <td class="text-right">
                                            <div class="lt-action-btns">
                                                @can('Leave-setup')
                                                    <button type="button" class="btn btn-sm btn-light js-edit-group"
                                                            data-id="{{ $group->id }}"
                                                            data-name="{{ $group->name }}"
                                                            title="Edit"><i class="fas fa-edit"></i></button>
                                                @endcan
                                                @can('Leave-delete')
                                                    <a class="btn btn-sm btn-danger delete_modal"
                                                       data-href="{{ route('leave_group.destroy', $group->id) }}"
                                                       href="javascript:void(0)" title="Delete"><i class="fas fa-trash"></i></a>
                                                @endcan
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" class="lt-empty">No leave groups yet.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="col-lg-8 mb-3">
                <div class="card h-100">
                    <div class="card-header d-flex flex-wrap align-items-center justify-content-between">
                        <span>Leave Types by Group</span>
                        @can('Leave-setup')
                            <button type="button" class="btn btn-sm btn-primary" onclick="leave_type_add()">
                                <i class="las la-plus"></i> Add Type
                            </button>
                        @endcan
                    </div>
                    <div class="card-body">
                        @forelse($leave_groups as $group)
                            <div class="lt-group-card">
                                <div class="lt-group-head">
                                    <div>
                                        <div class="lt-group-name">{{ $group->name }}</div>
                                        <div class="lt-group-meta mt-1">
                                            <span>{{ $group->leave_types_count }} types</span>
                                            <span>{{ $group->staff_count }} staff assigned</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="table-responsive">
                                    <table class="table table-hover lt-table mb-0">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>Name</th>
                                                <th>Days / Year</th>
                                                <th>Category</th>
                                                <th>Used</th>
                                                <th class="text-right">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse($group->leaveTypes as $index => $leaveType)
                                                <tr>
                                                    <td>{{ $index + 1 }}</td>
                                                    <td class="font-weight-bold">{{ $leaveType->name }}</td>
                                                    <td>{{ $leaveType->day }}</td>
                                                    <td>
                                                        <span class="lt-badge {{ $leaveType->type === 'paid' ? 'paid' : 'unpaid' }}">
                                                            {{ $leaveType->type }}
                                                        </span>
                                                    </td>
                                                    <td>{{ $leaveType->leaves_count }}</td>
                                                    <td class="text-right">
                                                        <div class="lt-action-btns">
                                                            @can('Leave-setup')
                                                                <button type="button" class="btn btn-sm btn-light js-edit-type"
                                                                        data-id="{{ $leaveType->id }}"
                                                                        data-name="{{ $leaveType->name }}"
                                                                        data-day="{{ $leaveType->day }}"
                                                                        data-type="{{ $leaveType->type }}"
                                                                        data-group-id="{{ $leaveType->group_id }}"
                                                                        title="Edit"><i class="fas fa-edit"></i></button>
                                                            @endcan
                                                            @can('Leave-delete')
                                                                <a class="btn btn-sm btn-danger delete_modal"
                                                                   data-href="{{ route('leave_type.destroy', $leaveType->id) }}"
                                                                   href="javascript:void(0)" title="Delete"><i class="fas fa-trash"></i></a>
                                                            @endcan
                                                        </div>
                                                    </td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="6" class="text-center text-muted py-3">No leave types in this group.</td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        @empty
                            <div class="lt-empty">Create a leave group first, then add leave types.</div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('modal')
    @include('modals.delete_modal')

    <div class="modal fade lt-modal" id="leave_type_modal">
        <form action="{{ route('leave_type.store') }}" method="POST">
            @csrf
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{ __('Add Leave Type') }}</h5>
                        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="lt-modal-label">Leave Group</label>
                            <select class="form-control" name="group_id" required>
                                <option value="">Select Leave Group</option>
                                @foreach($leave_groups as $group)
                                    <option value="{{ $group->id }}">{{ $group->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="lt-modal-label">Leave Type Name</label>
                            <input class="form-control" type="text" name="name" placeholder="e.g. Casual Leave" required>
                        </div>
                        <div class="form-group">
                            <label class="lt-modal-label">Days Per Year</label>
                            <input class="form-control" type="number" min="0" step="0.5" name="day" placeholder="e.g. 10" required>
                        </div>
                        <div class="form-group mb-0">
                            <label class="lt-modal-label">Category</label>
                            <select class="form-control" name="leave_type" required>
                                <option value="">{{ __('Select Leave Type') }}</option>
                                <option value="paid">{{ __('Paid') }}</option>
                                <option value="unpaid">{{ __('Unpaid') }}</option>
                            </select>
                        </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">{{ __('Save') }}</button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <div class="modal fade lt-modal" id="leave_type_modal_update">
        <form action="{{ route('leave_type.update') }}" method="POST">
            @csrf
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{ __('Update Leave Type') }}</h5>
                        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" name="id" id="id">
                        <div class="form-group">
                            <label class="lt-modal-label">Leave Group</label>
                            <select class="form-control" name="group_id" id="group_id" required>
                                <option value="">Select Leave Group</option>
                                @foreach($leave_groups as $group)
                                    <option value="{{ $group->id }}">{{ $group->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="lt-modal-label">Leave Type Name</label>
                            <input class="form-control" type="text" id="name" name="name" required>
                        </div>
                        <div class="form-group">
                            <label class="lt-modal-label">Days Per Year</label>
                            <input class="form-control" type="number" min="0" step="0.5" name="day" id="day" required>
                        </div>
                        <div class="form-group mb-0">
                            <label class="lt-modal-label">Category</label>
                            <select class="form-control" name="leave_type" id="leave_type" required>
                                <option value="">{{ __('Select Leave Type') }}</option>
                                <option value="paid">{{ __('Paid') }}</option>
                                <option value="unpaid">{{ __('Unpaid') }}</option>
                            </select>
                        </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">{{ __('Update') }}</button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <div class="modal fade lt-modal" id="leave_group_modal">
        <form action="{{ route('leave_group.store') }}" method="POST">
            @csrf
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{ __('Add Leave Group') }}</h5>
                        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group mb-0">
                            <label class="lt-modal-label">Leave Group Name</label>
                            <input class="form-control" type="text" name="name" placeholder="e.g. General Staff" required>
                        </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">{{ __('Save') }}</button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <div class="modal fade lt-modal" id="leave_group_update_modal">
        <form action="{{ route('leave_group.update') }}" method="POST">
            @csrf
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{ __('Update Leave Group') }}</h5>
                        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" name="leave_group_id" id="leave_group_id">
                        <div class="form-group mb-0">
                            <label class="lt-modal-label">Leave Group Name</label>
                            <input class="form-control" type="text" id="leave_group_name" name="name" required>
                        </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">{{ __('Update') }}</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@section('script')
    <script>
        function leave_type_add() {
            $('#leave_type_modal').modal('show');
        }

        function leave_group_add() {
            $('#leave_group_modal').modal('show');
        }

        $(document).on('click', '.js-edit-type', function () {
            var $btn = $(this);
            $('#id').val($btn.data('id'));
            $('#name').val($btn.data('name'));
            $('#day').val($btn.data('day'));
            $('#leave_type').val($btn.data('type'));
            $('#group_id').val($btn.data('group-id'));
            $('#leave_type_modal_update').modal('show');
        });

        $(document).on('click', '.js-edit-group', function () {
            var $btn = $(this);
            $('#leave_group_id').val($btn.data('id'));
            $('#leave_group_name').val($btn.data('name'));
            $('#leave_group_update_modal').modal('show');
        });
    </script>
@endsection