@extends('backend.layouts.admin.app')

@section('content')
@php
    $isEdit = isset($pageData['vehicle']);
    $vehicle = $pageData['vehicle'] ?? null;
@endphp

    <!-- Content Header (Page header) -->
    <section class="content-header">
      <ol class="breadcrumb">
        <li>
          <a href="#">
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0_664_24080)">
              <path d="M7.5 13.5L10.5 13.5" stroke="#007AFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M1.76354 9.91009C1.49878 8.18718 1.3664 7.32573 1.69212 6.56203C2.01785 5.79834 2.74052 5.27582 4.18585 4.2308L5.26574 3.45C7.06372 2.15 7.96271 1.5 9 1.5C10.0373 1.5 10.9363 2.15 12.7343 3.45L13.8141 4.2308C15.2595 5.27582 15.9821 5.79834 16.3079 6.56203C16.6336 7.32573 16.5012 8.18718 16.2365 9.91009L16.0107 11.3793C15.6353 13.8217 15.4477 15.0429 14.5717 15.7714C13.6958 16.5 12.4152 16.5 9.85411 16.5H8.14589C5.58475 16.5 4.30418 16.5 3.42825 15.7714C2.55232 15.0429 2.36465 13.8217 1.98932 11.3793L1.76354 9.91009Z" stroke="#007AFF" stroke-width="1.5" stroke-linejoin="round"/>
              </g>
              <defs>
              <clipPath id="clip0_664_24080">
              <rect width="18" height="18" fill="white"/>
              </clipPath>
              </defs>
            </svg>
          </a>
        </li>
        <li>
          <a href="{{ route('transporter.vehicles.index') }}">{{__('app.vehicles.title')}}</a>
        </li>
        <li class="active">{{$title}}</li>
      </ol>
      <div class="d-flex justify-content-between align-items-center flex-wrap">
        <h1>{{$title}}</h1>
        <div class="d-flex justify-content-between align-items-center flex-wrap">
          <div class="d-flex align-items-center step-active pe-89 step-line position-relative" id="step-1">
            <div >
              <svg class="step-noraml-icon" width="31" height="32" viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect x="3.38379" y="3.88367" width="24.2326" height="24.2326" rx="8.5" stroke="#D1D1D6"/>
              <rect x="10.093" y="10.593" width="10.814" height="10.814" rx="4" fill="#D1D1D6"/>
              </svg>

              <svg class="step-previous-icon" width="31" height="32" viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect x="2.88379" y="3.38367" width="25.2326" height="25.2326" rx="9" fill="#34C759"/>
              <mask id="mask0_667_26123" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="7" y="7" width="18" height="19">
              <rect x="7" y="7.5" width="18" height="18" fill="#D9D9D9"/>
              </mask>
              <g mask="url(#mask0_667_26123)">
              <path d="M14.1623 18.8625L20.5185 12.5063C20.6685 12.3563 20.8435 12.2812 21.0435 12.2812C21.2435 12.2812 21.4185 12.3563 21.5685 12.5063C21.7185 12.6563 21.7935 12.8344 21.7935 13.0406C21.7935 13.2469 21.7185 13.425 21.5685 13.575L14.6873 20.475C14.5373 20.625 14.3623 20.7 14.1623 20.7C13.9623 20.7 13.7873 20.625 13.6373 20.475L10.4123 17.25C10.2623 17.1 10.1904 16.9219 10.1967 16.7156C10.2029 16.5094 10.281 16.3313 10.431 16.1813C10.581 16.0313 10.7592 15.9563 10.9654 15.9563C11.1717 15.9563 11.3498 16.0313 11.4998 16.1813L14.1623 18.8625Z" fill="white"/>
              </g>
              </svg>


            </div>
            <div class="ms-2">
              <div class="fs-12 text-8E8E93">{{__('app.step_1')}}</div>
              <div class="fs-13 fw-semibold step-not-active">{{__('app.basic_details')}}</div>
            </div>
          </div>
          <div class="d-flex align-items-center {{ !$isEdit ? 'pe-89 step-line' : '' }} position-relative" id="step-2">
            <div class="">
              <svg class="step-noraml-icon" width="31" height="32" viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect x="3.38379" y="3.88367" width="24.2326" height="24.2326" rx="8.5" stroke="#D1D1D6"/>
              <rect x="10.093" y="10.593" width="10.814" height="10.814" rx="4" fill="#D1D1D6"/>
              </svg>

              <svg class="step-previous-icon" width="31" height="32" viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect x="2.88379" y="3.38367" width="25.2326" height="25.2326" rx="9" fill="#34C759"/>
              <mask id="mask0_667_26123" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="7" y="7" width="18" height="19">
              <rect x="7" y="7.5" width="18" height="18" fill="#D9D9D9"/>
              </mask>
              <g mask="url(#mask0_667_26123)">
              <path d="M14.1623 18.8625L20.5185 12.5063C20.6685 12.3563 20.8435 12.2812 21.0435 12.2812C21.2435 12.2812 21.4185 12.3563 21.5685 12.5063C21.7185 12.6563 21.7935 12.8344 21.7935 13.0406C21.7935 13.2469 21.7185 13.425 21.5685 13.575L14.6873 20.475C14.5373 20.625 14.3623 20.7 14.1623 20.7C13.9623 20.7 13.7873 20.625 13.6373 20.475L10.4123 17.25C10.2623 17.1 10.1904 16.9219 10.1967 16.7156C10.2029 16.5094 10.281 16.3313 10.431 16.1813C10.581 16.0313 10.7592 15.9563 10.9654 15.9563C11.1717 15.9563 11.3498 16.0313 11.4998 16.1813L14.1623 18.8625Z" fill="white"/>
              </g>
              </svg>
            </div>
            <div class="ms-2">
              <div class="fs-12 text-8E8E93">{{__('app.step_2')}}</div>
              <div class="fs-13 fw-semibold step-not-active">{{__('app.additional_details')}}</div>
            </div>
          </div>
          @if(!$isEdit)
          <div class="d-flex align-items-center" id="step-3">
            <div class="">
              <svg class="step-noraml-icon" width="31" height="32" viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect x="3.38379" y="3.88367" width="24.2326" height="24.2326" rx="8.5" stroke="#D1D1D6"/>
              <rect x="10.093" y="10.593" width="10.814" height="10.814" rx="4" fill="#D1D1D6"/>
              </svg>

              <svg class="step-previous-icon" width="31" height="32" viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect x="2.88379" y="3.38367" width="25.2326" height="25.2326" rx="9" fill="#34C759"/>
              <mask id="mask0_667_26123" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="7" y="7" width="18" height="19">
              <rect x="7" y="7.5" width="18" height="18" fill="#D9D9D9"/>
              </mask>
              <g mask="url(#mask0_667_26123)">
              <path d="M14.1623 18.8625L20.5185 12.5063C20.6685 12.3563 20.8435 12.2812 21.0435 12.2812C21.2435 12.2812 21.4185 12.3563 21.5685 12.5063C21.7185 12.6563 21.7935 12.8344 21.7935 13.0406C21.7935 13.2469 21.7185 13.425 21.5685 13.575L14.6873 20.475C14.5373 20.625 14.3623 20.7 14.1623 20.7C13.9623 20.7 13.7873 20.625 13.6373 20.475L10.4123 17.25C10.2623 17.1 10.1904 16.9219 10.1967 16.7156C10.2029 16.5094 10.281 16.3313 10.431 16.1813C10.581 16.0313 10.7592 15.9563 10.9654 15.9563C11.1717 15.9563 11.3498 16.0313 11.4998 16.1813L14.1623 18.8625Z" fill="white"/>
              </g>
              </svg>
            </div>
            <div class="ms-2">
              <div class="fs-12 text-8E8E93">{{__('app.step_3')}}</div>
              <div class="fs-13 fw-semibold step-not-active">{{__('app.drivers.driver')}} & {{__('app.documents')}}</div>
            </div>
          </div>
          @endif
        </div>
        
      </div>
  
    </section>
    <!-- Main content -->
    <section class="content pb-0">
      @include('backend.layouts.alert')
      <!-- Default box -->
      <div class="row">
      <div class="col-md-12">

        <div class="border-top">
            
            <!-- Step 1: Basic Details -->
          <div class="" id="customer-step-1">
            <form action="{{ ($isEdit && $vehicle && $vehicle->id) ? route('transporter.vehicles.updateStep1', $vehicle->id) : route('transporter.vehicles.storeStep1') }}" method="POST" class="form-horizontal form-validate" enctype="multipart/form-data">
              @csrf
              @if($isEdit)
                  @method('PUT')
              @endif
              <input type="hidden" name="id" value="{{ old('id', $vehicle->id ?? '') }}" id="scret_id">
              <div class="box-body px-0 form-box-scroll">
                <div class="align-items-center d-flex justify-content-between mb-3">
                  <h2 class="fs-24 fw-semibold text-black">{{__('app.basic_details')}}</h2>
                </div>
                <div class="row">
                  <div class="col-md-auto">
                    <div class="custom-width-144 custom-height-144 rounded-5 overflow-hidden custom-profile-main driver-upload-img">
                      <div class="image-file">
                        <input type="file" name="vehicle_image" id="img-file-upload" class="" required>
                        <label class="image-file-label" for="img-file-upload">
                          <img src="{{url('images/default.png')}}" alt="driver-profile" srcset="">
                          @if(isset($vehicle->vehicle_image_url))
                          <span class="image-container"><img src="{{ $vehicle->vehicle_image_url}}" alt="driver-profile"></span> 
                            <span class="image-file-upload-again">Change Photo</span>
                          @endif
                        </label>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-10">
                    <div class="row">
                      <div class="col-md-4">
                        <div class="form-group">
                          <label for="registration_number" class="control-label">{{__('app.vehicles.registration_number')}}</label>
                          <div class="col-field-wrapper">
                            <input type="text" name="registration_number" class="form-control" id="registration_number" placeholder="Enter registration number" value="{{ old('registration_number', $vehicle->registration_number ?? '') }}">
                            @if ($errors->has('registration_number'))
                              <span class="help-block">{{ $errors->first('registration_number') }}</span>
                            @endif
                          </div>
                        </div>
                      </div>
                      <div class="col-md-4">
                        <div class="form-group">
                          <label for="make" class="control-label">{{__('app.vehicles.make')}}</label>
                          <div class="col-field-wrapper">
                            <input type="text" name="make" class="form-control" id="make" placeholder="Enter make" value="{{ old('make', $vehicle->make ?? '') }}">
                                @if ($errors->has('make'))
                                  <span class="help-block">{{ $errors->first('make') }}</span>
                                @endif
                          </div>
                        </div>
                      </div>
                      <div class="col-md-4">
                        <div class="form-group">
                          <label for="model" class="control-label">{{__('app.vehicles.model')}}</label>
                          <div class="col-field-wrapper">
                            <input type="text" name="model" class="form-control" id="model" placeholder="Enter model" value="{{ old('model', $vehicle->model ?? '') }}">
                            @if ($errors->has('model'))
                              <span class="help-block">{{ $errors->first('model') }}</span>
                            @endif
                          </div>
                        </div>
                      </div>
                      <div class="col-md-4">
                        <div class="form-group">
                          <label for="year_of_manufacture" class="control-label">{{__('app.vehicles.year_of_manufacture')}}</label>
                          <div class="col-field-wrapper">
                            <input type="text" name="year_of_manufacture" class="form-control year-picker" id="year_of_manufacture" placeholder="Select year" value="{{ old('year_of_manufacture', $vehicle->year_of_manufacture ?? '') }}" readonly>
                            @if ($errors->has('year_of_manufacture'))
                              <span class="help-block">{{ $errors->first('year_of_manufacture') }}</span>
                            @endif
                          </div>
                        </div>
                      </div>
                      <div class="col-md-4">
                        <div class="form-group">
                          <label for="vin" class="control-label">{{__('app.vehicles.vin')}}</label>
                          <div class="col-field-wrapper">
                            <input type="text" name="vin" class="form-control" id="vin" placeholder="Enter VIN" value="{{ old('vin', $vehicle->vin ?? '') }}">
                            @if ($errors->has('vin'))
                              <span class="help-block">{{ $errors->first('vin') }}</span>
                            @endif
                          </div>
                        </div>
                      </div>
                      <div class="col-md-4">
                        <div class="form-group">
                          <label for="engine_number" class="control-label">{{__('app.vehicles.engine_number')}}</label>
                          <div class="col-field-wrapper">
                            <input type="text" name="engine_number" class="form-control" id="engine_number" placeholder="Enter engine number" value="{{ old('engine_number', $vehicle->engine_number ?? '') }}">
                            @if ($errors->has('engine_number'))
                              <span class="help-block">{{ $errors->first('engine_number') }}</span>
                            @endif
                          </div>
                        </div>
                      </div>
                      <div class="col-md-4">
                        <div class="form-group" id="vehicle-type-group">
                          <label for="vehicle_type" class="control-label">{{__('app.vehicles.vehicle_type')}}</label>
                          <div class="col-field-wrapper">
                            <select id="vehicleTypeSelect" name="vehicle_type" class="form-control">
                              <option value="">Select Vehicle Type</option>
                              @foreach($pageData['vehicleTypes'] as $vehicleType)
                                <option value="{{$vehicleType->id}}" data-trailer_count="{{$vehicleType->trailer_count}}" {{ (old('vehicle_type', $vehicle->vehicle_type ?? '') == $vehicleType->id) ? 'selected' : '' }}>{{$vehicleType->type}}</option>
                              @endforeach
                            </select>
                          </div>
                        </div>
                      </div>
                      <!-- Trailer fields will be dynamically added here -->
                      @if($isEdit && $vehicle && $vehicle->trailers->count() > 0)
                        @foreach($vehicle->trailers as $index => $trailer)
                          <div class="col-md-4 trailer-field">
                            <div class="form-group">
                              <label class="control-label">Trailer {{ $index + 1 }} ID</label>
                              <div class="col-field-wrapper">
                                <input type="text" name="trailer_numbers[{{ $index }}]" class="form-control trailer-number-input" placeholder="Enter trailer {{ $index + 1 }} ID" value="{{ $trailer->trailer_number }}" required>
                              </div>
                            </div>
                          </div>
                        @endforeach
                      @endif
                    </div>
                  </div>
                </div>
              </div>
              <div class="box-footer px-0">
                <div class="col-sm-12 text-end">
                  <a href="{{ $backBtnLink }}" class="btn btn-outline-secondary me-3">Cancel</a>
                  <button type="submit" class="btn btn-primary">
                    <span class="btn-text">{{ __('app.next') }}</span>
                    <span class="btn-loader" style="display: none;">
                      <em class="fa fa-spinner fa-spin"></em> Saving...
                    </span>
                  </button>
                </div>
              </div>
            </form>
          </div>

          <!-- Step 2: Additional Details -->
          <div class="" id="customer-step-2" style="display:none;">
            <form action="{{ ($isEdit && $vehicle && $vehicle->id) ? route('transporter.vehicles.updateStep2', $vehicle->id) : route('transporter.vehicles.storeStep2') }}" method="POST" class="form-horizontal form-validate" enctype="multipart/form-data">
              @csrf
              @if($isEdit)
                  @method('PUT')
              @endif
              <input type="hidden" name="vehicle_id" value="{{ $vehicle->id ?? '' }}" id="vehicle_id_step2">
              <input type="hidden" name="id" value="{{ old('id', $vehicle->id ?? '') }}" id="scret_id">
              <div class="box-body px-0 form-box-scroll">
                <div class="align-items-center d-flex justify-content-between mb-3">
                  <h2 class="fs-24 fw-semibold text-black">{{__('app.additional_details')}}</h2>
                </div>
                <div class="row">
                  <div class="col-md-4">
                    <div class="form-group">
                      <label for="fuel_type" class="control-label">{{__('app.vehicles.fuel_type')}}</label>
                      <div class="col-field-wrapper">
                        <select id="fuel_type" name="fuel_type" class="form-control">
                          <option value="">{{__('app.select')}}</option>
                          @foreach($pageData['fuelTypes'] as $fuelType)
                            <option value="{{$fuelType->id}}" {{ old('fuel_type', $vehicle->fuel_type ?? '') == $fuelType->id ? 'selected' : '' }}>{{$fuelType->name}}</option>
                          @endforeach
                        </select>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="form-group">
                      <label for="vehicle_color" class="control-label">{{__('app.vehicles.vehicle_color')}}</label>
                      <div class="col-field-wrapper">
                        <input type="text" name="vehicle_color" class="form-control" id="vehicle_color" placeholder="Enter vehicle color" value="{{ old('vehicle_color', $vehicle->vehicle_color ?? '') }}">
                        @if ($errors->has('vehicle_color'))
                          <span class="help-block">{{ $errors->first('vehicle_color') }}</span>
                        @endif
                      </div>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="form-group">
                      <label class="control-label">Length & Dimensions</label>
                      <div class="row">
                        <div class="col-md-4">
                          <div class="col-field-wrapper">
                            <input type="text" name="length" class="form-control" id="length" placeholder="Length" value="{{ old('length', $vehicle->vehicle_length ?? '') }}">
                            @if ($errors->has('length'))
                              <span class="help-block">{{ $errors->first('length') }}</span>
                            @endif
                          </div>
                        </div>
                        <div class="col-md-4">
                          <div class="col-field-wrapper">
                            <input type="text" name="width" class="form-control" id="width" placeholder="Width" value="{{ old('width', $vehicle->vehicle_width ?? '') }}">
                            @if ($errors->has('width'))
                              <span class="help-block">{{ $errors->first('width') }}</span>
                            @endif
                          </div>
                        </div>
                        <div class="col-md-4">
                          <div class="col-field-wrapper">
                            <input type="text" name="height" class="form-control" id="height" placeholder="Height" value="{{ old('height', $vehicle->vehicle_height ?? '') }}">
                            @if ($errors->has('height'))
                              <span class="help-block">{{ $errors->first('height') }}</span>
                            @endif
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="form-group">
                      <label for="load_capacity" class="control-label">{{__('app.vehicles.load_capacity')}}</label>
                      <div class="col-field-wrapper">
                        <input type="text" name="load_capacity" class="form-control" id="load_capacity" placeholder="Enter load capacity" value="{{ old('load_capacity', $vehicle->load_capacity ?? '') }}">
                        @if ($errors->has('load_capacity'))
                          <span class="help-block">{{ $errors->first('load_capacity') }}</span>
                        @endif
                      </div>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="form-group">
                      <label for="number_of_axles" class="control-label">{{__('app.vehicles.number_of_axles')}}</label>
                      <div class="col-field-wrapper">
                        <input type="text" name="number_of_axles" class="form-control" id="number_of_axles" placeholder="Enter number of axles" value="{{ old('number_of_axles', $vehicle->number_of_axles ?? '') }}">
                        @if ($errors->has('number_of_axles'))
                          <span class="help-block">{{ $errors->first('number_of_axles') }}</span>
                        @endif
                      </div>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="form-group">
                      <label for="tracking_url" class="control-label">{{__('app.vehicles.tracking_url')}}</label>
                      <div class="col-field-wrapper">
                        <input type="text" name="tracking_url" class="form-control" id="tracking_url" placeholder="Enter tracking url" value="{{ old('tracking_url', $vehicle->tracking_url ?? '') }}">
                        @if ($errors->has('tracking_url'))
                          <span class="help-block">{{ $errors->first('tracking_url') }}</span>
                        @endif
                      </div>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="form-group">
                      <label for="username" class="control-label">{{__('app.vehicles.username')}}</label>
                      <div class="col-field-wrapper">
                        <input type="text" name="username" class="form-control" id="username" placeholder="Enter username" value="{{ old('username', $vehicle->username ?? '') }}">
                        @if ($errors->has('username'))
                          <span class="help-block">{{ $errors->first('username') }}</span>
                        @endif
                      </div>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="form-group">
                      <label for="password" class="control-label">{{__('app.password')}}</label>
                      <div class="col-field-wrapper">
                        <input type="password" name="password" class="form-control" id="password" placeholder="Enter password" value="{{ old('password', $vehicle->password ?? '') }}">
                        @if ($errors->has('password'))
                          <span class="help-block">{{ $errors->first('password') }}</span>
                        @endif
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="box-footer px-0">
                <div class="col-sm-12 text-end">
                  <a href="{{ $backBtnLink }}" class="btn btn-outline-secondary me-3">{{__('app.cancel')}}</a>
                  <button type="submit" class="btn btn-primary">
                    <span class="btn-text">{{ $saveBtn }}</span>
                    <span class="btn-loader" style="display: none;">
                      <em class="fa fa-spinner fa-spin"></em> Saving...
                    </span>
                  </button>
                </div>
              </div>
            </form>
          </div>

          @if(!$isEdit)
          <!-- Step 3: Driver & Documents (only for add) -->
          <div id="customer-step-3" style="display:none;">
            <form action="{{ route('transporter.vehicles.storeStep3') }}" method="POST" class="form-horizontal form-validate">
              @csrf
              <input type="hidden" name="vehicle_id" value="{{ request()->get('id') }}">
              
              <div class="border-bottom pb-2 mb-4 mt-4">
                <div class="align-items-center d-flex justify-content-between mb-3">
                  <h2 class="fs-24 fw-semibold text-black">{{__('app.drivers.driver')}} & {{__('app.documents')}}</h2>
                </div>
                
                <div class="row">
                  <div class="col-md-4">
                    <div class="form-group">
                      <label for="driver_id" class="control-label fw-normal">{{__('app.drivers.assign_driver')}}</label>
                      <div class="col-field-wrapper">
                        <select id="driver_id" name="driver_id" class="form-control">
                          <option value="">Select Driver</option>
                          @foreach($pageData['drivers'] as $driver)
                            <option value="{{$driver->id}}" {{ isset($pageData['vehicle']) && $pageData['vehicle']->driver_id == $driver->id ? 'selected' : '' }}>
                              {{$driver->name}}
                            </option>
                          @endforeach
                        </select>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

            </form>

            <div class="box-body  px-0">
              <div class="align-items-center d-flex justify-content-between mb-3">
                <h2 class="fs-24 fw-semibold text-black">{{__('app.documents')}}</h2>
                <!-- Upload Document button will be appended by JS -->
              </div>

              <table class="table table-bordered table-hover" id="tbl-documents" aria-describedby="add-vehicle-list">
                <thead>
                  <th scope="col">{{__('app.documents')}}</th>
                  <th scope="col">{{__('app.expiry')}}</th>
                  <th scope="col">{{__('app.uploaded_by')}}</th>
                  <th scope="col">{{__('app.created_date_time')}}</th>
                  <th scope="col" class="status">{{__('app.status')}}</th>
                  <th scope="col" class="action">{{__('app.action')}}</th>
                </thead>
                <tbody>
                  @if(isset($pageData['vehicleDoc']) && $pageData['vehicleDoc']->documents->count() > 0)
                    @foreach($pageData['vehicleDoc']->documents as $document)
                      <tr>
                        <td data-type='text'>{{$document->mandatoryDocument->name ?? null}}</td>
                        <td data-type='text'>{{$document->expiry_date?->format('n/j/y')}}</td>
                        <td data-type='text'>{{$document->uploadedBy->name ?? null}}</td>
                        <td data-type='text'>{{$document->uploaded_date_time?->format('n/j/y h:iA')}}</td>
                        @php
                          $isExpired = isset($document->expiry_date) ? \Carbon\Carbon::parse($document->expiry_date)->lt(\Carbon\Carbon::today()) : false;
                        @endphp
                        <td data-type='text'>
                          @if($isExpired)
                            <span class="px-3 py-2 rounded-5 text-danger fs-12 fw-medium tag-expired custom-width-90 text-center d-inline-block">Expired</span>
                          @else
                            <span class="px-3 py-2 rounded-5 text-success fs-12 fw-medium tag-active custom-width-90 text-center d-inline-block">Active</span>
                          @endif
                        </td>
                        <td data-type='none'>
                          <a href="{{ route('transporter.vehicle.documents.show', ['vehicle' => $pageData['vehicleDoc']->id, 'document' => $document->id]) }}" target="_blank" class="view-docs-btn me-3">
                            <em class="iconsax icon-292D32 fs-20" icon-name="eye"></em>
                          </a>
                          <a href="javascri pt:void(0)" class="delete-document" data-document-id="{{$document->id}}" data-vehicle-id="{{$pageData['vehicleDoc']->id}}">
                            <em class="iconsax icon-292D32 fs-20" icon-name="trash"></em>
                          </a>
                        </td>
                      </tr>
                    @endforeach
                  @endif
                </tbody>
              </table>
            </div>

            <div class="box-footer px-0">
              <div class="col-sm-12 text-end">
                <a href="{{ $backBtnLink }}" class="btn btn-outline-secondary me-3">{{__('app.cancel')}}</a>
                <button type="button" class="btn btn-primary save-doc-btn">
                  <span class="btn-text">{{__('app.save_complete')}}</span>
                  <span class="btn-loader" style="display: none;">
                    <em class="fa fa-spinner fa-spin"></em> Saving...
                  </span>
                </button>
              </div>
            </div>
          </div>
          @endif
    </section>
    <!-- Missing Documents Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Missing Required Documents</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <h5 class="mb-3">Please upload all the mandatory documents before proceeding:</h5>
        <ul id="missingDocumentsList" class="list-unstyled">
          <!-- Documents will be populated dynamically -->
        </ul>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Ok</button>
      </div>
    </div>
  </div>
