@extends('template.desktop.app')
@push('styles')
    {{-- <script src="https://cdn.tailwindcss.com"></script> --}}
    {{-- <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <script src="https://unpkg.com/lucide@latest"></script>
    <style>
        body {
            font-family: 'Inter', sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    </style> --}}
@endpush
@section('content')
    <header class="mb-5 pb-3 border-bottom">
        <div class="d-flex justify-content-between align-items-start flex-wrap gap-3">
            <div>
                <h1 class="h4 fw-bold mb-1">
                    Detail Pesanan <span class="text-primary">#{{ $order->reference_number }}</span>
                </h1>
                <p class="text-muted small mb-0">
                    Status:
                    @if ($order->status == 'pending')
                        <span class="fw-semibold text-warning">Menunggu Konfirmasi & Pembayaran</span>
                    @elseif ($order->status == 'approved')
                        @if ($order->payment_method == 'COD')
                            <span class="fw-semibold text-info">Disetujui & COD</span>
                        @else
                            <span class="fw-semibold text-info">Disetujui & Menunggu Pengiriman</span>
                        @endif
                    @else
                        <span class="fw-semibold text-danger">Ditolak</span>
                    @endif
                </p>
            </div>
            <div class="d-flex flex-wrap gap-2">
                @if ($order->status == 'pending' && $order->is_exported == 0)
                    {{-- <button class="btn btn-success btn-sm btn-approve d-flex align-items-center gap-1"
                        data-id="{{ $order->id }}">
                        <i class="ti tabler-circle-check"></i> Setujui
                    </button> --}}
                    <button class="btn btn-danger btn-sm btn-reject d-flex align-items-center gap-1"
                        data-id="{{ $order->id }}">
                        <i class="ti tabler-circle-x"></i> Tolak
                    </button>
                @endif
                <a href="{{ url()->previous() }}" class="btn btn-outline-secondary btn-sm d-flex align-items-center gap-1">
                    <i class="ti tabler-arrow-left"></i> Kembali
                </a>
            </div>
        </div>
    </header>

    <main class="row g-4">

        <div class="col-12 col-lg-4">
            <div class="card h-100">
                <div class="card-body">
                    <h2 class="card-title h6 fw-semibold mb-3 d-flex align-items-center">
                        <i data-lucide="users" class="me-2 text-muted" style="width: 1rem; height: 1rem;"></i>
                        Informasi Pembeli & Pengirim
                    </h2>
                    <div class="row g-3 small">
                        <!-- Kolom Pembeli -->
                        <div class="col-12">
                            <p class="fw-semibold text-dark mb-1">Pembeli</p>
                            <p class="mb-0">{{ $order->customer_name }}</p>
                            <p class="text-muted mb-2">{{ $order->whatsapp }}</p>
                            <p class="text-muted small mb-0">
                                <span class="fw-medium text-dark">Alamat:</span>
                                {{ $order->address }},
                                {{ $order->subdistrict }}, {{ $order->district }}, {{ $order->postal_code }}
                            </p>
                            @if ($order->payment_method != 'COD')
                                <a href="{{ $order->transfer_proof }}" target="_blank"
                                    class="btn btn-outline-primary btn-sm w-100 mt-3 d-flex align-items-center justify-content-center"
                                    data-bs-toggle="modal" data-bs-target="#modalBuktiTransfer">
                                    <i data-lucide="receipt-text" class="me-2"
                                        style="width: 0.875rem; height: 0.875rem;"></i>
                                    Lihat Bukti Transfer
                                </a>
                            @endif
                        </div>
                        <!-- Kolom Pengirim -->
                        <div class="col-12">
                            <p class="fw-semibold text-dark mb-1">Pengirim</p>
                            <p class="mb-0">{{ $order->actor->full_name }}</p>
                            <p class="text-muted mb-2">Kode: #{{ $order->actor->code }}</p>
                            <p class="text-muted small mb-0">
                                <span class="fw-medium text-dark">Alamat:</span>
                                {{ $order->actor->address }},
                                {{ $order->actor->area->sub_district_name }},
                                {{ $order->actor->area->district_name }},
                                {{ $order->actor->area->city_name }},
                                {{ $order->actor->area->province_name }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-lg-8 d-flex flex-column gap-4">
            <div class="card">
                <div class="card-body">
                    <h2 class="card-title h6 fw-semibold mb-3 d-flex align-items-center">
                        <i data-lucide="package" class="me-2 text-muted" style="width: 1rem; height: 1rem;"></i>
                        Rincian Pesanan & Pembayaran
                    </h2>
                    @php
                        $boxPrice = 170000;
                        $sachetPrice = 49000;
                        $totalQty = $order->total_quantity ?? 0;

                        $isBox = $totalQty >= 5;
                        $productLabel = $isBox ? 'Box (DRSBOX)' : 'Sachet (DRSSACHET)';
                        $productIcon = $isBox
                            ? 'https://cdn-icons-png.flaticon.com/128/2826/2826142.png'
                            : 'https://cdn-icons-png.flaticon.com/128/6522/6522522.png';
                        $productPrice = $isBox ? $boxPrice : $sachetPrice;
                        $subtotal = $isBox ? ($totalQty / 5) * $productPrice : $totalQty * $productPrice;
                    @endphp
                    <div class="table-responsive">
                        <table class="table table-borderless small mb-0"">
                            <tbody>
                                <tr>
                                    <td class="align-middle">
                                        <div class="d-flex" style="margin-left: -20px;">
                                            <img src="https://placehold.co/64x64/e2e8f0/334155?text=DOORASI" alt="DOORASI"
                                                class="rounded me-3" style="width: 40px; height: 40px; object-fit: cover;">
                                            <div>
                                                <p class="fw-semibold mb-0">DOORASI</p>
                                                <p class="text-muted mb-0" style="font-size: 0.75rem;">Varian:
                                                    {{ '(' . $order->sku . ')' }}</p>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="text-end text-muted fw-semibold align-middle py-2"
                                        style="font-size: 0.8rem;">
                                        {{ $isBox ? $totalQty / 5 . ' x Rp 170.000' : $totalQty . 'x Rp 49.000' }}</td>
                                    <td class="text-end fw-semibold align-middle py-2">Rp
                                        {{ number_format($subtotal, 0, '.', '.') }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="mt-4 small">
                        <div class="d-flex justify-content-between mb-1">
                            <span class="text-muted">Subtotal</span>
                            <span class="fw-medium">Rp {{ number_format($subtotal, 0, '.', '.') }}</span>
                        </div>
                        <div class="d-flex justify-content-between mb-2">
                            <span class="text-muted">Ongkos Kirim</span>
                            <span class="fw-medium">Rp {{ number_format($order->shipping_cost ?? 0, 0, '.', '.') }}</span>
                        </div>
                        <hr class="border-secondary border-dashed my-2">
                        <div class="d-flex justify-content-between h6 mb-0 pt-2">
                            <span class="fw-semibold">Total Pembayaran</span>
                            <span class="fw-bold text-primary">Rp
                                {{ number_format($order->total_payment ?? 0, 0, '.', '.') }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <h2 class="card-title h6 fw-semibold mb-3 d-flex align-items-center">
                        <i data-lucide="shield-check" class="me-2 text-muted" style="width: 1rem; height: 1rem;"></i>
                        Verifikasi & Pengiriman
                    </h2>
                    @php
                        $selisihShipping = ($order->shipping_cost ?? 0) - ($order->shipping->shipping_cost ?? 0);
                        $selisihTotal = ($order->total_payment ?? 0) - ($order->shipping->total_payment ?? 0);
                    @endphp
                    <div class="row g-3 mb-3 small">
                        <div class="col-12 col-sm-6">
                            <div
                                class="card {{ $selisihShipping != 0 ? 'bg-danger-subtle text-danger-emphasis border border-danger' : '  bg-success-subtle text-success-emphasis border border-success' }}  p-3 h-100">
                                <p class="fw-bold mb-1 d-flex align-items-center" style="font-size: 0.75rem;">
                                    <i data-lucide="{{ $selisihShipping != 0 ? 'bell-slash' : 'check-circle' }}"
                                        class="me-1" style="width: 0.875rem; height: 0.875rem;"></i>
                                    {{ $selisihShipping != 0 ? 'ONGKIR TIDAK SESUAI' : 'ONGKIR SESUAI' }}
                                </p>
                                <div class="d-flex justify-content-between" style="font-size: 0.75rem;">
                                    <span class="opacity-75">CS Input:</span>
                                    <span>Rp {{ number_format($order->shipping_cost ?? 0, 0, '.', '.') }}</span>
                                </div>
                                <div class="d-flex justify-content-between" style="font-size: 0.75rem;">
                                    <span class="opacity-75">Sistem:</span>
                                    <span>Rp
                                        {{ number_format($order->shipping->shipping_cost ?? 0, 0, '.', '.') }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-sm-6">
                            <div
                                class="card border {{ $selisihTotal != 0 ? 'border-danger text-danger' : 'border-success text-success' }} p-3 h-100">
                                <p class="fw-bold mb-1 d-flex align-items-center" style="font-size: 0.75rem;">
                                    <i data-lucide="{{ $selisihTotal != 0 ? 'bell-ring' : 'check-circle' }}"
                                        class="me-1" style="width: 0.875rem; height: 0.875rem;"></i>
                                    {{ $selisihTotal != 0 ? 'TOTAL TIDAK SESUAI' : 'TOTAL SESUAI' }}
                                </p>
                                <div class="d-flex justify-content-between" style="font-size: 0.75rem;">
                                    <span class="opacity-75">CS Input:</span>
                                    <span>Rp {{ number_format($order->total_payment ?? 0, 0, '.', '.') }}</span>
                                </div>
                                <div class="d-flex justify-content-between" style="font-size: 0.75rem;">
                                    <span class="opacity-75">Sistem:</span>
                                    <span>Rp {{ number_format($order->shipping->total_payment ?? 0, 0, '.', '.') }}</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row g-3 border-top pt-4 small">
                        <div class="col-6 col-sm-4">
                            <p class="text-muted small mb-1">Ekspedisi</p>
                            <p class="fw-semibold mb-0">{{ $order->shipping->logistic_name ?? '-' }}</p>
                        </div>
                        <div class="col-6 col-sm-4">
                            <p class="text-muted small mb-1">Layanan</p>
                            <p class="fw-semibold mb-0">{{ $order->shipping->rate_name ?? '-' }}
                                ({{ $order->shipping->rate_code ?? '-' }})</p>
                        </div>
                        <div class="col-6 col-sm-4">
                            <p class="text-muted small mb-1">Estimasi</p>
                            <p class="fw-semibold mb-0">{{ $order->shipping->min_duration ?? '-' }} -
                                {{ $order->shipping->max_duration ?? '-' }} hari</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </main>


    <div class="modal fade" id="modalBuktiTransfer" tabindex="-1" aria-labelledby="modalBuktiTransferLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalBuktiTransferLabel">Bukti Transfer</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
                </div>
                <div class="modal-body text-center">
                    <img src="{{ asset($order->transfer_proof) }}" alt="Bukti Transfer" class="img-fluid rounded">
                </div>
                <div class="modal-footer">
                    <a href="{{ asset($order->transfer_proof) }}" class="btn btn-secondary" target="_blank">Buka di Tab
                        Baru</a>
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    {{-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        xintegrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
    </script>
    <script>
        lucide.createIcons();
    </script> --}}
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        function confirmOrderAction(action, orderId) {
            const isApprove = action === 'approve';

            Swal.fire({
                title: isApprove ? 'Setujui Pesanan?' : 'Tolak Pesanan?',
                html: `<p>Apakah Anda yakin ingin <b>${isApprove ? 'menyetujui' : 'menolak'}</b> pesanan ini? Proses ini akan langsung dikirim ke sistem.</p>`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: isApprove ? 'Ya, Setujui' : 'Ya, Tolak',
                cancelButtonText: 'Batal',
                buttonsStyling: false,
                customClass: {
                    popup: 'small-swal',
                    confirmButton: isApprove ? 'btn btn-success btn-sm me-2' : 'btn btn-danger btn-sm me-2',
                    cancelButton: 'btn btn-secondary btn-sm'
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    fetch(`/admin/temp/orders/${orderId}/${action}`, {
                            method: 'POST',
                            headers: {
                                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                'Content-Type': 'application/json',
                            }
                        })
                        .then(res => res.json())
                        .then(response => {
                            Swal.fire({
                                icon: 'success',
                                title: 'Berhasil',
                                text: response.message ?? 'Pesanan berhasil diproses!',
                                timer: 2000,
                                showConfirmButton: false
                            }).then(() => {
                                location.reload();
                            });
                        })
                        .catch(() => {
                            Swal.fire('Gagal', 'Terjadi kesalahan saat memproses pesanan.', 'error');
                        });
                }
            });
        }

        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('.btn-approve').forEach(btn => {
                btn.addEventListener('click', function() {
                    confirmOrderAction('approve', this.dataset.id);
                });
            });

            document.querySelectorAll('.btn-reject').forEach(btn => {
                btn.addEventListener('click', function() {
                    confirmOrderAction('reject', this.dataset.id);
                });
            });
        });
    </script>
@endpush