@extends('layouts.app')

@section('title', __('Checkout'))

@section('content')
<div class="container py-5">
    @include('storefront.checkout.partials.checkout-progress', [
        'current' => 'shipping',
    ])

    <div class="d-flex flex-wrap align-items-center justify-content-between mb-4">
        <div>
            <h1 class="h3 fw-800 mb-1">
                <i class="fas fa-shipping-fast text-primary me-2"></i>
                {{ __('Checkout') }}
            </h1>

            <p class="text-muted small mb-0">
                {{ __('Enter your delivery information to continue.') }}
            </p>
        </div>

        <a
            href="{{ route('storefront.cart.index') }}"
            class="btn btn-outline-secondary"
        >
            <i class="fas fa-arrow-left me-1"></i>
            {{ __('Back to Cart') }}
        </a>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fas fa-check-circle me-2"></i>
            {{ session('success') }}

            <button
                type="button"
                class="btn-close"
                data-bs-dismiss="alert"
                aria-label="{{ __('Close') }}"
            ></button>
        </div>
    @endif

    @if(session('status'))
        <div class="alert alert-info alert-dismissible fade show" role="alert">
            <i class="fas fa-info-circle me-2"></i>
            {{ session('status') }}

            <button
                type="button"
                class="btn-close"
                data-bs-dismiss="alert"
                aria-label="{{ __('Close') }}"
            ></button>
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-circle me-2"></i>
            {{ session('error') }}

            <button
                type="button"
                class="btn-close"
                data-bs-dismiss="alert"
                aria-label="{{ __('Close') }}"
            ></button>
        </div>
    @endif

    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-circle me-2"></i>

            <strong>
                {{ __('Please fix the following errors:') }}
            </strong>

            <ul class="mb-0 mt-1">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>

            <button
                type="button"
                class="btn-close"
                data-bs-dismiss="alert"
                aria-label="{{ __('Close') }}"
            ></button>
        </div>
    @endif

    {{--
        Both checkout creation and shipping-quote refresh use this same form.
        The quote button changes the destination with "formaction".
    --}}
    <form
        action="{{ route('checkout.store') }}"
        method="POST"
        id="checkoutForm"
    >
        @csrf

        <div class="row g-4">
            <div class="col-lg-7">
                @include('storefront.checkout.partials.shipping-address-form', [
                    'address' => $address,
                    'countries' => $countries,
                    'hasPhysicalProducts' => $hasPhysicalProducts,
                ])

                @if($hasPhysicalProducts)
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-body">
                            <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
                                <div>
                                    <h6 class="fw-700 mb-1">
                                        <i class="fas fa-truck text-primary me-1"></i>
                                        {{ __('Delivery Options') }}
                                    </h6>

                                    <p class="text-muted small mb-0">
                                        {{ __('Enter or update your address, then refresh the available delivery options.') }}
                                    </p>
                                </div>

                                <button
                                    type="submit"
                                    id="updateDeliveryOptionsBtn"
                                    class="btn btn-outline-primary"
                                    formaction="{{ route('checkout.shipping.quote') }}"
                                    formmethod="POST"
                                >
                                    <i class="fas fa-sync-alt me-1"></i>
                                    {{ __('Update Delivery Options') }}
                                </button>
                            </div>
                        </div>
                    </div>

                    @if(! empty($quotes))
                        @include('storefront.checkout.partials.shipping-quotes', [
                            'quotes' => $quotes,
                            'cart' => $cart,
                        ])
                    @else
                        <div class="alert alert-info">
                            <i class="fas fa-info-circle me-2"></i>

                            <strong>
                                {{ __('Shipping options:') }}
                            </strong>

                            {{ __('Complete your country and state information, then select Update Delivery Options.') }}
                        </div>
                    @endif
                @endif

                @include('storefront.checkout.partials.cart-review', [
                    'cart' => $cart,
                ])
            </div>

            <div class="col-lg-5">
                @include('storefront.checkout.partials.order-summary', [
                    'cart' => $cart,
                    'subtotal' => $subtotal,
                    'shippingCost' => $shippingCost,
                    'estimatedTotal' => $estimatedTotal,
                    'hasPhysicalProducts' => $hasPhysicalProducts,
                ])
            </div>
        </div>
    </form>
</div>
@endsection

@push('styles')
<style>
    .fw-600 {
        font-weight: 600;
    }

    .fw-700 {
        font-weight: 700;
    }

    .fw-800 {
        font-weight: 800;
    }
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('checkoutForm');

    if (!form) {
        return;
    }

    form.addEventListener('submit', function (event) {
        const submittedButton = event.submitter;

        if (!submittedButton) {
            return;
        }

        submittedButton.disabled = true;

        if (submittedButton.id === 'updateDeliveryOptionsBtn') {
            submittedButton.innerHTML =
                '<i class="fas fa-spinner fa-spin me-1"></i>' +
                @json(__('Updating...'));

            return;
        }

        if (submittedButton.id === 'placeOrderBtn') {
            submittedButton.innerHTML =
                '<i class="fas fa-spinner fa-spin me-1"></i>' +
                @json(__('Processing...'));
        }
    });
});
</script>
@endpush