@extends('layout.app')
@section('title', 'Add Lifespan Entry')

@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;
        }

        .readonly-calc {
            background-color: #f0f4f8 !important;
            font-weight: 600;
            color: #1e40af;
        }

        .lifespan-badge-box {
            background: #f0f4f8;
            border: 1px dashed #cbd5e1;
            border-radius: 8px;
            padding: 12px 16px;
            text-align: center;
        }

        .lifespan-badge-box .badge-value {
            font-size: 1.4rem;
            font-weight: 700;
            color: #1d4ed8;
        }

        .lifespan-badge-box .badge-label {
            font-size: 0.75rem;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
    </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">
                <a href="{{ route('vms.lifespan.index') }}">Lifespan Tracker</a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">Add Lifespan Entry</li>
        </ol>
        <div class="ms-auto d-lg-flex flex-row">
            <a href="{{ route('vms.lifespan.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' => 'vms.lifespan.store',
            'method' => 'POST',
            'class' => 'needs-validation',
            'autocomplete' => 'off',
            'id' => 'lifespanForm',
        ]) !!}

        <div class="row gx-3">

            {{-- ── SECTION 1: Vehicle & Component ─────────────────── --}}
            <div class="col-12">
                <div class="card mb-3">
                    <div class="card-body">
                        <div class="form-section-title">
                            <i class="ri-truck-line"></i> Vehicle & Component Details
                        </div>
                        <div class="row g-3">
                            <div class="col-md-4 col-12">
                                <label class="form-label" for="vehicle_id">
                                    Vehicle No <span class="text-danger">*</span>
                                </label>
                                {!! Form::select('vehicle_id', ['' => '-- Select Vehicle --'] + $vehicles, old('vehicle_id'), [
                                    'class' => 'form-control select2 ' . ($errors->has('vehicle_id') ? 'is-invalid' : ''),
                                    'id' => 'vehicle_id',
                                    'required' => true,
                                ]) !!}
                                <div class="text-danger">{{ $errors->first('vehicle_id') }}</div>
                            </div>
                            <div class="col-md-4 col-12">
                                <label class="form-label" for="product_id">
                                    Product / Component <span class="text-danger">*</span>
                                </label>
                                {!! Form::select('product_id', ['' => '-- Select Product --'] + $products, old('product_id'), [
                                    'class' => 'form-control select2 ' . ($errors->has('product_id') ? 'is-invalid' : ''),
                                    'id' => 'product_id',
                                    'required' => true,
                                ]) !!}
                                <div class="text-danger">{{ $errors->first('product_id') }}</div>
                            </div>
                            <div class="col-md-4 col-12">
                                <label class="form-label" for="brand_id">Brand</label>
                                {!! Form::select('brand_id', ['' => '-- Select Brand --'] + $brands, old('brand_id'), [
                                    'class' => 'form-control select2 ' . ($errors->has('brand_id') ? 'is-invalid' : ''),
                                    'id' => 'brand_id',
                                ]) !!}
                                <div class="text-danger">{{ $errors->first('brand_id') }}</div>
                            </div>
                            <div class="col-md-4 col-12">
                                <label class="form-label" for="position">Position</label>
                                <input type="text" name="position" id="position" class="form-control"
                                    placeholder="e.g. FL / FR / RL / RR / Stepney (optional)" value="{{ old('position') }}">
                                <div class="text-danger">{{ $errors->first('position') }}</div>
                            </div>


                            <div class="col-md-4 col-12">
                                <label class="form-label" for="new_unique_no">
                                    New Unique No
                                    <small class="text-muted">(Serial of NEW part fitted)</small>
                                </label>
                                <input type="text" name="new_unique_no" id="new_unique_no" class="form-control"
                                    placeholder="e.g. 2509N150035" value="{{ old('new_unique_no') }}">
                                <div class="text-danger">{{ $errors->first('new_unique_no') }}</div>
                            </div>

                            <div class="col-md-4 col-12">
                                <label class="form-label" for="old_unique_no">
                                    Old Unique No
                                    <small class="text-muted">(Serial of OLD part removed)</small>
                                </label>
                                <input type="text" name="old_unique_no" id="old_unique_no" class="form-control"
                                    placeholder="e.g. 23082L09293" value="{{ old('old_unique_no') }}">
                                <div class="text-danger">{{ $errors->first('old_unique_no') }}</div>
                            </div>

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

            {{-- ── SECTION 2: Dates & KM ───── --}}
            <div class="col-md-8">
                <div class="card mb-3 h-100">
                    <div class="card-body">
                        <div class="form-section-title">
                            <i class="ri-calendar-check-line"></i> Fitting & Removal Details
                        </div>
                        <div class="row g-3">

                            {{-- Fitted Date --}}
                            <div class="col-md-6 col-12">
                                <label class="form-label" for="fitted_date">
                                    Fitted / Issued On <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" name="fitted_date" id="fitted_date"
                                        class="form-control datepicker {{ $errors->has('fitted_date') ? 'is-invalid' : '' }}"
                                        value="{{ old('fitted_date') }}" required placeholder="DD-MM-YYYY">
                                </div>
                                <div class="text-danger">{{ $errors->first('fitted_date') }}</div>
                            </div>

                            {{-- Fitted KM --}}
                            <div class="col-md-6 col-12">
                                <label class="form-label" for="fitted_km">
                                    Odometer at Fitting (KM)
                                </label>
                                <input type="number" name="fitted_km" id="fitted_km"
                                    class="form-control {{ $errors->has('fitted_km') ? 'is-invalid' : '' }}"
                                    placeholder="e.g. 45000" min="0" value="{{ old('fitted_km') }}">
                                <div class="text-danger">{{ $errors->first('fitted_km') }}</div>
                            </div>

                            {{-- Removed Date --}}
                            <div class="col-md-6 col-12">
                                <label class="form-label" for="removed_date">
                                    Removed / Returned On
                                    <small class="text-muted">(leave blank if still active)</small>
                                </label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="ri-calendar-todo-line"></i></span>
                                    <input type="text" name="removed_date" id="removed_date"
                                        class="form-control removed-datepicker {{ $errors->has('removed_date') ? 'is-invalid' : '' }}"
                                        value="{{ old('removed_date') }}" placeholder="DD-MM-YYYY">
                                </div>
                                <div class="text-danger">{{ $errors->first('removed_date') }}</div>
                            </div>

                            {{-- Removed KM --}}
                            <div class="col-md-6 col-12">
                                <label class="form-label" for="removed_km">
                                    Odometer at Removal (KM)
                                </label>
                                <input type="number" name="removed_km" id="removed_km"
                                    class="form-control {{ $errors->has('removed_km') ? 'is-invalid' : '' }}"
                                    placeholder="e.g. 83000" min="0" value="{{ old('removed_km') }}">
                                <div class="text-danger">{{ $errors->first('removed_km') }}</div>
                            </div>

                            {{-- Reason --}}
                            <div class="col-md-6 col-12">
                                <label class="form-label" for="reason">Reason for Removal</label>
                                {!! Form::select(
                                    'reason',
                                    [
                                        '' => '-- Select Reason --',
                                        'fully_used' => 'Fully Used',
                                        'driver_irresponsibility' => "Driver's Irresponsibility / Careless",
                                        'maintenance_problem' => 'Maintenance Problem',
                                        'manufacturing_defect' => 'Manufacturing Defect',
                                        'rotation' => 'Rotation / Position Change',
                                        'still_using' => 'Still Using',
                                    ],
                                    old('reason'),
                                    [
                                        'class' => 'form-control select2',
                                        'id' => 'reason',
                                    ],
                                ) !!}
                                <div class="text-danger">{{ $errors->first('reason') }}</div>
                            </div>

                            {{-- Status --}}
                            <div class="col-md-6 col-12">
                                <label class="form-label" for="status">
                                    Status <span class="text-danger">*</span>
                                </label>
                                {!! Form::select(
                                    'status',
                                    [
                                        'active' => 'Active (Still Fitted)',
                                        'removed' => 'Removed',
                                    ],
                                    old('status', 'active'),
                                    [
                                        'class' => 'form-control select2',
                                        'id' => 'status',
                                        'required' => true,
                                    ],
                                ) !!}
                                <div class="text-danger">{{ $errors->first('status') }}</div>
                            </div>

                            {{-- Reusable --}}
                            <div class="col-md-6 col-12 d-flex align-items-center">
                                <div class="form-check mt-2">
                                    <input class="form-check-input" type="checkbox" name="is_reusable" id="is_reusable"
                                        value="1" {{ old('is_reusable') ? 'checked' : '' }}>
                                    <label class="form-check-label fw-semibold" for="is_reusable">
                                        Reusable? <small class="text-muted">(Can this part be used again?)</small>
                                    </label>
                                </div>
                            </div>

                            {{-- Remark --}}
                            <div class="col-12">
                                <label class="form-label" for="remark">Remarks / Notes</label>
                                <textarea name="remark" id="remark" class="form-control" rows="2"
                                    placeholder="Any additional notes about this component...">{{ old('remark') }}</textarea>
                            </div>

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

            {{-- ── SECTION 3: Auto Calculated Lifespan ────────────── --}}
            <div class="col-md-4">
                <div class="card mb-3 h-100">
                    <div class="card-header bg-primary text-white py-2">
                        <small class="fw-bold"><i class="ri-bar-chart-box-line"></i> Lifespan Summary</small>
                    </div>
                    <div class="card-body d-flex flex-column justify-content-center gap-3">

                        {{-- Days --}}
                        <div class="lifespan-badge-box">
                            <div class="badge-value" id="display_days">—</div>
                            <div class="badge-label">Days on Vehicle</div>
                            <input type="hidden" name="lifespan_days" id="lifespan_days"
                                value="{{ old('lifespan_days') }}">
                        </div>

                        {{-- KM --}}
                        <div class="lifespan-badge-box">
                            <div class="badge-value" id="display_km">—</div>
                            <div class="badge-label">KM Covered</div>
                            <input type="hidden" name="lifespan_km" id="lifespan_km" value="{{ old('lifespan_km') }}">
                        </div>

                        <p class="text-muted small text-center mb-0">
                            <i class="ri-information-line"></i>
                            Auto-calculated when both dates and KM are entered.
                        </p>

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

        </div>

        {{-- ── Submit Buttons -------- --}}
        <div class="d-flex justify-content-end gap-2 mb-4">
            <a href="{{ route('vms.lifespan.index') }}" class="btn btn-outline-secondary">
                <i class="ri-close-line"></i> Cancel
            </a>
            <button type="submit" class="btn btn-primary btn-lg px-5">
                <i class="ri-save-line"></i> Save Entry
            </button>
        </div>

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

