@extends('template.desktop.app')

@section('content')
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-4 gap-3">
        <!-- Info Order -->
        <div>
            <div class="mb-1">
                <span class="h5">Order {{ $order->reference_number }}</span>

                @if ($order->status == 'pending')
                    <span class="badge bg-label-warning ms-2">Pending</span>
                @elseif ($order->status == 'approved')
                    <span class="badge bg-label-success ms-2">Disetujui</span>
                @else
                    <span class="badge bg-label-danger ms-2">Ditolak</span>
                @endif

                <span class="badge bg-label-info ms-1">{{ $order->payment_method }}</span>
            </div>
            <p class="text-muted mb-0">{{ $order->created_at }}</p>
        </div>

        <!-- Action Buttons -->
        <div class="d-flex flex-wrap gap-2">
            @if ($order->status == 'pending')
                <button class="btn btn-label-success btn-approve" data-id="{{ $order->id }}">Setujui</button>
                <button class="btn btn-label-danger btn-reject" data-id="{{ $order->id }}">Tolak</button>
            @endif
            <a href="{{ url()->previous() }}" class="btn btn-outline-secondary">
                ← Kembali
            </a>
        </div>
    </div>


    <div class="row">
        <div class="col-12 col-lg-8">
            @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 = $totalQty * $productPrice;
            @endphp

            <div class="card mb-5">
                <div class="card-datatable">
                    <!-- Header -->
                    <div class="card-header border-bottom px-4 py-3">
                        <h5 class="card-title mb-0">Rincian Produk</h5>
                    </div>

                    <!-- Table Produk -->
                    <div class="table-responsive">
                        <table class="table table-bordered align-middle mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th class="w-50">Produk</th>
                                    <th style="min-width: 120px;">Harga</th>
                                    <th style="min-width: 80px;">Jumlah</th>
                                    <th style="min-width: 130px;">Total</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if ($totalQty > 0)
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="avatar avatar-sm me-3">
                                                    <img src="{{ $productIcon }}" alt="Produk" class="rounded-2" />
                                                </div>
                                                <div class="d-flex flex-column text-truncate">
                                                    <strong>DOORASI</strong>
                                                    <small class="text-muted">Varian: {{ $productLabel }}</small>
                                                </div>
                                            </div>
                                        </td>
                                        <td>Rp {{ number_format($productPrice, 0, ',', '.') }}</td>
                                        <td>{{ $totalQty }}</td>
                                        <td>Rp {{ number_format($subtotal, 0, ',', '.') }}</td>
                                    </tr>
                                @else
                                    <tr>
                                        <td colspan="4" class="text-center text-muted">Tidak ada produk dipesan.</td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>

                    <!-- Ringkasan Pembayaran -->
                    <div class="px-4 pt-3 pb-4">
                        <div class="order-calculations text-end">
                            <div class="d-flex justify-content-end mb-2">
                                <span class="w-150px text-muted">Subtotal:</span>
                                <h6 class="mb-0 ms-2">Rp {{ number_format($subtotal ?? 0, 0, ',', '.') }}</h6>
                            </div>
                            <div class="d-flex justify-content-end mb-2">
                                <span class="w-150px text-muted">Ongkos Kirim:</span>
                                <h6 class="mb-0 ms-2">Rp {{ number_format($order->shipping_cost ?? 0, 0, ',', '.') }}</h6>
                            </div>
                            <div class="d-flex justify-content-end">
                                <span class="w-150px fw-bold">Total Pembayaran:</span>
                                <h6 class="mb-0 ms-2 fw-bold text-success">Rp
                                    {{ number_format($order->total_payment ?? 0, 0, ',', '.') }}</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>



            <div class="card mb-5 shadow-sm">
                <div class="card-datatable">
                    <!-- Header -->
                    <div class="card-header px-4 py-3 d-flex justify-content-between align-items-center bg-light">
                        <div>
                            <h5 class="card-title mb-0">Perbandingan Data Order</h5>
                            <small class="text-muted">Cek perbedaan data yang diinput oleh CS dan data sistem
                                ekspedisi</small>
                        </div>
                    </div>

                    <!-- Table Perbandingan -->
                    <div class="table-responsive text-nowrap">
                        <table class="table table-bordered align-middle text-center">
                            <thead class="table-light">
                                <tr class="fw-semibold text-dark">
                                    <th colspan="3" class="bg-light">Ongkos Kirim</th>
                                    <th colspan="3" class="bg-light">Total Pembayaran</th>
                                </tr>
                                <tr>
                                    <th>Input</th>
                                    <th>Sistem</th>
                                    <th>Selisih</th>
                                    <th>Input</th>
                                    <th>Sistem</th>
                                    <th>Selisih</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php
                                    $selisihShipping =
                                        ($order->shipping_cost ?? 0) - ($order->shipping->shipping_cost ?? 0);
                                    $selisihTotal =
                                        ($order->total_payment ?? 0) - ($order->shipping->total_payment ?? 0);
                                @endphp
                                <tr>
                                    <!-- Ongkir -->
                                    <td>
                                        <span class="text-muted small d-block">CS Input</span>
                                        <strong>Rp {{ number_format($order->shipping_cost ?? 0, 0, ',', '.') }}</strong>
                                    </td>
                                    <td>
                                        <span class="text-muted small d-block">Sistem</span>
                                        <strong>Rp
                                            {{ number_format($order->shipping->shipping_cost ?? 0, 0, ',', '.') }}</strong>
                                    </td>
                                    <td class="{{ $selisihShipping != 0 ? 'text-danger fw-bold' : 'text-success' }}">
                                        Rp {{ number_format($selisihShipping, 0, ',', '.') }}
                                        @if ($selisihShipping != 0)
                                            <span class="badge bg-danger ms-1">Tidak Sesuai</span>
                                        @else
                                            <span class="badge bg-success ms-1">Sesuai</span>
                                        @endif
                                    </td>

                                    <!-- Total Pembayaran -->
                                    <td>
                                        <span class="text-muted small d-block">CS Input</span>
                                        <strong>Rp {{ number_format($order->total_payment ?? 0, 0, ',', '.') }}</strong>
                                    </td>
                                    <td>
                                        <span class="text-muted small d-block">Sistem</span>
                                        <strong>Rp
                                            {{ number_format($order->shipping->total_payment ?? 0, 0, ',', '.') }}</strong>
                                    </td>
                                    <td class="{{ $selisihTotal != 0 ? 'text-danger fw-bold' : 'text-success' }}">
                                        Rp {{ number_format($selisihTotal, 0, ',', '.') }}
                                        @if ($selisihTotal != 0)
                                            <span class="badge bg-danger ms-1">Tidak Sesuai</span>
                                        @else
                                            <span class="badge bg-success ms-1">Sesuai</span>
                                        @endif
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- Detail Info -->
                    <div class="px-4 pt-4 pb-4">
                        <div class="row gy-3">
                            <div class="col-md-6">
                                <div class="border rounded p-3 bg-light">
                                    <p class="mb-1 text-muted">Dientri oleh:</p>
                                    <h6 class="mb-0">{{ $order->customerService->customerService->full_name ?? '-' }}
                                    </h6>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="border rounded p-3 bg-light">
                                    <p class="mb-1 text-muted">Ekspedisi Pengiriman:</p>
                                    <h6 class="mb-0">{{ $order->shipping->logistic_name ?? '-' }}</h6>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="border rounded p-3">
                                    <p class="mb-1 text-muted">Rate Name:</p>
                                    <h6 class="mb-0">{{ $order->shipping->rate_name ?? '-' }}</h6>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="border rounded p-3">
                                    <p class="mb-1 text-muted">Rate Code:</p>
                                    <h6 class="mb-0">{{ $order->shipping->rate_code ?? '-' }}</h6>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="border rounded p-3">
                                    <p class="mb-1 text-muted">Estimasi Durasi Pengiriman:</p>
                                    <h6 class="mb-0">
                                        {{ $order->shipping->min_duration ?? '-' }} -
                                        {{ $order->shipping->max_duration ?? '-' }} hari
                                    </h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="col-12 col-lg-4">
            <!-- Data Pembeli -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">Data Pembeli</h5>
                </div>
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="avatar me-3">
                            <img src="https://demos.pixinvent.com/vuexy-html-laravel-admin-template/demo/assets/img/avatars/1.png"
                                alt="Avatar" class="rounded-circle" />
                        </div>
                        <div class="d-flex flex-column">
                            <h6 class="mb-1 text-heading">{{ $order->customer_name }}</h6>
                            <small class="text-muted mb-2">Nomor HP: {{ $order->whatsapp }}</small>
                            <button class="btn btn-sm btn-primary" data-bs-toggle="modal"
                                data-bs-target="#modalBuktiTransfer">
                                <i class="bx bx-show me-1"></i> Lihat Bukti Transfer
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Alamat Pembeli -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">Alamat Pembeli</h5>
                </div>
                <div class="card-body">
                    <p class="mb-1">{{ $order->address }}</p>
                    <small class="text-muted">
                        {{ $order->subdistrict }}, {{ $order->district }}, {{ $order->postal_code }}
                    </small>
                </div>
            </div>

            <!-- Data Pengirim -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">Data Pengirim</h5>
                </div>
                <div class="card-body">
                    <div class="d-flex align-items-center mb-3">
                        <div class="avatar me-3">
                            <img src="https://demos.pixinvent.com/vuexy-html-laravel-admin-template/demo/assets/img/avatars/1.png"
                                alt="Avatar" class="rounded-circle" />
                        </div>
                        <div class="d-flex flex-column">
                            <h6 class="mb-1 text-heading">{{ $order->distributor->full_name }}</h6>
                            <small class="text-muted">Kode Pengirim: #{{ $order->distributor->agent_code }}</small>
                        </div>
                    </div>

                    <div class="mt-2">
                        <h6 class="text-heading fw-medium mb-1">Kontak Pengirim</h6>
                        <small class="text-muted d-block mb-1">Email: {{ $order->distributor->email }}</small>
                        <small class="text-muted d-block">WhatsApp: {{ $order->distributor->primary_phone }}</small>
                    </div>
                </div>
            </div>

            <!-- Alamat Pengirim -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">Alamat Pengirim</h5>
                </div>
                <div class="card-body">
                    <p class="mb-1">{{ $order->distributor->address }}</p>
                    <small class="text-muted d-block">
                        {{ $order->distributor->area->sub_district_name }},
                        {{ $order->distributor->area->district_name }},
                        {{ $order->distributor->area->city_name }},
                        {{ $order->distributor->area->province_name }}
                    </small>
                </div>
            </div>
        </div>

    </div>

    <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/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