<?php $__env->startSection('content'); ?>
    <div class="container-fluid p-0"
        style="min-height: 100vh; background: #fff; font-family: 'Plus Jakarta Sans', sans-serif;">
        <div class="row g-0" style="min-height: 100vh;">

            <!-- Sidebar Illustration -->
            <div class="col-lg-4 d-none d-lg-flex align-items-center justify-content-center" style="background-image: url('<?php echo e(asset('assets/img/jasa-cover.png')); ?>'); 
                        background-size: cover; background-position: center;">
                <div class="p-5 text-white position-relative" style="z-index: 3; max-width: 420px; background: rgba(0,0,0,0.65); backdrop-filter: blur(10px); border-radius: 24px;">
                <span class="badge bg-primary px-3 py-2 mb-3 fw-bold text-uppercase" style="font-size: 10px; letter-spacing: 1px;">Service Excellence</span>
                <h1 class="display-6 fw-900 mb-2">Solusi Kilat <span class="text-info">Printer Anda.</span></h1>
                <p class="opacity-75 mb-5" style="font-size: 14px;">Teknisi berpengalaman, Suku cadang asli, & Bergaransi.</p>

                <!-- Customer Satisfaction Stats (Sama seperti Homepage) -->
                <div class="p-4 rounded-4" style="background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);">
                    <div class="row text-center g-3">
                        <div class="col-6 border-end border-white border-opacity-10">
                            <div class="fw-900 fs-4 mb-0">2.5k+</div>
                            <div class="small fw-700 opacity-50" style="font-size: 9px;">UNIT SELESAI</div>
                        </div>
                        <div class="col-6 text-center">
                            <div class="fw-900 fs-4 mb-0 text-warning d-flex align-items-center justify-content-center">
                                <?php echo e(number_format((float)$jasa_avg_rating, 1)); ?> <i class="lni lni-star-fill ms-2 fs-6"></i>
                            </div>
                            <div class="small fw-700 opacity-50 text-uppercase" style="font-size: 8px;">(<?php echo e($jasa_total_reviews); ?> ULASAN)</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Form Section -->
        <div class="col-lg-8 bg-white overflow-auto" style="max-height: 100vh;">
            <div class="p-4 p-md-5 w-100" style="max-width: 850px; margin: 0 auto;">
                
                
                <?php if($activeJasas->count() > 0): ?>
                <div class="mb-5 animate-in">
                    <div class="d-flex align-items-center justify-content-between mb-3 px-1">
                        <h6 class="fw-900 text-dark mb-0 text-uppercase" style="font-size: 11px; letter-spacing: 1.5px;">Pesanan Service Anda</h6>
                        <a href="<?php echo e(route('orders.history')); ?>" class="small fw-bold text-primary text-decoration-none" style="font-size: 11px;">Lihat Semua <i class="lni lni-chevron-right ms-1"></i></a>
                    </div>
                    <div class="row g-3 overflow-auto flex-nowrap pb-2" style="scrollbar-width: none; -ms-overflow-style: none;">
                        <?php $__currentLoopData = $activeJasas->take(3); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $j): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <div class="col-md-5 col-10 flex-shrink-0">
                            <div class="p-3 rounded-4 border bg-light shadow-sm position-relative">
                                <div class="d-flex align-items-center justify-content-between mb-2">
                                    <div class="small fw-800 text-dark text-truncate" style="max-width: 140px;"><?php echo e($j->merek_printer); ?> - <?php echo e($j->tipe_printer); ?></div>
                                    <span class="badge rounded-pill fw-900" 
                                          style="font-size: 8px; 
                                          <?php if($j->status == 'pending'): ?> background: #fef3c7; color: #92400e; 
                                          <?php elseif($j->status == 'proses'): ?> background: #dbeafe; color: #1e40af; 
                                          <?php elseif($j->status == 'selesai'): ?> background: #d1fae5; color: #065f46;
                                          <?php else: ?> background: #fee2e2; color: #991b1b; <?php endif; ?>">
                                        <?php echo e(strtoupper($j->status)); ?>

                                    </span>
                                </div>
                                <?php if($j->rating): ?>
                                    <div class="text-warning mb-0" style="font-size: 10px;">
                                        <?php for($i=1; $i<=5; $i++): ?>
                                            <i class="lni lni-star-fill <?php echo e($i <= $j->rating ? '' : 'opacity-25'); ?>"></i>
                                        <?php endfor; ?>
                                        <span class="ms-1 text-muted fw-normal">Selesai Berating</span>
                                    </div>
                                <?php else: ?>
                                    <div class="text-muted" style="font-size: 10px;">
                                        ID Tiket: #SVR-<?php echo e($j->id); ?> • <?php echo e($j->created_at->format('d M')); ?>

                                    </div>
                                <?php endif; ?>
                            </div>
                        </div>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </div>
                </div>
                <hr class="mb-5 opacity-10">
                <?php endif; ?>

                <div class="mb-5">
                    <h2 class="fw-900 text-dark mb-2">Layanan Service Baru</h2>
                    <p class="text-muted">Butuh perbaikan printer lainnya? Isi form di bawah ini.</p>
                </div>

                    <form action="<?php echo e(route('jasa.kirim')); ?>" method="POST" enctype="multipart/form-data"
                        id="mainServiceForm">
                        <?php echo csrf_field(); ?>

                        <!-- 01 Data Pemilik (Otomatis) -->
                        <div class="bg-light rounded-4 p-4 border border-white shadow-sm mb-5">
                            <label class="d-block fw-bold small text-muted text-uppercase mb-3"
                                style="letter-spacing: 1px; font-size: 10px;">01. Data Pemilik (Otomatis dari Akun)</label>
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <label class="small text-muted mb-1 d-block">Nama Lengkap</label>
                                    <input type="text" class="form-control bg-white border-0 py-2 fw-semibold"
                                        value="<?php echo e(auth()->user()->name); ?>" readonly>
                                </div>
                                <div class="col-md-4">
                                    <label class="small text-muted mb-1 d-block">Email Aktif</label>
                                    <input type="text" class="form-control bg-white border-0 py-2 fw-semibold"
                                        value="<?php echo e(auth()->user()->email); ?>" readonly>
                                </div>
                                <div class="col-md-4">
                                    <label class="small text-muted mb-1 d-block">Nomor WhatsApp</label>
                                    <input type="text" class="form-control bg-white border-0 py-2 fw-semibold text-primary"
                                        value="<?php echo e(auth()->user()->phone); ?>" readonly>
                                </div>
                            </div>
                        </div>

                        <!-- 02 Informasi Printer -->
                        <div class="mb-5">
                            <label class="form-label fw-bold small text-muted text-uppercase mb-4"
                                style="letter-spacing: 1px; font-size: 10px;">02. Informasi Printer Anda</label>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label fw-bold" style="font-size: 13px;">Pilih Merek Printer</label>
                                    <select name="merek_printer" id="selectMerek"
                                        class="form-select border-0 bg-light py-3 rounded-4 shadow-none" required>
                                        <option value="" disabled selected>-- Pilih Merek --</option>
                                        <option value="Epson">Epson</option>
                                        <option value="Canon">Canon</option>
                                        <option value="HP">HP</option>
                                        <option value="Brother">Brother</option>
                                        <option value="Lainnya">Merek Lainnya</option>
                                    </select>
                                    <div id="merekLainnyaWrapper" class="mt-2 d-none animate-in">
                                        <input type="text" id="inputMerek" name="merek_printer"
                                            class="form-control border-0 bg-light py-3 rounded-4 shadow-none"
                                            placeholder="Ketik merek printer..." disabled required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-bold" style="font-size: 13px;">Tipe atau Seri
                                        Printer</label>
                                    <input type="text" name="tipe_printer"
                                        class="form-control border-0 bg-light py-3 rounded-4 shadow-none"
                                        placeholder="Contoh: L3110 / Pixma G2010" required>
                                </div>
                            </div>
                        </div>

                        <!-- 03 Masalah Printer -->
                        <div class="mb-5">
                            <label class="form-label fw-bold small text-muted text-uppercase mb-4"
                                style="letter-spacing: 1px; font-size: 10px;">03. Masalah / Kerusakan Printer</label>
                            <div class="row g-3">
                                <div class="col-md-12 mb-3">
                                    <label class="form-label fw-bold" style="font-size: 13px;">Apa masalah utamanya?</label>
                                    <select name="kategori_keluhan" id="selectKeluhan"
                                        class="form-select border-0 bg-light py-3 rounded-4 shadow-none" required>
                                        <option value="" disabled selected>-- Pilih Jenis Kerusakan --</option>
                                        <option value="Paper Jam">Kertas Nyangkut / Macet (Paper Jam)</option>
                                        <option value="Mati Total">Printer Tidak Bisa Nyala (Mati Total)</option>
                                        <option value="Hasil Cetak Bergaris">Hasil Cetak Jelek / Bergaris / Pudar</option>
                                        <option value="Blinking">Lampu Kedap-kedip (Blinking / Ink Pad Full)</option>
                                        <option value="Bunyi Kasar">Printer Berisik / Bunyi Kasar</option>
                                        <option value="Lainnya">Masalah Lainnya</option>
                                    </select>
                                    <div id="keluhanLainnyaWrapper" class="mt-2 d-none animate-in">
                                        <input type="text" id="inputKeluhan" name="kategori_keluhan"
                                            class="form-control border-0 bg-light py-3 rounded-4 shadow-none"
                                            placeholder="Ketik detail masalah utamanya..." disabled required>
                                    </div>
                                </div>
                                <div class="col-md-12 mb-3">
                                    <label class="form-label fw-bold" style="font-size: 13px;">Jelaskan masalahnya secara
                                        singkat</label>
                                    <textarea name="deskripsi_masalah"
                                        class="form-control border-0 bg-light p-4 rounded-4 shadow-none" rows="4"
                                        placeholder="Jelaskan di sini apa yang dirasakan, contoh: Tiba-tiba mati saat ngeprint banyak..."
                                        required></textarea>
                                </div>
                                <div class="col-md-12">
                                    <label class="form-label fw-bold" style="font-size: 13px;">Upload Foto/Video Kerusakan
                                        (Opsional)</label>
                                    <input type="file" name="foto_video"
                                        class="form-control border-0 bg-light py-3 rounded-4 shadow-none"
                                        accept="image/*,video/*">
                                    <div class="form-text small opacity-50">Sangat membantu teknisi kami untuk cek kerusakan
                                        lebih cepat.</div>
                                </div>
                            </div>
                        </div>

                        <!-- 04 Pilihan Servis -->
                        <div class="mb-5">
                            <label class="form-label fw-bold small text-muted text-uppercase mb-4"
                                style="letter-spacing: 1px; font-size: 10px;">04. Cara Servis & Riwayat</label>
                            <div class="row g-4">
                                <div class="col-md-6">
                                    <label class="form-label fw-bold" style="font-size: 13px;">Pernah diservis
                                        sebelumnya?</label>
                                    <select name="pernah_diservis"
                                        class="form-select border-0 bg-light py-3 rounded-4 shadow-none" required>
                                        <option value="" disabled selected>-- Pilih Status --</option>
                                        <option value="Tidak">Belum, Masih Segel Ori</option>
                                        <option value="Iya">Sudah, Pernah Dibongkar/Servis</option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-bold" style="font-size: 13px;">Pilih Metode Servis</label>
                                    <select name="jenis_layanan" id="serviceMethod"
                                        class="form-select border-0 bg-primary text-white py-3 rounded-4 shadow-none fw-bold"
                                        required>
                                        <option value="" disabled selected>-- Pilih Cara Servis --</option>
                                        <option value="Antar ke Toko">Saya Antar Langsung ke Toko</option>
                                        <option value="Panggilan Teknisi">Teknisi Datang Ke Rumah/Kantor</option>
                                    </select>
                                    <div class="mt-2 text-primary small fw-semibold" id="methodHint">Layanan fleksibel
                                        sesuai kenyamanan Anda.</div>
                                </div>
                            </div>
                        </div>

                        <!-- 05 Case A: Alamat (Visual Cards) -->
                        <div class="mb-5 d-none" id="addressSection">
                            <label class="form-label fw-bold small text-muted text-uppercase mb-4"
                                style="letter-spacing: 1px; font-size: 10px;">05. Pilih Lokasi Penjemputan / Servis</label>

                            <!-- Hidden Input untuk menyimpan ID yang dipilih (Required dikontrol via JS) -->
                            <input type="hidden" name="address_id" id="selectedAddressId">

                            <div id="addressCardsWrapper" class="row g-3 mb-4">
                                <?php $__empty_1 = true; $__currentLoopData = $addresses; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $addr): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                                    <div class="col-md-6 address-item" data-id="<?php echo e($addr->id); ?>">
                                        <div class="card h-100 border-2 rounded-4 address-card p-3 shadow-sm"
                                            style="cursor: pointer; transition: all 0.3s ease;">
                                            <div class="d-flex justify-content-between align-items-start">
                                                <div class="flex-grow-1">
                                                    <div class="fw-bold text-dark mb-1 d-flex align-items-center">
                                                        <i class="lni lni-map-marker me-2 text-primary"></i>
                                                        <?php echo e($addr->nama_penerima); ?>

                                                    </div>
                                                    <div class="small text-muted text-truncate-2"
                                                        style="font-size: 12px; line-height: 1.4;">
                                                        <?php echo e($addr->alamat_lengkap); ?>

                                                    </div>
                                                    <div class="small fw-bold text-primary mt-2" style="font-size: 11px;">
                                                        <i class="lni lni-phone me-1"></i> <?php echo e($addr->no_hp); ?>

                                                    </div>
                                                </div>
                                                <button type="button"
                                                    class="btn btn-sm text-danger border-0 p-1 opacity-50 btn-delete-address"
                                                    data-id="<?php echo e($addr->id); ?>">
                                                    <i class="lni lni-trash-can"></i>
                                                </button>
                                            </div>
                                            <div class="selected-check d-none position-absolute top-0 end-0 p-2">
                                                <i class="lni lni-checkmark-circle text-primary" style="font-size: 20px;"></i>
                                            </div>
                                        </div>
                                    </div>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                                    <div class="col-12" id="emptyAddressMsg">
                                        <div class="p-4 bg-light rounded-4 text-center text-muted small border-dashed">
                                            Belum ada alamat tersimpan. Silakan tambah alamat baru.
                                        </div>
                                    </div>
                                <?php endif; ?>
                            </div>

                            <div class="text-start">
                                <button type="button" class="btn btn-outline-primary rounded-pill px-4 py-2 small fw-bold"
                                    data-bs-toggle="modal" data-bs-target="#modalTambahAlamat">
                                    <i class="lni lni-plus me-1"></i> Tambah Lokasi Baru
                                </button>
                            </div>
                            <div class="alert alert-info mt-4 rounded-4 border-0 py-3" style="font-size: 0.85rem;">
                                <i class="lni lni-bullhorn me-2"></i> Teknisi kami akan datang ke koordinat alamat yang Anda
                                pilih di atas.
                            </div>
                        </div>

                        <!-- 05 Case B: Info Toko (Visible when Antar ke Toko is selected) -->
                        <div class="mb-5" id="shopInfoSection">
                            <label class="form-label fw-bold small text-muted text-uppercase mb-4"
                                style="letter-spacing: 1px; font-size: 10px;">05. Antar Unit Ke Workshop Kami</label>
                            <div class="bg-light rounded-5 p-4 border-0 position-relative overflow-hidden shadow-sm">
                                <div class="row align-items-center">
                                    <div class="col-md-8 position-relative" style="z-index: 2;">
                                        <h5 class="fw-bold text-primary mb-2">
                                            <?php echo e($shop_settings['shop_name'] ?? 'PrintPro'); ?> Workshop Pusat</h5>
                                        <p class="mb-3 text-muted" style="font-size: 0.9rem;">
                                            <?php echo e($shop_settings['shop_address'] ?? 'Jl. Raya Utama No. 123, Blok A, Jakarta Barat.'); ?>

                                        </p>
                                        <div class="d-flex gap-3 mb-2">
                                            <div class="badge bg-white text-success border px-3 py-2 rounded-pill shadow-sm"
                                                style="font-size: 11px;">
                                                <i class="lni lni-alarm-clock me-1"></i> Buka 09:00 - 18:00
                                            </div>
                                            <div class="badge bg-white text-primary border px-3 py-2 rounded-pill shadow-sm"
                                                style="font-size: 11px;">
                                                <i class="lni lni-direction me-1"></i> 500m dari Stasiun
                                            </div>
                                        </div>
                                        <a href="<?php echo e(!empty($shop_settings['shop_maps_link']) ? $shop_settings['shop_maps_link'] : 'https://www.google.com/maps?q=' . urlencode($shop_settings['shop_address'] ?? $shop_settings['shop_name'] ?? 'PrintPro')); ?>"
                                            target="_blank"
                                            class="btn btn-sm btn-outline-primary rounded-pill mt-2 px-4 shadow-sm border-2 fw-bold">
                                            <i class="lni lni-map me-1"></i> Lihat Rute di Google Maps
                                        </a>
                                    </div>
                                    <div class="col-md-4 d-none d-md-block">
                                        <img src="https://img.freepik.com/free-vector/office-building-with-modern-transparent-facade_1284-48698.jpg"
                                            class="img-fluid opacity-50" style="filter: grayscale(1);">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Submit Button -->
                        <div class="d-grid mt-5">
                            <button type="submit" class="btn btn-primary btn-lg py-4 fw-bold rounded-4 shadow-lg border-0"
                                style="background: linear-gradient(135deg, #4f46e5, #0ea5e9);">
                                <i class="lni lni-whatsapp me-2"></i> KIRIM ORDER SERVICE KE WHATSAPP
                            </button>
                        </div>

                    </form>

                    <div class="text-center mt-5">
                        <p class="text-muted small">Setelah kirim, admin kami akan segera menghubungi Anda untuk langkah
                            selanjutnya.</p>
                    </div>

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

    <!-- Modal Tambah Alamat -->
    <div class="modal fade" id="modalTambahAlamat" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content border-0 rounded-5 shadow-lg overflow-hidden">
                <div class="modal-header border-0 bg-light p-4">
                    <h5 class="modal-title fw-bold text-dark"><i class="lni lni-pencil-alt me-2 text-primary"></i>Isi Data
                        Alamat Lengkap</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="formSimpanAlamat" autocomplete="off">
                    <?php echo csrf_field(); ?>
                    <div class="modal-body p-4 p-md-5">
                        <div class="row g-4">
                            <div class="col-md-6">
                                <label class="small fw-bold mb-2 text-muted">PROVINSI</label>
                                <select id="provinsi" name="province_id"
                                    class="form-select bg-light border-0 py-3 rounded-3 shadow-none" required
                                    autocomplete="off">
                                    <option value="">Pilih Provinsi...</option>
                                    <?php $__currentLoopData = DB::table('provinces')->get(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $p): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <option value="<?php echo e($p->id); ?>"><?php echo e($p->name); ?></option>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="small fw-bold mb-2 text-muted">KOTA / KABUPATEN</label>
                                <select id="kota" name="regency_id"
                                    class="form-select bg-light border-0 py-3 rounded-3 shadow-none" required disabled
                                    autocomplete="off"></select>
                            </div>
                            <div class="col-md-6">
                                <label class="small fw-bold mb-2 text-muted">KECAMATAN</label>
                                <select id="kecamatan" name="district_id"
                                    class="form-select bg-light border-0 py-3 rounded-3 shadow-none" required disabled
                                    autocomplete="off"></select>
                            </div>
                            <div class="col-md-6">
                                <label class="small fw-bold mb-2 text-muted">KELURAHAN / DESA</label>
                                <select id="kelurahan" name="village_id"
                                    class="form-select bg-light border-0 py-3 rounded-3 shadow-none" required disabled
                                    autocomplete="off"></select>
                            </div>
                            <div class="col-12">
                                <label class="small fw-bold mb-2 text-muted">NAMA PENERIMA / PEMILIK RUMAH</label>
                                <input type="text" name="nama_penerima"
                                    class="form-control bg-light border-0 py-3 rounded-3 shadow-none"
                                    placeholder="Cth: Bapak Ahmad / Rumah Bapak Azhari" required autocomplete="off">
                            </div>
                            <div class="col-12">
                                <label class="small fw-bold mb-2 text-muted">NOMOR WHATSAPP AKTIF</label>
                                <input type="number" name="nomor_telepon"
                                    class="form-control bg-light border-0 py-3 rounded-3 shadow-none"
                                    placeholder="Cth: 08123456789" required autocomplete="off">
                            </div>
                            <div class="col-12">
                                <label class="small fw-bold mb-2 text-muted">ALAMAT LENGKAP (JALAN & NO. RUMAH)</label>
                                <textarea name="alamat_lengkap"
                                    class="form-control bg-light border-0 p-3 rounded-3 shadow-none" rows="3"
                                    placeholder="Contoh: Jl. Merdeka No. 12, RT 01/02, Perum Indah" required
                                    autocomplete="off"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer border-0 p-4 pt-0">
                        <button type="submit" class="btn btn-primary w-100 rounded-4 py-3 fw-bold shadow">
                            <i class="lni lni-save me-2"></i> SIMPAN ALAMAT INI
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            // Fungsi Toggle Section Layanan
            function toggleServiceSection() {
                const method = $('#serviceMethod').val();
                const addressSection = $('#addressSection');
                const shopInfoSection = $('#shopInfoSection');
                const methodHint = $('#methodHint');
                const addressInput = $('#selectedAddressId');

                if (method === 'Panggilan Teknisi') {
                    addressSection.removeClass('d-none').addClass('animate-in');
                    shopInfoSection.addClass('d-none');
                    methodHint.text('🏠 Teknisi profesional kami akan datang ke lokasi Anda.');
                    addressInput.prop('required', true);
                } else if (method === 'Antar ke Toko') {
                    addressSection.addClass('d-none');
                    shopInfoSection.removeClass('d-none').addClass('animate-in');
                    methodHint.text('🏪 Silakan antar unit Anda ke bengkel pusat kami.');
                    addressInput.prop('required', false).val(''); // Kosongkan ID Alamat
                    $('.address-card').removeClass('border-primary shadow-lg bg-primary bg-opacity-10').addClass('border-light shadow-sm bg-white');
                    $('.selected-check').addClass('d-none');
                } else {
                    addressSection.addClass('d-none');
                    shopInfoSection.addClass('d-none');
                    methodHint.text('Silakan pilih salah satu layanan kami.');
                    addressInput.prop('required', false).val('');
                }
            }

            // Fungsi Pilih Kartu Alamat
            $(document).on('click', '.address-card', function (e) {
                if ($(e.target).closest('.btn-delete-address').length) return; // Abaikan jika klik tombol hapus

                const parent = $(this).closest('.address-item');
                const id = parent.data('id');

                // Toggle Visual
                $('.address-card').removeClass('border-primary shadow-lg bg-primary bg-opacity-10').addClass('border-light shadow-sm bg-white');
                $('.selected-check').addClass('d-none');

                $(this).removeClass('border-light shadow-sm bg-white').addClass('border-primary shadow-lg bg-primary bg-opacity-10');
                $(this).find('.selected-check').removeClass('d-none');

                // Set Hidden Input
                $('#selectedAddressId').val(id);
            });

            // Inisialisasi Toggle Awal
            $('#serviceMethod').on('change', function () { toggleServiceSection(); });
            toggleServiceSection();

            // Hapus Alamat
            $(document).on('click', '.btn-delete-address', function () {
                const id = $(this).data('id');
                const item = $(this).closest('.address-item');

                if (confirm('Hapus alamat ini dari daftar?')) {
                    $.ajax({
                        url: `/address/${id}`,
                        type: "DELETE",
                        data: { _token: "<?php echo e(csrf_token()); ?>" },
                        success: function (res) {
                            if (res.success) {
                                item.fadeOut(300, function () {
                                    $(this).remove();
                                    if ($('#selectedAddressId').val() == id) $('#selectedAddressId').val('');
                                    if ($('.address-item').length === 0) {
                                        $('#addressCardsWrapper').html('<div class="col-12"><div class="p-4 bg-light rounded-4 text-center text-muted small border-dashed">Belum ada alamat.</div></div>');
                                    }
                                });
                            }
                        }
                    });
                }
            });

            // Handle Simpan Alamat Baru
            $('#formSimpanAlamat').on('submit', function (e) {
                e.preventDefault();
                const btn = $(this).find('button[type="submit"]');
                btn.prop('disabled', true).html('<i class="lni lni-spinner-arrow spinning me-2"></i> Memproses...');

                $.ajax({
                    url: "<?php echo e(route('address.store')); ?>",
                    type: "POST",
                    data: $(this).serialize(),
                    success: function (res) {
                        console.log('Simpan Berhasil:', res);
                        btn.prop('disabled', false).html('<i class="lni lni-save me-2"></i> SIMPAN ALAMAT INI');

                        if (res.success) {
                            // Update Alamat "Otomatis" tanpa refresh halaman (Partial Refresh)
                            $.get('/api/address/cards', function (html) {
                                $('#addressCardsWrapper').html(html);

                                // Otomatis pilih yang paling atas (terbaru)
                                const newestCard = $('#addressCardsWrapper .address-item').first().find('.address-card');
                                newestCard.trigger('click');

                                // Tutup Modal Segera
                                $('#modalTambahAlamat').modal('hide');
                                $('.modal-backdrop').remove();
                                $('body').removeClass('modal-open').css('overflow', 'auto');
                                $('#formSimpanAlamat')[0].reset();

                                // Scroll ke posisi agar user lihat data sudah masuk
                                $('html, body').scrollTop($("#addressSection").offset().top - 80);
                            });
                        } else {
                            alert('Gagal: ' + (res.message || 'Data tidak lengkap.'));
                        }
                    },
                    error: function (err) {
                        btn.prop('disabled', false).html('<i class="lni lni-save me-2"></i> SIMPAN ALAMAT INI');
                        alert('Eror Sistem: ' + (err.responseJSON ? err.responseJSON.message : 'Ulangi lagi.'));
                    }
                });
            });


            // --- RE-RESTORE INDOREGION LOGIC ---
            function loadWilayah(url, target, nextTargets) {
                $(target).prop('disabled', false).empty().append('<option value="">Memuat data...</option>');
                $.each(nextTargets, function (i, t) { $(t).prop('disabled', true).empty(); });
                $.get(url, function (data) {
                    $(target).empty().append('<option value="">Pilih...</option>');
                    $.each(data, function (k, v) { $(target).append('<option value="' + v.id + '">' + v.name + '</option>'); });
                });
            }

            $('#provinsi').on('change', function () { loadWilayah('/api/regencies/' + $(this).val(), '#kota', ['#kecamatan', '#kelurahan']); });
            $('#kota').on('change', function () { loadWilayah('/api/districts/' + $(this).val(), '#kecamatan', ['#kelurahan']); });
            $('#kecamatan').on('change', function () { loadWilayah('/api/villages/' + $(this).val(), '#kelurahan', []); });
            // Merek Printer Custom Logic
            $('#selectMerek').on('change', function () {
                if ($(this).val() === 'Lainnya') {
                    $('#merekLainnyaWrapper').removeClass('d-none');
                    $('#inputMerek').prop('disabled', false).focus();
                    $(this).removeAttr('name');
                } else {
                    $('#merekLainnyaWrapper').addClass('d-none');
                    $('#inputMerek').prop('disabled', true).val('');
                    $(this).attr('name', 'merek_printer');
                }
            });

            // Kategori Keluhan Custom Logic
            $('#selectKeluhan').on('change', function () {
                if ($(this).val() === 'Lainnya') {
                    $('#keluhanLainnyaWrapper').removeClass('d-none');
                    $('#inputKeluhan').prop('disabled', false).focus();
                    $(this).removeAttr('name');
                } else {
                    $('#keluhanLainnyaWrapper').addClass('d-none');
                    $('#inputKeluhan').prop('disabled', true).val('');
                    $(this).attr('name', 'kategori_keluhan');
                }
            });
            // --- END RESTORE ---
        });
    </script>

    <style>
        .animate-in {
            animation: slideFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        }

        @keyframes slideFadeIn {
            from { opacity: 0; transform: translateY(15px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @media (max-width: 768px) {
            .p-4 { padding: 1.25rem !important; }
            .bg-light.p-4 { padding: 1.25rem !important; }
            .display-6 { font-size: 2rem; }
            .btn-lg { padding: 15px !important; font-size: 1rem !important; border-radius: 15px !important; }
        }

        .form-select.bg-primary {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
        }
    </style>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layout.temp', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\laragon\www\jasa_printer\resources\views/jasa/create.blade.php ENDPATH**/ ?>