@extends('back_office.layouts.app')

@section('content')
    <div>
        <div class="container-fluid">
            <div class="p-4 bg-white row">
                <h5>Create New Breakdown Service</h5>

                {{-- Display general error message --}}
                @if (session('error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        {{ session('error') }}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                @endif

                {{-- Display validation errors --}}
                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <form class="form-horizontal" action="{{ route('breakdown-services.store') }}" method="POST"
                    enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        <input type="hidden" name="service_provider_id" value="{{ $serviceProviderId }}" />

                        <div class="col-6">
                            <label>Service Name <span class="text-danger">*</span></label>
                            <input type="text" name="name" value="{{ old('name') }}"
                                class="form-control @error('name') is-invalid @enderror"
                                placeholder="Enter breakdown service name" required />
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-6">
                            <label>Service Type <span class="text-danger">*</span></label>
                            <select name="service_type" class="form-control @error('service_type') is-invalid @enderror"
                                required>
                                <option value="">Select Service Type</option>
                                <option value="towing" {{ old('service_type') == 'towing' ? 'selected' : '' }}>Towing
                                    Service</option>
                                <option value="battery_jump" {{ old('service_type') == 'battery_jump' ? 'selected' : '' }}>
                                    Battery Jump Start</option>
                                <option value="tire_change" {{ old('service_type') == 'tire_change' ? 'selected' : '' }}>
                                    Tire Change</option>
                                <option value="lockout" {{ old('service_type') == 'lockout' ? 'selected' : '' }}>Vehicle
                                    Lockout</option>
                                <option value="fuel_delivery"
                                    {{ old('service_type') == 'fuel_delivery' ? 'selected' : '' }}>Fuel Delivery</option>
                                <option value="mechanical_repair"
                                    {{ old('service_type') == 'mechanical_repair' ? 'selected' : '' }}>Mechanical Repair
                                </option>
                                <option value="other" {{ old('service_type') == 'other' ? 'selected' : '' }}>Other
                                </option>
                            </select>
                            @error('service_type')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-12 mt-3">
                            <label>Description <span class="text-danger">*</span></label>
                            <textarea name="description" class="form-control @error('description') is-invalid @enderror" rows="4"
                                placeholder="Enter detailed service description" required>{{ old('description') }}</textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-6 mt-3">
                            <label>Service Image</label>
                            <input type="file" name="image" class="form-control @error('image') is-invalid @enderror"
                                accept="image/*" />
                            <small class="form-text text-muted">Accepted formats: JPG, JPEG, PNG, GIF. Max size: 2MB</small>
                            @error('image')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-6 mt-3">
                            <label>Service Video</label>
                            <input type="file" name="video" class="form-control @error('video') is-invalid @enderror"
                                accept="video/*" />
                            <small class="form-text text-muted">Accepted formats: MP4, MOV, AVI. Max size: 10MB</small>
                            @error('video')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-6 mt-3 ">
                            <label>Base Price <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">QAR</span>
                                </div>
                                <input type="number" step="0.01" min="0" name="price"
                                    value="{{ old('price') }}" class="form-control @error('price') is-invalid @enderror"
                                    placeholder="Enter base service price" required />
                            </div>
                            <small class="form-text text-muted">Base price for the breakdown service</small>
                            @error('price')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-6 mt-3">
                            <label>Distance Rate (Per KM)</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">QAR</span>
                                </div>
                                <input type="number" step="0.01" min="0" name="distance_rate"
                                    value="{{ old('distance_rate') }}"
                                    class="form-control @error('distance_rate') is-invalid @enderror"
                                    placeholder="Rate per kilometer" />
                            </div>
                            <small class="form-text text-muted">Additional charge per kilometer (optional)</small>
                            @error('distance_rate')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-6 mt-3 d-none">
                            <label>Estimated Duration (Minutes)</label>
                            <input type="number" min="1" name="estimated_duration"
                                value="{{ old('estimated_duration') }}"
                                class="form-control @error('estimated_duration') is-invalid @enderror"
                                placeholder="Estimated service duration" />
                            <small class="form-text text-muted">Approximate time to complete the service</small>
                            @error('estimated_duration')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-6 mt-3 d-none">
                            <label>Vehicle Types Supported</label>
                            <div class="form-check-container mt-2">
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" name="vehicle_types[]"
                                        id="car" value="car"
                                        {{ in_array('car', old('vehicle_types', [])) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="car">Car</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" name="vehicle_types[]"
                                        id="suv" value="suv"
                                        {{ in_array('suv', old('vehicle_types', [])) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="suv">SUV</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" name="vehicle_types[]"
                                        id="truck" value="truck"
                                        {{ in_array('truck', old('vehicle_types', [])) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="truck">Truck</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" name="vehicle_types[]"
                                        id="motorcycle" value="motorcycle"
                                        {{ in_array('motorcycle', old('vehicle_types', [])) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="motorcycle">Motorcycle</label>
                                </div>
                            </div>
                            <small class="form-text text-muted">Select all vehicle types this service supports</small>
                            @error('vehicle_types')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-12 mt-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="is_active" id="is_active"
                                    value="1" {{ old('is_active', true) ? 'checked' : '' }} />
                                <label class="form-check-label" for="is_active">
                                    <strong>Service Active</strong>
                                </label>
                            </div>
                            <small class="form-text text-muted">Enable this service for customers</small>
                            @error('is_active')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-12 mt-3">
                            <label>Terms and Conditions</label>
                            <textarea required name="terms_of_condition" class="form-control @error('terms_of_condition') is-invalid @enderror"
                                rows="4" placeholder="Enter terms and conditions for this service">{{ old('terms_of_condition') }}</textarea>
                            <small class="form-text text-muted">Service-specific terms and conditions (optional)</small>
                            @error('terms_of_condition')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-12 mt-4 text-right">
                            <button type="button" class="btn btn-secondary mr-2"
                                onclick="history.back()">Cancel</button>
                            <button type="submit" class="btn btn-info">Save Breakdown Service</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function() {
            // Form validation
            const form = document.querySelector('form');

            // form.addEventListener('submit', function(e) {
            //     // Validate at least one vehicle type is selected
            //     const vehicleTypes = document.querySelectorAll('input[name="vehicle_types[]"]:checked');
            //     if (vehicleTypes.length === 0) {
            //         e.preventDefault();
            //         alert('Please select at least one vehicle type that this service supports.');
            //         return false;
            //     }
            // });
        });
    </script>
@endpush