{{-- Quick-add modal. Posts as JSON to the normal store route; see resources/js/pages/quick-add.js --}}
@php
    $isClient = $type === 'client';
    $route = $isClient ? route('clients.store') : route('vendors.store');
    $label = $isClient ? 'client' : 'vendor';
@endphp
<div class="modal fade quick-add-modal" id="quick-add-{{ $type }}" tabindex="-1" aria-labelledby="qa-{{ $type }}-title" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <form class="modal-content" method="POST" action="{{ $route }}" novalidate>
            @csrf
            <div class="modal-header">
                <h2 class="modal-title h6" id="qa-{{ $type }}-title"><i class="bi bi-person-plus me-2 text-primary" aria-hidden="true"></i>Quick add {{ $label }}</h2>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row g-3">
                    <div class="col-12 field">
                        <label class="form-label" for="qa-{{ $type }}-name">{{ ucfirst($label) }} name<span class="req" aria-hidden="true">*</span></label>
                        <input type="text" id="qa-{{ $type }}-name" name="name" class="form-control" required maxlength="255" data-label="{{ ucfirst($label) }} name">
                        <div class="invalid-feedback"></div>
                    </div>
                    <div class="col-12 col-sm-6 field">
                        <label class="form-label" for="qa-{{ $type }}-phone">Phone</label>
                        <input type="text" id="qa-{{ $type }}-phone" name="phone" class="form-control" maxlength="50" autocomplete="tel" placeholder="+971 4 123 4567" data-label="Phone">
                        <div class="invalid-feedback"></div>
                    </div>
                    <div class="col-12 col-sm-6 field">
                        <label class="form-label" for="qa-{{ $type }}-city">City</label>
                        <input type="text" id="qa-{{ $type }}-city" name="city" class="form-control" maxlength="150" data-label="City">
                        <div class="invalid-feedback"></div>
                    </div>
                    <div class="col-12 field">
                        <label class="form-label" for="qa-{{ $type }}-country">Country</label>
                        <select id="qa-{{ $type }}-country" name="country" class="form-select" data-ts data-placeholder="Search countries…" data-label="Country" data-default="{{ \App\Support\Countries::default() }}">
                            <option value="">Select country…</option>
                            @foreach (\App\Support\Countries::all() as $code => $countryName)
                                <option value="{{ $code }}" @selected($code === \App\Support\Countries::default())>{{ $countryName }}</option>
                            @endforeach
                        </select>
                        <div class="invalid-feedback"></div>
                    </div>
                    <input type="hidden" name="is_active" value="1">
                </div>
                <p class="small text-muted mt-3 mb-0">You can add the rest of the details later from the {{ $label }}'s page.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-ghost" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary">Add {{ $label }}</button>
            </div>
        </form>
    </div>
</div>