@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Trailer Service</div>

                <div class="card-body  p-3">
                    <form class="form" action="{{ route('services.store') }}" method="POST">
                        @csrf

                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="service_date">Service Date</label>
                                <input type="date" id="service_date" name="service_date" class="form-control @error('service_date') is-invalid @enderror" value="{{ old('service_date') }}">
                                @error('service_date')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>

                            <div class="form-group col-md-6">
                                <label for="service_time">Service Time</label>
                                <input type="time" id="service_time" name="service_time" class="form-control @error('service_time') is-invalid @enderror" value="{{ old('service_time') }}">
                                @error('service_time')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="inspector">Inspector</label>
                            <select id="inspector" name="user_id" class="form-control">
                                @foreach ($users as $user)
                                <option value="{{ $user->id }}">{{ $user->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <hr class="mb-4">
                        <!-- Trailer Details section -->
                        <h3>Trailer Details</h3>

                        <div class="form-group">
                            <label for="trailer">Select a Trailer</label>
                            <select id="trailer" name="trailer" class="form-control">
                                <option value="">New Trailer</option>
                                @foreach ($trailers as $trailer)
                                <option value="{{ $trailer->id }}">{{ $trailer->vin }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="manufacturer">Manufacturer</label>
                            <input type="text" id="manufacturer" name="manufacturer" value="{{ old('manufacturer') }}" class="form-control @error('manufacturer') is-invalid @enderror">
                            @error('manufacturer')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="model">Model</label>
                            <input type="text" id="model" name="model" value="{{ old('model') }}" class="form-control @error('model') is-invalid @enderror">
                            @error('model')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="vin">VIN Number</label>
                            <input required type="text" id="vin" name="vin" value="{{ old('vin') }}" class="form-control @error('vin') is-invalid @enderror">
                            @error('vin')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="year">Year</label>
                            <input type="text" id="year" name="year" value="{{ old('year') }}" class="form-control @error('year') is-invalid @enderror">
                            @error('year')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>


                        <div class="form-group">
                            <label for="notes">Notes</label>
                            <textarea id="notes" name="notes" class="form-control"></textarea>
                        </div>
                        <hr class="mb-4">
                        <h3>Marker Lights and Reflectors</h3>

                        <div class="form-group">
                            <label for="lights">Lights</label>
                            <select required id="lights" name="lights" class="form-control">
                            <option value="">-- Select --</option>    
                            <option value="pass">Pass</option>
                                <option value="fail">Fail</option>
                                <option value="advisory">Advisory</option>
                                <option value="na">N/A</option>
                            </select>
                        </div>

                        <div class="form-group mt-2">
                            <label for="reflectors">Reflectors</label>
                            <select required id="reflectors" name="reflectors" class="form-control">
                            <option value="">-- Select --</option>     
                            <option value="pass">Pass</option>
                                <option value="fail">Fail</option>
                                <option value="advisory">Advisory</option>
                                <option value="na">N/A</option>
                            </select>
                        </div>

                        <div class="form-group mt-2">
                            <button id="add_reflectors_comment" type="button" class="btn btn-secondary">Add Comment</button>
                        </div>

                        <div id="reflectors_comment_section" class="form-group d-none">
                            <label for="reflectors_comment">Comment</label>
                            <textarea id="reflectors_comment" name="reflectors_comment" class="form-control"></textarea>
                        </div>
                        <hr class="mb-4">
                        <!-- Electrics section -->
                        <h3>Electrics</h3>

                        <div class="form-group">
                            <label for="hook_up">Electrics Hook-up</label>
                            <select required id="hook_up" name="hook_up" class="form-control">
                            <option value="">-- Select --</option>        
                            <option value="pass">Pass</option>
                                <option value="fail">Fail</option>
                                <option value="advisory">Advisory</option>
                                <option value="na">N/A</option>
                            </select>
                        </div>

                        <div class="form-group mt-2">
                            <label for="cable_condition">Electric Cable and Junction Box Condition</label>
                            <select required id="cable_condition" name="cable_condition" class="form-control">
                            <option value="">-- Select --</option>        
                            <option value="pass">Pass</option>
                                <option value="fail">Fail</option>
                                <option value="advisory">Advisory</option>
                                <option value="na">N/A</option>
                            </select>
                        </div>

                        <div class="form-group  mt-2">
                            <button id="add_electrics_comment" type="button" class="btn btn-secondary">Add Comment</button>
                        </div>

                        <div id="electrics_comment_section" class="form-group d-none">
                            <label for="electrics_comment">Comment</label>
                            <textarea id="electrics_comment" name="electrics_comment" class="form-control"></textarea>
                        </div>

                        <hr class="mb-4">


                        <hr class="mb-4">
                        <h3>Tyres</h3>


                        <!-- Tyres will be added here -->
                        <div class="accordion" id="tyres">

                        </div>

                        <div class="accordion" id="spareTyres">

                        </div>



                        <button type="button" class="btn btn-primary mt-2" id="addTyre">Add Tyre</button>

                        <button type="button" class="btn btn-primary mt-2" id="addSpareTyre">Add Spare Tyre</button>


                        <hr class="mb-4">
                        <h3>Wheels</h3>
                        <div class="accordion" id="wheels">

                        </div>
                        <button type="button" class="btn btn-primary mt-2" id="addWheel">Add Wheel</button>
                        <hr class="mb-4">


                        <!-- brakes -->
                        <h3>Brakes</h3>
                        <div class="form-group">
                            <label for="brake_cable_condition">Break Cables</label>
                            <select required id="brake_cable_condition" name="brake_cable_condition" class="form-control">
                            <option value="">-- Select --</option>        
                            <option value="pass">Pass</option>
                                <option value="fail">Fail</option>
                                <option value="advisory">Advisory</option>
                                <option value="na">N/A</option>
                            </select>
                        </div>

                        <div class="form-group  mt-2">
                            <button id="add_break_cable_comment" type="button" class="btn btn-secondary">Add Comment</button>
                        </div>

                        <div id="brake_cable_comment_section" class="form-group d-none">
                            <label for="brake_cable_comment">Comment</label>
                            <textarea id="brake_cable_comment" name="brake_cable_comment" class="form-control"></textarea>
                        </div>


                        <div class="form-group mt-4">
                            <label for="hand_brake_condition">Hand Brake</label>
                            <select required id="hand_brake_condition" name="hand_brake_condition" class="form-control">
                            <option value="">-- Select --</option>        
                            <option value="pass">Pass</option>
                                <option value="fail">Fail</option>
                                <option value="advisory">Advisory</option>
                                <option value="na">N/A</option>
                            </select>
                        </div>

                        <div class="form-group  mt-2">
                            <button id="add_hand_brake_comment" type="button" class="btn btn-secondary">Add Comment</button>
                        </div>

                        <div id="hand_brake_comment_section" class="form-group d-none">
                            <label for="hand_brake_comment">Comment</label>
                            <textarea id="hand_brake_comment" name="hand_brake_comment" class="form-control"></textarea>
                        </div>

                        <div class="form-group mt-4">
                            <label for="breakaway_cable_condition">Breakaway Cable</label>
                            <select required id="breakaway_cable_condition" name="breakaway_cable_condition" class="form-control">
                            <option value="">-- Select --</option>        
                            <option value="pass">Pass</option>
                                <option value="fail">Fail</option>
                                <option value="advisory">Advisory</option>
                                <option value="na">N/A</option>
                            </select>
                        </div>

                        <div class="form-group mt-2">
                            <button id="add_breakaway_cable_comment" type="button" class="btn btn-secondary">Add Comment</button>
                        </div>

                        <div id="breakaway_cable_comment_section" class="form-group d-none">
                            <label for="breakaway_cable_comment">Comment</label>
                            <textarea id="breakaway_cable_comment" name="breakaway_cable_comment" class="form-control"></textarea>
                        </div>

                        <div class="form-group mt-4">
                            <label for="secondary_coupling_cable_condition">Secondary Coupling Cable</label>
                            <select required id="secondary_coupling_cable_condition" name="secondary_coupling_cable_condition" class="form-control">
                            <option value="">-- Select --</option>        
                            <option value="pass">Pass</option>
                                <option value="fail">Fail</option>
                                <option value="advisory">Advisory</option>
                                <option value="na">N/A</option>
                            </select>
                        </div>

                        <div class="form-group mt-2">
                            <button id="add_secondary_coupling_cable_comment" type="button" class="btn btn-secondary">Add Comment</button>
                        </div>

                        <div id="secondary_coupling_cable_comment_section" class="form-group d-none">
                            <label for="secondary_coupling_cable_comment">Comment</label>
                            <textarea id="secondary_coupling_cable_comment" name="secondary_coupling_cable_comment" class="form-control"></textarea>
                        </div>

                        <hr class="mb-4">

                        <h3>Jockey Wheels</h3>
                        <div class="form-group mt-4">
                            <label for="jockey_wheels_visual_inspection">Jockey Wheels Visual Inspection</label>
                            <select required id="jockey_wheels_visual_inspection" name="jockey_wheels_visual_inspection" class="form-control">
                            <option value="">-- Select --</option>        
                            <option value="pass">Pass</option>
                                <option value="fail">Fail</option>
                                <option value="advisory">Advisory</option>
                                <option value="na">N/A</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="jockey_wheels_style">Style</label>
                            <input type="text" id="jockey_wheels_style" name="jockey_wheels_style" class="form-control">
                        </div>

                        <div class="form-group">
                            <label for="jockey_wheels_diameter">Diameter</label>
                            <input type="text" id="jockey_wheels_diameter" name="jockey_wheels_diameter" class="form-control">
                        </div>

                        <div class="form-group">
                            <label for="jockey_wheels_wheel_type">Wheel Type</label>
                            <input type="text" id="jockey_wheels_wheel_type" name="jockey_wheels_wheel_type" class="form-control">
                        </div>

                        <div class="form-group">
                            <label for="jockey_wheels_size">Size</label>
                            <input type="text" id="jockey_wheels_size" name="jockey_wheels_size" class="form-control">
                        </div>

                        <div class="form-group mt-2">
                            <button id="add_jockey_wheels_comment" type="button" class="btn btn-secondary">Add Comment</button>
                        </div>

                        <div id="jockey_wheels_comment_section" class="form-group d-none">
                            <label for="jockey_wheels_comment">Comment</label>
                            <textarea id="jockey_wheels_comment" name="jockey_wheels_comment" class="form-control"></textarea>
                        </div>

                        <hr class="mb-4">
                        <!-- Drop Down Legs Stabilisers -->
                        <div class="form-group mt-4">
                            <label for="legs_stabilisers_visual_inspection">Drop Down Legs Stabilisers Visual Inspection</label>
                            <select required id="legs_stabilisers_visual_inspection" name="legs_stabilisers_visual_inspection" class="form-control">
                            <option value="">-- Select --</option>        
                            <option value="pass">Pass</option>
                                <option value="fail">Fail</option>
                                <option value="advisory">Advisory</option>
                                <option value="na">N/A</option>
                            </select>
                        </div>

                        <div class="form-group mt-2">
                            <button id="add_legs_stabilisers_comment" type="button" class="btn btn-secondary">Add Comment</button>
                        </div>

                        <div id="legs_stabilisers_comment_section" class="form-group d-none">
                            <label for="legs_stabilisers_comment">Comment</label>
                            <textarea id="legs_stabilisers_comment" name="legs_stabilisers_comment" class="form-control"></textarea>
                        </div>

                        <!-- Coupling -->
                        <div class="form-group mt-4">
                            <label for="coupling_visual_inspection">Coupling Visual Inspection</label>
                            <select required id="coupling_visual_inspection" name="coupling_visual_inspection" class="form-control">
                            <option value="">-- Select --</option>        
                            <option value="pass">Pass</option>
                                <option value="fail">Fail</option>
                                <option value="advisory">Advisory</option>
                                <option value="na">N/A</option>
                            </select>
                        </div>



                        <div class="form-group mt-2">
                            <button id="add_coupling_comment" type="button" class="btn btn-secondary">Add Comment</button>
                        </div>

                        <div id="coupling_comment_section" class="form-group d-none">
                            <label for="coupling_comment">Comment</label>
                            <textarea id="coupling_comment" name="coupling_comment" class="form-control"></textarea>
                        </div>

                        <!-- Trailer Suspension -->
                        <div class="form-group mt-4">
                            <label for="trailer_suspension_visual_inspection">Trailer Suspension Visual Inspection</label>
                            <select required id="trailer_suspension_visual_inspection" name="trailer_suspension_visual_inspection" class="form-control">
                            <option value="">-- Select --</option>        
                            <option value="pass">Pass</option>
                                <option value="fail">Fail</option>
                                <option value="advisory">Advisory</option>
                                <option value="na">N/A</option>
                            </select>
                        </div>

                        <div class="form-group mt-2">
                            <button id="add_trailer_suspension_comment" type="button" class="btn btn-secondary">Add Comment</button>
                        </div>

                        <div id="trailer_suspension_comment_section" class="form-group d-none">
                            <label for="trailer_suspension_comment">Comment</label>
                            <textarea id="trailer_suspension_comment" name="trailer_suspension_comment" class="form-control"></textarea>
                        </div>

                        <!-- Trailer Body -->
                        <div class="form-group mt-4">
                            <label for="trailer_body_visual_inspection">Trailer Body Visual Inspection</label>
                            <select required id="trailer_body_visual_inspection" name="trailer_body_visual_inspection" class="form-control">
                            <option value="">-- Select --</option>        
                            <option value="pass">Pass</option>
                                <option value="fail">Fail</option>
                                <option value="advisory">Advisory</option>
                                <option value="na">N/A</option>
                            </select>
                        </div>

                        <div class="form-group mt-2">
                            <button id="add_trailer_body_comment" type="button" class="btn btn-secondary">Add Comment</button>
                        </div>

                        <div id="trailer_body_comment_section" class="form-group d-none">
                            <label for="trailer_body_comment">Comment</label>
                            <textarea id="trailer_body_comment" name="trailer_body_comment" class="form-control"></textarea>
                        </div>

                        <!-- Trailer Ramps -->
                        <div class="form-group mt-4">
                            <label for="trailer_ramps_visual_inspection">Trailer Ramps Visual Inspection</label>
                            <select required id="trailer_ramps_visual_inspection" name="trailer_ramps_visual_inspection" class="form-control">
                            <option value="">-- Select --</option>        
                            <option value="pass">Pass</option>
                                <option value="fail">Fail</option>
                                <option value="advisory">Advisory</option>
                                <option value="na">N/A</option>
                            </select>
                        </div>

                        <div class="form-group mt-2">
                            <button id="add_trailer_ramps_comment" type="button" class="btn btn-secondary">Add Comment</button>
                        </div>

                        <div id="trailer_ramps_comment_section" class="form-group d-none">
                            <label for="trailer_ramps_comment">Comment</label>
                            <textarea id="trailer_ramps_comment" name="trailer_ramps_comment" class="form-control"></textarea>
                        </div>
                        <!-- Chassis Condition -->
                        <div class="form-group mt-4">
                            <label for="chassis_condition_visual_inspection">Chassis Condition Visual Inspection</label>
                            <select required id="chassis_condition_visual_inspection" name="chassis_condition_visual_inspection" class="form-control">
                            <option value="">-- Select --</option>        
                            <option value="pass">Pass</option>
                                <option value="fail">Fail</option>
                                <option value="advisory">Advisory</option>
                                <option value="na">N/A</option>
                            </select>
                        </div>

                        <div class="form-group mt-2">
                            <button id="add_chassis_condition_comment" type="button" class="btn btn-secondary">Add Comment</button>
                        </div>

                        <div id="chassis_condition_comment_section" class="form-group d-none">
                            <label for="chassis_condition_comment">Comment</label>
                            <textarea id="chassis_condition_comment" name="chassis_condition_comment" class="form-control"></textarea>
                        </div>

                        <hr class="mb-4">

                        <div class="form-group mt-4">
                            <label for="additional_comments">Additional Comments</label>
                            <textarea id="additional_comments" name="additional_comments" class="form-control"></textarea>
                        </div>

                        <div class="form-group mt-4">
                            <label for="inspection_result">Inspection Result</label>
                            <select required id="inspection_result" name="inspection_result" class="form-control">
                            <option value="">-- Select --</option>        
                            <option value="pass">Pass</option>
                                <option value="fail">Fail</option>
                            </select>
                        </div>

                        <hr class="mb-4">

                        <!-- save or go back -->
                        <div class="form-group">
                            <a href="{{ route('customers.index') }}" class="btn btn-secondary mt-2">Back</a>

                            <button type="submit" class="btn btn-primary mt-2">Save</button>
                        </div>

                    </form>

                </div>
            </div>
        </div>
    </div>
</div>
@endsection