<div>
    <x-title :breadcrumbs="[
        ['link' => route('wills-cases.index'), 'title' => 'Wills &amp; Trusts'],
        ['link' => route('wills-cases.view', $willsCase), 'title' => $willsCase->case_number ?? $willsCase->displayId],
        ['link' => '#', 'title' => 'Edit'],
    ]">
        Edit: {{ $willsCase->case_number ?? $willsCase->displayId }}
    </x-title>

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

            <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>

            <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>

            <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 Changes
                </x-ui.button>
                <a href="{{ route('wills-cases.view', $willsCase) }}" class="btn btn-outline-secondary">Cancel</a>
            </div>

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