<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lengkapi Pesanan #{{ $sale->id }} — Loves Semprong</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
    <style>
        :root {
            --ink:       #0f172a;
            --ink-2:     #334155;
            --ink-3:     #64748b;
            --surface:   #ffffff;
            --surface-2: #f8fafc;
            --surface-3: #f1f5f9;
            --border:    #e2e8f0;
            --blue:      #1d4ed8;
            --r:         10px;
            --mono:      'JetBrains Mono', monospace;
        }
        * { box-sizing: border-box; }
        body { background: var(--surface-3); font-family: 'Inter', sans-serif; font-size: 13px; color: var(--ink); }

        /* ── INFO CARD ── */
        .info-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--r);
            padding: 16px 20px;
            margin-bottom: 16px;
        }
        .info-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px 20px;
            font-size: 12px;
        }
        .info-row { display: flex; gap: 6px; }
        .info-label { color: var(--ink-3); min-width: 70px; flex-shrink: 0; }
        .info-val { font-weight: 600; color: var(--ink); }

        /* ── FORM CARD ── */
        .form-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--r);
            overflow: hidden;
            margin-bottom: 16px;
        }
        .form-card-header {
            background: var(--ink);
            color: #fff;
            padding: 11px 20px;
            font-size: 12px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .form-card-header i { font-size: 16px; }
        .form-card-body { padding: 20px; }

        /* ── SECTION LABEL ── */
        .section-label {
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .06em;
            color: var(--ink-3);
            padding: 4px 0 8px;
            border-bottom: 1px solid var(--border);
            margin-bottom: 14px;
            margin-top: 6px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .section-label:first-child { margin-top: 0; }

        /* ── FORM LABELS ── */
        .form-label {
            font-size: 11px;
            font-weight: 600;
            color: var(--ink-2);
            margin-bottom: 4px;
        }

        /* ── SUBMIT BTN ── */
        .btn-save {
            background: var(--blue);
            color: #fff;
            border: none;
            padding: 9px 28px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            font-family: 'Inter', sans-serif;
            display: inline-flex;
            align-items: center;
            gap: 7px;
            transition: opacity .15s;
        }
        .btn-save:hover { opacity: .88; }

        .btn-back {
            background: var(--surface);
            color: var(--ink-2);
            border: 1px solid var(--border);
            padding: 9px 20px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            font-family: 'Inter', sans-serif;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: background .15s;
        }
        .btn-back:hover { background: var(--surface-3); color: var(--ink); }
    </style>
</head>
<body>
@include('layouts.navbar')

<div class="container py-4" style="max-width:680px">

    {{-- PAGE HEADER --}}
    <div class="d-flex align-items-center gap-3 mb-4">
        <a href="/pesanan" class="btn-back">
            <i class="ti ti-arrow-left" style="font-size:15px"></i> Kembali
        </a>
        <div>
            <h5 style="font-size:16px;font-weight:700;margin:0;color:var(--ink)">
                Lengkapi Data Pesanan
            </h5>
            <div style="font-size:11px;color:var(--ink-3)">Order #{{ $sale->id }}</div>
        </div>
    </div>

    {{-- INFO RINGKASAN PESANAN --}}
    <div class="info-card">
        <div style="font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin-bottom:10px">
            Ringkasan Pesanan
        </div>
        <div class="info-grid">
            <div class="info-row">
                <span class="info-label">CS</span>
                <span class="info-val">{{ $sale->nama_cs }}</span>
            </div>
            <div class="info-row">
                <span class="info-label">Tanggal</span>
                <span class="info-val" style="font-family:var(--mono)">{{ $sale->tgl }}</span>
            </div>
            <div class="info-row">
                <span class="info-label">Channel</span>
                <span class="info-val">{{ $sale->channel->nama_channel ?? '-' }}</span>
            </div>
            <div class="info-row">
                <span class="info-label">Pemesan</span>
                <span class="info-val">{{ $sale->nama_pemesan ?? '-' }}</span>
            </div>
            <div class="info-row">
                <span class="info-label">GMV</span>
                <span class="info-val" style="color:var(--blue);font-family:var(--mono)">Rp {{ number_format($sale->nominal_gmv,0,',','.') }}</span>
            </div>
            <div class="info-row">
                <span class="info-label">Status</span>
                <span class="info-val" style="text-transform:capitalize">{{ str_replace('_',' ', $sale->status) }}</span>
            </div>
        </div>
    </div>

    {{-- FORM LENGKAPI --}}
    <div class="form-card">
        <div class="form-card-header">
            <i class="ti ti-package"></i> Lengkapi Info Pengiriman
        </div>
        <div class="form-card-body">
            <form action="/pesanan/lengkapi/{{ $sale->id }}" method="POST">
                @csrf @method('PUT')

                {{-- Info Pengiriman --}}
                <div class="section-label">
                    <i class="ti ti-truck-delivery" style="font-size:14px"></i> Info Pengiriman
                </div>
                <div class="row g-3 mb-2">
                    <div class="col-md-6">
                        <label class="form-label">Jasa Kirim</label>
                        <select name="jasa_kirim" class="form-select form-select-sm">
                            <option value="">-- Pilih --</option>
                            @foreach(['Driver Internal - Pusat','NCS'] as $jk)
                                <option value="{{ $jk }}" @selected($sale->jasa_kirim == $jk)>{{ $jk }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Nomor Resi</label>
                        <input type="text" name="nomor_resi" class="form-control form-control-sm"
                               value="{{ $sale->nomor_resi }}" placeholder="Masukkan nomor resi"
                               style="font-family:var(--mono)">
                    </div>
                </div>

                {{-- Info Penerima --}}
                <div class="section-label">
                    <i class="ti ti-user" style="font-size:14px"></i> Info Penerima
                </div>
                <div class="row g-3 mb-2">
                    <div class="col-md-6">
                        <label class="form-label">Nama Penerima</label>
                        <input type="text" name="nama_penerima" class="form-control form-control-sm"
                               value="{{ $sale->nama_penerima }}" placeholder="Nama lengkap penerima">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">No Telp Penerima</label>
                        <input type="text" name="no_telp_penerima" class="form-control form-control-sm"
                               value="{{ $sale->no_telp_penerima }}" placeholder="08xx">
                    </div>
                </div>

                {{-- Alamat --}}
                <div class="section-label">
                    <i class="ti ti-map-pin" style="font-size:14px"></i> Alamat
                </div>
                <div class="row g-3 mb-4">
                    <div class="col-12">
                        <label class="form-label">Alamat Lengkap</label>
                        <textarea name="alamat" class="form-control form-control-sm" rows="2"
                                  placeholder="Jl. ...">{{ $sale->alamat }}</textarea>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Kota/Kabupaten</label>
                        <input type="text" name="kota" class="form-control form-control-sm" value="{{ $sale->kota }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Provinsi</label>
                        <input type="text" name="provinsi" class="form-control form-control-sm" value="{{ $sale->provinsi }}">
                    </div>
                    <div class="col-12">
                        <label class="form-label">Catatan</label>
                        <input type="text" name="catatan" class="form-control form-control-sm"
                               value="{{ $sale->catatan }}" placeholder="Catatan tambahan (opsional)">
                    </div>
                </div>

                {{-- ACTION BUTTONS --}}
                <div class="d-flex gap-2">
                    <button type="submit" class="btn-save">
                        <i class="ti ti-device-floppy" style="font-size:15px"></i> Simpan
                    </button>
                    <a href="/pesanan" class="btn-back">Batal</a>
                </div>

            </form>
        </div>
    </div>

</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>