@extends("main")
@section("title", "Cek Tarif & Estimasi")

@push('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="{{ asset('css/select2-custom.css') }}" />
<link rel="stylesheet" href="{{ asset('css/shipping-rates.css') }}" />
@endpush

@section("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="{{ 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>
                                    @foreach($origins as $origin)
                                        <option value="{{ $origin->id }}" 
                                            {{ (isset($input_origin) && $input_origin == $origin->id) ? 'selected' : '' }}>
                                            {{ $origin->type }} {{ $origin->name }}
                                        </option>
                                    @endforeach
                                </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>
                                    @if(isset($destCities) && count($destCities) > 0)
                                        @foreach($destCities as $city)
                                            <option value="{{ $city->name }}" data-id="{{ $city->id }}"
                                                {{ (isset($input_dest_city) && $input_dest_city == $city->name) ? 'selected' : '' }}>
                                                {{ $city->type }} {{ $city->name }}
                                            </option>
                                        @endforeach
                                    @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>
                                    @if(isset($districts) && count($districts) > 0)
                                        @foreach($districts as $district)
                                            <option value="{{ $district->name }}" data-id="{{ $district->id }}"
                                                {{ (isset($input_dest_district) && $input_dest_district == $district->name) ? 'selected' : '' }}>
                                                {{ $district->name }}
                                            </option>
                                        @endforeach
                                    @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>
                                    @if(isset($villages) && count($villages) > 0)
                                        @foreach($villages as $village)
                                            <option value="{{ $village->id }}" 
                                                {{ (isset($input_dest_village) && $input_dest_village == $village->id) ? 'selected' : '' }}>
                                                {{ $village->name }}
                                            </option>
                                        @endforeach
                                    @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="{{ $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">
        @if(isset($rates))
        
        @php
            $originName = optional($origins->firstWhere('id', $input_origin))->name ?? '-';
            $destVillageName = optional($villages->firstWhere('id', $input_dest_village))->name ?? $input_dest_district;
        @endphp

        <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>{{ $originName }}</span>
                                <i class="fas fa-arrow-right mx-3" style="color: #cbd5e1; font-size: 0.9em;"></i>
                                <span>{{ $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;">{{ $input_weight ?? 1 }} <span style="font-size: 1rem; color: #64748b;">Kg</span></h5>
                        </div>
                    </div>
                </div>
            </div>

            <div class="results-grid">
                @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>
                @else
                    @foreach($rates as $rate)
                    <div class="result-card">
                        <!-- Card Header -->
                        <div class="result-card-header">
                            <div class="d-flex justify-content-between align-items-start">
                                <h4>{{ $rate->service_name }}</h4>
                                <span class="service-type">{{ $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">{{ 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 {{ $rate->min_weight }}kg)</span>
                                    <span class="detail-value" style="font-weight: 500;">Rp {{ 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 {{ 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">{{ $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">{{ $rate->min_weight }} Kg</span>
                            </div>

                            @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;">{{ $rate->moda }}</span>
                            </div>
                            @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/{{ $whatsapp_number }}?text=Halo Dino Logistics !%0A%0ASaya tertarik dengan layanan pengiriman:%0A%0A*Layanan:* {{ $rate->service_name }}%0A*Berat:* {{ $input_weight }} Kg%0A*Biaya:* Rp {{ 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>
                    @endforeach
                @endif
            </div>
          </div>
        </section>
        @endif
    </div>

</main>

@push('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>
@endpush
@endsection