<x-admin-layout title="Add Driver">
    <div class="card">
        <div class="card-body">
            <h5 class="fw-bold mb-4">New Driver</h5>

            <div data-wizard>
                <div class="wizard-steps">
                    <div class="wizard-step-indicator active" data-step-indicator>
                        <span class="num">1</span> Driver Details
                    </div>
                    <div class="wizard-step-connector"></div>
                    <div class="wizard-step-indicator" data-step-indicator>
                        <span class="num">2</span> Documents
                    </div>
                </div>

                <form method="POST" action="{{ route('admin.drivers.store') }}" enctype="multipart/form-data">
                    @csrf

                    <div data-step>
                        <div class="row g-3">
                            @if ($companies->isNotEmpty())
                                <div class="col-md-6">
                                    <label for="company_id" class="form-label fw-semibold">Company</label>
                                    <select id="company_id" name="company_id" class="form-select @error('company_id') is-invalid @enderror">
                                        <option value="">— Select —</option>
                                        @foreach ($companies as $company)
                                            <option value="{{ $company->id }}" @selected(old('company_id') == $company->id)>{{ $company->name }}</option>
                                        @endforeach
                                    </select>
                                    @error('company_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            @endif

                            <div class="col-md-3">
                                <label for="first_name" class="form-label fw-semibold">First Name</label>
                                <input id="first_name" name="first_name" type="text" value="{{ old('first_name') }}" required
                                       class="form-control @error('first_name') is-invalid @enderror">
                                @error('first_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>

                            <div class="col-md-3">
                                <label for="last_name" class="form-label fw-semibold">Last Name</label>
                                <input id="last_name" name="last_name" type="text" value="{{ old('last_name') }}" required
                                       class="form-control @error('last_name') is-invalid @enderror">
                                @error('last_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>

                            <div class="col-md-3">
                                <label for="call_sign" class="form-label fw-semibold">Call Sign</label>
                                <input id="call_sign" name="call_sign" type="text" value="{{ old('call_sign') }}"
                                       class="form-control @error('call_sign') is-invalid @enderror">
                                @error('call_sign')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>

                            <div class="col-md-3">
                                <label for="status" class="form-label fw-semibold">Status</label>
                                <select id="status" name="status" class="form-select @error('status') is-invalid @enderror">
                                    <option value="active" @selected(old('status', 'active') == 'active')>Active</option>
                                    <option value="inactive" @selected(old('status') == 'inactive')>Inactive</option>
                                </select>
                                @error('status')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>

                            <div class="col-md-4">
                                <label for="email" class="form-label fw-semibold">Email</label>
                                <input id="email" name="email" type="email" value="{{ old('email') }}"
                                       class="form-control @error('email') is-invalid @enderror">
                                @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>

                            <div class="col-md-4">
                                <label for="phone" class="form-label fw-semibold">Phone</label>
                                <input id="phone" name="phone" type="text" value="{{ old('phone') }}"
                                       class="form-control @error('phone') is-invalid @enderror">
                                @error('phone')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>

                            <div class="col-md-4">
                                <label for="national_insurance_number" class="form-label fw-semibold">NI Number</label>
                                <input id="national_insurance_number" name="national_insurance_number" type="text"
                                       value="{{ old('national_insurance_number') }}"
                                       class="form-control @error('national_insurance_number') is-invalid @enderror">
                                @error('national_insurance_number')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>

                            <div class="col-12">
                                <label for="address" class="form-label fw-semibold">Address</label>
                                <input id="address" name="address" type="text" value="{{ old('address') }}"
                                       class="form-control @error('address') is-invalid @enderror">
                                @error('address')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>

                            <div class="col-md-4">
                                <label for="date_of_birth" class="form-label fw-semibold">Date of Birth</label>
                                <input id="date_of_birth" name="date_of_birth" type="date" value="{{ old('date_of_birth') }}"
                                       class="form-control @error('date_of_birth') is-invalid @enderror">
                                @error('date_of_birth')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>

                            <div class="col-md-4">
                                <label for="joined_at" class="form-label fw-semibold">Joined</label>
                                <input id="joined_at" name="joined_at" type="date" value="{{ old('joined_at') }}"
                                       class="form-control @error('joined_at') is-invalid @enderror">
                                @error('joined_at')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>

                            <div class="col-md-4">
                                <label for="left_at" class="form-label fw-semibold">Left</label>
                                <input id="left_at" name="left_at" type="date" value="{{ old('left_at') }}"
                                       class="form-control @error('left_at') is-invalid @enderror">
                                @error('left_at')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                        </div>

                        <div class="d-flex gap-2 mt-4">
                            <button type="button" class="btn btn-dark" data-wizard-next>Next: Documents</button>
                            <a href="{{ route('admin.drivers.index') }}" class="btn btn-outline-secondary">Cancel</a>
                        </div>
                    </div>

                    <div data-step class="d-none">
                        <p class="text-muted small mb-3">
                            Optional here — licence and PHV badge are required before this driver can start a shift, but
                            you can skip this and upload them later from the driver's own edit page.
                        </p>

                        <div id="docRows" class="d-flex flex-column gap-3"></div>

                        <button type="button" class="btn btn-outline-dark btn-sm mt-3" id="addDocRow">
                            <i class="bi bi-plus-lg me-1"></i>Add another document
                        </button>

                        <div class="d-flex gap-2 mt-4">
                            <button type="button" class="btn btn-outline-secondary" data-wizard-back>Back</button>
                            <button type="submit" class="btn btn-dark">Save Driver</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <template id="docRowTemplate">
        <div class="wizard-doc-row">
            <button type="button" class="btn btn-sm btn-outline-secondary position-absolute top-0 end-0 m-2 remove-doc-row"><i class="bi bi-x-lg"></i></button>
            <div class="row g-2">
                <div class="col-md-3">
                    <label class="form-label fw-semibold small">Type</label>
                    <select class="form-select doc-type">
                        <option value="">— Not uploading —</option>
                        <option value="licence">Licence</option>
                        <option value="phv_badge">PHV Badge</option>
                        <option value="passport">Passport</option>
                        <option value="biometric_residence_permit">Biometric Residence Permit</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-semibold small">Document Number</label>
                    <input type="text" class="form-control doc-number">
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-semibold small">Expiry Date</label>
                    <input type="date" class="form-control doc-expiry">
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-semibold small">File</label>
                    <input type="file" class="form-control doc-file" accept=".jpg,.jpeg,.png,.pdf">
                </div>
            </div>
        </div>
    </template>

    <script>
        (function () {
            const container = document.getElementById('docRows');
            const template = document.getElementById('docRowTemplate').innerHTML;
            let index = 0;

            function addRow() {
                const wrapper = document.createElement('div');
                wrapper.innerHTML = template;
                const row = wrapper.firstElementChild;

                row.querySelector('.doc-type').setAttribute('name', `documents[${index}][type]`);
                row.querySelector('.doc-number').setAttribute('name', `documents[${index}][document_number]`);
                row.querySelector('.doc-expiry').setAttribute('name', `documents[${index}][expiry_date]`);
                row.querySelector('.doc-file').setAttribute('name', `documents[${index}][file]`);

                row.querySelector('.remove-doc-row').addEventListener('click', () => row.remove());

                container.appendChild(row);
                index++;
            }

            document.getElementById('addDocRow').addEventListener('click', addRow);

            // Start with one row so the step isn't empty on first load.
            addRow();
        })();
    </script>
</x-admin-layout>
