<div>
    <x-title :breadcrumbs="[
        ['link' => route('wills-cases.index'), 'title' => 'Wills &amp; Trusts'],
        ['link' => '#', 'title' => 'New Case'],
    ]">
        New Wills &amp; Trusts Case
    </x-title>

    <div class="row justify-content-center">
        <div class="col-12 col-md-8">

            {{-- CLIENT DETAILS --}}
            <div class="card shadow-sm mb-4">
                <div class="card-body">
                    <h5 class="card-title mb-3">Client Details</h5>
                    <div class="row g-3">
                        <div class="col-12 col-md-2">
                            <x-ui.input name="title" label="Title" wire:model="title" placeholder="Mr / Mrs…"/>
                        </div>
                        <div class="col-12 col-md-4">
                            <x-ui.input name="name_first" label="First Name *" wire:model="name_first"/>
                            @error('name_first') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-12 col-md-3">
                            <x-ui.input name="name_middle" label="Middle Name" wire:model="name_middle"/>
                        </div>
                        <div class="col-12 col-md-3">
                            <x-ui.input name="name_last" label="Last Name *" wire:model="name_last"/>
                            @error('name_last') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-12 col-md-4">
                            <x-ui.input name="date_of_birth" label="Date of Birth" wire:model="date_of_birth" type="date"/>
                        </div>
                        <div class="col-12 col-md-4">
                            <x-ui.input name="phone_number" label="Phone Number" wire:model="phone_number"/>
                        </div>
                        <div class="col-12 col-md-4">
                            <x-ui.input name="email_address" label="Email Address" wire:model="email_address"/>
                        </div>
                    </div>
                </div>
            </div>

            {{-- CASE DETAILS --}}
            <div class="card shadow-sm mb-4">
                <div class="card-body">
                    <h5 class="card-title mb-3">Case Details</h5>
                    <div class="row g-3">
                        <div class="col-12 col-md-6">
                            <x-ui.input name="case_number" label="Case Number" wire:model="case_number"/>
                        </div>
                        <div class="col-12 col-md-6">
                            <x-ui.input name="national_insurance" label="National Insurance" wire:model="national_insurance"/>
                        </div>
                        <div class="col-12 col-md-6">
                            <x-ui.input name="fee_structure" label="Fee Structure" wire:model="fee_structure"/>
                        </div>
                        <div class="col-12 col-md-6">
                            <x-ui.input name="occupation" label="Occupation" wire:model="occupation"/>
                        </div>
                    </div>
                </div>
            </div>

            {{-- DATES --}}
            <div class="card shadow-sm mb-4">
                <div class="card-body">
                    <h5 class="card-title mb-3">Dates</h5>
                    <div class="row g-3">
                        <div class="col-12 col-md-4">
                            <label class="form-label">Date/Time Opened</label>
                            <input type="date" class="form-control" wire:model="opened_at">
                        </div>
                        <div class="col-12 col-md-4">
                            <label class="form-label">Date/Time Closed</label>
                            <input type="date" class="form-control" wire:model="closed_at">
                        </div>
                        <div class="col-12 col-md-4">
                            <label class="form-label">IFA Referred Date</label>
                            <input type="date" class="form-control" wire:model="ifa_referred_date">
                        </div>
                    </div>
                </div>
            </div>

            {{-- FLAGS --}}
            <div class="card shadow-sm mb-4">
                <div class="card-body">
                    <h5 class="card-title mb-3">Flags</h5>
                    <div class="row g-3">
                        <div class="col-6 col-md-3">
                            <x-ui.checkbox name="is_open" label="Case is Open" wire:model="is_open"/>
                        </div>
                        <div class="col-6 col-md-3">
                            <x-ui.checkbox name="ifa_referred" label="IFA Referred" wire:model="ifa_referred"/>
                        </div>
                    </div>
                </div>
            </div>

            <div class="d-flex gap-2 mb-4">
                <x-ui.button wire:click="save" style="success" icon="mdi mdi-content-save">
                    Save Case
                </x-ui.button>
                <a href="{{ route('wills-cases.index') }}" class="btn btn-outline-secondary">Cancel</a>
            </div>

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