@extends('layouts.app')

@section('title', 'Checkout — ' . config('app.name'))

@section('header')
    <h2 class="h5 fw-semibold mb-0">{{ __('Checkout') }}</h2>
@endsection

@push('styles')
    <style>
        .ck-addr-card { border: 1.5px solid var(--bs-border-color); border-radius: .85rem; padding: 1rem; }
        .ck-addr-card.is-checked { border-color: var(--hp-primary); background: var(--hp-primary-soft); }
    </style>
@endpush

@section('content')
    <div class="hp-container-narrow">
        @if ($cartItems->isEmpty())
            <div class="alert alert-warning">Your cart is empty. <a href="{{ route('home') }}">Browse services</a> to add something first.</div>
        @else
            <form method="POST" action="{{ route('customer.checkout.store') }}" id="checkout-form">
                @csrf

                <p class="hp-section-title">When do you need this?</p>
                <div class="row g-2 mb-4">
                    <div class="col-12 col-sm-6">
                        <input type="radio" class="btn-check" name="timing" id="timing-instant" value="instant" autocomplete="off" checked>
                        <label class="hp-option-card" for="timing-instant">
                            <span class="hp-option-icon d-block">&#9889;</span>
                            <span class="hp-option-title">Insta Help</span>
                            <span class="hp-option-desc">Get a professional within the hour</span>
                        </label>
                    </div>
                    <div class="col-12 col-sm-6">
                        <input type="radio" class="btn-check" name="timing" id="timing-scheduled" value="scheduled" autocomplete="off">
                        <label class="hp-option-card" for="timing-scheduled">
                            <span class="hp-option-icon d-block">&#128197;</span>
                            <span class="hp-option-title">Schedule for later</span>
                            <span class="hp-option-desc">Pick a date &amp; time that suits you</span>
                        </label>
                    </div>

                    <div id="schedule-fields" class="col-12 d-none">
                        <x-input-label for="scheduled_at" value="Date &amp; time" />
                        <input type="datetime-local" name="scheduled_at" id="scheduled_at" class="form-control">
                        <x-input-error :messages="$errors->get('scheduled_at')" />
                    </div>
                </div>

                <p class="hp-section-title">Service address</p>
                <div class="d-flex flex-column gap-2 mb-4">
                    @foreach ($addresses as $address)
                        <div class="ck-addr-card {{ $loop->first ? 'is-checked' : '' }}">
                            <div class="form-check d-flex gap-2">
                                <input class="form-check-input mt-1 addr-radio" type="radio" name="address_id" id="address-{{ $address->id }}" value="{{ $address->id }}" @checked($loop->first)>
                                <label class="form-check-label" for="address-{{ $address->id }}">
                                    <span class="fw-semibold">{{ $address->label }}</span>
                                    <span class="d-block small text-muted">{{ $address->address_line }}, {{ $address->city }}, {{ $address->state }} {{ $address->pincode }}</span>
                                </label>
                            </div>
                        </div>
                    @endforeach

                    <div class="ck-addr-card {{ $addresses->isEmpty() ? 'is-checked' : '' }}">
                        <div class="form-check d-flex gap-2">
                            <input class="form-check-input mt-1 addr-radio" type="radio" name="address_id" id="address-new" value="" @checked($addresses->isEmpty())>
                            <label class="form-check-label fw-semibold" for="address-new">+ Add a new address</label>
                        </div>

                        <div id="new-address-fields" class="row g-2 mt-1 {{ $addresses->isNotEmpty() ? 'd-none' : '' }}">
                            <div class="col-12">
                                <x-input-label value="Address" />
                                <input type="text" name="new_address_line" class="form-control" value="{{ old('new_address_line') }}">
                                <x-input-error :messages="$errors->get('new_address_line')" />
                            </div>
                            <div class="col-12 col-sm-4">
                                <x-input-label value="City" />
                                <input type="text" name="new_city" class="form-control" value="{{ old('new_city') }}">
                            </div>
                            <div class="col-6 col-sm-4">
                                <x-input-label value="State" />
                                <input type="text" name="new_state" class="form-control" value="{{ old('new_state') }}">
                            </div>
                            <div class="col-6 col-sm-4">
                                <x-input-label value="Pincode" />
                                <input type="text" name="new_pincode" class="form-control" value="{{ old('new_pincode') }}">
                            </div>
                        </div>
                    </div>
                </div>

                <p class="hp-section-title">Order summary</p>
                <div class="hp-card p-3 mb-4">
                    @php($total = 0)
                    @foreach ($cartItems as $item)
                        @php($price = $estimates->get($item->id))
                        @php($total += $price ?? 0)
                        <div class="hp-list-row py-2">
                            <span class="small">{{ $item->service->name }}</span>
                            <span class="small fw-semibold">{{ $price !== null ? '₹'.number_format($price, 2) : 'Price on assignment' }}</span>
                        </div>
                    @endforeach

                    <div class="d-flex justify-content-between fw-semibold pt-2 border-top mt-1">
                        <span>Estimated total</span>
                        <span>&#8377;{{ number_format($total, 2) }}</span>
                    </div>
                    <p class="text-muted small mt-2 mb-0">Final price is confirmed once a professional is assigned to your booking.</p>
                </div>

                <div class="hp-sticky-bar">
                    <div class="hp-sticky-bar-inner">
                        <button class="btn btn-primary w-100 py-2">Confirm Booking</button>
                    </div>
                </div>
            </form>
        @endif
    </div>

    @push('scripts')
        <script>
            document.addEventListener('DOMContentLoaded', () => {
                const scheduleFields = document.getElementById('schedule-fields');
                document.querySelectorAll('input[name="timing"]').forEach((input) => {
                    input.addEventListener('change', () => {
                        scheduleFields.classList.toggle('d-none', input.value !== 'scheduled' || !input.checked);
                    });
                });

                const newAddressFields = document.getElementById('new-address-fields');
                const newAddressRadio = document.getElementById('address-new');
                document.querySelectorAll('.addr-radio').forEach((input) => {
                    input.addEventListener('change', () => {
                        newAddressFields.classList.toggle('d-none', !newAddressRadio.checked);
                        document.querySelectorAll('.ck-addr-card').forEach((card) => {
                            card.classList.toggle('is-checked', card.querySelector('.addr-radio').checked);
                        });
                    });
                });
            });
        </script>
    @endpush
@endsection