@extends('admin.layouts.app')
@section('title', get_setting('site_name').' | Leave Adjustment')
@section('content')
    <style>
        .la-wrap .card { border-radius: 14px; border: 1px solid #edf0f6; box-shadow: 0 0.125rem 0.5rem rgba(15, 23, 42, 0.04); }
        .la-wrap .card-header { background: #fff; border-bottom: 1px solid #edf0f6; font-weight: 700; }
        .la-wrap label { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: rgba(15,23,42,.55); }
        .la-picker { background: #f8fafc; border: 1px solid #edf0f6; border-radius: 12px; padding: 16px; }
        .la-picker .select2-container { width: 100% !important; }
        .la-picker .select2-selection__rendered { line-height: 31px !important; }
        .la-picker .select2-container .select2-selection--single { height: 38px !important; }
        .la-picker .select2-selection__arrow { height: 36px !important; }
        .la-staff-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #f8fafc; border: 1px solid #edf0f6; border-radius: 12px; margin-bottom: 16px; }
        .la-staff-name { font-weight: 700; font-size: 1.05rem; color: #0f172a; }
        .la-staff-meta { font-size: 13px; color: #64748b; }
        .la-table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: rgba(15,23,42,.65); border-top: 0; white-space: nowrap; }
        .la-table tbody td { vertical-align: middle; }
        .la-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; }
        .la-badge.ok { background: rgba(34,197,94,.12); color: #166534; }
        .la-badge.warn { background: rgba(245,158,11,.12); color: #b45309; }
        .la-badge.danger { background: rgba(239,68,68,.12); color: #991b1b; }
        .la-badge.paid { background: rgba(34,197,94,.12); color: #166534; }
        .la-badge.unpaid { background: rgba(239,68,68,.12); color: #991b1b; }
        .la-empty { text-align: center; padding: 40px 16px; color: #64748b; }
        .la-empty i { font-size: 2.2rem; opacity: .35; display: block; margin-bottom: 10px; }
        .la-modal .modal-content { border: none; border-radius: 12px; box-shadow: 0 0.5rem 2rem rgba(15, 23, 42, 0.15); }
        .la-modal .modal-header, .la-modal .modal-footer { border-color: #edf0f6; }
        .la-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; }
        .la-remarks { max-width: 280px; white-space: normal; word-break: break-word; font-size: 13px; }
    </style>

    <div class="container-fluid la-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 Adjustment</h4>
                    <p class="text-muted mb-0">Adjust leave balance for employees and review adjustment history.</p>
                </div>
                @if($staff_info)
                    <button type="button" class="btn btn-primary" onclick="leave_adjustment_add()">
                        <i class="las la-plus"></i> Add Adjustment
                    </button>
                @endif
            </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="card">
                    <div class="card-header">Select Employee</div>
                    <div class="card-body la-picker">
                        <form id="get_employee_form" action="" method="get">
                            <div class="form-row align-items-end">
                                <div class="form-group col-md-8 col-lg-6 mb-md-0">
                                    <label>Employee</label>
                                    <select id="get_employee" class="form-control select2" name="staff_id" data-placeholder="Select employee">
                                        <option value="">Select employee</option>
                                        @foreach($staff_details as $staff)
                                            <option value="{{ $staff->id }}" @selected(request('staff_id') == $staff->id)>
                                                {{ $staff->user?->name ?? 'Staff #'.$staff->id }}({{ $staff->user_id }})-{{ $staff->designation?->name ?? 'No Designation' }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group col-md-4 col-lg-2 mb-0">
                                    <a href="{{ route('leave.adjustment') }}" class="btn btn-outline-secondary btn-block">Clear</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            @if($staff_info)
                <div class="col-12 mb-3">
                    <div class="la-staff-card">
                        <div>
                            <div class="la-staff-name">{{ $staff_info->user?->name ?? '—' }}</div>
                            <div class="la-staff-meta">
                                ID: {{ $staff_info->user_id ?? '—' }}
                                · {{ $staff_info->designation?->name ?? 'No Designation' }}
                                · {{ $staff_info->warehouse?->name ?? 'No Branch' }}
                            </div>
                            <div class="la-staff-meta">Leave summary for {{ $currentYear }}</div>
                        </div>
                    </div>
                </div>

                <div class="col-12 mb-3">
                    <div class="card">
                        <div class="card-header">Leave Summary — {{ $currentYear }}</div>
                        <div class="card-body table-responsive p-0">
                            <table class="table table-hover la-table mb-0">
                                <thead>
                                    <tr>
                                        <th>Leave Type</th>
                                        <th>Category</th>
                                        <th>Allowed</th>
                                        <th>Taken</th>
                                        <th>Remaining</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($leaveSummary as $row)
                                        <tr>
                                            <td class="font-weight-bold">{{ $row['name'] }}</td>
                                            <td>
                                                <span class="la-badge {{ ($row['type'] ?? '') === 'paid' ? 'paid' : 'unpaid' }}">{{ $row['type'] ?? '—' }}</span>
                                            </td>
                                            <td>{{ number_format($row['allowed'], 1) }}</td>
                                            <td>{{ number_format($row['taken'], 1) }}</td>
                                            <td>
                                                @php $remaining = (float) $row['remaining']; @endphp
                                                <span class="la-badge @if($remaining > 0) ok @elseif($remaining == 0) warn @else danger @endif">
                                                    {{ number_format($remaining, 1) }}
                                                </span>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="5" class="text-center text-muted py-4">No leave types configured for this employee's group.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="col-12">
                    <div class="card">
                        <div class="card-header d-flex flex-wrap align-items-center justify-content-between">
                            <span>Adjustment History — {{ $currentYear }}</span>
                            @if($leave_adjustment_history)
                                <span class="small text-muted">{{ $leave_adjustment_history->total() }} record(s)</span>
                            @endif
                        </div>
                        <div class="card-body table-responsive p-0">
                            <table class="table table-hover la-table mb-0">
                                <thead>
                                    <tr>
                                        <th>Date</th>
                                        <th>Leave Type</th>
                                        <th>Adjustment</th>
                                        <th>Remarks</th>
                                        <th class="text-center">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($leave_adjustment_history as $history)
                                        <tr>
                                            <td>{{ $history->created_at?->format('d M Y') }}</td>
                                            <td>{{ $history->leave_type?->name ?? '—' }}</td>
                                            <td>
                                                <span class="font-weight-bold @if((float) $history->balance >= 0) text-success @else text-danger @endif">
                                                    {{ (float) $history->balance >= 0 ? '+' : '' }}{{ $history->balance }}
                                                </span>
                                            </td>
                                            <td class="la-remarks">{{ $history->remarks ?: '—' }}</td>
                                            <td class="text-center">
                                                @can('Leave-delete')
                                                    <a class="btn btn-sm btn-danger delete_modal"
                                                       href="javascript:void(0)"
                                                       data-href="{{ route('leave.adjustment.destroy', $history->id) }}"
                                                       title="Delete"><i class="fas fa-trash"></i></a>
                                                @endcan
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="5" class="text-center text-muted py-4">No adjustments recorded for {{ $currentYear }}.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                        @if($leave_adjustment_history && $leave_adjustment_history->hasPages())
                            <div class="card-footer">{{ $leave_adjustment_history->links() }}</div>
                        @endif
                    </div>
                </div>
            @else
                <div class="col-12">
                    <div class="card">
                        <div class="card-body la-empty">
                            <i class="mdi mdi-account-search"></i>
                            <h5 class="mb-1">Select an employee</h5>
                            <p class="mb-0">Choose an employee above to view leave summary and adjustment history.</p>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>
@endsection

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

    @if($staff_info && $leave_details)
        <div class="modal fade la-modal" id="leave_adjustment_modal">
            <form action="{{ route('leave.adjustment.store') }}" method="POST">
                @csrf
                <input type="hidden" name="staff_id" value="{{ $staff_info->id }}">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">{{ __('Leave Adjustment') }}</h5>
                            <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                        </div>
                        <div class="modal-body">
                            <div class="form-group">
                                <label class="la-modal-label">{{ __('Employee') }}</label>
                                <input type="text" class="form-control bg-light" readonly
                                       value="{{ $staff_info->user?->name ?? '—' }}({{ $staff_info->user_id }})">
                            </div>
                            <div class="form-group">
                                <label class="la-modal-label">{{ __('Leave year') }}</label>
                                <select name="leave_year" class="form-control select2" required>
                                    @for($i = 2024; $i <= date('Y') + 1; $i++)
                                        <option value="{{ $i }}" @selected($i == $currentYear)>{{ $i }}</option>
                                    @endfor
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="la-modal-label">{{ __('Leave type') }}</label>
                                <select name="leave_type_id" class="form-control select2" required>
                                    <option value="">{{ __('Select leave type') }}</option>
                                    @foreach($leave_details as $leave_type)
                                        <option value="{{ $leave_type->id }}">{{ $leave_type->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="la-modal-label">{{ __('Adjustment balance') }}</label>
                                <input class="form-control" type="number" step="0.5" name="leave_balance"
                                       placeholder="e.g. 2 or -1" required>
                                <small class="text-muted">Use positive to add days, negative to deduct.</small>
                            </div>
                            <div class="form-group mb-0">
                                <label class="la-modal-label">{{ __('Remarks') }}</label>
                                <textarea name="reason" rows="4" class="form-control" placeholder="{{ __('Reason for adjustment') }}" required></textarea>
                            </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>
    @endif
@endsection

@section('script')
    <script>
        $(document).ready(function () {
            $('#get_employee').select2({ width: '100%', placeholder: 'Select employee' });

            $('#get_employee').on('change', function () {
                $('#get_employee_form').submit();
            });
        });

        function leave_adjustment_add() {
            if (!$('#leave_adjustment_modal').length) {
                alert(@json(__('Please select an employee first.')));
                return;
            }
            $('#leave_adjustment_modal').modal('show');
            setTimeout(function () {
                $('#leave_adjustment_modal select.select2').select2({ width: '100%', dropdownParent: $('#leave_adjustment_modal') });
            }, 150);
        }
    </script>
@endsection