<?php $__env->startSection("title", "Cek Tarif & Estimasi"); ?>

<?php $__env->startPush('styles'); ?>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="<?php echo e(asset('css/select2-custom.css')); ?>" />
<link rel="stylesheet" href="<?php echo e(asset('css/shipping-rates.css')); ?>" />
<?php $__env->stopPush(); ?>

<?php $__env->startSection("content"); ?>

<main class="main">

    <!-- HEADER: Aligned Left & Clean Blue Gradient -->
    <div class="page-title" style="background: linear-gradient(135deg, #0554c6 0%, #0442a0 100%) !important;">
      <div class="container" style="margin-top: 50px;">
        <h1>Cek Tarif Pengiriman</h1>
        <p>Cari ongkir termurah dan tercepat ke seluruh Indonesia</p>
      </div>
    </div>
    
    <!-- SEARCH FORM SECTION (New Horizontal Layout) -->
    <section class="section shipping-search pt-0 pb-5">
        <div class="container">
            <div class="search-card">
                <form id="shipping-form" action="<?php echo e(route('shipping.check')); ?>" method="GET">
                    
                    <!-- GRID CONTAINER: All inputs in one smart grid -->
                    <div class="shipping-form-grid">
                        
                        <!-- 1. FROM (KOTA ASAL) -->
                        <div>
                            <label class="form-label-custom">Asal Pengiriman</label>
                            <div class="input-group-custom">
                                <select name="origin" id="origin" class="form-control select2" required>
                                    <option value="">Pilih Kota Asal</option>
                                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__currentLoopData = $origins; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $origin): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <option value="<?php echo e($origin->id); ?>" 
                                            <?php echo e((isset($input_origin) && $input_origin == $origin->id) ? 'selected' : ''); ?>>
                                            <?php echo e($origin->type); ?> <?php echo e($origin->name); ?>

                                        </option>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                                </select>
                            </div>
                        </div>

                        <!-- 2. TO (KOTA TUJUAN) -->
                        <div>
                            <label class="form-label-custom">Kota Tujuan</label>
                            <div class="input-group-custom">
                                <select name="destination_city" id="destination_city" class="form-control select2" required>
                                    <option value="">Pilih Asal Dulu</option>
                                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if(isset($destCities) && count($destCities) > 0): ?>
                                        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__currentLoopData = $destCities; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $city): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                            <option value="<?php echo e($city->name); ?>" data-id="<?php echo e($city->id); ?>"
                                                <?php echo e((isset($input_dest_city) && $input_dest_city == $city->name) ? 'selected' : ''); ?>>
                                                <?php echo e($city->type); ?> <?php echo e($city->name); ?>

                                            </option>
                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                                    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                                </select>
                            </div>
                        </div>

                        <!-- 3. DISTRICT (KECAMATAN) -->
                        <div>
                            <label class="form-label-custom">Kecamatan</label>
                            <div class="input-group-custom">
                                <select name="destination_district" id="destination_district" class="form-control select2" required>
                                    <option value="">Pilih Kota Dulu</option>
                                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if(isset($districts) && count($districts) > 0): ?>
                                        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__currentLoopData = $districts; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $district): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                            <option value="<?php echo e($district->name); ?>" data-id="<?php echo e($district->id); ?>"
                                                <?php echo e((isset($input_dest_district) && $input_dest_district == $district->name) ? 'selected' : ''); ?>>
                                                <?php echo e($district->name); ?>

                                            </option>
                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                                    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                                </select>
                            </div>
                        </div>

                        <!-- 4. VILLAGE (KELURAHAN) -->
                        <div class="form-item-village">
                            <label class="form-label-custom">Kelurahan</label>
                            <div class="input-group-custom">
                                <select name="destination_village" id="destination_village" class="form-control select2" required>
                                    <option value="">Pilih Kec. Dulu</option>
                                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if(isset($villages) && count($villages) > 0): ?>
                                        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__currentLoopData = $villages; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $village): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                            <option value="<?php echo e($village->id); ?>" 
                                                <?php echo e((isset($input_dest_village) && $input_dest_village == $village->id) ? 'selected' : ''); ?>>
                                                <?php echo e($village->name); ?>

                                            </option>
                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                                    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                                </select>
                            </div>
                        </div>

                        <!-- 5. BERAT -->
                        <div class="form-item-weight">
                            <label class="form-label-custom">Berat (kg)</label>
                            <div class="input-group-custom">
                                <input type="number" name="weight" class="form-control" 
                                       value="<?php echo e($input_weight ?? '1'); ?>" min="1" placeholder="1">
                            </div>
                        </div>

                        <!-- BUTTON -->
                        <div class="form-item-btn">
                            <button type="submit" class="btn btn-danger btn-search">
                                <i class="fas fa-search"></i>
                                <span class="btn-text-mobile d-inline d-xl-none ms-2">Cari Tarif</span>
                            </button>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </section>

    <!-- CONTAINER HASIL PENCARIAN -->
    <div id="result-container">
        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if(isset($rates)): ?>
        
        <?php
            $originName = optional($origins->firstWhere('id', $input_origin))->name ?? '-';
            $destVillageName = optional($villages->firstWhere('id', $input_dest_village))->name ?? $input_dest_district;
        ?>

        <section id="shipping-results" class="section pt-0">
          <div class="container">

            <div class="row mb-4">
                <div class="col-12">
                    <div class="shipping-route-info">
                        <div>
                            <small class="text-muted d-block mb-1" style="font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px;">Rute Pengiriman</small>
                            <h5>
                                <span><?php echo e($originName); ?></span>
                                <i class="fas fa-arrow-right mx-3" style="color: #cbd5e1; font-size: 0.9em;"></i>
                                <span><?php echo e($destVillageName); ?></span>
                            </h5>
                        </div>
                        <div class="text-md-end mt-3 mt-md-0">
                            <small class="text-muted d-block mb-1" style="font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px;">Berat Paket</small>
                            <h5 style="color: var(--brand-red); font-size: 1.4rem;"><?php echo e($input_weight ?? 1); ?> <span style="font-size: 1rem; color: #64748b;">Kg</span></h5>
                        </div>
                    </div>
                </div>
            </div>

            <div class="results-grid">
                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($rates->isEmpty()): ?>
                    <div class="empty-state">
                        <i class="bi bi-truck-flatbed empty-state-icon"></i>
                        <h4>Layanan Tidak Ditemukan</h4>
                        <p>Maaf, kami belum memiliki layanan pengiriman untuk rute atau berat tersebut.</p>
                    </div>
                <?php else: ?>
                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__currentLoopData = $rates; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $rate): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <div class="result-card">
                        <!-- Card Header -->
                        <div class="result-card-header">
                            <div class="d-flex justify-content-between align-items-start">
                                <h4><?php echo e($rate->service_name); ?></h4>
                                <span class="service-type"><?php echo e($rate->service_type); ?></span>
                            </div>
                        </div>

                        <!-- Card Body -->
                        <div class="result-card-body">
                            <!-- Estimasi Biaya -->
                            <div class="price-display">
                                <span class="price-currency">Rp</span>
                                <span class="price-amount"><?php echo e(number_format($rate->final_price, 0, ',', '.')); ?></span>
                                <small class="text-muted d-block mt-1">Estimasi Total</small>
                            </div>

                            <!-- Info Box -->
                            <div style="background: #f8fafc; padding: 12px; border-radius: 8px; margin-bottom: 16px; border: 1px solid #f1f5f9;">
                                <div class="shipping-detail" style="margin-bottom: 6px;">
                                    <span class="detail-label">Base Rate (Min <?php echo e($rate->min_weight); ?>kg)</span>
                                    <span class="detail-value" style="font-weight: 500;">Rp <?php echo e(number_format($rate->price, 0, ',', '.')); ?></span>
                                </div>
                                <div class="shipping-detail">
                                    <span class="detail-label">Next / Kg</span>
                                    <span class="detail-value" style="font-weight: 500;">Rp <?php echo e(number_format($rate->price_over_weight ?? $rate->price, 0, ',', '.')); ?></span>
                                </div>
                            </div>

                            <!-- Details -->
                            <div class="shipping-detail">
                                <span class="detail-label"><i class="fas fa-clock"></i> Estimasi</span>
                                <span class="detail-value"><?php echo e($rate->etd); ?></span>
                            </div>
                            <div class="shipping-detail">
                                <span class="detail-label"><i class="fas fa-weight-hanging"></i> Min. Berat</span>
                                <span class="detail-value"><?php echo e($rate->min_weight); ?> Kg</span>
                            </div>

                            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if(isset($rate->moda)): ?>
                            <div class="shipping-detail">
                                <span class="detail-label"><i class="fas fa-truck"></i> Moda</span>
                                <span class="detail-value" style="text-transform: capitalize;"><?php echo e($rate->moda); ?></span>
                            </div>
                            <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                        </div>

                        <!-- Card Footer -->
                        <div class="result-card-footer">
                            
                            <!-- COPYWRITING PROMO HARGA -->
                            <div style="text-align: center; margin-bottom: 15px; padding: 10px 8px; background: #fff1f2; border-radius: 8px; border: 1px dashed #fca5a5;">
                                <small style="color: #b91c1c; font-size: 0.75rem; font-weight: 600; display: block; line-height: 1.4;">
                  
                                    <span style="color: #ef4444; font-weight: 800; font-size: 0.8rem;"> 📢 Dapatkan Harga Spesial</span> dengan hubungi kami!
                                </small>
                            </div>

                            <a href="https://wa.me/<?php echo e($whatsapp_number); ?>?text=Halo Dino Logistics !%0A%0ASaya tertarik dengan layanan pengiriman:%0A%0A*Layanan:* <?php echo e($rate->service_name); ?>%0A*Berat:* <?php echo e($input_weight); ?> Kg%0A*Biaya:* Rp <?php echo e(number_format($rate->final_price, 0, ',', '.')); ?>%0A%0AMohon panduan untuk proses pengiriman lebih lanjut." 
                               target="_blank" 
                               class="btn-choose-service">
                                <i class="fab fa-whatsapp"></i> Pesan via WhatsApp
                            </a>
                        </div>
                    </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
            </div>
          </div>
        </section>
        <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
    </div>

