@extends('layout.app')
@section('title', 'Create 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;
        }

        .badge-section {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 6px;
            min-height: 30px;
        }

        .badge-item {
            background: #e9f0fb;
            border: 1px solid #c2d3f5;
            border-radius: 20px;
            padding: 4px 10px;
            font-size: 0.82rem;
            color: #1a4dbf;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .badge-item .remove-badge {
            cursor: pointer;
            color: #e74c3c;
            font-weight: bold;
            font-size: 0.9rem;
            line-height: 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">Vehicle Tool List</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.store'],
        'class' => 'needs-validation',
        'method' => 'post',
        'autocomplete' => 'off',
        'id' => 'toollistForm',
    ]) !!}
        @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(request('vehicle_id') ? '' : 'vehicle_id', ['' => '-- Select Vehicle --'] + $vehicles, old('vehicle_id', request('vehicle_id')), [
                                    'class' => 'form-control select2',
                                    'id' => 'vehicle_id',
                                    'required',
                                    request('vehicle_id') ? 'disabled' : ''
                                ]) !!}
                                @if(request('vehicle_id'))
                                <input type="hidden" name="vehicle_id" value="{{ request('vehicle_id') }}">
                                @endif
                                <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'), [
                                    '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::now()->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') }}">
                                <div class="text-danger">{{ $errors->first('send_by') }}</div>
                            </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') }}" maxlength="10">
                                <div class="text-danger">{{ $errors->first('contact') }}</div>
                            </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') }}">
                                <div class="text-danger">{{ $errors->first('km') }}</div>
                            </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') }}" placeholder="0.00">
                                <div class="text-danger">{{ $errors->first('diesel') }}</div>
                            </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') }}" placeholder="0.00">
                                <div class="text-danger">{{ $errors->first('urea') }}</div>
                            </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') }}">
                            </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') }}">
                            </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') }}">
                            </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') }}">
                            </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') }}">
                            </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') }}">
                            </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') }}">
                            </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') }}">
                            </div>
                            <div class="col-md-3 col-6">
                                <label>Bucket</label>
                                <input type="text" name="bucket" class="form-control" value="{{ old('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') }}">
                            </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') }}">
                            </div>
                            <div class="col-md-3 col-6">
                                <label>Stopper</label>
                                <input type="text" name="stopper" class="form-control" value="{{ old('stopper') }}">
                            </div>
                            <div class="col-md-3 col-6">
                                <label>Rod</label>
                                <input type="text" name="rod" class="form-control" value="{{ old('rod') }}">
                            </div>
                            <div class="col-md-3 col-6">
                                <label>Rope</label>
                                <input type="text" name="rope" class="form-control" value="{{ old('rope') }}">
                            </div>
                            <div class="col-md-3 col-6">
                                <label>Tape</label>
                                <input type="text" name="tent" class="form-control" value="{{ old('tent') }}">
                            </div>
                            <div class="col-md-3 col-6">
                                <label>Speaker</label>
                                <input type="text" name="speaker" class="form-control" value="{{ old('speaker') }}">
                            </div>
                            <div class="col-md-3 col-6">
                                <label>Fan</label>
                                <input type="text" name="fan" class="form-control" value="{{ old('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') }}">
                            </div>
                            <div class="col-md-3 col-6">
                                <label>Apron</label>
                                <input type="text" name="apron" class="form-control" value="{{ old('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') }}">
                            </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') }}">
                            </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') }}">
                            </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') }}">
                            </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') }}">
                            </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') }}">
                            </div>
                            <div class="col-md-3 col-6">
                                <label>Screwdriver</label>
                                <input type="text" name="screwdriver" class="form-control"
                                    value="{{ old('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') }}">
                            </div>
                            <div class="col-md-3 col-6">
                                <label>Stepney</label>
                                <input type="text" name="stepney" class="form-control" value="{{ old('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') }}">
                            </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">
                            @if (old('spanner_sizes'))
                                @foreach (old('spanner_sizes') as $s)
                                    <div class="dynamic-item-row">
                                        <input type="text" name="spanner_sizes[]" class="form-control"
                                            value="{{ $s }}" 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
                            @else
                                <div class="dynamic-item-row">
                                    <input type="text" name="spanner_sizes[]" class="form-control"
                                        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>
                            @endif
                        </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') }}</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 (old('tyre_numbers'))
                                @foreach (old('tyre_numbers') 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="{{ $t }}"></td>
                                        <td><input type="text" name="tyre_companies[]" class="form-control" placeholder="Company Name" value="{{ old('tyre_companies')[$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" {{ (old('tyre_status')[$key] ?? '') == 'Active' ? 'selected' : '' }}>Active</option>
                                                <option value="Replaced" {{ (old('tyre_status')[$key] ?? '') == '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
                            @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 (old('battery_number'))
                                @foreach (old('battery_number') as $key => $b)
                                    <tr class="dynamic-item-row">
                                        <td><input type="text" name="battery_number[]" class="form-control" placeholder="Battery Number" value="{{ $b }}"></td>
                                        <td><input type="text" name="battery_company[]" class="form-control" placeholder="Company Name" value="{{ old('battery_company')[$key] ?? '' }}"></td>
                                        <td><input type="text" name="battery_issue_date[]" class="form-control datepicker" 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" {{ (old('battery_status')[$key] ?? '') == 'Active' ? 'selected' : '' }}>Active</option>
                                                <option value="Replaced" {{ (old('battery_status')[$key] ?? '') == '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
                            @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>

<div class="mt-4 text-end">
    @if(request('redirect_to') == 'performance' && request('vehicle_id'))
    <a href="{{ route('vehicle-performance.show', request('vehicle_id')) }}" class="btn btn-secondary me-2">
        Cancel
    </a>
    @else
    <a href="{{ route('vehicle-tool-list.index') }}" class="btn btn-secondary me-2">
        Cancel
    </a>
    @endif
    <button type="submit" class="btn btn-primary">
        <i class="ri-save-line"></i> Save 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 add/remove 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)
        $(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