<?php if (isset($component)) { $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54 = $attributes; } ?>
<?php $component = App\View\Components\AppLayout::resolve([] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('app-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\App\View\Components\AppLayout::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
     <?php $__env->slot('header', null, []); ?> 
        <style>
            .dash-header-title {
                font-size: 1.8rem; /* Diperbesar */
                font-weight: 700; /* Bold */
                letter-spacing: 0.02em;
                color: #0f0f0f;
            }
        </style>
        <div class="flex items-center justify-between">
            <h2 class="dash-header-title">Checkout</h2>
            <div class="text-sm text-gray-400">
                <span class="font-medium"><?php echo e(count($cartItems)); ?></span> item dalam pesanan
            </div>
        </div>
     <?php $__env->endSlot(); ?>

    <style>
        .checkout-wrap { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background: #fafafa; min-height: 100vh; }
        .checkout-inner { max-width: 1200px; margin: 0 auto; padding: 40px 24px; }

        /* ── ALERT ── */
        .checkout-alert {
            padding: 12px 20px;
            margin-bottom: 32px;
            font-size: 0.85rem; /* Diperbesar */
            font-weight: 500; /* Bold */
            border-left: 2px solid;
            background: #fff;
            border: 1px solid #ebebeb;
            border-left-width: 2px;
        }
        .checkout-alert-error { border-left-color: #c62828; color: #c62828; }
        .checkout-alert-success { border-left-color: #0f0f0f; color: #0f0f0f; }

        /* ── SECTION CARD ── */
        .checkout-section {
            background: #fff;
            border: 1px solid #ebebeb;
            border-radius: 3px;
            overflow: hidden;
            margin-bottom: 24px;
        }
        .checkout-section-header {
            padding: 16px 24px;
            border-bottom: 1px solid #ebebeb;
        }
        .checkout-section-title {
            font-size: 1.1rem; /* Diperbesar */
            font-weight: 700; /* Bold */
            color: #0f0f0f;
            letter-spacing: 0.02em;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .checkout-section-body { padding: 24px; }

        /* ── ADDRESS ── */
        .checkout-address-grid {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .checkout-address-item {
            border: 1px solid #ebebeb;
            border-radius: 3px;
            padding: 16px;
            cursor: pointer;
            transition: all 0.2s;
            position: relative;
        }
        .checkout-address-item:hover { background: #fafafa; }
        .checkout-address-item.selected {
            border-color: #0f0f0f;
            background: #fafafa;
        }
        .checkout-address-radio {
            position: absolute;
            top: 16px;
            right: 16px;
            width: 16px;
            height: 16px;
            accent-color: #0f0f0f;
        }
        .checkout-address-name {
            font-size: 0.95rem; /* Diperbesar */
            font-weight: 700; /* Bold */
            color: #1a1a1a;
            margin-bottom: 4px;
        }
        .checkout-address-phone {
            font-size: 0.8rem; /* Diperbesar */
            font-weight: 500; /* Bold */
            color: #555;
            margin-bottom: 8px;
        }
        .checkout-address-text {
            font-size: 0.8rem; /* Diperbesar */
            font-weight: 400; /* Normal */
            color: #666;
            line-height: 1.5;
        }
        .checkout-address-badge {
            display: inline-block;
            font-size: 0.65rem; /* Diperbesar */
            font-weight: 700; /* Bold */
            letter-spacing: 0.05em;
            background: #f0f0f0;
            color: #555;
            padding: 2px 8px;
            border-radius: 2px;
            margin-left: 8px;
        }
        .checkout-add-address {
            margin-top: 16px;
        }
        .checkout-add-address-btn {
            font-size: 0.75rem; /* Diperbesar */
            font-weight: 700; /* Bold */
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: #0f0f0f; /* Lebih gelap */
            background: none;
            border: none;
            cursor: pointer;
            padding: 0;
            padding-bottom: 1px;
            border-bottom: 1px solid transparent;
            transition: color 0.2s, border-color 0.2s;
        }
        .checkout-add-address-btn:hover {
            color: #333;
            border-bottom-color: #333;
        }

        /* ── COURIER GRID HORIZONTAL ── */
        .checkout-courier-grid {
            display: flex;
            flex-direction: row;
            gap: 16px;
            flex-wrap: wrap;
        }
        .checkout-courier-item {
            flex: 1;
            min-width: 120px;
            cursor: pointer;
        }
        .checkout-courier-card {
            border: 1px solid #ebebeb;
            border-radius: 3px;
            padding: 16px 12px;
            text-align: center;
            transition: all 0.2s;
        }
        .checkout-courier-item:hover .checkout-courier-card {
            background: #fafafa;
        }
        .checkout-courier-item.selected .checkout-courier-card {
            border-color: #0f0f0f;
            background: #fafafa;
        }
        .checkout-courier-radio {
            display: none;
        }
        .checkout-courier-icon {
            font-size: 1.8rem; /* Diperbesar */
            margin-bottom: 8px;
        }
        .checkout-courier-name {
            font-size: 0.9rem; /* Diperbesar */
            font-weight: 700; /* Bold */
            color: #1a1a1a;
            margin-bottom: 4px;
        }
        .checkout-courier-eta {
            font-size: 0.7rem; /* Diperbesar */
            font-weight: 500; /* Bold */
            color: #777;
            margin-bottom: 8px;
        }
        .checkout-courier-cost {
            font-size: 0.85rem; /* Diperbesar */
            font-weight: 700; /* Bold */
            color: #0f0f0f;
        }

        /* ── PRODUCT LIST ── */
        .checkout-product-item {
            display: flex;
            gap: 16px;
            padding: 16px 0;
            border-bottom: 1px solid #f5f5f5;
        }
        .checkout-product-item:last-child { border-bottom: none; padding-bottom: 0; }
        .checkout-product-img {
            width: 64px;
            height: 64px;
            border-radius: 2px;
            object-fit: cover;
            border: 1px solid #ebebeb;
            flex-shrink: 0;
        }
        .checkout-product-img-placeholder {
            width: 64px;
            height: 64px;
            border-radius: 2px;
            background: #fafafa;
            border: 1px solid #ebebeb;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .checkout-product-info { flex: 1; }
        .checkout-product-name {
            font-size: 0.9rem; /* Diperbesar */
            font-weight: 700; /* Bold */
            color: #1a1a1a;
            margin-bottom: 4px;
        }
        .checkout-product-variant {
            font-size: 0.75rem; /* Diperbesar */
            font-weight: 500; /* Bold */
            color: #777;
            margin-bottom: 6px;
        }
        .checkout-product-price {
            font-size: 0.85rem; /* Diperbesar */
            font-weight: 700; /* Bold */
            color: #0f0f0f;
        }
        .checkout-product-qty {
            font-size: 0.8rem; /* Diperbesar */
            font-weight: 600; /* Bold */
            color: #333;
        }

        /* ── SUMMARY SIDEBAR ── */
        .checkout-summary {
            background: #fff;
            border: 1px solid #ebebeb;
            border-radius: 3px;
            position: sticky;
            top: 24px;
        }
        .checkout-summary-header {
            padding: 16px 20px;
            border-bottom: 1px solid #ebebeb;
        }
        .checkout-summary-title {
            font-size: 1.1rem; /* Diperbesar */
            font-weight: 700; /* Bold */
            color: #0f0f0f;
            margin: 0;
        }
        .checkout-summary-body { padding: 20px; }
        .checkout-summary-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 12px;
        }
        .checkout-summary-label {
            color: #555;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            font-size: 0.75rem; /* Diperbesar */
            font-weight: 600; /* Bold */
        }
        .checkout-summary-value {
            color: #1a1a1a;
            font-weight: 700; /* Bold */
            font-size: 0.9rem; /* Diperbesar */
        }
        .checkout-summary-total {
            border-top: 1px solid #ebebeb;
            padding-top: 16px;
            margin-top: 8px;
        }
        .checkout-summary-total .checkout-summary-label {
            font-size: 0.85rem; /* Diperbesar */
            font-weight: 700; /* Bold */
            color: #1a1a1a;
        }
        .checkout-summary-total .checkout-summary-value {
            font-size: 1.3rem; /* Diperbesar */
            font-weight: 700; /* Bold */
            color: #0f0f0f;
        }
        .checkout-submit-btn {
            width: 100%;
            background: #0f0f0f;
            color: #fff;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            font-size: 0.8rem; /* Diperbesar */
            font-weight: 700; /* Bold */
            letter-spacing: 0.14em;
            text-transform: uppercase;
            padding: 14px 20px;
            border: none;
            border-radius: 2px;
            cursor: pointer;
            transition: background 0.2s;
            margin-top: 20px;
        }
        .checkout-submit-btn:hover:not(:disabled) { background: #333; }
        .checkout-submit-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        .checkout-terms {
            font-size: 0.65rem; /* Diperbesar */
            font-weight: 500; /* Bold */
            color: #999;
            text-align: center;
            margin-top: 16px;
        }

        /* ── FORM INLINE ── */
        .checkout-form-inline {
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid #ebebeb;
        }
        .checkout-form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }
        .checkout-form-field {
            margin-bottom: 16px;
        }
        .checkout-form-label {
            display: block;
            font-size: 0.7rem; /* Diperbesar */
            font-weight: 700; /* Bold */
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: #555;
            margin-bottom: 6px;
        }
        .checkout-form-input, .checkout-form-select {
            width: 100%;
            padding: 10px 12px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            font-size: 0.85rem; /* Diperbesar */
            font-weight: 400; /* Normal */
            border: 1px solid #ebebeb;
            border-radius: 2px;
            background: #fff;
        }
        .checkout-form-input:focus, .checkout-form-select:focus {
            outline: none;
            border-color: #0f0f0f;
        }
        .checkout-form-actions {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            margin-top: 20px;
        }
        .checkout-form-cancel {
            font-size: 0.75rem; /* Diperbesar */
            font-weight: 700; /* Bold */
            letter-spacing: 0.1em;
            text-transform: uppercase;
            background: none;
            border: none;
            cursor: pointer;
            padding: 8px 16px;
            color: #aaa;
        }
        .checkout-form-cancel:hover { color: #c62828; }
        .checkout-form-submit {
            background: #0f0f0f;
            color: #fff;
            font-size: 0.75rem; /* Diperbesar */
            font-weight: 700; /* Bold */
            letter-spacing: 0.1em;
            text-transform: uppercase;
            padding: 8px 20px;
            border: none;
            border-radius: 2px;
            cursor: pointer;
        }
        .checkout-form-submit:hover { background: #333; }
        .checkout-full-width { grid-column: 1 / -1; }

        .hidden { display: none; }
    </style>

    <div class="checkout-wrap">
        <div class="checkout-inner">

            <?php if(session('error')): ?>
                <div class="checkout-alert checkout-alert-error"><?php echo e(session('error')); ?></div>
            <?php endif; ?>
            <?php if(session('success')): ?>
                <div class="checkout-alert checkout-alert-success"><?php echo e(session('success')); ?></div>
            <?php endif; ?>

            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">

                
                <div class="lg:col-span-2">

                    
                    <div class="checkout-section">
                        <div class="checkout-section-header">
                            <h2 class="checkout-section-title">Alamat Pengiriman</h2>
                        </div>
                        <div class="checkout-section-body">
                            <?php if($addresses->isEmpty()): ?>
                                <div class="text-center py-8">
                                    <div class="text-sm text-gray-400 mb-4">Belum ada alamat tersimpan</div>
                                    <button type="button" onclick="toggleAddressForm()" class="checkout-add-address-btn">+ Tambah Alamat</button>
                                </div>
                            <?php else: ?>
                                <div class="checkout-address-grid">
                                    <?php $__currentLoopData = $addresses; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $address): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <div class="checkout-address-item <?php echo e($loop->first ? 'selected' : ''); ?>"
                                         onclick="selectAddress(<?php echo e($address->id); ?>)">
                                        <input type="radio" name="address_id" value="<?php echo e($address->id); ?>"
                                               form="checkout-form"
                                               <?php echo e($loop->first ? 'checked' : ''); ?>

                                               class="checkout-address-radio"
                                               id="addr-<?php echo e($address->id); ?>">
                                        <div class="checkout-address-name">
                                            <?php echo e($address->recipient_name); ?>

                                            <span class="checkout-address-phone"><?php echo e($address->phone); ?></span>
                                            <?php if($address->is_primary || $address->is_default): ?>
                                                <span class="checkout-address-badge">Utama</span>
                                            <?php endif; ?>
                                        </div>
                                        <div class="checkout-address-text"><?php echo e($address->address); ?></div>
                                        <div class="checkout-address-text" style="font-size: 0.75rem; margin-top: 4px;">
                                            <?php echo e($address->village); ?>, <?php echo e($address->district); ?>, <?php echo e($address->city); ?>, <?php echo e($address->province); ?> - <?php echo e($address->postal_code); ?>

                                        </div>
                                        <button type="button" onclick="openEditModal(<?php echo e($address->id); ?>)"
                                                class="checkout-add-address-btn" style="margin-top: 8px;">Edit</button>
                                    </div>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </div>
                                <div class="checkout-add-address">
                                    <button type="button" onclick="toggleAddressForm()" class="checkout-add-address-btn">+ Tambah Alamat Baru</button>
                                </div>
                            <?php endif; ?>

                            
                            <div id="inline-add-address" class="hidden checkout-form-inline">
                                <form id="add-address-form" action="<?php echo e(route('addresses.store')); ?>" method="POST">
                                    <?php echo csrf_field(); ?>
                                    <input type="hidden" name="redirect_back" value="<?php echo e(url()->current()); ?>">
                                    <div class="checkout-form-grid">
                                        <div class="checkout-form-field">
                                            <label class="checkout-form-label">Label Alamat</label>
                                            <input type="text" name="label" placeholder="Rumah / Kantor" class="checkout-form-input" required>
                                        </div>
                                        <div class="checkout-form-field">
                                            <label class="checkout-form-label">Nama Penerima</label>
                                            <input type="text" name="recipient_name" class="checkout-form-input" required>
                                        </div>
                                        <div class="checkout-form-field checkout-full-width">
                                            <label class="checkout-form-label">Nomor HP</label>
                                            <input type="text" name="phone" class="checkout-form-input" required>
                                        </div>
                                        <div class="checkout-form-field">
                                            <label class="checkout-form-label">Provinsi</label>
                                            <select id="inline_select_province" class="checkout-form-select" required>
                                                <option value="">Pilih Provinsi...</option>
                                            </select>
                                            <input type="hidden" name="province" id="inline_input_province">
                                        </div>
                                        <div class="checkout-form-field">
                                            <label class="checkout-form-label">Kota/Kabupaten</label>
                                            <select id="inline_select_city" class="checkout-form-select" disabled required>
                                                <option value="">Pilih Kota...</option>
                                            </select>
                                            <input type="hidden" name="city" id="inline_input_city">
                                        </div>
                                        <div class="checkout-form-field">
                                            <label class="checkout-form-label">Kecamatan</label>
                                            <select id="inline_select_district" class="checkout-form-select" disabled required>
                                                <option value="">Pilih Kecamatan...</option>
                                            </select>
                                            <input type="hidden" name="district" id="inline_input_district">
                                        </div>
                                        <div class="checkout-form-field">
                                            <label class="checkout-form-label">Kelurahan/Desa</label>
                                            <select id="inline_select_village" class="checkout-form-select" disabled required>
                                                <option value="">Pilih Kelurahan...</option>
                                            </select>
                                            <input type="hidden" name="village" id="inline_input_village">
                                        </div>
                                        <div class="checkout-form-field">
                                            <label class="checkout-form-label">Kode Pos</label>
                                            <input type="number" name="postal_code" class="checkout-form-input" required>
                                        </div>
                                        <div class="checkout-form-field checkout-full-width">
                                            <label class="checkout-form-label">Alamat Lengkap</label>
                                            <textarea name="address" rows="2" class="checkout-form-input" required></textarea>
                                        </div>
                                    </div>
                                    <div class="checkout-form-actions">
                                        <button type="button" onclick="toggleAddressForm()" class="checkout-form-cancel">Batal</button>
                                        <button type="submit" class="checkout-form-submit">Simpan Alamat</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    
                    <div class="checkout-section">
                        <div class="checkout-section-header">
                            <h2 class="checkout-section-title">Pilih Kurir</h2>
                        </div>
                        <div class="checkout-section-body">
                            <div class="checkout-courier-grid" id="courier-list">
                                <?php
                                    $couriers = [
                                        ['name' => 'JNE', 'value' => 'JNE', 'eta' => '2-3 hari', 'cost' => 10000],
                                        ['name' => 'J&T', 'value' => 'J&T', 'eta' => '2-4 hari', 'cost' => 6000],
                                        ['name' => 'SiCepat', 'value' => 'SiCepat', 'eta' => '1-2 hari', 'cost' => 15000],
                                    ];
                                ?>
                                <?php $__currentLoopData = $couriers; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $courier): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <div class="checkout-courier-item <?php echo e($index == 0 ? 'selected' : ''); ?>" data-cost="<?php echo e($courier['cost']); ?>" onclick="selectCourier(this)">
                                    <input type="radio" name="courier_name" value="<?php echo e($courier['value']); ?>"
                                           form="checkout-form"
                                           <?php echo e($index == 0 ? 'checked' : ''); ?>

                                           class="checkout-courier-radio">
                                    <div class="checkout-courier-card">
                                        <div class="checkout-courier-icon">📦</div>
                                        <div class="checkout-courier-name"><?php echo e($courier['name']); ?></div>
                                        <div class="checkout-courier-eta"><?php echo e($courier['eta']); ?></div>
                                        <div class="checkout-courier-cost">Rp <?php echo e(number_format($courier['cost'], 0, ',', '.')); ?></div>
                                    </div>
                                </div>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </div>
                            <input type="hidden" name="shipping_cost" id="shipping_cost" value="<?php echo e($couriers[0]['cost']); ?>" form="checkout-form">
                        </div>
                    </div>

                    
                    <div class="checkout-section">
                        <div class="checkout-section-header">
                            <h2 class="checkout-section-title">Daftar Produk</h2>
                        </div>
                        <div class="checkout-section-body">
                            <?php $__currentLoopData = $cartItems; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <?php
                                $prod = $item->product;
                                $variant = $item->variant ?? null;
                                $harga = $item->final_price ?? $item->price ?? 0;
                                $qty = $item->quantity;
                                $itemImgPath = null;
                                if ($variant && $variant->image) {
                                    $itemImgPath = $variant->image->image_path;
                                } elseif ($prod->images && $prod->images->count() > 0) {
                                    $cover = $prod->images->firstWhere('is_primary', true) ?? $prod->images->first();
                                    $itemImgPath = $cover->image_path;
                                }
                            ?>
                            <div class="checkout-product-item">
                                <?php if($itemImgPath): ?>
                                    <img src="<?php echo e(asset('storage/' . $itemImgPath)); ?>" class="checkout-product-img">
                                <?php else: ?>
                                    <div class="checkout-product-img-placeholder">
                                        <svg width="24" height="24" fill="none" stroke="#ccc" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                        </svg>
                                    </div>
                                <?php endif; ?>
                                <div class="checkout-product-info">
                                    <div class="checkout-product-name"><?php echo e($prod->name); ?></div>
                                    <?php if($variant): ?>
                                        <div class="checkout-product-variant"><?php echo e($variant->size ?? ''); ?> <?php echo e($variant->color ?? ''); ?></div>
                                    <?php endif; ?>
                                    <div class="checkout-product-price">Rp <?php echo e(number_format($harga, 0, ',', '.')); ?></div>
                                </div>
                                <div class="checkout-product-qty">× <?php echo e($qty); ?></div>
                            </div>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </div>
                    </div>
                </div>

                
                <div class="lg:col-span-1">
                    <div class="checkout-summary">
                        <div class="checkout-summary-header">
                            <h2 class="checkout-summary-title">Ringkasan Pembayaran</h2>
                        </div>
                        <div class="checkout-summary-body">
                            <div class="checkout-summary-row">
                                <span class="checkout-summary-label">Subtotal Produk</span>
                                <span class="checkout-summary-value" id="display-subtotal">Rp <?php echo e(number_format($checkoutSubtotal, 0, ',', '.')); ?></span>
                            </div>
                            <div class="checkout-summary-row">
                                <span class="checkout-summary-label">Ongkos Kirim</span>
                                <span class="checkout-summary-value" id="display-shipping">Rp <?php echo e(number_format($couriers[0]['cost'], 0, ',', '.')); ?></span>
                            </div>
                            <div class="checkout-summary-row checkout-summary-total">
                                <span class="checkout-summary-label">Total Bayar</span>
                                <span class="checkout-summary-value" id="display-total">Rp <?php echo e(number_format($checkoutSubtotal + $couriers[0]['cost'], 0, ',', '.')); ?></span>
                            </div>

                            <button type="submit" form="checkout-form"
                                    class="checkout-submit-btn"
                                    <?php echo e($addresses->isEmpty() ? 'disabled' : ''); ?>>
                                Pesan & Bayar
                            </button>

                            <div class="checkout-terms">
                                Dengan mengklik tombol di atas, Anda menyetujui Syarat & Ketentuan
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            
            <form id="checkout-form" action="<?php echo e(route('checkout.store')); ?>" method="POST" class="hidden">
                <?php echo csrf_field(); ?>
            </form>
        </div>
    </div>

    
    <div id="edit-address-modal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center;">
        <div style="background: #fff; max-width: 600px; width: 90%; margin: auto; border-radius: 3px; border: 1px solid #ebebeb;">
            <div style="padding: 20px 24px; border-bottom: 1px solid #ebebeb; display: flex; justify-content: space-between; align-items: center;">
                <h3 style="font-size: 1.2rem; font-weight: 700; margin: 0;">Edit Alamat</h3>
                <button onclick="closeEditModal()" style="background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #aaa;">×</button>
            </div>
            <div style="padding: 24px;">
                <form id="edit-address-form" method="POST">
                    <?php echo csrf_field(); ?>
                    <?php echo method_field('PUT'); ?>
                    <div class="checkout-form-grid">
                        <div class="checkout-form-field">
                            <label class="checkout-form-label">Label Alamat</label>
                            <input id="edit_label" type="text" name="label" class="checkout-form-input" required>
                        </div>
                        <div class="checkout-form-field">
                            <label class="checkout-form-label">Nama Penerima</label>
                            <input id="edit_recipient_name" type="text" name="recipient_name" class="checkout-form-input" required>
                        </div>
                        <div class="checkout-form-field checkout-full-width">
                            <label class="checkout-form-label">Nomor HP</label>
                            <input id="edit_phone" type="text" name="phone" class="checkout-form-input" required>
                        </div>
                        <div class="checkout-form-field">
                            <label class="checkout-form-label">Provinsi</label>
                            <select id="edit_select_province" class="checkout-form-select" required>
                                <option value="">Pilih Provinsi...</option>
                            </select>
                            <input type="hidden" name="province" id="edit_input_province">
                        </div>
                        <div class="checkout-form-field">
                            <label class="checkout-form-label">Kota/Kabupaten</label>
                            <select id="edit_select_city" class="checkout-form-select" required>
                                <option value="">Pilih Kota...</option>
                            </select>
                            <input type="hidden" name="city" id="edit_input_city">
                        </div>
                        <div class="checkout-form-field">
                            <label class="checkout-form-label">Kecamatan</label>
                            <select id="edit_select_district" class="checkout-form-select" required>
                                <option value="">Pilih Kecamatan...</option>
                            </select>
                            <input type="hidden" name="district" id="edit_input_district">
                        </div>
                        <div class="checkout-form-field">
                            <label class="checkout-form-label">Kelurahan/Desa</label>
                            <select id="edit_select_village" class="checkout-form-select" required>
                                <option value="">Pilih Kelurahan...</option>
                            </select>
                            <input type="hidden" name="village" id="edit_input_village">
                        </div>
                        <div class="checkout-form-field">
                            <label class="checkout-form-label">Kode Pos</label>
                            <input id="edit_postal_code" type="number" name="postal_code" class="checkout-form-input" required>
                        </div>
                        <div class="checkout-form-field checkout-full-width">
                            <label class="checkout-form-label">Alamat Lengkap</label>
                            <textarea id="edit_address" name="address" rows="2" class="checkout-form-input" required></textarea>
                        </div>
                    </div>
                    <div class="checkout-form-actions">
                        <button type="button" onclick="closeEditModal()" class="checkout-form-cancel">Batal</button>
                        <button type="submit" class="checkout-form-submit">Simpan Perubahan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script src="https://app.sandbox.midtrans.com/snap/snap.js" data-client-key="<?php echo e(config('midtrans.client_key')); ?>"></script>
    <script>
        const userAddresses = <?php echo json_encode($addresses, 15, 512) ?>;
        const subtotalAfterDiscount = <?php echo e($checkoutSubtotal); ?>;

        function formatRp(num) {
            return 'Rp ' + Math.round(num).toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
        }

        function selectCourier(element) {
            document.querySelectorAll('.checkout-courier-item').forEach(item => {
                item.classList.remove('selected');
            });
            element.classList.add('selected');
            const radio = element.querySelector('input[type="radio"]');
            if (radio) radio.checked = true;
            const cost = parseInt(element.dataset.cost);
            document.getElementById('shipping_cost').value = cost;
            document.getElementById('display-shipping').textContent = formatRp(cost);
            document.getElementById('display-total').textContent = formatRp(subtotalAfterDiscount + cost);
        }

        function selectAddress(addressId) {
            document.querySelectorAll('.checkout-address-item').forEach(item => {
                item.classList.remove('selected');
            });
            const selectedItem = document.querySelector(`.checkout-address-item input[value="${addressId}"]`).closest('.checkout-address-item');
            if (selectedItem) selectedItem.classList.add('selected');
        }

        function toggleAddressForm() {
            const box = document.getElementById('inline-add-address');
            box.classList.toggle('hidden');
            if (!box.classList.contains('hidden')) {
                box.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
            }
        }

        function openEditModal(addressId) {
            const addr = userAddresses.find(a => a.id === addressId);
            if (!addr) return;
            document.getElementById('edit-address-form').action = `/addresses/${addr.id}`;
            document.getElementById('edit_label').value = addr.label || '';
            document.getElementById('edit_recipient_name').value = addr.recipient_name;
            document.getElementById('edit_phone').value = addr.phone;
            document.getElementById('edit_postal_code').value = addr.postal_code;
            document.getElementById('edit_address').value = addr.address;
            document.getElementById('edit-address-modal').style.display = 'flex';
            
            setTimeout(() => {
                const provSelect = document.getElementById('edit_select_province');
                Array.from(provSelect.options).forEach(opt => {
                    if (opt.getAttribute('data-name') === addr.province) {
                        opt.selected = true;
                        document.getElementById('edit_input_province').value = addr.province;
                        provSelect.dispatchEvent(new Event('change'));
                        setTimeout(() => {
                            Array.from(document.getElementById('edit_select_city').options).forEach(cOpt => {
                                if (cOpt.getAttribute('data-name') === addr.city) {
                                    cOpt.selected = true;
                                    document.getElementById('edit_input_city').value = addr.city;
                                    document.getElementById('edit_select_city').dispatchEvent(new Event('change'));
                                    setTimeout(() => {
                                        Array.from(document.getElementById('edit_select_district').options).forEach(dOpt => {
                                            if (dOpt.getAttribute('data-name') === addr.district) {
                                                dOpt.selected = true;
                                                document.getElementById('edit_input_district').value = addr.district;
                                                document.getElementById('edit_select_district').dispatchEvent(new Event('change'));
                                                setTimeout(() => {
                                                    Array.from(document.getElementById('edit_select_village').options).forEach(vOpt => {
                                                        if (vOpt.getAttribute('data-name') === addr.village) {
                                                            vOpt.selected = true;
                                                            document.getElementById('edit_input_village').value = addr.village;
                                                        }
                                                    });
                                                }, 200);
                                            }
                                        });
                                    }, 200);
                                }
                            });
                        }, 200);
                    }
                });
            }, 100);
        }

        function closeEditModal() {
            document.getElementById('edit-address-modal').style.display = 'none';
        }

        // Region dropdown functions
        function setupInlineDropdowns() {
            const provSelect = document.getElementById('inline_select_province');
            const citySelect = document.getElementById('inline_select_city');
            const distSelect = document.getElementById('inline_select_district');
            const villSelect = document.getElementById('inline_select_village');
            const provInput = document.getElementById('inline_input_province');
            const cityInput = document.getElementById('inline_input_city');
            const distInput = document.getElementById('inline_input_district');
            const villInput = document.getElementById('inline_input_village');

            fetch('/api/regions/provinces').then(r => r.json()).then(data => {
                data.forEach(p => provSelect.insertAdjacentHTML('beforeend', `<option value="${p.code}" data-name="${p.name}">${p.name}</option>`));
            });
            provSelect.addEventListener('change', function() {
                provInput.value = this.options[this.selectedIndex]?.getAttribute('data-name') || '';
                citySelect.innerHTML = '<option value="">Pilih Kota...</option>';
                distSelect.innerHTML = '<option value="">Pilih Kecamatan...</option>';
                villSelect.innerHTML = '<option value="">Pilih Kelurahan...</option>';
                citySelect.disabled = !this.value; distSelect.disabled = true; villSelect.disabled = true;
                cityInput.value = ''; distInput.value = ''; villInput.value = '';
                if (this.value) fetch('/api/regions/cities/' + this.value).then(r => r.json()).then(data => {
                    data.forEach(c => citySelect.insertAdjacentHTML('beforeend', `<option value="${c.code}" data-name="${c.name}">${c.name}</option>`));
                });
            });
            citySelect.addEventListener('change', function() {
                cityInput.value = this.options[this.selectedIndex]?.getAttribute('data-name') || '';
                distSelect.innerHTML = '<option value="">Pilih Kecamatan...</option>';
                villSelect.innerHTML = '<option value="">Pilih Kelurahan...</option>';
                distSelect.disabled = !this.value; villSelect.disabled = true;
                distInput.value = ''; villInput.value = '';
                if (this.value) fetch('/api/regions/districts/' + this.value).then(r => r.json()).then(data => {
                    data.forEach(d => distSelect.insertAdjacentHTML('beforeend', `<option value="${d.code}" data-name="${d.name}">${d.name}</option>`));
                });
            });
            distSelect.addEventListener('change', function() {
                distInput.value = this.options[this.selectedIndex]?.getAttribute('data-name') || '';
                villSelect.innerHTML = '<option value="">Pilih Kelurahan...</option>';
                villSelect.disabled = !this.value; villInput.value = '';
                if (this.value) fetch('/api/regions/villages/' + this.value).then(r => r.json()).then(data => {
                    data.forEach(v => villSelect.insertAdjacentHTML('beforeend', `<option value="${v.code}" data-name="${v.name}">${v.name}</option>`));
                });
            });
            villSelect.addEventListener('change', function() {
                villInput.value = this.options[this.selectedIndex]?.getAttribute('data-name') || '';
            });
        }

        function setupEditDropdowns() {
            const provSelect = document.getElementById('edit_select_province');
            const citySelect = document.getElementById('edit_select_city');
            const distSelect = document.getElementById('edit_select_district');
            const villSelect = document.getElementById('edit_select_village');
            const provInput = document.getElementById('edit_input_province');
            const cityInput = document.getElementById('edit_input_city');
            const distInput = document.getElementById('edit_input_district');
            const villInput = document.getElementById('edit_input_village');

            fetch('/api/regions/provinces').then(r => r.json()).then(data => {
                provSelect.innerHTML = '<option value="">Pilih Provinsi...</option>';
                data.forEach(p => provSelect.insertAdjacentHTML('beforeend', `<option value="${p.code}" data-name="${p.name}">${p.name}</option>`));
            });
            provSelect.addEventListener('change', function() {
                provInput.value = this.options[this.selectedIndex]?.getAttribute('data-name') || '';
                citySelect.innerHTML = '<option value="">Pilih Kota...</option>';
                distSelect.innerHTML = '<option value="">Pilih Kecamatan...</option>';
                villSelect.innerHTML = '<option value="">Pilih Kelurahan...</option>';
                citySelect.disabled = !this.value; distSelect.disabled = true; villSelect.disabled = true;
                cityInput.value = ''; distInput.value = ''; villInput.value = '';
                if (this.value) fetch('/api/regions/cities/' + this.value).then(r => r.json()).then(data => {
                    data.forEach(c => citySelect.insertAdjacentHTML('beforeend', `<option value="${c.code}" data-name="${c.name}">${c.name}</option>`));
                });
            });
            citySelect.addEventListener('change', function() {
                cityInput.value = this.options[this.selectedIndex]?.getAttribute('data-name') || '';
                distSelect.innerHTML = '<option value="">Pilih Kecamatan...</option>';
                villSelect.innerHTML = '<option value="">Pilih Kelurahan...</option>';
                distSelect.disabled = !this.value; villSelect.disabled = true;
                distInput.value = ''; villInput.value = '';
                if (this.value) fetch('/api/regions/districts/' + this.value).then(r => r.json()).then(data => {
                    data.forEach(d => distSelect.insertAdjacentHTML('beforeend', `<option value="${d.code}" data-name="${d.name}">${d.name}</option>`));
                });
            });
            distSelect.addEventListener('change', function() {
                distInput.value = this.options[this.selectedIndex]?.getAttribute('data-name') || '';
                villSelect.innerHTML = '<option value="">Pilih Kelurahan...</option>';
                villSelect.disabled = !this.value; villInput.value = '';
                if (this.value) fetch('/api/regions/villages/' + this.value).then(r => r.json()).then(data => {
                    data.forEach(v => villSelect.insertAdjacentHTML('beforeend', `<option value="${v.code}" data-name="${v.name}">${v.name}</option>`));
                });
            });
            villSelect.addEventListener('change', function() {
                villInput.value = this.options[this.selectedIndex]?.getAttribute('data-name') || '';
            });
        }

        document.addEventListener('DOMContentLoaded', function() {
            setupInlineDropdowns();
            setupEditDropdowns();
        });

        // Checkout form submission
        let savedSnapToken = null;
        let savedRedirectUrl = null;

        function openSnapPopup(snapToken, redirectUrl, submitBtn) {
            window.snap.pay(snapToken, {
                onSuccess: () => { window.location.href = redirectUrl; },
                onPending: () => { window.location.href = redirectUrl; },
                onError: () => { window.location.href = redirectUrl; },
                onClose: () => {
                    submitBtn.disabled = false;
                    submitBtn.innerHTML = 'Pesan & Bayar';
                }
            });
        }

        document.getElementById('checkout-form').addEventListener('submit', async function(e) {
            e.preventDefault();
            const submitBtn = document.querySelector('[form="checkout-form"][type="submit"]');
            submitBtn.disabled = true;
            submitBtn.innerHTML = 'Memproses...';

            if (savedSnapToken && savedRedirectUrl) {
                openSnapPopup(savedSnapToken, savedRedirectUrl, submitBtn);
                return;
            }

            const data = new FormData();
            data.append('_token', '<?php echo e(csrf_token()); ?>');
            const addressId = document.querySelector('input[name="address_id"]:checked')?.value;
            const courierName = document.querySelector('input[name="courier_name"]:checked')?.value;
            const shippingCost = document.getElementById('shipping_cost')?.value;
            if (addressId) data.append('address_id', addressId);
            if (courierName) data.append('courier_name', courierName);
            if (shippingCost) data.append('shipping_cost', shippingCost);

            try {
                const response = await fetch('<?php echo e(route('checkout.store')); ?>', {
                    method: 'POST',
                    body: data,
                    headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }
                });
                const result = await response.json();
                if (response.ok && result.snap_token) {
                    savedSnapToken = result.snap_token;
                    savedRedirectUrl = result.redirect_url;
                    openSnapPopup(savedSnapToken, savedRedirectUrl, submitBtn);
                } else {
                    alert(result.message || 'Gagal memproses pesanan.');
                    submitBtn.disabled = false;
                    submitBtn.innerHTML = 'Pesan & Bayar';
                }
            } catch (error) {
                alert('Terjadi kesalahan jaringan. Silakan coba lagi.');
                submitBtn.disabled = false;
                submitBtn.innerHTML = 'Pesan & Bayar';
            }
        });
    </script>
 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $attributes = $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $component = $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?><?php /**PATH C:\laragon\www\toko\resources\views/customer/checkout/index.blade.php ENDPATH**/ ?>