@extends('layout.app')
@section('title', 'Edit 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; }
    .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">Edit 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.update', $lifespan->id],
        'method' => 'PUT',
        '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', $lifespan->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', $lifespan->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', $lifespan->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="FL / FR / RL / RR / Stepney"
                                value="{{ old('position', $lifespan->position) }}">
                        </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)</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', $lifespan->new_unique_no) }}">
                        </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)</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', $lifespan->old_unique_no) }}">
                        </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">

                        <div class="col-md-6 col-12">
                            <label class="form-label" for="fitted_date">
                                 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', $lifespan->fitted_date ? $lifespan->fitted_date->format('d-m-Y') : '') }}"
                                    required placeholder="DD-MM-YYYY">
                            </div>
                            <div class="text-danger">{{ $errors->first('fitted_date') }}</div>
                        </div>

                        <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" min="0"
                                class="form-control {{ $errors->has('fitted_km') ? 'is-invalid' : '' }}"
                                placeholder="e.g. 45000"
                                value="{{ old('fitted_km', $lifespan->fitted_km) }}">
                            <div class="text-danger">{{ $errors->first('fitted_km') }}</div>
                        </div>

                        <div class="col-md-6 col-12">
                            <label class="form-label" for="removed_date">
                                Removed / Returned On
                                <small class="text-muted">(blank = 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', $lifespan->removed_date ? $lifespan->removed_date->format('d-m-Y') : '') }}"
                                    placeholder="DD-MM-YYYY">
                            </div>
                            <div class="text-danger">{{ $errors->first('removed_date') }}</div>
                        </div>

                        <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" min="0"
                                class="form-control {{ $errors->has('removed_km') ? 'is-invalid' : '' }}"
                                placeholder="e.g. 83000"
                                value="{{ old('removed_km', $lifespan->removed_km) }}">
                            <div class="text-danger">{{ $errors->first('removed_km') }}</div>
                        </div>

                        <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', $lifespan->reason), [
                                'class' => 'form-control select2', 'id' => 'reason',
                            ]) !!}
                        </div>

                        <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', $lifespan->status), [
                                'class' => 'form-control select2', 'id' => 'status', 'required' => true,
                            ]) !!}
                        </div>

                        <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', $lifespan->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>

                        <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...">{{ old('remark', $lifespan->remark) }}</textarea>
                        </div>

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

        {{-- ── SECTION 3: Lifespan Summary ─────────────────────── --}}
        <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">

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

                    <div class="lifespan-badge-box">
                        <div class="badge-value" id="display_km">
                            {{ $lifespan->lifespan_km ? number_format($lifespan->lifespan_km) . ' km' : '—' }}
                        </div>
                        <div class="badge-label">KM Covered</div>
                        <input type="hidden" name="lifespan_km" id="lifespan_km"
                            value="{{ old('lifespan_km', $lifespan->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>{{-- end row --}}

    <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> Update Entry
        </button>
    </div>

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

@push('footer_script')
<script src="{{ asset('theme/assets/vendor/daterange/daterange.js') }}"></script>
<script>
    $('.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'
        }
    });

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

    $('.removed-datepicker').on('cancel.daterangepicker', function() {
        $(this).val('');
        calculateLifespan();
    });

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

        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('—');
        }
    }

    $('#fitted_date, #removed_date').on('apply.daterangepicker', calculateLifespan);
    $('#fitted_km, #removed_km').on('input', calculateLifespan);

    // AJAX load brands — then pre-select current brand
    $('#product_id').on('change', function() {
        let productId = $(this).val();
        let currentBrand = '{{ $lifespan->brand_id }}';
        let brandSelect = $('#brand_id');

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

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

        $.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 (currentBrand) {
                    brandSelect.val(currentBrand);
                    currentBrand = null; // only pre-select once on load
                }
                brandSelect.trigger('change');
            },
            error: function() {
                brandSelect.empty().append('<option value="">-- Select Brand --</option>').trigger('change');
            }
        });
    });

    // On load: trigger product to reload brands and pre-select
    $(document).ready(function() {
        if ($('#product_id').val()) {
            $('#product_id').trigger('change');
        }
    });
</script>
@endpush