@extends('layouts.app')

@push('styles')
    <style>
        :root {
            --google-blue: #1a73e8;
            --google-blue-rgb: 26, 115, 232;
            --google-gray-light: #f8f9fa;
            --google-gray-medium: #e8eaed;
            --google-text-color: #3c4043;
            --google-text-secondary: #5f6368;
            --google-shadow-sm: rgba(60, 64, 67, 0.05);
            --google-shadow-md: rgba(60, 64, 67, 0.1);
            --google-border-color: #dadce0;
            --google-border-radius: 8px;

            --dark-red: #8B0000;
            --dark-red-rgb: 139, 0, 0;
            --dark-red-light: rgba(139, 0, 0, 0.08);
            --dark-red-dark: #6a0000;
            --dark-red-lighter-bg: rgba(139, 0, 0, 0.04);
            --dark-red-badge-bg: #ffebee;
            --dark-red-badge-text: #a80000;
        }

        body {
            font-family: 'Google Sans', 'Roboto', Arial, sans-serif;
            background-color: var(--google-gray-light);
            color: var(--google-text-color);
        }

        .table-responsive-custom {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        .table-responsive-custom table {
            min-width: 100%;
            border-collapse: collapse;
        }

        .table-responsive-custom thead th {
            white-space: nowrap;
            padding: 16px 24px;
            font-size: 0.875rem;
            color: var(--google-text-secondary);
            font-weight: 500;
            background-color: var(--google-gray-light);
        }

        .table-responsive-custom tbody td {
            white-space: normal;
            padding: 16px 24px;
            border-top: 1px solid var(--google-gray-medium);
            font-size: 0.875rem;
            color: var(--google-text-color);
        }

        .table-responsive-custom tbody td .text-muted {
            color: var(--google-text-secondary) !important;
        }

        .text-xs {
            font-size: 0.75rem !important;
        }

        .fw-semibold {
            font-weight: 600 !important;
        }

        .rounded-pill {
            border-radius: 9999px !important;
        }

        .rounded-lg {
            border-radius: var(--google-border-radius) !important;
        }

        .shadow-sm {
            box-shadow: 0 1px 2px var(--google-shadow-sm) !important;
        }

        .shadow-md {
            box-shadow: 0 1px 3px var(--google-shadow-md), 0 1px 2px var(--google-shadow-sm) !important;
        }

        .bg-primary-subtle {
            background-color: var(--dark-red-light) !important;
        }

        .bg-light-subtle {
            background-color: var(--google-gray-light) !important;
        }

        .btn-primary {
            background-color: var(--dark-red);
            border-color: var(--dark-red);
            color: #fff;
            font-weight: 500;
            border-radius: 4px;
            transition: background-color 0.2s ease;
        }

        .btn-primary:hover {
            background-color: var(--dark-red-dark);
            border-color: var(--dark-red-dark);
        }

        .btn-outline-secondary {
            border: 1px solid var(--google-border-color);
            color: var(--google-text-secondary);
            font-weight: 500;
            border-radius: 4px;
            transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
        }

        .btn-outline-secondary:hover {
            background-color: var(--dark-red-lighter-bg);
            border-color: var(--dark-red);
            color: var(--dark-red);
        }

        .btn-success {
            background-color: #34a853;
            border-color: #34a853;
            color: #fff;
            border-radius: 4px;
        }

        .btn-success:hover {
            background-color: #2e8d47;
            border-color: #2e8d47;
        }

        .btn-secondary {
            background-color: #f0f0f0;
            border-color: #e0e0e0;
            color: var(--google-text-color);
            font-weight: 500;
            border-radius: 4px;
            transition: background-color 0.2s ease, border-color 0.2s ease;
        }

        .btn-secondary:hover {
            background-color: #e6e6e6;
            border-color: #d0d0d0;
        }

        .nav-link {
            padding: 8px 16px;
            font-size: 0.875rem;
            font-weight: 500;
            color: var(--google-text-secondary);
            transition: background-color 0.2s ease, color 0.2s ease;
        }

        .nav-link.active {
            background-color: var(--dark-red) !important;
            color: #fff !important;
            border-radius: 9999px;
        }

        .nav-link:not(.active):hover {
            background-color: var(--dark-red-lighter-bg);
            color: var(--dark-red);
            border-radius: 9999px;
        }


        .input-group>.btn:not(:first-child) {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

        .input-group>.btn {
            border-radius: 4px;
        }

        .pagination {
            display: flex;
            padding-left: 0;
            list-style: none;
            border-radius: 0.25rem;
        }

        .pagination-google .page-item {
            margin: 0 2px;
        }

        .pagination-google .page-link {
            display: flex;
            justify-content: center;
            align-items: center;
            min-width: 36px;
            height: 36px;
            padding: 0;
            font-size: 0.875rem;
            font-weight: 500;
            color: var(--google-text-secondary);
            border-radius: 50% !important;
            border: none;
            background-color: transparent;
            transition: background-color 0.2s ease, color 0.2s ease;
        }

        .pagination-google .page-link:hover {
            background-color: var(--google-gray-medium);
            color: var(--google-text-color);
        }

        .pagination-google .page-item.active .page-link {
            background-color: var(--dark-red-light);
            color: var(--dark-red);
            font-weight: 600;
        }

        .pagination-google .page-item.disabled .page-link {
            color: #b0b0b0;
            cursor: not-allowed;
            background-color: transparent;
        }

        /* Kustomisasi Badge */
        .badge {
            font-weight: 500;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 0.75rem;
        }

        .badge.bg-secondary-subtle {
            background-color: var(--google-gray-medium) !important;
            color: var(--google-text-secondary) !important;
        }

        .badge.bg-light.text-primary {
            background-color: var(--dark-red-badge-bg) !important;
            color: var(--dark-red-badge-text) !important;
        }

        .badge.bg-success {
            background-color: #e6f4ea !important;
            color: #1e8e3e !important;
        }

        .badge.bg-dark-red-subtle {
            background-color: var(--dark-red-badge-bg) !important;
            color: var(--dark-red-badge-text) !important;
        }

        .card {
            border: 1px solid var(--google-border-color);
            box-shadow: 0 1px 2px 0 var(--google-shadow-sm);
            border-radius: var(--google-border-radius);
        }

        .card-body {
            padding: 24px;
        }

        .card-footer {
            background-color: var(--google-gray-light);
            border-top: 1px solid var(--google-gray-medium);
            padding: 16px 24px;
            border-bottom-left-radius: var(--google-border-radius);
            border-bottom-right-radius: var(--google-border-radius);
        }

        .modal-header {
            border-bottom: 1px solid var(--google-gray-medium);
            background-color: var(--google-gray-light);
            padding: 20px 24px;
        }

        .modal-title {
            color: var(--google-text-color);
            font-weight: 500;
        }

        .modal-body {
            padding: 24px;
        }

        .modal-footer {
            border-top: 1px solid var(--google-gray-medium);
            background-color: var(--google-gray-light);
            padding: 16px 24px;
        }
    </style>
@endpush

@section('content')
    <div class="d-flex align-items-center flex-wrap gap-2 mb-4 p-3 bg-primary-subtle rounded-lg shadow-sm">
        <a href="#" class="nav-link active fw-semibold">
            Semua <span class="badge bg-light text-primary ms-2">268</span>
        </a>
        <a href="#" class="nav-link fw-semibold">
            Berlangsung <span class="badge bg-secondary-subtle ms-2">0</span>
        </a>
        <a href="#" class="nav-link fw-semibold">
            Selesai <span class="badge bg-secondary-subtle ms-2">268</span>
        </a>
        <div class="d-flex flex-wrap gap-2 ms-auto">
            <a class="btn btn-outline-secondary btn-sm" href="#">
                <i class="ti ti-trash me-1"></i>Draft
            </a>
            <a class="btn btn-outline-secondary btn-sm" href="#">
                <i class="ti ti-cloud-upload me-1"></i>Bulk Upload
            </a>
            <a class="btn btn-primary btn-sm" href="#">
                <i class="ti ti-plus me-1"></i>Buat Order
            </a>
        </div>
    </div>

    <div class="card shadow-md rounded-lg">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-4">
                <div class="d-flex flex-wrap gap-2">
                    <a class="btn btn-outline-secondary btn-sm" href="#">
                        <i class="ti ti-download me-1"></i>Download Label
                    </a>
                    <a class="btn btn-outline-secondary btn-sm" href="#">
                        <i class="ti ti-chart-bar me-1"></i>Download Report
                    </a>
                    <a class="btn btn-outline-secondary btn-sm" href="#">
                        <i class="ti ti-file-text me-1"></i>Download Tanda Terima Kurir
                    </a>
                </div>
            </div>

            <div class="row align-items-center mb-4 g-2">
                <div class="col-lg-4 col-md-12 mb-3 mb-lg-0">
                    <div class="input-group">
                        <input type="text" class="form-control form-control-sm"
                            placeholder="Cari no resi pengiriman/resi retur, no order, no tuju, nama pelanggan"
                            aria-label="Cari...">
                        <button class="btn btn-outline-secondary btn-sm" type="button">
                            <i class="ti ti-search"></i>
                        </button>
                    </div>
                </div>
                <div
                    class="col-lg-8 col-md-12 d-flex flex-wrap align-items-center justify-content-lg-end justify-content-start gap-2">
                    <select class="form-select w-auto">
                        <option selected>Semua Status Label</option>
                        <option value="1">Status 1</option>
                        <option value="2">Status 2</option>
                    </select>
                    <select class="form-select w-auto">
                        <option selected>Semua Kurir</option>
                        <option value="1">Kurir 1</option>
                        <option value="2">Kurir 2</option>
                    </select>
                    <select class="form-select w-auto">
                        <option selected>Terkirim, Dikembalikan</option>
                        <option value="1">Terkirim</option>
                        <option value="2">Dikembalikan</option>
                    </select>
                    <button class="btn btn-primary btn-sm" type="button" data-bs-toggle="modal"
                        data-bs-target="#filterModal">
                        <i class="ti ti-filter me-1"></i>Filter
                    </button>
                </div>
            </div>

            <section class="table-responsive-custom">
                <table class="table table-hover align-middle">
                    <thead>
                        <tr class="table-light">
                            <th scope="col" style="min-width: 180px;">
                                <a href="#" class="text-decoration-none text-dark fw-semibold">
                                    ORDER <i class="ti ti-chevron-down ms-1 text-sm"></i>
                                </a>
                            </th>
                            <th scope="col" style="min-width: 150px;">
                                <a href="#" class="text-decoration-none text-dark fw-semibold">
                                    STATUS <i class="ti ti-chevron-down ms-1 text-sm"></i>
                                </a>
                            </th>
                            <th scope="col" style="min-width: 300px;" class="fw-semibold text-dark">
                                PENGIRIM/PENERIMA</th>
                            <th scope="col" style="min-width: 250px;" class="fw-semibold text-dark">PAKET</th>
                            <th scope="col" style="min-width: 220px;" class="fw-semibold text-dark">KURIER</th>
                            <th scope="col" style="min-width: 180px;" class="fw-semibold text-dark">TOTAL</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td data-label="ORDER">
                                <span class="fw-semibold">TR02025060800901</span><br>
                                <span class="text-muted text-xs">8 Juni 2025</span><br>
                                <span class="text-muted text-xs">Dibuat oleh: The World in your Hand</span><br>
                                <button class="btn btn-secondary btn-sm mt-2">
                                    <i class="ti ti-map-pin me-1"></i>Lacak
                                </button>
                            </td>
                            <td data-label="STATUS">
                                <span class="badge bg-success fw-bold text-xs">TERKIRIM</span><br>
                                <span class="text-muted text-xs">Drop Off</span><br><br>
                                <span class="text-muted text-xs">Perkiraan Sampai:</span><br>
                                <span class="fw-semibold">Kamis, 19 Juni 2025</span>
                            </td>
                            <td data-label="PENGIRIM/PENERIMA">
                                <span class="fw-semibold">Agen DRS JAKTIM</span> (<span
                                    class="text-muted text-xs">+6281310377389</span>)<br>
                                Jl. Albatrahaio Raya RT05/06 No.20, Lubang Buaya, Cipayung, Jakarta Timur, DKI
                                Jakarta<br><br>
                                <span class="fw-semibold">Maulana Yusup</span> (<span
                                    class="text-muted text-xs">+62812100521641</span>)<br>
                                Jl. Budi Mulia RT 02/RW 012 No.36, Pademangan Barat, Pademangan, Jakarta Utara, DKI
                                Jakarta<br>
                                <a href="#" class="btn btn-success btn-sm text-white mt-1">
                                    <i class="ti ti-brand-whatsapp"></i>
                                </a>
                            </td>
                            <td data-label="PAKET">
                                <span class="fw-semibold">DRSA-01</span><br>
                                <span class="text-muted text-xs">1 kg</span><br>
                                <span class="text-muted text-xs">(Volume metric: 1 kg)</span><br>
                                <span class="text-muted text-xs">Harga paket: Rp 57.000</span><br>
                                <span class="text-muted text-xs">[Catatan: Hubungi sebelum mengantar]</span><br>
                                <span class="text-muted text-xs">No Referensi: INV-2025060722173</span>
                            </td>
                            <td data-label="KURIER">
                                <span class="fw-semibold">J&T Express EZ</span><br>
                                <span class="text-muted text-xs">Resi Order:</span> <span
                                    class="fw-semibold">JODI3313348720</span> <i
                                    class="ti ti-info-circle text-muted text-xs ms-1" data-bs-toggle="tooltip"
                                    data-bs-placement="top" title="Resi order detail"></i><br>
                                <button class="btn btn-success btn-sm mt-2">
                                    <i class="ti ti-printer me-1"></i>Cetak Label
                                </button><br>
                            </td>
                            <td data-label="TOTAL">
                                <span class="fw-semibold">Rp 8.000</span> <i
                                    class="ti ti-info-circle text-muted text-xs"></i><br>
                                <span class="text-muted text-xs">Status Pencairan Cashback:</span><br>
                                <span class="fw-semibold">Berhasil</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </section>
        </div>
        <div
            class="card-footer d-flex justify-content-between align-items-center flex-wrap gap-3 py-3 px-4 bg-light-subtle rounded-bottom-lg">
            <div class="d-flex align-items-center text-sm text-muted">
                <select class="form-select form-select-sm w-auto rounded" aria-label="Items per page">
                    <option selected>10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                </select>
                <span class="ms-2">Menampilkan 1-10 dari 268</span>
            </div>
            <nav aria-label="Page navigation">
                <ul class="pagination pagination-google mb-0">
                    <li class="page-item disabled">
                        <a class="page-link" href="#" aria-label="Previous">
                            <span aria-hidden="true">&lt;</span>
                        </a>
                    </li>
                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                    <li class="page-item active"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item"><a class="page-link" href="#">4</a></li>
                    <li class="page-item"><a class="page-link" href="#">5</a></li>
                    <li class="page-item">
                        <a class="page-link" href="#" aria-label="Next">
                            <span aria-hidden="true">&gt;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>

    <div class="modal fade" id="filterModal" tabindex="-1" aria-labelledby="filterModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl">
            <div class="modal-content rounded-lg">
                <div class="modal-header p-4 bg-light-subtle">
                    <h5 class="modal-title fw-semibold" id="filterModalLabel">Filter Order</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-4">
                    <div class="row g-3">
                        <div class="col-md-4 col-sm-6">
                            <label for="dibuatOleh" class="form-label fw-semibold text-sm mb-2">Dibuat
                                Oleh</label>
                            <select class="form-select" id="dibuatOleh">
                                <option selected>Semua user</option>
                                <option value="user1">User 1</option>
                                <option value="user2">User 2</option>
                            </select>
                        </div>
                        <div class="col-md-4 col-sm-6">
                            <label for="namaPengirim" class="form-label fw-semibold text-sm mb-2">Nama
                                Pengirim</label>
                            <input type="text" class="form-control" id="namaPengirim"
                                placeholder="Ketik nama pengirim">
                        </div>
                        <div class="col-md-4 col-sm-6">
                            <label for="dikirimAtasNama" class="form-label fw-semibold text-sm mb-2">Dikirim
                                Atas Nama</label>
                            <input type="text" class="form-control" id="dikirimAtasNama" placeholder="Ketik nama">
                        </div>
                        <div class="col-md-4 col-sm-6">
                            <label for="namaPenerima" class="form-label fw-semibold text-sm mb-2">Nama
                                Penerima</label>
                            <input type="text" class="form-control" id="namaPenerima"
                                placeholder="Ketik nama penerima">
                        </div>
                    </div>
                </div>
                <div class="modal-footer d-flex justify-content-end gap-2 p-4 bg-light-subtle">
                    <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal"
                        style="min-width: 120px;">Batal</button>
                    <button type="button" class="btn btn-primary btn-sm" style="min-width: 120px;">Terapkan
                        Filter</button>
                </div>
            </div>
        </div>
    </div>
@endsection