@extends('SuperAdmin.layout.layout')
@section('title', 'Edit Order')
@section('page-name', 'Edit Order')
@section('page-detail', 'Update 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.update', ['id' => $order->id]) }}" method="post">
                    @csrf
                    @method('PUT')
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label">Customer <span class="text-danger">*</span></label>
                            <select name="customer_id" class="form-select" required>
                                @foreach($customers as $c)
                                    <option value="{{ $c->id }}" {{ old('customer_id', $order->customer_id) == $c->id ? 'selected' : '' }}>{{ $c->name }} ({{ $c->phone }})</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <h6 class="mb-2 mt-3">Vehicle</h6>
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Make <span class="text-danger">*</span></label>
                            <input type="text" name="vehicle_make" class="form-control" value="{{ old('vehicle_make', $order->vehicle_make) }}" required>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Model <span class="text-danger">*</span></label>
                            <input type="text" name="vehicle_model" class="form-control" value="{{ old('vehicle_model', $order->vehicle_model) }}" required>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Year</label>
                            <input type="text" name="vehicle_year" class="form-control" value="{{ old('vehicle_year', $order->vehicle_year) }}">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">VIN</label>
                            <input type="text" name="vehicle_vin" class="form-control" value="{{ old('vehicle_vin', $order->vehicle_vin) }}">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Serial number</label>
                            <input type="text" name="serial_number" class="form-control" value="{{ old('serial_number', $order->serial_number) }}">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Color</label>
                            <input type="text" name="vehicle_color" class="form-control" value="{{ old('vehicle_color', $order->vehicle_color) }}">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Mileage</label>
                            <input type="text" name="vehicle_mileage" class="form-control" value="{{ old('vehicle_mileage', $order->vehicle_mileage) }}">
                        </div>
                        <div class="col-12 mb-3">
                            <label class="form-label">Items / services requested</label>
                            <textarea name="order_items" class="form-control" rows="2">{{ old('order_items', $order->order_items) }}</textarea>
                        </div>
                        <div class="col-12 mb-3">
                            <label class="form-label">Vehicle notes</label>
                            <textarea name="vehicle_notes" class="form-control" rows="2">{{ old('vehicle_notes', $order->vehicle_notes) }}</textarea>
                        </div>
                    </div>

                    <h6 class="mb-2 mt-3">Auto SMS on status change</h6>
                    <div class="row g-3 mb-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', $order->auto_status_sms ? '1' : '0') == '1') ? '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-0">Choose a template below when enabled, or create a new one. Only this order uses these settings.</p>
                        </div>
                        <div class="col-12 col-md-6 col-lg-4" id="auto_status_sms_template_wrap">
                            <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 —</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', $order->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">Placeholders: [status], [order_number], [vin], [make], [model], [review_link], etc.</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 align-items-center gap-2 flex-wrap">
                        <button type="submit" class="btn btn-primary">Update Order</button>
                        <a href="{{ tenant_route_url('superadmin.orders.index') }}" class="btn btn-secondary">Cancel</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection
@section('custom-scripts')
<script>
(function() {
    var autoChk = document.getElementById('auto_status_sms');
    var wrap = document.getElementById('auto_status_sms_template_wrap');
    var sel = document.getElementById('auto_status_sms_template_id');
    var newWrap = document.getElementById('new_sms_template_fields');
    var newName = document.getElementById('new_sms_template_name');
    var newBody = document.getElementById('new_sms_template_body');
    function sync() {
        if (!autoChk || !wrap) return;
        var on = autoChk.checked;
        wrap.style.display = on ? 'block' : 'none';
        var isNew = on && sel && sel.value === 'new';
        if (newWrap) newWrap.style.display = isNew ? 'block' : 'none';
        if (sel) sel.required = on && !isNew;
        if (newName) newName.required = !!isNew;
        if (newBody) newBody.required = !!isNew;
    }
    if (autoChk) {
        autoChk.addEventListener('change', sync);
    }
    if (sel) {
        sel.addEventListener('change', sync);
    }
    sync();
})();
</script>
@endsection