</div>


<script type="text/javascript">
  $(document).ready(function() {

    // Helper function to initialize trailer field validation
    function initializeTrailerValidation() {
      $('.trailer-number-input').each(function(index) {
        var trailerNumber = index + 1;
        var fieldName = 'trailer_numbers[' + index + ']';
        
        // Remove existing rules first to avoid conflicts
        $(this).rules('remove');
        
        // Add new rules with unique field name
        $(this).rules('add', {
          required: true,
          messages: {
            required: 'Please enter trailer ' + trailerNumber + ' ID'
          }
        });
      });
    }

    // Add custom validation method for file size
    $.validator.addMethod('filesize', function(value, element, param) {
      if (this.optional(element)) {
        return true;
      }
      if (element.files && element.files[0]) {
        return element.files[0].size <= param;
      }
      return true;
    }, 'File size must be less than {0} bytes');

    // Initialize validation for Step 1 form
    console.log('Setting up form validation for step 1');
    $('#customer-step-1 form').validate({
      rules: {
        registration_number: { required: true },
        make: { required: true },
        model: { required: true },
        year_of_manufacture: { required: true, digits: true, minlength: 4, maxlength: 4 },
        vin: { required: true },
        engine_number: { required: true },
        vehicle_type: { required: true },
        vehicle_image: {
          required: {{ $isEdit ? 'false' : 'true' }},
          accept: 'image/jpg,image/png,image/jpeg',
          filesize: 10485760
        },
      },
      messages: {
        registration_number: '{{ validationMsg("enter", "registration_number") }}',
        make: '{{ validationMsg("enter", "make") }}',
        model: '{{ validationMsg("enter", "model") }}',
        year_of_manufacture: {
          required: '{{ validationMsg("enter", "year_of_manufacture") }}',
          digits: '{{ __("validation.custom.valid_year") }}',
          minlength: '{{ __("validation.custom.exact_digits", ["digits" => 4]) }}',
          maxlength: '{{ __("validation.custom.exact_digits", ["digits" => 4]) }}'
        },
        vin: '{{ validationMsg("enter", "vin") }}',
        engine_number: '{{ validationMsg("enter", "engine_number") }}',
        vehicle_type: '{{ validationMsg("select", "vehicle_type") }}',
        vehicle_image: {
          required: {{ $isEdit ? 'false' : 'true' }} ? 'Please upload a vehicle image' : '',
          accept: 'Please select a valid image file (jpg, png, jpeg)',
          filesize: 'File size must be less than 10MB'
        },
      },
      errorElement: 'span',
      errorClass: 'help-block',
      errorPlacement: function(error, element) {
      if (element.attr('name') === 'vehicle_image') {
        var container = element.closest('.custom-profile-main');
        error.addClass('text-danger d-block mt-2 text-center small');
        try {
          var w = container.outerWidth() || 144;
          error.css({ width: w + 'px', maxWidth: w + 'px' });
        } catch(_) {}
        container.after(error);
      } else {
        var wrapper = element.closest('.col-field-wrapper');
        if (wrapper.length) { error.insertAfter(wrapper); } else { error.insertAfter(element); }
      }
    },
    highlight: function(element) {
      var $el = $(element);
      if ($el.attr('name') === 'vehicle_image') {
        $el.closest('.driver-upload-img').addClass('has-error');
      } else {
        $el.closest('.form-group').addClass('has-error');
      }
    },
    unhighlight: function(element) {
      var $el = $(element);
      if ($el.attr('name') === 'vehicle_image') {
        $el.closest('.driver-upload-img').removeClass('has-error');
      } else {
        $el.closest('.form-group').removeClass('has-error');
      }
    },
      submitHandler: function(form) {
        // AJAX submit for step 1
        var $form = $(form);
        var $btn = $form.find('button[type=submit]');
        var $btnText = $btn.find('.btn-text');
        var $btnLoader = $btn.find('.btn-loader');
        
        // Show loader
        $btn.prop('disabled', true);
        $btnText.hide();
        $btnLoader.show();
        
        var actionUrl = $form.attr('action');
        
        // Create FormData for file upload
        var formData = new FormData(form);
        
        $.ajax({
          url: actionUrl,
          method: 'POST',
          data: formData,
          processData: false,
          contentType: false,
          success: function(res) {
            // Hide loader
            $btn.prop('disabled', false);
            $btnText.show();
            $btnLoader.hide();
            
            if (res.success && res.vehicle_id) {
              // Pass vehicle_id to step 2
              $('#customer-step-2 input[name=vehicle_id]').val(res.vehicle_id);
              $('#customer-step-1').hide();
              $('#customer-step-2').show();
              $('#step-1').removeClass('step-active').addClass('step-previous');
              $('#step-2').addClass('step-active');
            } else if (res.errors) {
              // Show server-side errors
              $form.find('.col-field-wrapper').removeClass('has-error');
              $form.find('.help-block.server-error').remove();
              var errors = res.errors;
              $.each(errors, function(field, messages) {
                var $input = $form.find('[name="' + field + '"]');
                if ($input.length) {
                  var $wrapper = $input.closest('.col-field-wrapper');
                  $wrapper.addClass('has-error');
                  $wrapper.append('<span class="help-block server-error text-danger">' + messages[0] + '</span>');
                }
              });
              var $firstError = $form.find('.has-error').first();
              if ($firstError.length) {
                $('html, body').animate({ scrollTop: $firstError.offset().top - 100 }, 500);
              }
            }
          },
          error: function(xhr, status, error) {
            // Hide loader
            $btn.prop('disabled', false);
            $btnText.show();
            $btnLoader.hide();
            
            if (xhr.status === 422) {
              $form.find('.col-field-wrapper').removeClass('has-error');
              $form.find('.help-block.server-error').remove();
              var errors = xhr.responseJSON.errors;
              $.each(errors, function(field, messages) {
                var $input = $form.find('[name="' + field + '"]');
                if ($input.length) {
                  var $wrapper = $input.closest('.col-field-wrapper');
                  $wrapper.addClass('has-error');
                  $wrapper.append('<span class="help-block server-error text-danger">' + messages[0] + '</span>');
                }
              });
              var $firstError = $form.find('.has-error').first();
              if ($firstError.length) {
                $('html, body').animate({ scrollTop: $firstError.offset().top - 100 }, 500);
              }
            }
          }
        });
        return false;
      }
    });

    // Always call this after .validate() so all trailer fields get rules
    initializeTrailerValidation();
    
    // Test form submission
    $('#customer-step-1 form').on('submit', function(e) {
      console.log('Form submit event triggered');
    });

    // Image preview for profile picture
  $('#img-file-upload').on('change', function (e) {
    var input = this;
    if (input.files && input.files[0]) {
      var reader = new FileReader();
      reader.onload = function (e) {
        // If .image-container exists, update it, else create it
        var container = $('.image-container');
        if (container.length) {
          container.html('<img src="' + e.target.result + '" alt="Profile Preview">');
        } else {
          // Insert after the label image
          $('.image-file-label').append('<span class="image-container"><img src="' + e.target.result + '" alt="Profile Preview"></span>');
        }
        // Optionally show the 'Change Photo' text
        if ($('.image-file-upload-again').length === 0) {
          $('.image-file-label').append('<span class="image-file-upload-again">Change Photo</span>');
        }
      };
      reader.readAsDataURL(input.files[0]);
    }
  });

    // Initialize validation for Step 2 form
    $('#customer-step-2 form').validate({
      rules: {
        vehicle_id: { required: true },
        fuel_type: { required: true },
        vehicle_color: { required: true },
        length: { required: true, number: true, max:30, min:1 },
        width: { required: true, number: true, max:30, min:1 },
        height: { required: true, number: true, max:30, min:1 },
        load_capacity: { required: true, number: true },
        number_of_axles: { required: true, digits: true },
        tracking_url: { required: true, url: true },
        username: { required: true},
        password: { required: true, minlength: 5 },
      },
      messages: {
        tracking_url: {
          required: 'Please enter tracking url',
          url: 'Please enter valid url'
        },
        username: {
          required: 'Please enter username'
        },
        password: {
          required: 'Please enter password',
          minlength: 'Password should be at least 5 characters'
        },
        fuel_type: '{{ validationMsg("select", "fuel_type") }}',
        vehicle_color: '{{ validationMsg("enter", "vehicle_color") }}',
        length: {
          required: 'Please enter length',
          number: 'Please enter valid number',
          max: 'Length should not be greater than 30',
          min: 'Length should not be less than 1'
        },
        width: {
          required: 'Please enter width',
          number: 'Please enter valid number',
          max: 'Width should not be greater than 30',
          min: 'Width should not be less than 1'
        },
        height: {
          required: 'Please enter height',
          number: 'Please enter valid number',
          max: 'Height should not be greater than 30',
          min: 'Height should not be less than 1'
        },
        load_capacity: {
          required: '{{ validationMsg("enter", "load_capacity") }}',
          number: '{{ __("validation.custom.valid_number") }}'
        },
        number_of_axles: {
          required: '{{ validationMsg("enter", "number_of_axles") }}',
          digits: '{{ __("validation.custom.whole_number") }}'
        },
      },
      errorElement: 'span',
      errorClass: 'help-block',
      highlight: function(element) { $(element).closest('.form-group').addClass('has-error'); },
      unhighlight: function(element) { $(element).closest('.form-group').removeClass('has-error'); },
      submitHandler: function(form) {
        var $form = $(form);
        var $btn = $form.find('button[type=submit]');
        var $btnText = $btn.find('.btn-text');
        var $btnLoader = $btn.find('.btn-loader');
        
        // Show loader
        $btn.prop('disabled', true);
        $btnText.hide();
        $btnLoader.show();
        
        $.ajax({
          url: $form.attr('action'),
          method: 'POST',
          data: $form.serialize(),
          success: function(res) {
            // Hide loader
            $btn.prop('disabled', false);
            $btnText.show();
            $btnLoader.hide();
            
            if (res.success) {
              
              $('#step-2').removeClass('step-active').addClass('step-previous');
              $('#step-3').addClass('step-active');
              @if ($isEdit)
                toastr.success('Vehicle updated successfully');
                setTimeout(function() {
                  window.location.href = "{{ route('transporter.vehicles.index') }}";
                }, 500);
              @else
              $('#customer-step-2').hide();
              $('#customer-step-3').show();
              // Set the current vehicle ID
              currentVehicleId = res.vehicle_id;
              $('#customer-step-3 input[name="vehicle_id"]').val(res.vehicle_id); // Ensure vehicle_id is set
              // Update the Upload Document button link
              updateUploadDocBtn(currentVehicleId);
              @endif
            } else if (res.errors) {
              // Show server-side errors like customers/add.blade.php
              $form.find('.col-field-wrapper').removeClass('has-error');
              $form.find('.help-block.server-error').remove();
              var errors = res.errors;
              $.each(errors, function(field, messages) {
                var $input = $form.find('[name="' + field + '"]');
                if ($input.length) {
                  var $wrapper = $input.closest('.col-field-wrapper');
                  $wrapper.addClass('has-error');
                  $wrapper.append('<span class="help-block server-error text-danger">' + messages[0] + '</span>');
                }
              });
              var $firstError = $form.find('.has-error').first();
              if ($firstError.length) {
                $('html, body').animate({ scrollTop: $firstError.offset().top - 100 }, 500);
              }
            }
          },
          error: function(xhr) {
            // Hide loader
            $btn.prop('disabled', false);
            $btnText.show();
            $btnLoader.hide();
            
            if (xhr.status === 422) {
              $form.find('.col-field-wrapper').removeClass('has-error');
              $form.find('.help-block.server-error').remove();
              var errors = xhr.responseJSON.errors;
              $.each(errors, function(field, messages) {
                var $input = $form.find('[name="' + field + '"]');
                if ($input.length) {
                  var $wrapper = $input.closest('.col-field-wrapper');
                  $wrapper.addClass('has-error');
                  $wrapper.append('<span class="help-block server-error text-danger">' + messages[0] + '</span>');
                }
              });
              var $firstError = $form.find('.has-error').first();
              if ($firstError.length) {
                $('html, body').animate({ scrollTop: $firstError.offset().top - 100 }, 500);
              }
            }
          }
        });
        return false;
      }
    });

    // Helper to show server-side errors
    function showServerErrors($form, errors) {
      $form.find('.server-error').remove();
      $.each(errors, function(field, messages) {
        var $input = $form.find('[name="' + field + '"]');
        if ($input.length) {
          $input.closest('.form-group').addClass('has-error');
          $input.after('<span class="help-block server-error">' + messages[0] + '</span>');
        } else {
          // General error
          $form.prepend('<div class="alert alert-danger server-error">' + messages[0] + '</div>');
        }
      });
    }

    // Only show step 1 on load
    $('#customer-step-1').show();
    @if(!$isEdit)
    $('#customer-step-2, #customer-step-3').hide();
    @else
    //  
    $('#customer-step-3').remove();
    @endif
    
    // Initialize validation for any existing trailer fields
    initializeTrailerValidation();
  
    // Dynamic trailer fields logic
    $('#vehicleTypeSelect').on('change', function() {
      // Remove any previously added trailer fields
      $('.trailer-field').remove();
      var selected = $(this).find('option:selected');
      var trailerCount = parseInt(selected.data('trailer_count')) || 0;
      if (trailerCount > 0) {
        var trailerFields = '';
        for (var i = 1; i <= trailerCount; i++) {
          trailerFields += `
            <div class=\"col-md-4 trailer-field\">
              <div class=\"form-group\">
                <label class=\"control-label\">Trailer ` + i + ` ID</label>
                <div class=\"col-field-wrapper\">
                  <input type=\"text\" name=\"trailer_numbers[` + (i-1) + `]\" class=\"form-control trailer-number-input\" placeholder=\"Enter trailer ` + i + ` ID\" required>
                </div>
              </div>
            </div>
          `;
        }
        // Insert the trailer fields right after the vehicle type col-md-4
        $('#vehicle-type-group').closest('.col-md-4').after(trailerFields);
        
        // Initialize validation for all trailer fields
        initializeTrailerValidation();
        
        // Re-validate the form after adding new fields and rules
        $('#customer-step-1 form').validate().resetForm();
      }
    });
  
    // Initialize year-only datepicker for year of manufacture
    $('.year-picker').datepicker({
      format: 'yyyy',
      viewMode: 'years',
      minViewMode: 'years',
      autoclose: true,
      startView: 'years',
      endDate: new Date().getFullYear().toString(),
      startDate: '1900'
    });

    // Store the current vehicle ID for use in the Upload Document button
    let currentVehicleId = null;

    // DataTable initialization for Step 3
    var $table = $('#tbl-documents');
    if ($table.length) {
      $.fn.dataTable.ext.errMode = () => alert('DataTable error');
      var table = $table.DataTable({
        info: true,
        searching: true,
        pageLength: 10,
        pagingType: "full_numbers",
        dom: 'frt<"bottom"ipl><"clear">',
        columnDefs: [{
          targets: ['status', 'action'],
          orderable: false
        }],
      });

      $('#tbl-documents_filter input[type="search"]').attr('placeholder', 'Search');
      appendUploadDocBtn();
    }

    // Function to append the Upload Document button
    function appendUploadDocBtn() {
      let btnHtml = '<a href="#" class="upload-doc-btn"><button class="btn btn-primary"><em class="iconsax" icon-name="upload-2"></em> Upload Document</button></a>';
      $('#tbl-documents_filter').append('<div class="d-flex justify-content-end flex-wrap jobs-right-filter">' + btnHtml + '</div>');
      updateUploadDocBtn(currentVehicleId);
    }

    // Function to update the Upload Document button link
    function updateUploadDocBtn(vehicleId) {
      if (!vehicleId) {
        // Try to get from hidden input or URL
        vehicleId = $('#customer-step-3 input[name="vehicle_id"]').val() || (new URLSearchParams(window.location.search)).get('id');
      }
      if (vehicleId) {
        var uploadUrl = "{{ route('transporter.vehicle.documents.create', ':id')}}?from=add-vehicle ";
        uploadUrl = uploadUrl.replace(':id', vehicleId);
        $('.upload-doc-btn').attr('href', uploadUrl);
      }
    }

  
    // Show Step 3 if showStep=3 is in the URL
    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.get('showStep') === '3' && urlParams.get('id')) {
      $('#customer-step-1, #customer-step-2').hide();
      $('#customer-step-3').show();
      // Optionally, update the stepper UI to highlight step 3
      $('#step-1, #step-2').removeClass('step-active').addClass('step-previous');
      $('#step-3').removeClass('step-not-active').addClass('step-active');
      // Set vehicle_id hidden input if present in URL
      if (urlParams.get('id')) {
        $('#customer-step-3 input[name="vehicle_id"]').val(urlParams.get('id'));
      }
      // Update Upload Document button link
      updateUploadDocBtn(urlParams.get('id'));
    }

    $(document).on('click', '.delete-document', function(e) {
          e.preventDefault();
          const vehicleId = $(this).data('vehicle-id');
          const documentId = $(this).data('document-id');
          const row = $(this).closest('tr');

          if (!vehicleId || !documentId) {
              toastr.error('Missing required information for deletion');
              return;
          }

          Swal.fire({
              title: 'Are you sure?',
              text: "You won't be able to revert this!",
              icon: 'warning',
              showCancelButton: true,
              confirmButtonColor: '#3085d6',
              cancelButtonColor: '#d33',
              confirmButtonText: 'Yes, delete it!',
              cancelButtonText: 'Cancel'
          }).then((result) => {
              if (result.isConfirmed) {
                  var deleteUrl = "{{ route('transporter.vehicle.documents.destroy', [':vehicle', ':document']) }}?from=add";
                  deleteUrl = deleteUrl.replace(':vehicle', vehicleId).replace(':document', documentId);

                  $.ajax({
                      url: deleteUrl,
                      type: 'DELETE',
                      headers: {
                          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                      },
                      success: function(response) {
                          if (response.status === 'success') {
                              row.remove();
                              toastr.success(response.message || 'Document deleted successfully');
                              setTimeout(function() {
                                  window.location.reload();
                              }, 1000);
                          } else {
                              toastr.error(response.message || 'Failed to delete document');
                          }
                      },
                      error: function(xhr) {
                          let errorMessage = 'Failed to delete document';
                          if (xhr.responseJSON && xhr.responseJSON.message) {
                              errorMessage = xhr.responseJSON.message;
                          }
                          toastr.error(errorMessage);
                      }
                  });
              }
          });
  });

  if (@json($isEdit)) {
      // For edit mode, ensure validation works properly
      // The submitHandler in the validate() call will handle the form submission
  }

  // Add jQuery validation for driver_id in step 3

  // Save & Complete for Step 3: Check required documents and complete
  $('#customer-step-3 .save-doc-btn').on('click', function(e) {
    e.preventDefault();
    var $btn = $(this);
    var $btnText = $btn.find('.btn-text');
    var $btnLoader = $btn.find('.btn-loader');
    var $form = $('#customer-step-3 form');
    
    // Ensure vehicle_id is set from URL if not present
    var vehicleIdInput = $form.find('input[name="vehicle_id"]');
    if (!vehicleIdInput.val()) {
      const urlParams = new URLSearchParams(window.location.search);
      let vehicleId = urlParams.get('id');
      if (vehicleId) {
        vehicleIdInput.val(vehicleId);
      }
    }
    
    if (!$form.valid()) {
      return;
    }
    
    // Show loader
    $btn.prop('disabled', true);
    $btnText.hide();
    $btnLoader.show();
    
    // First, assign driver if selected
    if ($form.find('select[name="driver_id"]').val()) {
      $.ajax({
        url: "{{ route('transporter.vehicles.storeStep3') }}",
        type: 'POST',
        data: $form.serialize(),
        success: function(response) {
          if (response.success) {
            // Driver assigned successfully, now check documents
            checkRequiredDocuments();
          } else {
            toastr.error(response.message || 'Failed to assign driver.');
            // Hide loader
            $btn.prop('disabled', false);
            $btnText.show();
            $btnLoader.hide();
          }
        },
        error: function(xhr) {
          let errorMessage = 'Failed to assign driver.';
          if (xhr.responseJSON && xhr.responseJSON.message) {
            errorMessage = xhr.responseJSON.message;
          }
          toastr.error(errorMessage);
          // Hide loader
          $btn.prop('disabled', false);
          $btnText.show();
          $btnLoader.hide();
        }
      });
    } else {
      // No driver selected, directly check documents
      checkRequiredDocuments();
    }
    
    function checkRequiredDocuments() {
      var vehicleId = vehicleIdInput.val();
      $.ajax({
        url: "{{ route('transporter.vehicles.checkDocuments') }}",
        type: 'POST',
        data: {
          vehicle_id: vehicleId,
          _token: $('meta[name="csrf-token"]').attr('content')
        },
        success: function(response) {
          if (response.success) {
            toastr.success(response.message);
            setTimeout(function() {
              window.location.href = response.redirect;
            }, 1500);
          } else if (response.hasMissingDocuments) {
            showMissingDocumentsModal(response.missingDocuments);
          } else {
            toastr.error(response.message || 'Failed to complete vehicle setup.');
          }
        },
        error: function(xhr) {
          let errorMessage = 'Failed to check documents.';
          if (xhr.responseJSON && xhr.responseJSON.message) {
            errorMessage = xhr.responseJSON.message;
          }
          toastr.error(errorMessage);
        },
        complete: function() {
          // Hide loader
          $btn.prop('disabled', false);
          $btnText.show();
          $btnLoader.hide();
        }
      });
    }
  });

  function showMissingDocumentsModal(missingDocuments) {
    let documentsList = '';
    missingDocuments.forEach(function(doc) {
      documentsList += '<li> ' + doc + '</li>';
    });
    $('#missingDocumentsList').html(documentsList);
    $('#staticBackdrop').modal('show');
  }
});
  </script>
  @endsection