@extends('layout.app')
@section('title', 'Add Accident & Claims')

@push('header_script')
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/daterange/daterange.css') }}">
    <style>
        :root {
            --bg: #F4F5F7;
            --surface: #FFFFFF;
            --ink: #16212B;
            --ink-soft: #5C6B78;
            --muted: #8B99A6;
            --line: #E1E5E9;
            --brand: #2B5C78;
            --brand-deep: #16374A;
            --amber: #C4832F;
            --green: #3D8A5C;
            --red: #BF4638;
        }

        body { background-color: var(--bg); }

        /* ---------- Stepper ---------- */
        .step-item {
            position: relative;
            flex: 1;
            text-align: center;
        }
        .step-item:not(:last-child):after {
            content: "";
            position: absolute;
            top: 20px;
            left: 50%;
            width: 100%;
            height: 2px;
            background-color: var(--line);
            z-index: 1;
        }
        .step-item.active:not(:last-child):after {
            background-color: var(--brand);
        }
        .step-item.done:not(:last-child):after {
            background-color: var(--green);
        }
        .step-circle {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #EDF1F4;
            color: var(--muted);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 10px;
            position: relative;
            z-index: 2;
            font-size: 1.2rem;
            font-weight: bold;
            border: 1px solid var(--line);
        }
        /* subtle color identity per stage while still "to-do" */
        .step-item:nth-child(1) .step-circle { color: #2B5C78; }
        .step-item:nth-child(2) .step-circle { color: #6C6FA6; }
        .step-item:nth-child(3) .step-circle { color: var(--amber); }
        .step-item:nth-child(4) .step-circle { color: var(--green); }

        .step-item.active .step-circle {
            background-color: var(--brand);
            color: #fff;
            border-color: var(--brand);
            box-shadow: 0 0 0 4px rgba(43,92,120,0.15);
        }
        .step-item.done .step-circle {
            background-color: var(--green);
            color: #fff;
            border-color: var(--green);
        }
        .step-label {
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--muted);
        }
        .step-item.active .step-label { color: var(--brand); }
        .step-item.done .step-label { color: var(--green); }

        /* ---------- Cards ---------- */
        .card {
            border: 1px solid var(--line);
            border-radius: 12px;
            box-shadow: none;
        }
        .card-header.bg-white {
            background-color: var(--surface) !important;
            border-bottom: 1px solid var(--line);
            border-radius: 12px 12px 0 0 !important;
        }
        .card-title { color: var(--ink); font-weight: 700; }

        /* ---------- Section headers ---------- */
        .form-section-header {
            font-size: 0.78rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--brand-deep);
            margin-top: 1.75rem;
            margin-bottom: 0.75rem;
            padding-left: 10px;
            border-left: 3px solid var(--brand);
        }

        /* ---------- Inputs / selects / textareas ---------- */
        .form-label { font-size: 0.85rem; font-weight: 500; color: var(--ink); }
        .form-control, .form-select {
            border: 1px solid var(--line);
            border-radius: 8px;
            color: var(--ink);
        }
        .form-control:focus, .form-select:focus {
            border-color: var(--brand);
            box-shadow: 0 0 0 3px rgba(43,92,120,0.12);
        }
        .form-control[readonly], .form-control[disabled] {
            background-color: #F8F9FA !important;
            color: var(--muted) !important;
        }
        .select2-container--default .select2-selection--single {
            border: 1px solid var(--line) !important;
            border-radius: 8px !important;
            height: 31px !important;
        }
        .select2-container--default.select2-container--focus .select2-selection--single {
            border-color: var(--brand) !important;
        }

        /* ---------- Conditional sub-sections, one accent color each ---------- */
        .border-section {
            border: 1px solid var(--line);
            border-left: 3px solid var(--muted);
            border-radius: 10px;
            padding: 1rem;
            background-color: var(--surface);
            margin-bottom: 1rem;
        }
        #third_party_section, #injuries_section, #police_section {
            margin-top: 0.75rem;
            padding-top: 0.75rem;
            border-top: 1px dashed var(--line);
        }
        .col-md-6:has(#third_party_involved_toggle) .border-section,
        div:has(> #third_party_involved_toggle) { border-left-color: var(--brand); }

        /* Fallback accent colors keyed by toggle id, in case :has() isn't supported by the browser */
        .border-section:nth-of-type(1) { border-left-color: var(--brand); }
        .border-section:nth-of-type(2) { border-left-color: var(--red); }

        /* Police (FIR) section reuses .border-section directly, give it the amber accent */
        .form-section-header + .border-section { border-left-color: var(--amber); }

        /* ---------- Switches ---------- */
        .form-check-input:checked {
            background-color: var(--brand);
            border-color: var(--brand);
        }
        .form-check-input:focus {
            box-shadow: 0 0 0 3px rgba(43,92,120,0.15);
        }
        .form-check-label.fw-bold { color: var(--ink); }

        /* ---------- System info (auto-filled) panel ---------- */
        .bg-light.p-2.rounded {
            background-color: #EFF3F5 !important;
            border: 1px dashed var(--line);
        }

        /* ---------- Buttons ---------- */
        .btn-primary {
            background-color: var(--brand);
            border-color: var(--brand);
        }
        .btn-primary:hover, .btn-primary:focus {
            background-color: var(--brand-deep);
            border-color: var(--brand-deep);
        }
        .btn-outline-secondary {
            color: var(--ink-soft);
            border-color: var(--line);
        }
        .btn-outline-secondary:hover {
            background-color: var(--surface);
            color: var(--brand);
            border-color: var(--brand);
        }

        /* ---------- Breadcrumb ---------- */
        .breadcrumb-item a { color: var(--brand); text-decoration: none; }
        .breadcrumb-item.active { color: var(--muted); }

        .text-danger.small { font-size: 0.78rem; }
    </style>
@endpush

@section('content')
<div class="app-hero-header d-flex align-items-center">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{{ route('accident-claims.index') }}">Accident & Claims</a>
        </li>
        <li class="breadcrumb-item active">Add Record</li>
    </ol>
    <div class="ms-auto">
        <a href="{{ route('accident-claims.index') }}" class="btn btn-sm btn-outline-secondary">
            <i class="ri-arrow-left-line"></i> Back
        </a>
    </div>
</div>

<div class="app-body">
    <div class="row gx-3">
        <div class="col-sm-12">
            <!-- Stepper Container -->
            <div class="card mb-3">
                <div class="card-body py-4">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="step-item active">
                            <div class="step-circle"><i class="ri-car-line"></i></div>
                            <div class="step-label">Stage 1: Accident Report</div>
                        </div>
                        <div class="step-item">
                            <div class="step-circle"><i class="ri-file-text-line"></i></div>
                            <div class="step-label">Stage 2: Claim Filing</div>
                        </div>
                        <div class="step-item">
                            <div class="step-circle"><i class="ri-checkbox-circle-line"></i></div>
                            <div class="step-label">Stage 3: Claim Processing</div>
                        </div>
                        <div class="step-item">
                            <div class="step-circle"><i class="ri-tools-line"></i></div>
                            <div class="step-label">Stage 4: Repair & Closure</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Form Card -->
            <div class="card">
                <div class="card-header bg-white">
                    <h5 class="card-title mb-0">Add Accident & Claims</h5>
                    <p class="text-muted small mb-0">One accident record, updated across four stages.</p>
                </div>
                <div class="card-body">
                    {!! Form::open(['route' => 'accident-claims.store', 'method' => 'post', 'autocomplete' => 'off', 'id' => 'accidentForm', 'files' => true]) !!}

                    <div class="form-section-header">Incident Details</div>
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label">Vehicle No. <span class="text-danger">*</span></label>
                            <select class="form-select form-select-sm select2" name="vehicle_id" id="vehicle_id" required>
                                <option value="">-- Select Vehicle --</option>
                                @foreach($vehicles as $vehicle)
                                    <option value="{{ $vehicle->id }}" {{ old('vehicle_id') == $vehicle->id ? 'selected' : '' }}>{{ $vehicle->vehicle_no }}</option>
                                @endforeach
                            </select>
                            <div class="text-danger small">{{$errors->first('vehicle_id')}}</div>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Driver Name <span class="text-danger">*</span></label>
                            <select class="form-select form-select-sm select2" name="driver_id" id="driver_id" required>
                                <option value="">-- Select Driver --</option>
                                @foreach($drivers as $driver)
                                    <option value="{{ $driver->id }}" {{ old('driver_id') == $driver->id ? 'selected' : '' }}>{{ $driver->employee_name }}</option>
                                @endforeach
                            </select>
                            <div class="text-danger small">{{$errors->first('driver_id')}}</div>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Accident Date & Time <span class="text-danger">*</span></label>
                            <input type="text" class="form-control form-control-sm datetimepicker" name="accident_datetime" id="accident_datetime" required value="{{ old('accident_datetime') }}">
                            <div class="text-danger small">{{$errors->first('accident_datetime')}}</div>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Location / Route <span class="text-danger">*</span></label>
                            <input type="text" class="form-control form-control-sm" name="location" id="location" required value="{{ old('location') }}" placeholder="e.g. NH-48, near Beawar">
                            <div class="text-danger small">{{$errors->first('location')}}</div>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Accident Type <span class="text-danger">*</span></label>
                            <select class="form-select form-select-sm select2" name="accident_type" id="accident_type" required>
                                <option value="">-- Select --</option>
                                <option value="Collision" {{ old('accident_type') == 'Collision' ? 'selected' : '' }}>Collision</option>
                                <option value="Rollover" {{ old('accident_type') == 'Rollover' ? 'selected' : '' }}>Rollover</option>
                                <option value="Fire" {{ old('accident_type') == 'Fire' ? 'selected' : '' }}>Fire</option>
                                <option value="Theft" {{ old('accident_type') == 'Theft' ? 'selected' : '' }}>Theft</option>
                                <option value="Natural Calamity" {{ old('accident_type') == 'Natural Calamity' ? 'selected' : '' }}>Natural Calamity</option>
                                <option value="Other" {{ old('accident_type') == 'Other' ? 'selected' : '' }}>Other</option>
                            </select>
                            <div class="text-danger small">{{$errors->first('accident_type')}}</div>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Severity <span class="text-danger">*</span></label>
                            <select class="form-select form-select-sm select2" name="severity" id="severity" required>
                                <option value="">-- Select --</option>
                                <option value="Minor" {{ old('severity') == 'Minor' ? 'selected' : '' }}>Minor</option>
                                <option value="Major" {{ old('severity') == 'Major' ? 'selected' : '' }}>Major</option>
                                <option value="Total Loss" {{ old('severity') == 'Total Loss' ? 'selected' : '' }}>Total Loss</option>
                            </select>
                            <div class="text-danger small">{{$errors->first('severity')}}</div>
                        </div>

                        <div class="col-12">
                            <label class="form-label">Description <span class="text-danger">*</span></label>
                            <textarea class="form-control form-control-sm" name="description" id="description" rows="3" required placeholder="What happened...">{{ old('description') }}</textarea>
                            <div class="text-danger small">{{$errors->first('description')}}</div>
                        </div>

                        <div class="col-12">
                            <label class="form-label">Photos / Documents <span class="text-muted">(Optional, multiple)</span></label>
                            <input type="file" class="form-control form-control-sm" name="photos[]" multiple>
                            <small class="text-muted">Accident scene and vehicle damage photos</small>
                            <div class="text-danger small">{{$errors->first('photos')}}</div>
                        </div>
                    </div>

                    <!-- Third Party & Injuries Section -->
                    <div class="form-section-header">Third Party & Injuries</div>

                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="border-section h-100">
                                <div class="form-check form-switch mb-2">
                                    <input class="form-check-input" type="checkbox" id="third_party_involved_toggle" onchange="toggleThirdPartySection()">
                                    <label class="form-check-label fw-bold" for="third_party_involved_toggle">Third-Party Involved</label>
                                    <input type="hidden" name="third_party_involved" id="third_party_involved" value="0">
                                </div>

                                <div id="third_party_section" style="display: none;">
                                    <div class="row g-2">
                                        <div class="col-md-6">
                                            <label class="form-label small">TP Vehicle No.</label>
                                            <input type="text" class="form-control form-control-sm" name="tp_vehicle_no" value="{{ old('tp_vehicle_no') }}">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label small">TP Driver Name</label>
                                            <input type="text" class="form-control form-control-sm" name="tp_driver_name" value="{{ old('tp_driver_name') }}">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label small">TP Insurance Co.</label>
                                            <input type="text" class="form-control form-control-sm" name="tp_insurance_co" value="{{ old('tp_insurance_co') }}">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label small">TP Contact No.</label>
                                            <input type="text" class="form-control form-control-sm" name="tp_contact_no" value="{{ old('tp_contact_no') }}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="border-section h-100">
                                <div class="form-check form-switch mb-2">
                                    <input class="form-check-input" type="checkbox" id="injuries_toggle" onchange="toggleInjuriesSection()">
                                    <label class="form-check-label fw-bold" for="injuries_toggle">Injuries Reported</label>
                                    <input type="hidden" name="injuries" id="injuries" value="0">
                                </div>

                                <div id="injuries_section" style="display: none;">
                                    <div class="row g-2">
                                        <div class="col-md-6">
                                            <label class="form-label small">Person Type</label>
                                            <select class="form-select form-select-sm select2" name="injury_person_type">
                                                <option value="">-- Select --</option>
                                                <option value="Driver">Driver</option>
                                                <option value="Third-Party">Third-Party</option>
                                                <option value="Pedestrian">Pedestrian</option>
                                                <option value="Both">Both</option>
                                            </select>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label small">Hospital Name</label>
                                            <input type="text" class="form-control form-control-sm" name="hospital_name" value="{{ old('hospital_name') }}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Police Case Details -->
                    <div class="form-section-header">Police Case (FIR)</div>
                    <div class="border-section">
                        <div class="form-check form-switch mb-2">
                            <input class="form-check-input" type="checkbox" id="police_case_filed_toggle" onchange="togglePoliceSection()">
                            <label class="form-check-label fw-bold" for="police_case_filed_toggle">Police Case Filed</label>
                            <input type="hidden" name="police_case_filed" id="police_case_filed" value="0">
                        </div>

                        <div id="police_section" style="display: none;">
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <label class="form-label small">FIR Number</label>
                                    <input type="text" class="form-control form-control-sm" name="fir_number" value="{{ old('fir_number') }}">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label small">Police Station</label>
                                    <input type="text" class="form-control form-control-sm" name="police_station" value="{{ old('police_station') }}">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label small">FIR Date</label>
                                    <input type="text" class="form-control form-control-sm datepicker" name="fir_date" value="{{ old('fir_date') }}">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- System Info (Read-only) -->
                    <div class="row g-3 mt-2 bg-light p-2 rounded">
                        <div class="col-md-6">
                            <label class="form-label small text-muted">Reported By</label>
                            <input type="text" class="form-control form-control-sm bg-white" readonly disabled value="{{ auth()->user()->name ?? 'System' }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small text-muted">Reported Date & Time</label>
                            <input type="text" class="form-control form-control-sm bg-white" readonly disabled value="{{ date('d-M-Y H:i') }}">
                        </div>
                    </div>

                    <div class="col-xl-12 col-md-12 col-12 mt-4 text-end">
                        <button class="btn btn-primary btn-sm px-4" type="submit">Save & Continue <i class="ri-arrow-right-line"></i></button>
                    </div>

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

@push('footer_script')
    <script src="{{ asset('theme/assets/vendor/daterange/daterange.js') }}"></script>
    <script>
        $(document).ready(function() {
            // Init theme datetime picker for accident time
            $('.datetimepicker').daterangepicker({
                singleDatePicker: true,
                timePicker: true,
                timePicker24Hour: true,
                locale: { format: 'DD-MMM-YYYY HH:mm' }
            });

            // Init standard datepicker for FIR Date
            $('.datepicker').daterangepicker({
                singleDatePicker: true,
                locale: { format: 'DD-MMM-YYYY' }
            });

            // Auto-fetch driver details on vehicle selection change
            $('#vehicle_id').on('change', function() {
                var vehicleId = $(this).val();
                if (vehicleId) {
                    $.ajax({
                        url: '{{ url('vehicle/driver-details') }}/' + vehicleId,
                        type: 'GET',
                        dataType: 'json',
                        success: function(data) {
                            if (data && data.driver) {
                                $('#driver_id').val(data.driver.id).trigger('change');
                            } else {
                                $('#driver_id').val('').trigger('change');
                            }
                        }
                    });
                }
            });
        });

        function toggleThirdPartySection() {
            var check = $('#third_party_involved_toggle').is(':checked');
            $('#third_party_involved').val(check ? '1' : '0');
            if (check) {
                $('#third_party_section').slideDown();
            } else {
                $('#third_party_section').slideUp();
                $('#third_party_section find("input")').val('');
            }
        }

        function toggleInjuriesSection() {
            var check = $('#injuries_toggle').is(':checked');
            $('#injuries').val(check ? '1' : '0');
            if (check) {
                $('#injuries_section').slideDown();
            } else {
                $('#injuries_section').slideUp();
                $('#injuries_section select').val('');
                $('#injuries_section input').val('');
            }
        }

        function togglePoliceSection() {
            var check = $('#police_case_filed_toggle').is(':checked');
            $('#police_case_filed').val(check ? '1' : '0');
            if (check) {
                $('#police_section').slideDown();
            } else {
                $('#police_section').slideUp();
                $('#police_section input').val('');
            }
        }
    </script>
@endpush