@extends('layout.app')
@section('title', 'Add Service Type')

@section('content')
    <div class="app-hero-header d-flex align-items-center">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="{{ route('service-type.index') }}">Service Type List</a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">Add Service Type</li>
        </ol>
    </div>

    <div class="app-body">
        <div class="row gx-3">
            <div class="col-sm-12 col-md-8 offset-md-2">
                <div class="card shadow-sm border">
                    <div class="card-header bg-white py-3">
                        <h6 class="mb-0 fw-bold text-primary"><i class="ri-add-circle-line me-1"></i> Add New Service Type</h6>
                    </div>
                    <div class="card-body p-4">
                        <form action="{{ route('service-type.store') }}" method="POST" class="row g-3">
                            @csrf
                            @if(request('redirect_to'))
                                <input type="hidden" name="redirect_to" value="{{ request('redirect_to') }}">
                                <input type="hidden" name="vehicle_id" value="{{ request('vehicle_id') }}">
                            @endif

                            <div class="col-md-12">
                                <label class="form-label fw-bold">Service Name <span class="text-danger">*</span></label>
                                <input type="text" name="name" id="service_name_input" list="standard_services" class="form-control" placeholder="Select or type service name..." required autocomplete="off">
                                <datalist id="standard_services">
                                    <option value="Engine Oil Servicing" data-km="10000" data-days="180">Engine Oil Servicing (10,000 KM / 180 Days)</option>
                                    <option value="Gear Oil Servicing" data-km="40000" data-days="365">Gear Oil Servicing (40,000 KM / 365 Days)</option>
                                    <option value="Wheel Grease Service" data-km="20000" data-days="180">Wheel Grease Service (20,000 KM / 180 Days)</option>
                                    <option value="Tyre" data-km="60000" data-days="365">Tyre (60,000 KM / 365 Days)</option>
                                    <option value="Battery" data-km="50000" data-days="730">Battery (50,000 KM / 730 Days)</option>
                                    <option value="Clutch Service" data-km="40000" data-days="365">Clutch Service (40,000 KM / 365 Days)</option>
                                    <option value="Regular Service" data-km="5000" data-days="90">Regular Service (5,000 KM / 90 Days)</option>
                                </datalist>
                                <small class="text-muted">Choose from standard services or type a new custom service name.</small>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-bold">Default Interval (KM)</label>
                                <div class="input-group">
                                    <input type="number" name="service_interval_km" id="service_interval_km" class="form-control" placeholder="e.g. 10000">
                                    <span class="input-group-text">KM</span>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-bold">Default Interval (Days)</label>
                                <div class="input-group">
                                    <input type="number" name="service_interval_days" id="service_interval_days" class="form-control" placeholder="e.g. 180">
                                    <span class="input-group-text">Days</span>
                                </div>
                            </div>

                            <div class="col-md-12">
                                <label class="form-label fw-bold">Description / Remarks</label>
                                <textarea name="description" id="service_description" class="form-control" rows="3" placeholder="Optional notes about this service type..."></textarea>
                            </div>

                            <div class="col-12 mt-4 d-flex gap-2">
                                <button type="submit" class="btn btn-primary px-4">
                                    <i class="ri-save-line me-1"></i> Save Service Type
                                </button>
                                @if(request('redirect_to') == 'performance')
                                    <a href="{{ route('vehicle-performance.show', request('vehicle_id')) }}" class="btn btn-outline-secondary">Cancel</a>
                                @else
                                    <a href="{{ route('service-type.index') }}" class="btn btn-outline-secondary">Cancel</a>
                                @endif
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('footer_script')
<script>
    const intervalMap = {
        'Engine Oil Servicing': { km: 10000, days: 180, desc: 'Engine oil and oil filter replacement' },
        'Gear Oil Servicing': { km: 40000, days: 365, desc: 'Gear box oil replacement and inspection' },
        'Wheel Grease Service': { km: 20000, days: 180, desc: 'Wheel bearing greasing and inspection' },
        'Tyre': { km: 60000, days: 365, desc: 'Tyre rotation, alignment and replacement check' },
        'Battery': { km: 50000, days: 730, desc: 'Battery water, terminal cleaning and health check' },
        'Clutch Service': { km: 40000, days: 365, desc: 'Clutch plate and pressure plate maintenance' },
        'Regular Service': { km: 5000, days: 90, desc: 'General inspection, coolant check, air filter cleaning' }
    };

    $('#service_name_input').on('input change', function() {
        let val = $(this).val();
        if (intervalMap[val]) {
            if (!$('#service_interval_km').val()) $('#service_interval_km').val(intervalMap[val].km);
            if (!$('#service_interval_days').val()) $('#service_interval_days').val(intervalMap[val].days);
            if (!$('#service_description').val()) $('#service_description').val(intervalMap[val].desc);
        }
    });
</script>
@endpush