@extends('layout.app')
@section('title', 'Edit Vehicle Toollist')

@push('header_script')
<style>
    .form-section-title {
        font-size: 0.95rem;
        font-weight: 600;
        color: #495057;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid #e9ecef;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .form-section-title i {
        color: #0d6efd;
    }
    
    #tyreTable th, #batteryTable th {
        white-space: nowrap;
    }
    
    #tyreTable input, #tyreTable select, 
    #batteryTable input, #batteryTable select {
        min-width: 130px;
    }
    
    #tyreTable th:last-child, #batteryTable th:last-child {
        width: 50px;
        min-width: 50px;
    }
    #tyreTable td:last-child, #batteryTable td:last-child {
        width: 50px;
        min-width: 50px;
    }

    .tool-grid label {
        font-size: 0.8rem;
        color: #6c757d;
        font-weight: 500;
        margin-bottom: 3px;
    }

    .tool-grid .form-control {
        font-size: 0.88rem;
    }

    .section-heading {
        font-size: 1rem;
        font-weight: 700;
        color: #0d6efd;
        margin-bottom: 0.75rem;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    div.dynamic-item-row {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
    }

    div.dynamic-item-row input {
        flex: 1;
    }
</style>
<link rel="stylesheet" href="{{ asset('theme/assets/vendor/daterange/daterange.css') }}">
@endpush

@section('content')
<div class="app-hero-header d-flex align-items-center">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="javascript:void(0);">Vehicle Maintenance</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">Edit Vehicle Toollist</li>
    </ol>
    <div class="ms-auto d-lg-flex flex-row">
        <a href="{{ route('vehicle-tool-list.index') }}" class="btn btn-sm btn-outline-secondary">
            <i class="ri-arrow-left-circle-line"></i> Back to List
        </a>
    </div>
</div>

<div class="app-body">
    {!! Form::open([
        'route' => ['vehicle-tool-list.update', $toollist->id],
        'class' => 'needs-validation',
        'method' => 'post',
        'autocomplete' => 'off',
        'id' => 'toollistForm',
    ]) !!}
    @method('PUT')

    @if(request('redirect_to'))
    <input type="hidden" name="redirect_to" value="{{ request('redirect_to') }}">
    @endif

    {{-- ====== BASIC INFO ====== --}}
    <div class="row gx-3">
        <div class="col-12">
            <div class="card mb-3">
                <div class="card-body">
                    <div class="form-section-title"><i class="ri-truck-line"></i> Basic Information</div>
                    <div class="row g-3">
                        <div class="col-md-3 col-12">
                            <label class="form-label" for="vehicle_id">Vehicle <span class="text-danger">*</span></label>
                            {!! Form::select('vehicle_id', ['' => '-- Select Vehicle --'] + $vehicles, old('vehicle_id', $toollist->vehicle_id), [
                                'class' => 'form-control select2',
                                'id' => 'vehicle_id',
                                'required',
                            ]) !!}
                            <div class="text-danger">{{ $errors->first('vehicle_id') }}</div>
                        </div>

                        <div class="col-md-3 col-12">
                            <label class="form-label" for="employee_id">Driver</label>
                            {!! Form::select('employee_id', ['' => '-- Select Driver --'] + $drivers, old('employee_id', $toollist->employee_id), [
                                'class' => 'form-control select2',
                                'id' => 'employee_id',
                            ]) !!}
                            <div class="text-danger">{{ $errors->first('employee_id') }}</div>
                        </div>

                        <div class="col-md-2 col-12">
                            <label class="form-label" for="date">Date <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="ri-calendar-todo-line"></i></span>
                                <input type="text" class="form-control datepicker" id="date" name="date"
                                    required value="{{ old('date', \Carbon\Carbon::parse($toollist->date)->format('d-m-Y')) }}">
                            </div>
                            <div class="text-danger">{{ $errors->first('date') }}</div>
                        </div>

                        <div class="col-md-2 col-12">
                            <label class="form-label" for="send_by">Send By</label>
                            <input type="text" class="form-control" id="send_by" name="send_by"
                                value="{{ old('send_by', $toollist->send_by) }}">
                        </div>

                        <div class="col-md-2 col-12">
                            <label class="form-label" for="contact">Contact</label>
                            <input type="text" class="form-control number" id="contact" name="contact"
                                value="{{ old('contact', $toollist->contact) }}" maxlength="10">
                        </div>

                        <div class="col-md-2 col-12">
                            <label class="form-label" for="km">Kilometer</label>
                            <input type="text" class="form-control number" id="km" name="km"
                                value="{{ old('km', $toollist->km) }}">
                        </div>

                        <div class="col-md-2 col-12">
                            <label class="form-label" for="diesel">Diesel (Ltrs)</label>
                            <input type="number" step="0.01" class="form-control" id="diesel" name="diesel"
                                value="{{ old('diesel', $toollist->diesel) }}" placeholder="0.00">
                        </div>

                        <div class="col-md-2 col-12">
                            <label class="form-label" for="urea">Urea (Ltrs)</label>
                            <input type="number" step="0.01" class="form-control" id="urea" name="urea"
                                value="{{ old('urea', $toollist->urea) }}" placeholder="0.00">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row gx-3">
        <div class="col-md-12">
            <ul class="nav nav-tabs mb-3" id="toolListTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active fw-bold" id="general-tab" data-bs-toggle="tab" data-bs-target="#general" type="button" role="tab" aria-controls="general" aria-selected="true"><i class="ri-hammer-line"></i> General Tools</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link fw-bold" id="tyres-tab" data-bs-toggle="tab" data-bs-target="#tyres" type="button" role="tab" aria-controls="tyres" aria-selected="false"><i class="ri-checkbox-blank-circle-line"></i> Tyres</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link fw-bold" id="batteries-tab" data-bs-toggle="tab" data-bs-target="#batteries" type="button" role="tab" aria-controls="batteries" aria-selected="false"><i class="ri-battery-2-charge-line"></i> Batteries</button>
                </li>
            </ul>

            <div class="tab-content" id="toolListTabsContent">
                {{-- GENERAL TAB --}}
                <div class="tab-pane fade show active" id="general" role="tabpanel" aria-labelledby="general-tab">
                    <div class="row gx-3">
                        <div class="col-md-8">

            {{-- Fastag --}}
            <div class="card mb-3">
                <div class="card-body tool-grid">
                    <div class="section-heading"><i class="ri-price-tag-3-line"></i> Fastag</div>
                    <div class="row g-3">
                        <div class="col-md-4 col-12">
                            <label>Fastag</label>
                            <input type="text" name="fastag" class="form-control" value="{{ old('fastag', $toollist->fastag) }}">
                        </div>
                    </div>
                </div>
            </div>

            {{-- Belts & Machines --}}
            <div class="card mb-3">
                <div class="card-body tool-grid">
                    <div class="section-heading"><i class="ri-tools-line"></i> Belts &amp; Machines</div>
                    <div class="row g-3">
                        <div class="col-md-3 col-6">
                            <label>Small Belt</label>
                            <input type="text" name="small_belt" class="form-control" value="{{ old('small_belt', $toollist->small_belt) }}">
                        </div>
                        <div class="col-md-3 col-6">
                            <label>Small Machine</label>
                            <input type="text" name="small_machine" class="form-control" value="{{ old('small_machine', $toollist->small_machine) }}">
                        </div>
                        <div class="col-md-3 col-6">
                            <label>Big Belt</label>
                            <input type="text" name="big_belt" class="form-control" value="{{ old('big_belt', $toollist->big_belt) }}">
                        </div>
                        <div class="col-md-3 col-6">
                            <label>Big Machine</label>
                            <input type="text" name="big_machine" class="form-control" value="{{ old('big_machine', $toollist->big_machine) }}">
                        </div>
                    </div>
                </div>
            </div>

            {{-- Tools --}}
            <div class="card mb-3">
                <div class="card-body tool-grid">
                    <div class="section-heading"><i class="ri-hammer-line"></i> Tools</div>
                    <div class="row g-3">
                        <div class="col-md-3 col-6">
                            <label>Jack</label>
                            <input type="text" name="jack" class="form-control" value="{{ old('jack', $toollist->jack) }}">
                        </div>
                        <div class="col-md-3 col-6">
                            <label>Tire Lever</label>
                            <input type="text" name="tire_lever" class="form-control" value="{{ old('tire_lever', $toollist->tire_lever) }}">
                        </div>
                        <div class="col-md-3 col-6">
                            <label>Stepney Spanner</label>
                            <input type="text" name="stepney_spanner" class="form-control" value="{{ old('stepney_spanner', $toollist->stepney_spanner) }}">
                        </div>
                        <div class="col-md-3 col-6">
                            <label>Bucket</label>
                            <input type="text" name="bucket" class="form-control" value="{{ old('bucket', $toollist->bucket) }}">
                        </div>
                        <div class="col-md-3 col-6">
                            <label>Tarpaulin (Cloth)</label>
                            <input type="text" name="tarpaulin_cloth" class="form-control" value="{{ old('tarpaulin_cloth', $toollist->tarpaulin_cloth) }}">
                        </div>
                        <div class="col-md-3 col-6">
                            <label>Tarpaulin (Plastic)</label>
                            <input type="text" name="tarpaulin_plastic" class="form-control" value="{{ old('tarpaulin_plastic', $toollist->tarpaulin_plastic) }}">
                        </div>
                        <div class="col-md-3 col-6">
                            <label>Stopper</label>
                            <input type="text" name="stopper" class="form-control" value="{{ old('stopper', $toollist->stopper) }}">
                        </div>
                        <div class="col-md-3 col-6">
                            <label>Rod</label>
                            <input type="text" name="rod" class="form-control" value="{{ old('rod', $toollist->rod) }}">
                        </div>
                        <div class="col-md-3 col-6">
                            <label>Rope</label>
                            <input type="text" name="rope" class="form-control" value="{{ old('rope', $toollist->rope) }}">
                        </div>
                        <div class="col-md-3 col-6">
                            <label>Tape</label>
                            <input type="text" name="tent" class="form-control" value="{{ old('tent', $toollist->tent) }}">
                        </div>
                        <div class="col-md-3 col-6">
                            <label>Speaker</label>
                            <input type="text" name="speaker" class="form-control" value="{{ old('speaker', $toollist->speaker) }}">
                        </div>
                        <div class="col-md-3 col-6">
                            <label>Fan</label>
                            <input type="text" name="fan" class="form-control" value="{{ old('fan', $toollist->fan) }}">
                        </div>
                        <div class="col-md-3 col-6">
                            <label>Bumper Guard</label>
                            <input type="text" name="bumper_guard" class="form-control" value="{{ old('bumper_guard', $toollist->bumper_guard) }}">
                        </div>
                        <div class="col-md-3 col-6">
                            <label>Apron</label>
                            <input type="text" name="apron" class="form-control" value="{{ old('apron', $toollist->apron) }}">
                        </div>
                        <div class="col-md-3 col-6">
                            <label>Charger Socket</label>
                            <input type="text" name="charger_socket" class="form-control" value="{{ old('charger_socket', $toollist->charger_socket ?? '') }}">
                        </div>
                    </div>
                </div>
            </div>

            {{-- Safety --}}
            <div class="card mb-3">
                <div class="card-body tool-grid">
                    <div class="section-heading"><i class="ri-shield-check-line"></i> Safety</div>
                    <div class="row g-3">
                        <div class="col-md-3 col-6">
                            <label>Safety Shoes</label>
                            <input type="text" name="safety_shoes" class="form-control" value="{{ old('safety_shoes', $toollist->safety_shoes) }}">
                        </div>
                        <div class="col-md-3 col-6">
                            <label>Safety Cap</label>
                            <input type="text" name="safety_cap" class="form-control" value="{{ old('safety_cap', $toollist->safety_cap) }}">
                        </div>
                        <div class="col-md-3 col-6">
                            <label>Safety Jacket</label>
                            <input type="text" name="safety_jacket" class="form-control" value="{{ old('safety_jacket', $toollist->safety_jacket) }}">
                        </div>
                        <div class="col-md-3 col-6">
                            <label>Safety Belt</label>
                            <input type="text" name="safety_belt" class="form-control" value="{{ old('safety_belt', $toollist->safety_belt) }}">
                        </div>
                    </div>
                </div>
            </div>

            {{-- Others --}}
            <div class="card mb-3">
                <div class="card-body tool-grid">
                    <div class="section-heading"><i class="ri-box-3-line"></i> Others</div>
                    <div class="row g-3">
                        <div class="col-md-3 col-6">
                            <label>Pillar</label>
                            <input type="text" name="pillar" class="form-control" value="{{ old('pillar', $toollist->pillar) }}">
                        </div>
                        <div class="col-md-3 col-6">
                            <label>Screwdriver</label>
                            <input type="text" name="screwdriver" class="form-control" value="{{ old('screwdriver', $toollist->screwdriver) }}">
                        </div>
                        <div class="col-md-3 col-6">
                            <label>Fire Extinguisher</label>
                            <input type="text" name="fire_extinguisher" class="form-control" value="{{ old('fire_extinguisher', $toollist->fire_extinguisher) }}">
                        </div>
                        <div class="col-md-3 col-6">
                            <label>Stepney</label>
                            <input type="text" name="stepney" class="form-control" value="{{ old('stepney', $toollist->stepney) }}">
                        </div>
                        <div class="col-md-3 col-6">
                            <label>Tool Set</label>
                            <input type="text" name="tool_set" class="form-control" value="{{ old('tool_set', $toollist->tool_set) }}">
                        </div>
                    </div>
                </div>
            </div>

                        </div>

                        {{-- ====== RIGHT COLUMN: Spanners, Remarks ====== --}}
                        <div class="col-md-4">

            {{-- Wheel Spanner Sizes --}}
            <div class="card mb-3">
                <div class="card-header py-2 d-flex justify-content-between align-items-center bg-light">
                    <span class="fw-bold text-dark"><i class="ri-settings-3-line text-primary"></i> Wheel Spanner Sizes</span>
                </div>
                <div class="card-body">
                    <div id="spannerList">
                        @php
                            $spannerSizes = old('spanner_sizes');
                            if(!$spannerSizes && !empty($toollist->wheel_spanner)){
                                $spannerSizes = explode(',', $toollist->wheel_spanner);
                            }
                            if(empty($spannerSizes)) $spannerSizes = [''];
                        @endphp
                        @foreach($spannerSizes as $spanner)
                        <div class="dynamic-item-row">
                            <input type="text" name="spanner_sizes[]" class="form-control"
                                value="{{ $spanner }}" placeholder="e.g. 17, 19, 21">
                            <button type="button" class="btn btn-sm btn-danger remove-dynamic-row">
                                <i class="ri-delete-bin-line"></i>
                            </button>
                        </div>
                        @endforeach
                    </div>
                    <button type="button" class="btn btn-sm btn-success mt-2 w-100" id="addSpannerBtn">
                        <i class="ri-add-line"></i> Add Spanner Size
                    </button>
                </div>
            </div>

            {{-- Remarks --}}
            <div class="card mb-3">
                <div class="card-body">
                    <label class="form-label fw-bold">Remarks</label>
                    <textarea name="remarks" class="form-control" rows="4"
                        placeholder="Any additional notes...">{{ old('remarks', $toollist->remarks) }}</textarea>
                </div>
            </div>

                        </div>
                    </div>
                </div>

                {{-- TYRES TAB --}}
                <div class="tab-pane fade" id="tyres" role="tabpanel" aria-labelledby="tyres-tab">
                    <div class="card mb-3">
                        <div class="card-header py-2 d-flex justify-content-between align-items-center bg-light">
                            <span class="fw-bold text-dark"><i class="ri-circle-line text-primary"></i> Tyre Tracking</span>
                            <button type="button" class="btn btn-sm btn-success" id="addTyreBtn"><i class="ri-add-line"></i> Add Tyre</button>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-bordered table-sm align-middle" id="tyreTable">
                                    <thead class="table-light">
                                        <tr>
                                            <th style="min-width:120px">Position</th>
                                            <th style="min-width:130px">Tyre No</th>
                                            <th style="min-width:130px">Company</th>
                                            <th style="min-width:145px">Issue Date</th>
                                            <th style="min-width:120px">Running KM</th>
                                            <th style="min-width:120px">Status</th>
                                            <th style="width:50px">Act</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tyreList">
                                        @if($toollist->tyres->count() > 0)
                                            @foreach($toollist->tyres as $key => $tyre)
                                                <tr class="dynamic-item-row">
                                                    <td><input type="text" name="tyre_position[]" class="form-control" placeholder="e.g. Front Left" value="{{ old('tyre_position')[$key] ?? $tyre->position }}"></td>
                                                    <td><input type="text" name="tyre_numbers[]" class="form-control" placeholder="Tyre Number" value="{{ old('tyre_numbers')[$key] ?? $tyre->tyre_number }}"></td>
                                                    <td><input type="text" name="tyre_companies[]" class="form-control" placeholder="Company Name" value="{{ old('tyre_companies')[$key] ?? $tyre->tyre_company }}"></td>
                                                    <td><input type="text" name="tyre_issue_date[]" class="form-control datepicker" value="{{ $tyre->issue_date ? date('Y-m-d', strtotime($tyre->issue_date)) : '' }}"></td>
                                                    <td><input type="number" name="tyre_running_km[]" class="form-control number" placeholder="0" value="{{ old('tyre_running_km')[$key] ?? $tyre->running_km }}"></td>
                                                    <td>
                                                        <select name="tyre_status[]" class="form-select">
                                                            <option value="Active" {{ (old('tyre_status')[$key] ?? $tyre->status) == 'Active' ? 'selected' : '' }}>Active</option>
                                                            <option value="Replaced" {{ (old('tyre_status')[$key] ?? $tyre->status) == 'Replaced' ? 'selected' : '' }}>Replaced</option>
                                                        </select>
                                                    </td>
                                                    <td><button type="button" class="btn btn-sm btn-danger remove-dynamic-row"><i class="ri-delete-bin-line"></i></button></td>
                                                </tr>
                                            @endforeach
                                        @elseif(!empty($toollist->tyre_number))
                                            @php
                                                $oldTyres = explode(',', $toollist->tyre_number);
                                                $oldCompanies = explode(',', $toollist->tyre_companies);
                                            @endphp
                                            @foreach($oldTyres as $key => $t)
                                                <tr class="dynamic-item-row">
                                                    <td><input type="text" name="tyre_position[]" class="form-control" placeholder="e.g. Front Left" value="{{ old('tyre_position')[$key] ?? '' }}"></td>
                                                    <td><input type="text" name="tyre_numbers[]" class="form-control" placeholder="Tyre Number" value="{{ old('tyre_numbers')[$key] ?? $t }}"></td>
                                                    <td><input type="text" name="tyre_companies[]" class="form-control" placeholder="Company Name" value="{{ old('tyre_companies')[$key] ?? ($oldCompanies[$key] ?? '') }}"></td>
                                                    <td><input type="text" name="tyre_issue_date[]" class="form-control datepicker" value="{{ old('tyre_issue_date')[$key] ?? '' }}"></td>
                                                    <td><input type="number" name="tyre_running_km[]" class="form-control number" placeholder="0" value="{{ old('tyre_running_km')[$key] ?? '' }}"></td>
                                                    <td>
                                                        <select name="tyre_status[]" class="form-select">
                                                            <option value="Active">Active</option>
                                                            <option value="Replaced">Replaced</option>
                                                        </select>
                                                    </td>
                                                    <td><button type="button" class="btn btn-sm btn-danger remove-dynamic-row"><i class="ri-delete-bin-line"></i></button></td>
                                                </tr>
                                            @endforeach
                                        @else
                                            <tr class="dynamic-item-row">
                                                <td><input type="text" name="tyre_position[]" class="form-control" placeholder="e.g. Front Left"></td>
                                                <td><input type="text" name="tyre_numbers[]" class="form-control" placeholder="Tyre Number"></td>
                                                <td><input type="text" name="tyre_companies[]" class="form-control" placeholder="Company Name"></td>
                                                <td><input type="text" name="tyre_issue_date[]" class="form-control datepicker"></td>
                                                <td><input type="number" name="tyre_running_km[]" class="form-control number" placeholder="0"></td>
                                                <td>
                                                    <select name="tyre_status[]" class="form-select">
                                                        <option value="Active">Active</option>
                                                        <option value="Replaced">Replaced</option>
                                                    </select>
                                                </td>
                                                <td><button type="button" class="btn btn-sm btn-danger remove-dynamic-row"><i class="ri-delete-bin-line"></i></button></td>
                                            </tr>
                                        @endif
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- BATTERIES TAB --}}
                <div class="tab-pane fade" id="batteries" role="tabpanel" aria-labelledby="batteries-tab">
                    <div class="card mb-3">
                        <div class="card-header py-2 d-flex justify-content-between align-items-center bg-light">
                            <span class="fw-bold text-dark"><i class="ri-battery-2-charge-line text-primary"></i> Battery Tracking</span>
                            <button type="button" class="btn btn-sm btn-success" id="addBatteryBtn"><i class="ri-add-line"></i> Add Battery</button>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-bordered table-sm align-middle" id="batteryTable">
                                    <thead class="table-light">
                                        <tr>
                                            <th style="min-width:140px">Battery No</th>
                                            <th style="min-width:140px">Company</th>
                                            <th style="min-width:145px">Issue Date</th>
                                            <th style="min-width:140px">Running Period</th>
                                            <th style="min-width:120px">Status</th>
                                            <th style="width:50px">Act</th>
                                        </tr>
                                    </thead>
                                    <tbody id="batteryList">
                                        @if($toollist->batteries->count() > 0)
                                            @foreach($toollist->batteries as $key => $batt)
                                                <tr class="dynamic-item-row">
                                                    <td><input type="text" name="battery_number[]" class="form-control" placeholder="Battery Number" value="{{ old('battery_number')[$key] ?? $batt->battery_number }}"></td>
                                                    <td><input type="text" name="battery_company[]" class="form-control" placeholder="Company Name" value="{{ old('battery_company')[$key] ?? $batt->company }}"></td>
                                                    <td><input type="text" name="battery_issue_date[]" class="form-control datepicker" value="{{ $batt->issue_date ? date('Y-m-d', strtotime($batt->issue_date)) : '' }}"></td>
                                                    <td><input type="text" name="battery_running_period[]" class="form-control" placeholder="e.g. 6 months" value="{{ old('battery_running_period')[$key] ?? $batt->running_period }}"></td>
                                                    <td>
                                                        <select name="battery_status[]" class="form-select">
                                                            <option value="Active" {{ (old('battery_status')[$key] ?? $batt->status) == 'Active' ? 'selected' : '' }}>Active</option>
                                                            <option value="Replaced" {{ (old('battery_status')[$key] ?? $batt->status) == 'Replaced' ? 'selected' : '' }}>Replaced</option>
                                                        </select>
                                                    </td>
                                                    <td><button type="button" class="btn btn-sm btn-danger remove-dynamic-row"><i class="ri-delete-bin-line"></i></button></td>
                                                </tr>
                                            @endforeach
                                        @elseif(!empty($toollist->battery))
                                            @php
                                                $oldBatteries = explode(',', $toollist->battery);
                                            @endphp
                                            @foreach($oldBatteries as $key => $b)
                                                <tr class="dynamic-item-row">
                                                    <td><input type="text" name="battery_number[]" class="form-control" placeholder="Battery Number" value="{{ old('battery_number')[$key] ?? $b }}"></td>
                                                    <td><input type="text" name="battery_company[]" class="form-control" placeholder="Company Name" value="{{ old('battery_company')[$key] ?? '' }}"></td>
                                                    <td><input type="date" name="battery_issue_date[]" class="form-control" value="{{ old('battery_issue_date')[$key] ?? '' }}"></td>
                                                    <td><input type="text" name="battery_running_period[]" class="form-control" placeholder="e.g. 6 months" value="{{ old('battery_running_period')[$key] ?? '' }}"></td>
                                                    <td>
                                                        <select name="battery_status[]" class="form-select">
                                                            <option value="Active">Active</option>
                                                            <option value="Replaced">Replaced</option>
                                                        </select>
                                                    </td>
                                                    <td><button type="button" class="btn btn-sm btn-danger remove-dynamic-row"><i class="ri-delete-bin-line"></i></button></td>
                                                </tr>
                                            @endforeach
                                        @else
                                            <tr class="dynamic-item-row">
                                                <td><input type="text" name="battery_number[]" class="form-control" placeholder="Battery Number"></td>
                                                <td><input type="text" name="battery_company[]" class="form-control" placeholder="Company Name"></td>
                                                <td><input type="text" name="battery_issue_date[]" class="form-control datepicker"></td>
                                                <td><input type="text" name="battery_running_period[]" class="form-control" placeholder="e.g. 6 months"></td>
                                                <td>
                                                    <select name="battery_status[]" class="form-select">
                                                        <option value="Active">Active</option>
                                                        <option value="Replaced">Replaced</option>
                                                    </select>
                                                </td>
                                                <td><button type="button" class="btn btn-sm btn-danger remove-dynamic-row"><i class="ri-delete-bin-line"></i></button></td>
                                            </tr>
                                        @endif
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Submit --}}
            <div class="mt-4 text-end">
                @if(request('redirect_to') == 'performance' && $toollist->vehicle_id)
                <a href="{{ route('vehicle-performance.show', $toollist->vehicle_id) }}" class="btn btn-secondary me-2">
                    <i class="ri-close-line"></i> Cancel
                </a>
                @else
                <a href="{{ route('vehicle-tool-list.index') }}" class="btn btn-secondary me-2">
                    <i class="ri-close-line"></i> Cancel
                </a>
                @endif
                <button type="submit" class="btn btn-primary">
                    <i class="ri-save-line"></i> Update Toollist
                </button>
            </div>

        </div>
    </div>

    {!! Form::close() !!}
