<section class="w-full" x-data="campRegistrationForm">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

    <div class="p-4 shadow bg-white dark:bg-gray-800 border border-dark rounded-0 mx-auto"
        style="max-width: 800px; width: 100%;">
        <form wire:submit.prevent="submit" class="mt-3">
            <div class="d-flex align-items-center mb-4">
                <i class="bi bi-person-vcard fs-3 text-primary me-2"></i>
                <h4 class="mb-0 text-primary">{{ __('Parent Information') }}</h4>
            </div>

            <div class="row g-3 mb-4">
                <div class="col-md-4">
                    <label class="form-label fw-semibold">
                        <i class="bi bi-person-fill me-1"></i> {{ __('Parent Name') }}
                    </label>
                    <div class="input-group">
                        <span class="input-group-text bg-light rounded-0">
                            <i class="bi bi-person"></i>
                        </span>
                        <input type="text" class="form-control bg-light rounded-0" value="{{ $parent_name }}" disabled>
                    </div>
                </div>

                <div class="col-md-4">
                    <label class="form-label fw-semibold">
                        <i class="bi bi-envelope-fill me-1"></i> {{ __('Email') }}
                    </label>
                    <div class="input-group">
                        <span class="input-group-text bg-light rounded-0">
                            <i class="bi bi-envelope"></i>
                        </span>
                        <input type="email" class="form-control bg-light rounded-0" value="{{ $parent_email }}"
                            disabled>
                    </div>
                </div>

                <div class="col-md-4">
                    <label class="form-label fw-semibold">
                        <i class="bi bi-telephone-fill me-1"></i> {{ __('Phone') }}
                    </label>
                    <div class="input-group">
                        <span class="input-group-text rounded-0">
                            <i class="bi bi-phone"></i>
                        </span>
                        <input wire:model.lazy="parent_phone" type="text"
                            class="form-control rounded-0 @error('parent_phone') is-invalid @enderror">
                    </div>
                    @error('parent_phone') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror
                </div>
            </div>

            <div class="d-flex align-items-center mt-5 mb-4">
                <i class="bi bi-people-fill fs-3 text-primary me-2"></i>
                <h4 class="mb-0 text-primary">{{ __('Child Information') }}</h4>
            </div>

            <div class="row g-3 mb-4">
                <div class="col-md-6">
                    <label class="form-label fw-semibold">
                        <i class="bi bi-person-badge-fill me-1"></i> {{ __('Full Name') }}
                    </label>
                    <div class="input-group">
                        <span class="input-group-text rounded-0">
                            <i class="bi bi-person"></i>
                        </span>
                        <input wire:model.lazy="child_name" type="text"
                            class="form-control rounded-0 @error('child_name') is-invalid @enderror">
                    </div>
                    @error('child_name') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror
                </div>

                <div class="col-md-6">
                    <label class="form-label fw-semibold">
                        <i class="bi bi-calendar-heart-fill me-1"></i> {{ __('Date of Birth') }}
                    </label>
                    <div class="input-group">
                        <span class="input-group-text rounded-0">
                            <i class="bi bi-calendar"></i>
                        </span>
                        <input wire:model.defer="child_dob" type="date"
                            class="form-control rounded-0 @error('child_dob') is-invalid @enderror">
                    </div>
                    @error('child_dob') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror
                </div>

                <div class="col-md-6">
                    <label class="form-label fw-semibold">
                        <i class="bi bi-gender-ambiguous me-1"></i> {{ __('Gender') }}
                    </label>
                    <div class="input-group">
                        <span class="input-group-text rounded-0">
                            <i class="bi bi-gender-male"></i>
                        </span>
                        <select wire:model.lazy="child_gender"
                            class="form-select rounded-0 @error('child_gender') is-invalid @enderror">
                            <option value="">{{ __('Select Gender') }}</option>
                            <option value="Male">{{ __('Male') }}</option>
                            <option value="Female">{{ __('Female') }}</option>
                        </select>
                    </div>
                    @error('child_gender') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror
                </div>

                <div class="col-12">
                    <label class="form-label fw-semibold">
                        <i class="bi bi-heart-pulse-fill me-1"></i> {{ __('Special Needs') }} <small
                            class="text-muted">({{ __('optional') }})</small>
                    </label>
                    <div class="input-group">
                        <span class="input-group-text rounded-0 align-items-start pt-2">
                            <i class="bi bi-info-circle"></i>
                        </span>
                        <textarea wire:model.lazy="special_needs"
                            class="form-control rounded-0 @error('special_needs') is-invalid @enderror" rows="3"
                            placeholder="{{ __('Describe any special needs...') }}"></textarea>
                    </div>
                    @error('special_needs') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror
                </div>

                <div class="col-md-6 mt-3">
                    <label class="form-label fw-semibold">
                        <i class="bi bi-geo-alt me-1"></i> {{ __('Camp Location') }}
                    </label>
                    <div class="input-group">
                        <span class="input-group-text rounded-0">
                            <i class="bi bi-map"></i>
                        </span>
                        <select wire:model.lazy="location"
                            class="form-select rounded-0 @error('location') is-invalid @enderror">
                            <option value="">{{ __('Select Location') }}</option>
                            <option value="Gauteng - Pretoria Cullinan">{{ __('Gauteng - Pretoria Cullinan') }}</option>
                            <option value="Northern Cape - Colesberg">{{ __('Northern Cape - Colesberg') }}</option>
                        </select>
                    </div>
                    @error('location')
                        <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                </div>
            </div>

            <div class="d-flex align-items-center mt-5 mb-4">
                <i class="bi bi-backpack-fill fs-3 text-primary me-2"></i>
                <h4 class="mb-0 text-primary">{{ __('Camp Packages') }}</h4>
            </div>

            <div class="mb-4">
                <label class="form-label fw-semibold">
                    <i class="bi bi-tags-fill me-1"></i> {{ __('Select Packages') }}
                </label>
                @foreach ($campPackages as $package)
                    <div class="form-check mb-2">
                        <input x-model="selectedPackages" @change="calculateTotal()" class="form-check-input"
                            type="checkbox" value="{{ $package->id }}" id="package-{{ $package->id }}">
                        <label class="form-check-label" for="package-{{ $package->id }}">
                            {{ $package->name }} - {{ $package->label }} (R{{ number_format($package->price, 2) }})
                        </label>
                    </div>
                @endforeach
                @error('selectedPackages') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror
            </div>

            <div class="border-top border-dark pt-3 mb-4">
                <div class="d-flex justify-content-between">
                    <span class="fw-semibold">{{ __('Total Packages Selected:') }}</span>
                    <span x-text="selectedPackages.length"></span>
                </div>
                <div class="d-flex justify-content-between">
                    <span class="fw-semibold">{{ __('Total Amount:') }}</span>
                    <span x-text="'R' + parseFloat(total).toFixed(2)"></span>
                </div>
            </div>

            <div class="d-flex justify-content-end mt-5">
                <button type="submit" class="btn btn-primary rounded-0 px-4 py-2">
                    <i class="bi bi-send-check-fill me-2"></i> {{ __('Submit Booking') }}
                </button>
            </div>
        </form>
    </div>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('campRegistrationForm', () => ({
                selectedPackages: @entangle('selectedPackages').live,
                packages: {{ Js::from($campPackages) }},
                total: 0,
                init() {
                    this.calculateTotal();
                },
                calculateTotal() {
                    this.total = this.selectedPackages.reduce((sum, packageId) => {
                        const packageItem = this.packages.find(p => p.id == packageId);
                        return packageItem ? sum + parseFloat(packageItem.price) : sum;
                    }, 0);
                }
            }));
        });
    </script>

</section>