@push('footer_script')
    <script src="{{ asset('theme/assets/vendor/daterange/daterange.js') }}"></script>

    <script>
        // ── Datepicker init ────────────────────────────────────────
        $('.datepicker').daterangepicker({
            singleDatePicker: true,
            locale: {
                format: 'DD-MM-YYYY'
            }
        });
        $('.removed-datepicker').daterangepicker({
            singleDatePicker: true,
            autoUpdateInput: false,
            showCancelButton: true,
            locale: {
                format: 'DD-MM-YYYY',
                cancelLabel: 'Clear'
            }
        });

        // When user selects date
        $('.removed-datepicker').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('DD-MM-YYYY'));
        });

        // When user clears
        $('.removed-datepicker').on('cancel.daterangepicker', function() {
            $(this).val('');
        });
        // ── Lifespan auto-calculate ────────────────────────────────
        function calculateLifespan() {
            // Days
            let fd = $('#fitted_date').val();
            let rd = $('#removed_date').val();

            if (fd && rd) {
                let start = moment(fd, 'DD-MM-YYYY');
                let end = moment(rd, 'DD-MM-YYYY');
                let days = end.diff(start, 'days');
                let val = days >= 0 ? days : 0;
                $('#lifespan_days').val(val);
                $('#display_days').text(val + ' days');
            } else {
                $('#lifespan_days').val('');
                $('#display_days').text('—');
            }

            // KM
            let fk = parseInt($('#fitted_km').val());
            let rk = parseInt($('#removed_km').val());

            if (!isNaN(fk) && !isNaN(rk)) {
                let diff = rk - fk;
                let val = diff >= 0 ? diff : 0;
                $('#lifespan_km').val(val);
                $('#display_km').text(val.toLocaleString('en-IN') + ' km');
            } else {
                $('#lifespan_km').val('');
                $('#display_km').text('—');
            }
        }

        // Trigger on datepicker apply
        $('#fitted_date, #removed_date').on('apply.daterangepicker', function() {
            calculateLifespan();
        });

        // Trigger on KM input
        $('#fitted_km, #removed_km').on('input', function() {
            calculateLifespan();
        });

        // ── AJAX: Load brands by product ──────────────────────────
        function fetchLastActive() {
            let vehicleId = $('#vehicle_id').val();
            let productId = $('#product_id').val();
            let position = $('#position').val();

            if (!vehicleId || !productId) return;

            $.ajax({
                url: '{{ route('vms.lifespan.lastActive') }}',
                type: 'GET',
                data: {
                    vehicle_id: vehicleId,
                    product_id: productId,
                    position: position
                },
                success: function(response) {
                    if (response.success) {
                        // Auto-fill and disable
                        $('#old_unique_no').val(response.data.old_unique_no).attr('readonly', true);
                        $('#fitted_date').val(response.data.fitted_date).attr('readonly', true).css('pointer-events', 'none');
                        $('#fitted_km').val(response.data.fitted_km).attr('readonly', true);

                        // Status should be set to removed because we are replacing
                        $('#status').val('removed').trigger('change');

                        // Visual cue
                        $('#old_unique_no, #fitted_date, #fitted_km').addClass('readonly-calc');
                    } else {
                        // First Install: Clear and enable
                        $('#old_unique_no').attr('readonly', false).removeClass('readonly-calc');
                        $('#fitted_date').attr('readonly', false).css('pointer-events', 'auto').removeClass('readonly-calc');
                        $('#fitted_km').attr('readonly', false).removeClass('readonly-calc');
                        $('#status').val('active').trigger('change');
                    }
                }
            });
        }

        $('#vehicle_id, #product_id').on('change', function() {
            fetchLastActive();
        });

        $('#position').on('blur', function() {
            fetchLastActive();
        });

        $('#product_id').on('change', function() {

            let productId = $(this).val();
            let brandSelect = $('#brand_id');

            brandSelect.empty().append('<option value="">-- Loading... --</option>');

            if (!productId) {
                brandSelect.empty().append('<option value="">-- Select Brand --</option>');
                if (typeof brandSelect.trigger === 'function') brandSelect.trigger('change');
                return;
            }

            $.ajax({
                url: '{{ url('vms/lifespan/brands') }}/' + productId,
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    brandSelect.empty().append('<option value="">-- Select Brand --</option>');
                    $.each(data, function(i, brand) {
                        brandSelect.append(
                            '<option value="' + brand.id + '">' + brand.brand_name +
                            '</option>'
                        );
                    });
                    if (data.length === 1) {
                        brandSelect.val(data[0].id);
                    }
                    brandSelect.trigger('change');
                },
                error: function() {
                    brandSelect.empty().append('<option value="">-- Select Brand --</option>');
                    brandSelect.trigger('change');
                }
            });
        });

        // ── On load: restore old values if validation failed ──────
        $(document).ready(function() {
            @if (old('lifespan_days'))
                $('#display_days').text('{{ old('lifespan_days') }} days');
            @endif
            @if (old('lifespan_km'))
                $('#display_km').text('{{ number_format(old('lifespan_km')) }} km');
            @endif
            @if (old('product_id'))
                $('#product_id').trigger('change');
            @endif
        });
    </script>
@endpush