</main>

<?php $__env->startPush('scripts'); ?>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
    $(document).ready(function() {
        // Init Select2
        $('.select2').select2({ width: '100%', placeholder: "Pilih...", allowClear: true });

        // Submit Form AJAX
        $('#shipping-form').on('submit', function(e) {
            e.preventDefault();
            let form = $(this);
            Swal.fire({ title: 'Mencari Tarif...', didOpen: () => Swal.showLoading() });
            
            $.ajax({
                url: form.attr('action'),
                type: 'GET',
                data: form.serialize(),
                success: function(response) {
                    $('#result-container').hide().html($(response).find('#result-container').html()).fadeIn('slow');
                    Swal.close();
                    $('html, body').animate({ scrollTop: $('#result-container').offset().top - 150 }, 600);
                },
                error: function() { Swal.fire('Error', 'Gagal memuat data', 'error'); }
            });
        });

        // ==========================================================
        // CHAIN DROPDOWN LOGIC
        // ==========================================================

        // 1. ORIGIN CHANGE
        $('#origin').on('change', function() {
            let originId = $(this).val();
            $('#destination_city').empty().append('<option value="">Loading...</option>');
            $('#destination_district').empty().append('<option value="">Pilih Kota Dulu</option>');
            $('#destination_village').empty().append('<option value="">Pilih Kec. Dulu</option>');

            if(originId) {
                $.ajax({
                    url: '/api/destinations',
                    type: 'GET',
                    data: { origin_id: originId },
                    dataType: 'json',
                    success: function(data) {
                        $('#destination_city').empty().append('<option value="">Pilih Kota Tujuan</option>');
                        $.each(data, function(key, item) {
                            let type = item.type ? item.type : ''; 
                            let fullName = type ? (type + ' ' + item.name) : item.name;
                            $('#destination_city').append(`<option value="${item.name}" data-id="${item.id}">${fullName}</option>`);
                        });
                    }
                });
            } else {
                $('#destination_city').empty().append('<option value="">Pilih Asal Dulu</option>');
            }
        });

        // 2. DEST CITY CHANGE
        $('#destination_city').on('change', function() {
            let cityId = $(this).find(':selected').data('id');
            let originId = $('#origin').val();
            $('#destination_district').empty().append('<option value="">Loading...</option>');
            $('#destination_village').empty().append('<option value="">Pilih Kec. Dulu</option>');

            if (cityId) {
                $.ajax({
                    url: '/api/districts/' + cityId,
                    type: 'GET',
                    data: { origin_id: originId },
                    dataType: 'json',
                    success: function(data) {
                        $('#destination_district').empty().append('<option value="">Pilih Kecamatan</option>');
                        $.each(data, function(key, item) {
                            $('#destination_district').append(`<option value="${item.name}" data-id="${item.id}">${item.name}</option>`);
                        });
                    }
                });
            } else {
                $('#destination_district').empty().append('<option value="">Pilih Kota Dulu</option>');
            }
        });

        // 3. DISTRICT CHANGE
        $('#destination_district').on('change', function() {
            let districtId = $(this).find(':selected').data('id');
            let originId = $('#origin').val();
            $('#destination_village').empty().append('<option value="">Loading...</option>');

            if (districtId) {
                $.ajax({
                    url: '/api/villages/' + districtId,
                    type: 'GET',
                    data: { origin_id: originId },
                    dataType: 'json',
                    success: function(data) {
                        $('#destination_village').empty().append('<option value="">Pilih Kelurahan</option>');
                        $.each(data, function(key, item) {
                            $('#destination_village').append(`<option value="${item.id}">${item.name}</option>`);
                        });
                    }
                });
            } else {
                $('#destination_village').empty().append('<option value="">Pilih Kec. Dulu</option>');
            }
        });
    });
</script>
<?php $__env->stopPush(); ?>
<?php $__env->stopSection(); ?>
<?php echo $__env->make("main", array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /var/www/html/resources/views/ShippingRate/index.blade.php ENDPATH**/ ?>