@section('title')
Checkout - Eat Your Favorite Foods
@stop

@section('keywords')
Food Store, Eat Your Favorite Foods
@stop

@section('description')
Checkout - Food Store - Eat Your Favorite Foods
@stop

@section('image')
{{ asset('images/logo.png') }}
@stop

<div>
    <div class="container">

        <div class="row justify-content-center mt-0" style="margin-bottom: 320px;">
            <div class="col-md-6">

                <div class="bg-white rounded-bottom-custom shadow-sm p-3 sticky-top mb-3">
                    <div class="d-flex justify-content-start">
                        <div>
                            <x-buttons.back />
                        </div>
                    </div>
                </div>
             <!-- SHIPPING INFO -->
                <div class="card border-0 shadow-sm rounded-4 mb-4">
                    <div class="card-body">

                        <h6 class="fw-bold mb-3 d-flex align-items-center">
                            <i class="bi bi-geo-alt me-2 text-danger"></i>
                            Shipping Information
                        </h6>

                        <select class="form-select rounded-3 mb-3" wire:model.live="province_id">
                            <option value="">Select Province</option>
                            @foreach ($provinces as $province)
                                <option value="{{ $province->id }}">{{ $province->name }}</option>
                            @endforeach
                        </select>

                        <select class="form-select rounded-3 mb-3"
                                wire:model.live="city_id"
                                wire:key="{{ $province_id }}">
                            <option value="">Select City</option>
                            @foreach (\App\Models\City::where('province_id', $province_id)->get() as $city)
                                <option value="{{ $city->id }}">{{ $city->name }}</option>
                            @endforeach
                        </select>

                        <select class="form-select rounded-3 mb-3"
                                wire:model.live="district_id"
                                wire:key="{{ $city_id }}">
                            <option value="">Select District</option>
                            @foreach (\App\Models\District::where('city_id', $city_id)->get() as $district)
                                <option value="{{ $district->id }}">{{ $district->name }}</option>
                            @endforeach
                        </select>

                        <textarea
                            class="form-control rounded-3"
                            rows="3"
                            wire:model.live="address"
                            placeholder="Address:  Komplek Griya Lembang Permai Jl. AMD, Kecamatan Banggae Timur, Kabupaten Majene">
                        </textarea>

                    </div>
                </div>

                @if($district_id)
                         <div class="card border-0 shadow-sm rounded-4 mb-4">
                    <div class="card-body">

                        <h6 class="fw-bold mb-3 d-flex align-items-center">
                            <i class="bi bi-truck me-2 text-danger"></i>
                            Courier Delivery
                        </h6>

                        <div class="d-flex flex-wrap gap-2 mb-3">
                            @foreach (['sicepat','jnt','ninja','jne','pos','tiki'] as $courier)
                                <label class="btn btn-outline-secondary rounded-pill px-3 py-2">
                                    <input
                                        type="radio"
                                        name="courier"
                                        class="form-check-input me-2"
                                        wire:click="changeCourier('{{ $courier }}')">
                                    {{ strtoupper($courier) }}
                                </label>
                            @endforeach
                        </div>

                        <!-- LOADING -->
                        <div class="text-center my-3" wire:loading wire:target="changeCourier">
                            <div class="spinner-border text-danger"></div>
                            <div class="small mt-2 text-muted">Loading courier services…</div>
                        </div>

                        <!-- COST -->
                        @if($showCost)
                            <hr>
                            <div class="d-flex flex-column gap-2">
                                @foreach($costs ?? [] as $cost)
                                    <label class="border rounded-3 p-2 d-flex justify-content-between align-items-center">
                                        <div>
                                            <input
                                                type="radio"
                                                name="cost"
                                                class="form-check-input me-2"
                                                wire:click="getServiceAndCost('{{ $cost['cost'] }}|{{ $cost['service'] }}')">
                                            {{ $cost['service'] }}
                                        </div>
                                        <span class="fw-semibold">
                                            Rp {{ number_format($cost['cost'], 0, ',', '.') }}
                                        </span>
                                    </label>
                                @endforeach
                            </div>
                        @endif

                    </div>
                </div>
                @endif

            </div>

        </div>
    </div>

    <div class="container fixed-total">
        <div class="row justify-content-center">
            <div class="col-12 col-md-6">
                <div class="card rounded shadow-sm border-0 mb-5">
                             <div class="card-body">

                            <div class="d-flex justify-content-between mb-2">
                                <span class="text-muted">Total</span>
                                <span class="fw-semibold">Rp {{ number_format($totalPrice) }}</span>
                            </div>

                            <div class="d-flex justify-content-between mb-2">
                                <span class="text-muted">Ongkos Kirim</span>
                                <span class="fw-semibold">Rp {{ number_format($selectCost) }}</span>
                            </div>

                            <hr>

                            <div class="d-flex justify-content-between mb-3">
                                <span class="fw-bold">Grand Total</span>
                                <span class="fw-bold fs-5 text-danger">
                                    Rp {{ number_format($grandTotal) }}
                                </span>
                            </div>

                            @if($selectCost > 0)
                                <livewire:web.checkout.btn-checkout
                                    key="{{ now() }}"
                                    :province_id="$province_id"
                                    :city_id="$city_id"
                                    :district_id="$district_id"
                                    :address="$address"
                                    :grandTotal="$grandTotal"
                                    :totalWeight="$totalWeight"
                                    :selectCourier="$selectCourier"
                                    :selectService="$selectService"
                                    :selectCost="$selectCost"
                                />
                            @endif

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

</div>