@extends('employee.layouts.app')
@section('title', get_setting('site_name').' | '.__('Resignation Request'))
@section('content')
    <style>
        .emp-sep-wrap .card {
            border-radius: 14px;
            border: 1px solid #edf0f6;
            box-shadow: 0 0.125rem 0.5rem rgba(15, 23, 42, 0.04);
        }
        .emp-sep-wrap .card-header {
            background: #fff;
            border-bottom: 1px solid #edf0f6;
            font-weight: 700;
            padding: 0.9rem 1.15rem;
        }
        .emp-sep-wrap .card-body.p-2 {
            padding: 0.5rem !important;
        }
        .emp-sep-wrap .card-footer {
            background: #fff;
            border-top: 1px solid #edf0f6;
            padding: 0.75rem 1.15rem;
        }
        .emp-sep-label {
            display: block;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .06em;
            color: rgba(15, 23, 42, .55);
            margin-bottom: 6px;
        }
        .emp-sep-hint {
            font-size: 0.8125rem;
            color: #64748b;
            margin-bottom: 1.25rem;
            padding: 0.85rem 1rem;
            background: #f8fafc;
            border: 1px solid #edf0f6;
            border-radius: 10px;
        }
        .emp-sep-form-section {
            background: #f8fafc;
            border: 1px solid #edf0f6;
            border-radius: 12px;
            padding: 1.15rem;
        }
        .emp-sep-table {
            margin-bottom: 0;
            font-size: 13px;
        }
        .emp-sep-table thead th {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: .06em;
            color: rgba(15, 23, 42, .65);
            border-top: 0;
            white-space: nowrap;
            padding: 0.75rem 0.85rem;
        }
        .emp-sep-table tbody td {
            vertical-align: middle;
            padding: 0.85rem;
        }
        .emp-sep-table .emp-sep-empty {
            padding: 2rem 1rem !important;
            text-align: center;
            color: #64748b;
        }
        .emp-sep-badge {
            display: inline-flex;
            align-items: center;
            padding: 4px 10px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 800;
        }
        .emp-sep-badge.pending { background: rgba(245, 158, 11, .14); color: #b45309; }
        .emp-sep-badge.confirmed { background: rgba(34, 197, 94, .12); color: #166534; }
        .emp-sep-badge.rejected { background: rgba(239, 68, 68, .12); color: #991b1b; }
    </style>

    <div class="container-fluid emp-sep-wrap">
        <div class="row mt-3">
            <div class="col-12 col-xl-10 mx-auto">

                <div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
                    <div>
                        <h4 class="page-title mb-0">{{ __('Resignation request') }}</h4>
                        <p class="text-muted mb-0 small">{{ __('Submit and track your resignation requests with HR.') }}</p>
                    </div>
                </div>

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

                <div class="card mb-3">
                    <div class="card-header">
                        <i class="fas fa-file-signature mr-1 text-muted"></i> {{ __('New request') }}
                    </div>
                    <div class="card-body">
                        <div class="emp-sep-hint mb-3">
                            <i class="fas fa-info-circle mr-1"></i>
                            {{ __('Submit a resignation request. HR will review and confirm. When confirmed, your employee login will be deactivated.') }}
                        </div>

                        @if($canSubmit)
                            <form method="post" action="{{ route('employee.separation.store') }}">
                                @csrf
                                <div class="emp-sep-form-section">
                                    <div class="form-group">
                                        <label class="emp-sep-label" for="reason">{{ __('Reason for resignation') }}</label>
                                        <textarea name="reason"
                                                  id="reason"
                                                  class="form-control @error('reason') is-invalid @enderror"
                                                  rows="4"
                                                  required
                                                  maxlength="2000"
                                                  placeholder="{{ __('Please describe your reason') }}">{{ old('reason') }}</textarea>
                                        @error('reason')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </div>
                                    <div class="form-row">
                                        <div class="form-group col-md-6">
                                            <label class="emp-sep-label" for="last_working_date">{{ __('Proposed last working date') }}</label>
                                            <input type="date"
                                                   name="last_working_date"
                                                   id="last_working_date"
                                                   class="form-control @error('last_working_date') is-invalid @enderror"
                                                   value="{{ old('last_working_date') }}"
                                                   required
                                                   min="{{ date('Y-m-d') }}">
                                            @error('last_working_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                        </div>
                                    </div>
                                    <div class="form-group mb-0">
                                        <label class="emp-sep-label" for="employee_remark">{{ __('Additional note') }} <span class="text-muted font-weight-normal">({{ __('optional') }})</span></label>
                                        <textarea name="employee_remark"
                                                  id="employee_remark"
                                                  class="form-control @error('employee_remark') is-invalid @enderror"
                                                  rows="2"
                                                  maxlength="2000"
                                                  placeholder="{{ __('Any extra information for HR') }}">{{ old('employee_remark') }}</textarea>
                                        @error('employee_remark')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </div>
                                </div>
                                <div class="mt-3">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-paper-plane mr-1"></i> {{ __('Submit request') }}
                                    </button>
                                </div>
                            </form>
                        @else
                            <div class="alert alert-info mb-0">
                                @if((int)(auth()->user()->staff->status ?? 0) !== 1 || (int)(auth()->user()->is_active ?? 0) !== 1)
                                    <i class="fas fa-user-lock mr-1"></i>
                                    {{ __('Your account is not active; you cannot submit a resignation.') }}
                                @else
                                    <i class="fas fa-hourglass-half mr-1"></i>
                                    {{ __('You already have a pending separation request.') }}
                                @endif
                            </div>
                        @endif
                    </div>
                </div>

                <div class="card">
                    <div class="card-header d-flex flex-wrap align-items-center justify-content-between">
                        <span><i class="fas fa-history mr-1 text-muted"></i> {{ __('My requests') }}</span>
                        @if($rows->total() > 0)
                            <span class="badge badge-light text-muted font-weight-normal">{{ $rows->total() }} {{ __('total') }}</span>
                        @endif
                    </div>
                    <div class="card-body p-2">
                        <div class="table-responsive">
                            <table class="table table-hover emp-sep-table">
                                <thead class="thead-light">
                                <tr>
                                    <th>{{ __('Application date') }}</th>
                                    <th>{{ __('Type') }}</th>
                                    <th>{{ __('Last working date') }}</th>
                                    <th class="text-center">{{ __('Status') }}</th>
                                </tr>
                                </thead>
                                <tbody>
                                @forelse($rows as $r)
                                    <tr>
                                        <td class="font-weight-bold" style="font-variant-numeric: tabular-nums;">
                                            {{ $r->application_date?->format('Y-m-d') ?? $r->created_at?->format('Y-m-d') }}
                                        </td>
                                        <td>{{ \App\Models\StaffSeparationRequest::separationTypeLabel($r->separation_type ?? $r->kind) }}</td>
                                        <td style="font-variant-numeric: tabular-nums;">
                                            {{ $r->last_working_date?->format('Y-m-d') ?? '—' }}
                                        </td>
                                        <td class="text-center">
                                            @if($r->status === 'pending')
                                                <span class="emp-sep-badge pending">{{ __('Pending') }}</span>
                                            @elseif($r->status === 'confirmed')
                                                <span class="emp-sep-badge confirmed">{{ __('Confirmed') }}</span>
                                            @else
                                                <span class="emp-sep-badge rejected">{{ __('Rejected') }}</span>
                                            @endif
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" class="emp-sep-empty">{{ __('No resignation requests yet.') }}</td>
                                    </tr>
                                @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                    @if($rows->hasPages())
                        <div class="card-footer">{{ $rows->links() }}</div>
                    @endif
                </div>

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