@extends('layouts.dashboard')

@section('content')
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">

<style>
    html, body {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
    /* Full Lock Viewport */
    html, body, .content-wrapper {
        height: 100vh !important;
        overflow: hidden !important;
        background-color: #f8fafc !important;
        margin: 0;
    }

    .main-viewport {
        height: calc(100vh - 120px); 
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Plus Jakarta Sans', sans-serif;
        padding: 0 20px;
    }

    /* Diubah menjadi lebih lebar/persegi panjang agar teks muat banyak */
    .perpusnas-card {
        background: #ffffff;
        width: 100%;
        max-width: 760px; 
        height: fit-content;
        max-height: 85vh;
        border-radius: 14px;
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
        display: flex;
        overflow: hidden;
        border: 1px solid #e2e8f0;
    }

    /* Sisi Kiri (Sidebar Info) */
    .branding-side {
        background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
        width: 240px;
        padding: 24px;
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .branding-side h3 { 
        font-weight: 700; 
        font-size: 1.15rem; 
        margin-bottom: 6px; 
        letter-spacing: -0.5px;
    }
    
    .branding-side p {
        font-size: 0.8rem;
        line-height: 1.4;
    }

    /* Sisi Kanan (Area Form) */
    .form-side {
        flex: 1;
        padding: 24px 28px;
        display: flex;
        flex-direction: column;
        background: #ffffff;
    }

    /* Form Grid Standar (ID & Nama) */
    .data-row {
        display: grid;
        grid-template-columns: 90px 1fr;
        align-items: center;
        gap: 16px;
        margin-bottom: 8px;
    }

    /* Form Grid Khusus Koleksi Buku (Vertikal agar Panjang Ke Samping) */
    .data-row.vertical {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        margin-bottom: 10px;
    }

    .form-label-compact {
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
        color: #64748b;
        letter-spacing: 0.5px;
        margin: 0;
    }

    .info-box-compact {
        background: #f1f5f9;
        border: 1px solid #e2e8f0;
        border-radius: 6px;
        padding: 6px 12px;
        font-weight: 600;
        color: #334155;
        font-size: 0.8rem;
    }

    /* Penerapan agar box koleksi melebar penuh dan text auto-wrap */
    .data-row.vertical .info-box-compact {
        width: 100%;
        white-space: normal; 
        word-break: break-word;
        line-height: 1.45;
    }

    /* Date Logic */
    .date-logic {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin: 12px 0;
    }

    .date-card {
        padding: 8px 10px;
        border-radius: 8px;
        text-align: center;
        border: 1px solid transparent;
    }

    .date-card.old { background: #fff5f5; border-color: #fee2e2; color: #991b1b; }
    .date-card.new { background: #f0fdf4; border-color: #dcfce7; color: #166534; }
    
    .d-label { font-size: 0.55rem; font-weight: 700; opacity: 0.85; letter-spacing: 0.5px; }
    .d-val { font-size: 0.9rem; font-weight: 700; margin-top: 2px; }

    /* Upload Zone */
    .upload-zone {
        border: 1.5px dashed #cbd5e1;
        border-radius: 8px;
        padding: 10px 12px;
        background: #f8fafc;
        transition: all 0.2s;
    }
    
    .upload-zone:hover {
        border-color: #94a3b8;
    }

    /* Button */
    .btn-perpanjang {
        background: #1e40af;
        color: white;
        border: none;
        padding: 10px;
        border-radius: 8px;
        font-weight: 600;
        font-size: 0.85rem;
        width: 100%;
        margin-top: 12px;
        transition: all 0.2s ease;
    }

    .btn-perpanjang:hover {
        background: #1e3a8a;
        transform: translateY(-0.5px);
    }

    .error-text { font-size: 0.65rem; color: #ef4444; margin-top: 2px; display: block; }
</style>

<div class="main-viewport">
    <div class="perpusnas-card">
        
        <!-- Sisi Kiri (Sidebar Info) -->
        <div class="branding-side d-none d-md-flex">
            <div>
                <i class="bi bi-layer-forward fs-3 mb-2 d-block text-info"></i>
                <h3>Sirkulasi</h3>
                <p class="opacity-75">Layanan perpanjangan mandiri masa pinjam koleksi pustaka.</p>
            </div>
            
            <div style="background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); font-size: 0.75rem; padding: 10px; border-radius: 6px; line-height: 1.4;">
                <i class="bi bi-info-circle-fill text-info me-1"></i>
                Masa pinjam akan otomatis diperpanjang <strong>+7 hari</strong> dari jadwal tempo awal.
            </div>
        </div>

        <!-- Area Form Kanan -->
        <div class="form-side">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h6 class="fw-700 m-0 text-secondary" style="font-size: 0.95rem;">Data Perpanjangan</h6>
                <a href="{{ route('user.peminjaman.index') }}" class="btn-close shadow-none" style="font-size: 0.65rem;"></a>
            </div>

            <form action="{{ route('user.peminjaman.perpanjang.process', $peminjaman->id) }}" method="POST" enctype="multipart/form-data">
                @csrf
                
                <div class="data-row">
                    <label class="form-label-compact">ID Anggota</label>
                    <div class="info-box-compact">{{ $peminjaman->anggota->uid }}</div>
                </div>

                <div class="data-row">
                    <label class="form-label-compact">Nama</label>
                    <div class="info-box-compact">{{ $peminjaman->anggota->nama }}</div>
                </div>

                <!-- Baris Koleksi: Menggunakan class .vertical agar memanjang penuh -->
                <div class="data-row vertical">
                    <label class="form-label-compact">Koleksi Buku</label>
                    <div class="info-box-compact text-dark">
                        <i class="bi bi-book-half text-secondary me-1.5"></i>{{ $peminjaman->koleksi->title }}
                    </div>
                </div>

                <!-- Logika Tanggal -->
                <div class="date-logic">
                    <div class="date-card old">
                        <div class="d-label">JATUH TEMPO AWAL</div>
                        <div class="d-val">{{ \Carbon\Carbon::parse($peminjaman->tanggal_kembali)->format('d/m/Y') }}</div>
                    </div>
                    <div class="date-card new">
                        <div class="d-label">ESTIMASI JADWAL BARU</div>
                        <div class="d-val">{{ \Carbon\Carbon::parse($peminjaman->tanggal_kembali)->addDays(7)->format('d/m/Y') }}</div>
                    </div>
                </div>

                <!-- Input Upload -->
                <div class="upload-zone">
                    <label class="form-label-compact text-dark mb-1" style="font-weight: 600;">Surat Pengantar Dokumen (PDF)</label>
                    <input type="file" name="surat_pengantar" class="form-control form-control-sm border-0 bg-transparent p-0 shadow-none @error('surat_pengantar') is-invalid @enderror" accept=".pdf" required style="font-size: 0.8rem;">
                    @error('surat_pengantar')
                        <span class="error-text fw-semibold">{{ $message }}</span>
                    @enderror
                </div>

                <!-- Tombol Submit -->
                <button type="submit" class="btn-perpanjang shadow-sm">
                    Konfirmasi Perpanjangan <i class="bi bi-arrow-right-short ms-1"></i>
                </button>
            </form>
        </div>

    </div>
</div>
@endsection