</div>
@endsection

@push('footer_script')
<script src="{{ asset('theme/assets/vendor/daterange/daterange.js') }}"></script>
<script>
    // Datepicker
    function initDatepickers() {
        $('.datepicker').daterangepicker({
            singleDatePicker: true,
            minDate: moment('{{ $financial_year_start }}', 'DD-MM-YYYY'),
            maxDate: moment('{{ $financial_year_end }}', 'DD-MM-YYYY'),
            locale: { format: 'DD-MM-YYYY' }
        });
    }
    initDatepickers();

    // Number only
    $('.number').on('keyup', function () {
        this.value = this.value.replace(/\D/g, '');
    });

    // Dynamic row helper
    function makeDynamicRow(nameAttr, placeholder) {
        return `<div class="dynamic-item-row">
            <input type="text" name="${nameAttr}" class="form-control" placeholder="${placeholder}">
            <button type="button" class="btn btn-sm btn-danger remove-dynamic-row"><i class="ri-delete-bin-line"></i></button>
        </div>`;
    }

    function makeTyreRow() {
        return `<tr class="dynamic-item-row">
            <td><input type="text" name="tyre_position[]" class="form-control" placeholder="e.g. Front Left"></td>
            <td><input type="text" name="tyre_numbers[]" class="form-control" placeholder="Tyre Number"></td>
            <td><input type="text" name="tyre_companies[]" class="form-control" placeholder="Company Name"></td>
            <td><input type="text" name="tyre_issue_date[]" class="form-control datepicker"></td>
            <td><input type="number" name="tyre_running_km[]" class="form-control number" placeholder="0"></td>
            <td>
                <select name="tyre_status[]" class="form-select">
                    <option value="Active">Active</option>
                    <option value="Replaced">Replaced</option>
                </select>
            </td>
            <td><button type="button" class="btn btn-sm btn-danger remove-dynamic-row"><i class="ri-delete-bin-line"></i></button></td>
        </tr>`;
    }

    function makeBatteryRow() {
        return `<tr class="dynamic-item-row">
            <td><input type="text" name="battery_number[]" class="form-control" placeholder="Battery Number"></td>
            <td><input type="text" name="battery_company[]" class="form-control" placeholder="Company Name"></td>
            <td><input type="text" name="battery_issue_date[]" class="form-control datepicker"></td>
            <td><input type="text" name="battery_running_period[]" class="form-control" placeholder="e.g. 6 months"></td>
            <td>
                <select name="battery_status[]" class="form-select">
                    <option value="Active">Active</option>
                    <option value="Replaced">Replaced</option>
                </select>
            </td>
            <td><button type="button" class="btn btn-sm btn-danger remove-dynamic-row"><i class="ri-delete-bin-line"></i></button></td>
        </tr>`;
    }

    // Add Tyre
    $('#addTyreBtn').on('click', function () {
        $('#tyreList').append(makeTyreRow());
        initDatepickers();
    });

    // Add Battery
    $('#addBatteryBtn').on('click', function () {
        $('#batteryList').append(makeBatteryRow());
        initDatepickers();
    });

    // Add Spanner
    $('#addSpannerBtn').on('click', function () {
        $('#spannerList').append(makeDynamicRow('spanner_sizes[]', 'e.g. 17, 19, 21'));
    });

    // Remove row (delegated) - keep at least 1
    $(document).on('click', '.remove-dynamic-row', function () {
        let parent = $(this).closest('.dynamic-item-row').parent();
        if (parent.find('.dynamic-item-row').length > 1) {
            $(this).closest('.dynamic-item-row').remove();
        } else {
            $(this).closest('.dynamic-item-row').find('input').val('');
        }
    });
</script>
@endpush