@extends('layouts.app')

@push('head')
<style>
    .cuti-shell {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 32px;
        padding: 40px 40px 34px;
        border-radius: 30px;
        background: linear-gradient(150deg, rgba(12, 24, 52, 0.95), rgba(7, 15, 36, 0.88));
        border: 1px solid rgba(148, 163, 184, 0.22);
        box-shadow: 0 34px 64px rgba(3, 7, 18, 0.56);
        overflow: hidden;
    }
    .cuti-shell::before,
    .cuti-shell::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
    }
    .cuti-shell::before {
        background:
            radial-gradient(circle at 12% 18%, rgba(59, 130, 246, 0.28), transparent 56%),
            radial-gradient(circle at 82% -6%, rgba(14, 165, 233, 0.34), transparent 60%);
        opacity: 0.84;
    }
    .cuti-shell::after {
        background: linear-gradient(150deg, transparent 40%, rgba(129, 140, 248, 0.16));
        opacity: 0.7;
    }
    .cuti-shell > * { position: relative; z-index: 1; }

    .cuti-hero {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 24px;
        flex-wrap: wrap;
    }
    .cuti-hero__info {
        display: flex;
        flex-direction: column;
        gap: 12px;
        max-width: 560px;
    }
    .cuti-hero__tagline {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 14px;
        border-radius: 999px;
        background: rgba(129, 140, 248, 0.2);
        border: 1px solid rgba(129, 140, 248, 0.4);
        color: #e0e7ff;
        font-size: 12px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        font-weight: 600;
    }
    .cuti-hero__info h2 {
        margin: 0;
        font-size: 32px;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: #f8fafc;
    }
    .cuti-hero__info p {
        margin: 0;
        color: rgba(226, 232, 240, 0.78);
        font-size: 15px;
        line-height: 1.6;
    }
    .cuti-hero__meta {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: flex-end;
        min-width: 240px;
    }
    .cuti-hero__chip {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        border-radius: 14px;
        background: rgba(37, 99, 235, 0.18);
        border: 1px solid rgba(37, 99, 235, 0.38);
        color: #bfdbfe;
        font-size: 12px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        font-weight: 600;
    }
    .cuti-hero__meta-text {
        color: rgba(148, 163, 184, 0.82);
        font-size: 12px;
    }

    .cuti-alert {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 14px 16px;
        border-radius: 16px;
        border: 1px solid transparent;
        background: rgba(15, 23, 42, 0.72);
        font-size: 13px;
    }
    .cuti-alert--success { background: rgba(34, 197, 94, 0.14); border-color: rgba(34, 197, 94, 0.38); color: #bbf7d0; }
    .cuti-alert--error { background: rgba(248, 113, 113, 0.16); border-color: rgba(248, 113, 113, 0.4); color: #fecaca; }
    .cuti-alert__title {
        margin: 0;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }
    .cuti-alert__list {
        margin: 0 0 0 18px;
        padding: 0;
    }

    .cuti-form {
        display: flex;
        flex-direction: column;
        gap: 22px;
    }
    .cuti-form-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 18px 24px;
        align-items: stretch;
    }
    .cuti-field {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .cuti-label {
        font-size: 13px;
        font-weight: 600;
        color: #dbeafe;
        letter-spacing: 0.02em;
    }
    .cuti-input,
    .cuti-select,
    .cuti-textarea {
        background: rgba(2, 6, 23, 0.92);
        border: 1px solid rgba(148, 163, 184, 0.28);
        border-radius: 14px;
        padding: 11px 14px;
        color: #e2e8f0;
        font-size: 14px;
        transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
        box-shadow: inset 0 1px 0 rgba(148, 163, 184, 0.12);
    }
    .cuti-textarea {
        resize: vertical;
        min-height: 96px;
        line-height: 1.55;
    }
    .cuti-input::placeholder,
    .cuti-textarea::placeholder {
        color: rgba(148, 163, 184, 0.68);
    }
    .cuti-input:focus,
    .cuti-select:focus,
    .cuti-textarea:focus {
        outline: none;
        border-color: rgba(56, 189, 248, 0.6);
        box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.22);
        background: rgba(2, 6, 23, 0.96);
        transform: translateY(-1px);
    }

    .cuti-form-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
    }
    .cuti-tip {
        color: rgba(148, 163, 184, 0.84);
        font-size: 12px;
        letter-spacing: 0.04em;
    }
    .cuti-submit {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: linear-gradient(135deg, #2563eb, #1d4ed8);
        color: #f8fafc;
        border: none;
        padding: 12px 28px;
        border-radius: 16px;
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        box-shadow: 0 22px 36px rgba(37, 99, 235, 0.34);
        cursor: pointer;
        transition: transform 0.18s ease, box-shadow 0.18s ease;
    }
    .cuti-submit:hover {
        transform: translateY(-2px);
        box-shadow: 0 26px 42px rgba(37, 99, 235, 0.4);
    }

    .cuti-summary {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 16px;
    }
    .cuti-summary__card {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 18px 20px;
        border-radius: 18px;
        background: rgba(8, 16, 36, 0.8);
        border: 1px solid rgba(129, 140, 248, 0.3);
        box-shadow: 0 18px 30px rgba(4, 12, 28, 0.4);
        overflow: hidden;
    }
    .cuti-summary__card::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 80% 18%, rgba(59, 130, 246, 0.2), transparent 52%);
        opacity: 0.7;
        pointer-events: none;
    }
    .cuti-summary__card > * { position: relative; z-index: 1; }
    .cuti-summary__label {
        font-size: 12px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(203, 213, 225, 0.72);
        font-weight: 600;
    }
    .cuti-summary__value {
        font-size: 28px;
        font-weight: 700;
        color: #f8fafc;
        letter-spacing: -0.02em;
    }
    .cuti-summary__meta {
        font-size: 12px;
        color: rgba(148, 163, 184, 0.78);
    }

    .cuti-history-section {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }
    .cuti-history-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
    }
    .cuti-history-head h3 {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        letter-spacing: -0.01em;
        color: #f8fafc;
    }
    .cuti-history-head p {
        margin: 0;
        color: rgba(148, 163, 184, 0.76);
        font-size: 13px;
    }

    .cuti-table-shell {
        border-radius: 24px;
        border: 1px solid rgba(148, 163, 184, 0.22);
        background: rgba(7, 15, 32, 0.84);
        box-shadow: 0 24px 44px rgba(4, 10, 26, 0.5);
        overflow: hidden;
    }
    .cuti-table-scroll {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .cuti-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 10px;
        min-width: 820px;
    }
    .cuti-table thead th {
        background: rgba(10, 20, 44, 0.9);
        color: #e2e8f0;
        font-weight: 600;
        text-align: left;
        padding: 14px 18px;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        font-size: 13px;
        border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    }
    .cuti-table tbody tr {
        background: rgba(9, 18, 38, 0.86);
        border: 1px solid rgba(148, 163, 184, 0.16);
        border-radius: 16px;
        box-shadow: 0 18px 34px rgba(7, 16, 32, 0.3);
        transition: transform 0.18s ease, box-shadow 0.18s ease;
    }
    .cuti-table tbody tr:hover {
        transform: translateY(-2px);
        box-shadow: 0 24px 40px rgba(14, 65, 120, 0.32);
        border-color: rgba(96, 165, 250, 0.32);
    }
    .cuti-table tbody td {
        padding: 14px 18px;
        color: #f1f5f9;
        vertical-align: top;
    }

    .cuti-status {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 6px 12px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        border: 1px solid transparent;
        width: fit-content;
    }
    .cuti-status--pending { background: rgba(251, 191, 36, 0.18); color: #facc15; border-color: rgba(251, 191, 36, 0.36); }
    .cuti-status--rejected { background: rgba(248, 113, 113, 0.18); color: #fecaca; border-color: rgba(248, 113, 113, 0.38); }
    .cuti-status--approved { background: rgba(34, 197, 94, 0.18); color: #86efac; border-color: rgba(34, 197, 94, 0.32); }

    .cuti-empty {
        padding: 18px;
        text-align: center;
        color: rgba(148, 163, 184, 0.78);
        font-weight: 600;
    }

    @media (max-width: 960px) {
        .cuti-shell {
            padding: 34px 28px;
        }
        .cuti-table {
            min-width: 720px;
        }
    }
    @media (max-width: 768px) {
        .cuti-shell {
            padding: 28px 24px;
            border-radius: 26px;
        }
        .cuti-hero__meta {
            align-items: flex-start;
        }
        .cuti-form-actions {
            flex-direction: column;
            align-items: flex-start;
        }
        .cuti-submit {
            width: 100%;
            justify-content: center;
        }
        .cuti-table {
            border-spacing: 0;
            min-width: 0;
        }
        .cuti-table thead {
            display: none;
        }
        .cuti-table tbody {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        .cuti-table tbody tr {
            display: flex;
            flex-direction: column;
            padding: 16px;
        }
        .cuti-table tbody td {
            display: flex;
            flex-direction: column;
            gap: 4px;
            padding: 8px 0;
        }
        .cuti-table tbody td::before {
            content: attr(data-label);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: rgba(148, 163, 184, 0.72);
        }
        .cuti-table tbody td:first-child { padding-top: 0; }
        .cuti-table tbody td:last-child { padding-bottom: 0; }
    }
    @media (max-width: 580px) {
        .cuti-shell {
            padding: 24px 18px;
        }
    }
</style>
@endpush

@section('content')
@php
    $summaryCollection = ($list ?? collect());
    $summaryTotal = $summaryCollection->count();
    $summaryMenunggu = $summaryCollection->filter(fn ($row) => strtolower($row->status) === 'menunggu')->count();
    $summaryDisetujui = $summaryCollection->filter(fn ($row) => strtolower($row->status) === 'disetujui')->count();
    $summaryDitolak = $summaryCollection->filter(fn ($row) => strtolower($row->status) === 'ditolak')->count();
    $lastUpdated = now()->timezone(config('app.timezone'));
@endphp

<div class="cuti-shell">
    <div class="cuti-hero">
        <div class="cuti-hero__info">
            <span class="cuti-hero__tagline">Manajemen Cuti</span>
            <h2>Pengajuan Cuti</h2>
            <p>Ajukan cuti dengan cepat dan pantau status persetujuan kapan saja tanpa meninggalkan dashboard ini.</p>
        </div>
        <div class="cuti-hero__meta">
            <span class="cuti-hero__chip">Menunggu persetujuan: {{ number_format($summaryMenunggu) }}</span>
            <span class="cuti-hero__meta-text">Total pengajuan: {{ number_format($summaryTotal) }}</span>
            <span class="cuti-hero__meta-text">Terakhir diperbarui {{ $lastUpdated->format('d M Y H:i') }}</span>
        </div>
    </div>

    @if (session('success'))
        <div class="cuti-alert cuti-alert--success">
            <p class="cuti-alert__title">Berhasil</p>
            <span>{{ session('success') }}</span>
        </div>
    @endif

    @if (session('error'))
        <div class="cuti-alert cuti-alert--error">
            <p class="cuti-alert__title">Pengajuan gagal</p>
            <span>{{ session('error') }}</span>
        </div>
    @endif

    @if ($errors->any())
        <div class="cuti-alert cuti-alert--error">
            <p class="cuti-alert__title">Periksa kembali input</p>
            <ul class="cuti-alert__list">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form method="POST" action="{{ route('cuti.store') }}" class="cuti-form">
        @csrf
        <div class="cuti-form-grid">
            <div class="cuti-field">
                <label for="tanggal_mulai" class="cuti-label">Tanggal Mulai</label>
                <input type="date" id="tanggal_mulai" name="tanggal_mulai" class="cuti-input" value="{{ old('tanggal_mulai', date('Y-m-d')) }}" required>
            </div>
            <div class="cuti-field">
                <label for="tanggal_selesai" class="cuti-label">Tanggal Selesai</label>
                <input type="date" id="tanggal_selesai" name="tanggal_selesai" class="cuti-input" value="{{ old('tanggal_selesai', date('Y-m-d')) }}" required>
            </div>
            <div class="cuti-field">
                <label for="jenis" class="cuti-label">Jenis Cuti</label>
                <select id="jenis" name="jenis" class="cuti-select" required>
                    @php $jenisList = ['Tahunan','Sakit','Izin','Melahirkan','Penting Lainnya']; @endphp
                    <option value="" disabled {{ old('jenis') ? '' : 'selected' }}>Pilih jenis cuti</option>
                    @foreach($jenisList as $j)
                        <option value="{{ $j }}" {{ old('jenis')===$j?'selected':'' }}>{{ $j }}</option>
                    @endforeach
                </select>
            </div>
            <div class="cuti-field" style="grid-column:1 / -1;">
                <label for="alasan" class="cuti-label">Alasan</label>
                <textarea id="alasan" name="alasan" rows="3" class="cuti-textarea" placeholder="Jelaskan alasan cuti" required>{{ old('alasan') }}</textarea>
            </div>
        </div>

        <div class="cuti-form-actions">
            <span class="cuti-tip">Pastikan tanggal dan alasan sudah tepat sebelum mengirimkan pengajuan.</span>
            <button type="submit" class="cuti-submit">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="18" height="18">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.5 12.75l6 6 9-13.5" />
                </svg>
                Ajukan Cuti
            </button>
        </div>
    </form>

    <div class="cuti-summary">
        <div class="cuti-summary__card">
            <span class="cuti-summary__label">Total Pengajuan</span>
            <span class="cuti-summary__value">{{ number_format($summaryTotal) }}</span>
            <span class="cuti-summary__meta">Keseluruhan permintaan cuti</span>
        </div>
        <div class="cuti-summary__card">
            <span class="cuti-summary__label">Menunggu</span>
            <span class="cuti-summary__value">{{ number_format($summaryMenunggu) }}</span>
            <span class="cuti-summary__meta">Belum ada keputusan</span>
        </div>
        <div class="cuti-summary__card">
            <span class="cuti-summary__label">Disetujui</span>
            <span class="cuti-summary__value">{{ number_format($summaryDisetujui) }}</span>
            <span class="cuti-summary__meta">Telah dikonfirmasi</span>
        </div>
        <div class="cuti-summary__card">
            <span class="cuti-summary__label">Ditolak</span>
            <span class="cuti-summary__value">{{ number_format($summaryDitolak) }}</span>
            <span class="cuti-summary__meta">Perlu tinjauan ulang</span>
        </div>
    </div>

    <div class="cuti-history-section">
        <div class="cuti-history-head">
            <h3>Riwayat Pengajuan Saya</h3>
            <p>Pantau status terbaru dan detail pengajuan cuti Anda.</p>
        </div>

        <div class="cuti-table-shell">
            <div class="cuti-table-scroll">
                <table class="cuti-table">
                    <thead>
                        <tr>
                            <th>Tanggal</th>
                            <th>Durasi</th>
                            <th>Jenis</th>
                            <th>Alasan</th>
                            <th>Status</th>
                            <th>Diajukan</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse(($list ?? collect()) as $row)
                            @php
                                $mulai = \Carbon\Carbon::parse($row->tanggal_mulai);
                                $selesai = \Carbon\Carbon::parse($row->tanggal_selesai);
                                $durasi = $mulai->diffInDays($selesai) + 1;
                                $statusLower = strtolower($row->status ?? '');
                                $statusModifier = match($statusLower) {
                                    'menunggu', 'pending' => 'pending',
                                    'disetujui', 'approved' => 'approved',
                                    'ditolak', 'rejected' => 'rejected',
                                    default => 'pending',
                                };
                                $statusClass = 'cuti-status cuti-status--' . $statusModifier;
                                $statusLabel = ucfirst($row->status ?? 'Menunggu');
                            @endphp
                            <tr>
                                <td data-label="Tanggal">{{ $mulai->format('d/m/Y') }} - {{ $selesai->format('d/m/Y') }}</td>
                                <td data-label="Durasi">{{ $durasi }} hari</td>
                                <td data-label="Jenis">{{ $row->jenis }}</td>
                                <td data-label="Alasan">{{ $row->alasan }}</td>
                                <td data-label="Status">
                                    <span class="{{ $statusClass }}">{{ $statusLabel }}</span>
                                </td>
                                <td data-label="Diajukan">{{ \Carbon\Carbon::parse($row->created_at)->format('d/m/Y H:i') }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="cuti-empty">Belum ada pengajuan.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection