@extends('SuperAdmin.layout.layout')
@section('title', 'New Repair Order')
@section('page-name', 'New Repair Order')
@section('page-detail', 'Create repair order')
@section('body')
<div class="content-are-dashboard p-3">
    <div class="card rounded-3">
        <div class="card-body">
            <div class="border rounded-3 p-3">
                <form action="{{ tenant_route_url('superadmin.orders.store') }}" method="post" id="orderForm">
                    @csrf
                    <h6 class="mb-2">Customer</h6>
                    <div class="row g-3 mb-2">
                        <div class="col-12 col-lg-6 col-xl-4">
                            <label class="form-label">Existing customer (optional)</label>
                            <select name="customer_id" id="customer_id" class="form-select">
                                <option value="">— New customer —</option>
                                @foreach($customers as $c)
                                    <option value="{{ $c->id }}" {{ old('customer_id') == $c->id ? 'selected' : '' }}>{{ $c->name }} ({{ $c->phone }})</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div id="new-customer-fields">
                        <div class="row g-3">
                            <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                                <label class="form-label">First name <span class="text-danger">*</span></label>
                                <input type="text" name="first_name" class="form-control" value="{{ old('first_name') }}" autocomplete="given-name">
                            </div>
                            <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                                <label class="form-label">Last name <span class="text-danger">*</span></label>
                                <input type="text" name="last_name" class="form-control" value="{{ old('last_name') }}" autocomplete="family-name">
                            </div>
                            <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                                <label class="form-label">Title</label>
                                <input type="text" name="title" class="form-control" value="{{ old('title') }}">
                            </div>
                            <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                                <label class="form-label">Business name</label>
                                <input type="text" name="business_name" class="form-control" value="{{ old('business_name') }}" autocomplete="organization">
                            </div>
                            <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                                <label class="form-label">Phone <span class="text-danger">*</span></label>
                                <input type="text" name="phone" class="form-control" value="{{ old('phone') }}" autocomplete="tel" inputmode="tel">
                            </div>
                            <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                                <label class="form-label">Email <span class="text-danger">*</span></label>
                                <input type="email" name="email" class="form-control" value="{{ old('email') }}" autocomplete="email" inputmode="email">
                            </div>
                            <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                                <label class="form-label">Postal code <span class="text-danger">*</span></label>
                                <input type="text" name="postal_code" class="form-control" value="{{ old('postal_code') }}" autocomplete="postal-code">
                            </div>
                            <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                                <label class="form-label">Language <span class="text-danger">*</span></label>
                                <select name="language" class="form-select">
                                    <option value="" {{ ! old('language') ? 'selected' : '' }} disabled>— Select —</option>
                                    <option value="english" {{ old('language') === 'english' ? 'selected' : '' }}>English</option>
                                    <option value="french" {{ old('language') === 'french' ? 'selected' : '' }}>Français</option>
                                    <option value="spanish" {{ old('language') === 'spanish' ? 'selected' : '' }}>Español</option>
                                </select>
                            </div>
                            <div class="col-12">
                                <label class="form-label">Street address <span class="text-danger">*</span></label>
                                <textarea name="address" class="form-control" rows="2" autocomplete="street-address">{{ old('address') }}</textarea>
                            </div>
                            <div class="col-12">
                                <label class="form-label">Notes</label>
                                <textarea name="notes" class="form-control" rows="2">{{ old('notes') }}</textarea>
                            </div>
                        </div>
                    </div>

                    <h6 class="mb-2 mt-4">Vehicle (enter VIN to auto-fill make/model/year)</h6>
                    <div class="row g-3">
                        <div class="col-12 col-lg-6 col-xl-4">
                            <label class="form-label">VIN (17 characters)</label>
                            <div class="input-group flex-nowrap">
                                <input type="text" name="vehicle_vin" id="vehicle_vin" class="form-control" value="{{ old('vehicle_vin') }}" maxlength="17" placeholder="e.g. 1HGBH41JXMN109186">
                                <button type="button" class="btn btn-outline-secondary flex-shrink-0" id="btnDecodeVin" title="Decode VIN">Decode</button>
                            </div>
                            <small class="text-muted d-block mt-1" id="vinStatus"></small>
                        </div>
                        <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                            <label class="form-label">Make <span class="text-danger">*</span></label>
                            <input type="text" name="vehicle_make" id="vehicle_make" class="form-control" value="{{ old('vehicle_make') }}" required>
                        </div>
                        <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                            <label class="form-label">Model <span class="text-danger">*</span></label>
                            <input type="text" name="vehicle_model" id="vehicle_model" class="form-control" value="{{ old('vehicle_model') }}" required>
                        </div>
                        <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                            <label class="form-label">Year</label>
                            <input type="text" name="vehicle_year" id="vehicle_year" class="form-control" value="{{ old('vehicle_year') }}">
                        </div>
                        <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                            <label class="form-label">Serial number</label>
                            <input type="text" name="serial_number" class="form-control" value="{{ old('serial_number') }}" placeholder="Enter serial number">
                        </div>
                        <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                            <label class="form-label">Color</label>
                            <input type="text" name="vehicle_color" class="form-control" value="{{ old('vehicle_color') }}">
                        </div>
                        <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                            <label class="form-label">Mileage</label>
                            <input type="text" name="vehicle_mileage" class="form-control" value="{{ old('vehicle_mileage') }}" inputmode="numeric">
                        </div>
                        <div class="col-12">
                            <label class="form-label">Items / services requested</label>
                            <textarea name="order_items" class="form-control" rows="2">{{ old('order_items') }}</textarea>
                        </div>
                        <div class="col-12">
                            <label class="form-label">Vehicle notes</label>
                            <textarea name="vehicle_notes" class="form-control" rows="2">{{ old('vehicle_notes') }}</textarea>
                        </div>
                    </div>

                    <h6 class="mb-2 mt-4">Auto SMS on status change</h6>
                    <div class="row g-3">
                        <div class="col-12 col-lg-8">
                            <div class="form-check mb-2">
                                <input type="hidden" name="auto_status_sms" value="0">
                                <input type="checkbox" name="auto_status_sms" id="auto_status_sms" value="1" class="form-check-input" {{ old('auto_status_sms') == '1' || old('auto_status_sms') === true ? 'checked' : '' }}>
                                <label class="form-check-label" for="auto_status_sms">Send SMS automatically when this order&rsquo;s status changes</label>
                            </div>
                            <p class="text-muted small mb-2">Enable this for <strong>this</strong> repair order only, then choose the template. Each time the status is updated, that message is sent. Leave off to skip automatic texts for this order.</p>
                        </div>

                        <div class="col-12 col-md-6 col-lg-4" id="auto_status_sms_template_wrap" style="display: none;">
                            <label class="form-label">Template <span class="text-danger">*</span></label>
                            <select name="auto_status_sms_template_id" id="auto_status_sms_template_id" class="form-select">
                                <option value="">— Select template —</option>
                                <option value="new" {{ old('auto_status_sms_template_id') === 'new' ? 'selected' : '' }}>+ New template…</option>
                                @foreach($templates as $tpl)
                                    <option value="{{ $tpl->id }}" {{ (string) old('auto_status_sms_template_id') === (string) $tpl->id ? 'selected' : '' }}>{{ $tpl->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-12" id="new_sms_template_fields" style="display: none;">
                            <div class="border rounded-3 p-3 bg-light">
                                <h6 class="small text-uppercase text-muted mb-3">New template</h6>
                                <div class="row g-3">
                                    <div class="col-12 col-md-6">
                                        <label class="form-label">Template name <span class="text-danger">*</span></label>
                                        <input type="text" name="new_sms_template_name" id="new_sms_template_name" class="form-control" value="{{ old('new_sms_template_name') }}" maxlength="255" placeholder="e.g. Status update">
                                    </div>
                                    <div class="col-12">
                                        <label class="form-label">Message <span class="text-danger">*</span></label>
                                        <textarea name="new_sms_template_body" id="new_sms_template_body" class="form-control" rows="4" maxlength="1600" placeholder="Hi [customer_name], order [order_number] is now [status].">{{ old('new_sms_template_body') }}</textarea>
                                        <small class="text-muted">You can use placeholders such as [status], [order_number], [vin], [make], [model], [review_link].</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    @if($errors->any())
                        <div class="alert alert-danger">
                            <ul class="mb-0">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
                        </div>
                    @endif
                    <div class="d-flex flex-wrap align-items-center mt-3" style="gap: 0.5rem;">
                        <button type="submit" class="btn btn-primary btn-same">Create Order</button>
                        <a href="{{ tenant_route_url('superadmin.orders.index') }}" class="btn btn-secondary btn-same">Cancel</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection
<style>
.btn-same { min-height: 38px; padding: 0.375rem 0.75rem; font-size: 1rem; line-height: 1.5; vertical-align: middle; }
@media (max-width: 575.98px) {
    #vehicle_vin { min-width: 0; }
    #btnDecodeVin { padding-left: 0.5rem; padding-right: 0.5rem; font-size: 0.875rem; }
}
</style>
@section('custom-scripts')
<script>
(function() {
    var customerId = document.getElementById('customer_id');
    var newFields = document.getElementById('new-customer-fields');
    function toggleNewCustomer() {
        newFields.style.display = !customerId.value ? 'block' : 'none';
    }
    customerId.addEventListener('change', toggleNewCustomer);
    toggleNewCustomer();

    var autoChk = document.getElementById('auto_status_sms');
    var autoTplWrap = document.getElementById('auto_status_sms_template_wrap');
    var autoTpl = document.getElementById('auto_status_sms_template_id');
    var newFieldsWrap = document.getElementById('new_sms_template_fields');
    var newNameIn = document.getElementById('new_sms_template_name');
    var newBodyIn = document.getElementById('new_sms_template_body');
    function syncNewTemplateFields() {
        if (!autoChk || !autoTplWrap) return;
        var autoOn = autoChk.checked;
        autoTplWrap.style.display = autoOn ? 'block' : 'none';
        var isNew = autoOn && autoTpl && autoTpl.value === 'new';
        if (newFieldsWrap) {
            newFieldsWrap.style.display = isNew ? 'block' : 'none';
        }
        if (autoTpl) {
            autoTpl.required = autoOn && !isNew;
        }
        if (newNameIn) newNameIn.required = !!isNew;
        if (newBodyIn) newBodyIn.required = !!isNew;
    }
    function toggleAutoTemplate() {
        syncNewTemplateFields();
    }
    if (autoChk) {
        autoChk.addEventListener('change', toggleAutoTemplate);
        toggleAutoTemplate();
    }
    if (autoTpl) {
        autoTpl.addEventListener('change', syncNewTemplateFields);
        syncNewTemplateFields();
    }

    var vinInput = document.getElementById('vehicle_vin');
    var btnDecode = document.getElementById('btnDecodeVin');
    var vinStatus = document.getElementById('vinStatus');
    var makeInput = document.getElementById('vehicle_make');
    var modelInput = document.getElementById('vehicle_model');
    var yearInput = document.getElementById('vehicle_year');

    function doDecode() {
        var vin = (vinInput.value || '').trim().toUpperCase();
        if (vin.length !== 17) {
            vinStatus.textContent = 'VIN must be 17 characters.';
            return;
        }
        vinStatus.textContent = 'Decoding...';
        makeInput.value = '';
        modelInput.value = '';
        yearInput.value = '';
        btnDecode.disabled = true;
        fetch('{{ tenant_route_url("superadmin.vin-decode") }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' },
            body: JSON.stringify({ vin: vin })
        })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (data.success) {
                makeInput.value = data.make || '';
                modelInput.value = data.model || '';
                yearInput.value = data.year || '';
                vinStatus.textContent = 'Decoded successfully.';
            } else {
                vinStatus.textContent = data.message || 'Decode failed.';
            }
        })
        .catch(function() {
            vinStatus.textContent = 'Request failed.';
        })
        .finally(function() {
            btnDecode.disabled = false;
        });
    }
    btnDecode.addEventListener('click', doDecode);
    vinInput.addEventListener('blur', function() {
        if ((vinInput.value || '').trim().length === 17) doDecode();
    });
})();
</script>
@endsection