@extends('freight.layouts.app')
@section('title', 'My Profile & Truck')

@section('content')
    <h1 style="font-size:1.5rem;font-weight:800;margin:0 0 20px;">My Profile &amp; Truck Information</h1>

    {{-- Personal / licensing info --}}
    <div class="card">
        <h2><i class="fas fa-id-card"></i> Personal &amp; Licensing Information</h2>
        <form method="POST" action="{{ route('freight.profile.update') }}" enctype="multipart/form-data">
            @csrf
            <div class="grid">
                <div class="field"><label>First Name *</label><input type="text" name="first_name" value="{{ old('first_name', $driver->first_name) }}" required></div>
                <div class="field"><label>Last Name</label><input type="text" name="last_name" value="{{ old('last_name', $driver->last_name) }}"></div>
                <div class="field"><label>Phone</label><input type="text" name="phone" value="{{ old('phone', $driver->phone) }}"></div>
                <div class="field"><label>Date of Birth</label><input type="date" name="dob" value="{{ old('dob', optional($driver->dob)->format('Y-m-d')) }}"></div>
                <div class="field"><label>CDL Number</label><input type="text" name="cdl_number" value="{{ old('cdl_number', $driver->cdl_number) }}"></div>
                <div class="field"><label>CDL Class</label>
                    <select name="cdl_class">
                        @php $cls = old('cdl_class', $driver->cdl_class); @endphp
                        <option value="">-- Select --</option>
                        <option value="A" {{ $cls=='A'?'selected':'' }}>Class A</option>
                        <option value="B" {{ $cls=='B'?'selected':'' }}>Class B</option>
                        <option value="C" {{ $cls=='C'?'selected':'' }}>Class C</option>
                    </select>
                </div>
                <div class="field"><label>CDL Expiry</label><input type="date" name="cdl_expiry" value="{{ old('cdl_expiry', optional($driver->cdl_expiry)->format('Y-m-d')) }}"></div>
                <div class="field"><label>Address</label><input type="text" name="address" value="{{ old('address', $driver->address) }}"></div>
                <div class="field"><label>City</label><input type="text" name="city" value="{{ old('city', $driver->city) }}"></div>
                <div class="field"><label>State</label><input type="text" name="state" value="{{ old('state', $driver->state) }}"></div>
                <div class="field"><label>Zip Code</label><input type="text" name="zip_code" value="{{ old('zip_code', $driver->zip_code) }}"></div>
                <div class="field"><label>Emergency Contact Name</label><input type="text" name="emergency_contact_name" value="{{ old('emergency_contact_name', $driver->emergency_contact_name) }}"></div>
                <div class="field"><label>Emergency Contact Phone</label><input type="text" name="emergency_contact_phone" value="{{ old('emergency_contact_phone', $driver->emergency_contact_phone) }}"></div>
                <div class="field"><label>Profile Photo</label><input type="file" name="profile_image" accept="image/*"></div>
            </div>
            @if($driver->profile_image)
                <div style="margin-top:12px;"><img src="{{ asset($driver->profile_image) }}" alt="profile" style="height:70px;border-radius:8px;"></div>
            @endif
            <div style="margin-top:18px;"><button class="btn btn-primary"><i class="fas fa-save"></i> Save Profile</button></div>
        </form>
    </div>

    {{-- Existing trucks --}}
    <div class="card">
        <h2><i class="fas fa-truck"></i> My Trucks</h2>
        @if($driver->vehicles->count())
            <table>
                <thead><tr><th>Type</th><th>Make/Model</th><th>Year</th><th>Plate</th><th>VIN</th><th>Capacity</th><th>Insurance</th><th></th></tr></thead>
                <tbody>
                @foreach($driver->vehicles as $v)
                    <tr>
                        <td>{{ $v->truck_type }}</td>
                        <td>{{ trim($v->make.' '.$v->model) ?: '—' }}</td>
                        <td>{{ $v->year ?: '—' }}</td>
                        <td>{{ $v->plate_number ?: '—' }}</td>
                        <td>{{ $v->vin ?: '—' }}</td>
                        <td>{{ $v->capacity_weight ? $v->capacity_weight.' lbs' : '—' }}</td>
                        <td>{{ $v->insurance_number ?: '—' }}</td>
                        <td style="white-space:nowrap;">
                            <button type="button" class="btn btn-light" style="padding:5px 10px;"
                                onclick='editVehicle(@json($v))'><i class="fas fa-edit"></i></button>
                            <form method="POST" action="{{ route('freight.vehicle.delete', $v->id) }}" style="display:inline;" onsubmit="return confirm('Remove this truck?')">
                                @csrf @method('DELETE')
                                <button class="btn btn-danger" style="padding:5px 10px;"><i class="fas fa-trash"></i></button>
                            </form>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        @else
            <p style="color:#64748b;">No trucks added yet — use the form below.</p>
        @endif
    </div>

    {{-- Add / edit truck --}}
    <div class="card">
        <h2><i class="fas fa-plus-circle"></i> <span id="vehFormTitle">Add Truck</span></h2>
        <form method="POST" action="{{ route('freight.vehicle.save') }}" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="id" id="veh_id">
            <div class="grid">
                <div class="field"><label>Truck Type *</label>
                    <select name="truck_type" id="veh_truck_type" required>
                        <option value="">-- Select --</option>
                        @foreach(['Flatbed','Dry Van','Reefer (Refrigerated)','Box Truck','Tanker','Step Deck','Lowboy','Car Hauler','Other'] as $t)
                            <option value="{{ $t }}">{{ $t }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="field"><label>Make</label><input type="text" name="make" id="veh_make"></div>
                <div class="field"><label>Model</label><input type="text" name="model" id="veh_model"></div>
                <div class="field"><label>Year</label><input type="text" name="year" id="veh_year"></div>
                <div class="field"><label>Plate Number</label><input type="text" name="plate_number" id="veh_plate_number"></div>
                <div class="field"><label>VIN</label><input type="text" name="vin" id="veh_vin"></div>
                <div class="field"><label>Capacity (lbs)</label><input type="text" name="capacity_weight" id="veh_capacity_weight"></div>
                <div class="field"><label>Insurance Number</label><input type="text" name="insurance_number" id="veh_insurance_number"></div>
                <div class="field"><label>Insurance Expiry</label><input type="date" name="insurance_expiry" id="veh_insurance_expiry"></div>
                <div class="field"><label>Registration Number</label><input type="text" name="registration_number" id="veh_registration_number"></div>
                <div class="field"><label>Registration Expiry</label><input type="date" name="registration_expiry" id="veh_registration_expiry"></div>
                <div class="field"><label>Truck Photo</label><input type="file" name="vehicle_image" accept="image/*"></div>
            </div>
            <div class="field" style="margin-top:14px;"><label>Notes</label><textarea name="notes" id="veh_notes" rows="2"></textarea></div>
            <div style="margin-top:18px;">
                <button class="btn btn-primary"><i class="fas fa-save"></i> Save Truck</button>
                <button type="button" class="btn btn-light" onclick="resetVehForm()">Clear</button>
            </div>
        </form>
    </div>

    {{-- Change password --}}
    <div class="card">
        <h2><i class="fas fa-lock"></i> Change Password</h2>
        <form method="POST" action="{{ route('freight.password.update') }}">
            @csrf
            <div class="grid">
                <div class="field"><label>Current Password</label><input type="password" name="current_password" required></div>
                <div class="field"><label>New Password</label><input type="password" name="new_password" required></div>
                <div class="field"><label>Confirm New Password</label><input type="password" name="new_password_confirmation" required></div>
            </div>
            <div style="margin-top:18px;"><button class="btn btn-primary"><i class="fas fa-key"></i> Update Password</button></div>
        </form>
    </div>

    <script>
        function editVehicle(v) {
            document.getElementById('vehFormTitle').textContent = 'Edit Truck';
            ['id','truck_type','make','model','year','plate_number','vin','capacity_weight','insurance_number','insurance_expiry','registration_number','registration_expiry','notes']
              .forEach(function(k){
                  var el = document.getElementById('veh_' + k);
                  if (el) el.value = (v[k] === null || v[k] === undefined) ? '' : v[k];
              });
            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
        }
        function resetVehForm() {
            document.getElementById('vehFormTitle').textContent = 'Add Truck';
            ['id','truck_type','make','model','year','plate_number','vin','capacity_weight','insurance_number','insurance_expiry','registration_number','registration_expiry','notes']
              .forEach(function(k){ var el = document.getElementById('veh_' + k); if (el) el.value=''; });
        }
    </script>
@endsection