@extends('layout.app')
@section('title', 'Assign Part to Truck')

@push('header_script')
    <link rel="stylesheet" href="{{ asset('theme/assets/select2/select2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/daterange/daterange.css') }}">
    <link rel="stylesheet" href="{{ asset('theme/assets/sweetalert/sweet-alert.css') }}" type="text/css">
    <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
    <style>
        .page-card {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 24px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
        }
        .page-header-title {
            color: #0f172a;
            font-weight: 700;
            font-size: 1.25rem;
            margin-bottom: 4px;
        }
        .page-header-sub {
            color: #64748b;
            font-size: 0.875rem;
        }
        .form-section-title {
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #475569;
            margin-bottom: 8px;
        }

        /* Type toggle pills */
        .type-toggle-card {
            border: 1.5px solid #e2e8f0;
            background: #ffffff;
            border-radius: 10px;
            padding: 12px 14px;
            cursor: pointer;
            transition: all 0.2s ease-in-out;
            display: block;
            height: 100%;
        }
        .type-toggle-card:hover {
            border-color: #cbd5e1;
        }
        .type-toggle-card:has(input:checked) {
            border-color: #2563eb;
            background-color: #eff6ff;
            box-shadow: 0 2px 4px rgba(37, 99, 235, 0.1);
        }

        /* Detail preview table styling */
        .preview-card {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        }
        .detail-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #f1f5f9;
            font-size: 0.9rem;
        }
        .detail-row:last-child {
            border-bottom: none;
        }
        .detail-label {
            color: #475569;
            font-weight: 500;
        }
        .detail-value {
            color: #0f172a;
            font-weight: 600;
            text-align: right;
        }

        .btn-submit-action {
            background: linear-gradient(135deg, #1e293b, #0f172a);
            color: #ffffff;
            font-weight: 600;
            border-radius: 8px;
            padding: 12px 20px;
            border: none;
            transition: all 0.2s;
        }
        .btn-submit-action:hover {
            background: #020617;
            color: #ffffff;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.15);
        }
    </style>
@endpush

@section('content')
    <div class="app-hero-header d-flex align-items-center mb-3">
        <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="javascript:void(0);">Fleet Management</a></li>
            <li class="breadcrumb-item"><a href="{{ route('parts-inventory.assign-page') }}">Truck Parts & Inventory</a></li>
            <li class="breadcrumb-item active" aria-current="page">Assign Part</li>
        </ol>
    </div>

    <div class="app-body">
        <div class="row g-4">
            <!-- LEFT FORM COLUMN -->
            <div class="col-lg-7">
                <div class="page-card">
                    <div class="d-flex align-items-center justify-content-between mb-4 border-bottom pb-3">
                        <div>
                            <h4 class="page-header-title">Assign Part to Truck</h4>
                            <p class="page-header-sub mb-0">Fit physical warehouse inventory onto a specific truck and position.</p>
                        </div>
                        <a href="{{ route('parts-inventory.assign-page') }}" class="btn btn-sm btn-outline-secondary">
                            <i class="ri-arrow-left-line me-1"></i> Back
                        </a>
                    </div>

                    <form id="formAssign">
                        @csrf
                        <!-- Step 1: Target Vehicle & Category -->
                        <div class="mb-4">
                            <label class="form-section-title">Step 1: Vehicle & Category</label>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label text-muted small fw-bold">Truck <span class="text-danger">*</span></label>
                                    <select name="vehicle_id" class="form-select select2" id="vehicle_id" required>
                                        <option value="">Select truck...</option>
                                        @foreach($vehicles as $veh)
                                            <option value="{{ $veh->id }}">{{ $veh->vehicle_no }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label text-muted small fw-bold">Part Category <span class="text-danger">*</span></label>
                                    <select name="category_id" class="form-select select2" id="category_id" required>
                                        <option value="">Select Category...</option>
                                        @foreach($categories as $cat)
                                            <option value="{{ $cat->id }}" data-has-position="{{ $cat->has_position ? '1' : '0' }}">{{ $cat->category_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>

                        <!-- Position (Conditionally Shown) -->
                        <div class="mb-4" id="positionContainer" style="display: none;">
                            <label class="form-label text-muted small fw-bold">Tyre / Part Position <span class="text-danger">*</span></label>
                            <select name="position" class="form-select select2" id="position">
                                <option value="">Select position...</option>
                                <option value="Left-Front">Left-Front</option>
                                <option value="Right-Front">Right-Front</option>
                                <option value="Left-Rear-Outer">Left-Rear-Outer</option>
                                <option value="Left-Rear-Inner">Left-Rear-Inner</option>
                                <option value="Right-Rear-Outer">Right-Rear-Outer</option>
                                <option value="Right-Rear-Inner">Right-Rear-Inner</option>
                                <option value="Stepney">Stepney</option>
                            </select>
                            <div class="form-text small">This category requires specifying the exact wheel or physical location.</div>
                        </div>

                        <!-- Conflict Alert Banner -->
                        <div class="mb-4" id="conflictBanner" style="display: none;">
                            <div class="alert alert-warning border-warning p-3 rounded" style="background-color: #fffbeb;">
                                <div class="d-flex align-items-start">
                                    <i class="ri-error-warning-line fs-4 me-3 text-warning"></i>
                                    <div>
                                        <h6 class="mb-1 fw-bold text-dark" id="conflictTitle">This truck already has a part installed here.</h6>
                                        <div id="conflictText" class="mb-2 text-secondary small"></div>
                                        <a href="{{ route('parts-inventory.unassign-page') }}" class="btn btn-sm btn-warning text-dark fw-bold">
                                            <i class="ri-swap-line me-1"></i> Go to Unassign Screen
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Step 2: Part Source & Selection -->
                        <div id="typeContainer" style="display: none;">
                            <div class="border-top pt-4 mb-4">
                                <label class="form-section-title mb-2">Step 2: Assignment Type</label>
                                <div class="row g-3 mb-3">
                                    <div class="col-md-6">
                                        <label class="type-toggle-card">
                                            <input class="d-none" type="radio" name="assignment_type" id="type_new" value="new" checked onchange="toggleType()">
                                            <div class="d-flex align-items-center mb-1">
                                                <i class="ri-inbox-archive-line text-primary fs-5 me-2"></i>
                                                <span class="fw-bold text-dark">Assign from New Stock</span>
                                            </div>
                                            <div class="text-muted small" style="font-size: 11px;">Deducts from Available physical warehouse stock</div>
                                        </label>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="type-toggle-card">
                                            <input class="d-none" type="radio" name="assignment_type" id="type_reusable" value="reusable" onchange="toggleType()">
                                            <div class="d-flex align-items-center mb-1">
                                                <i class="ri-refresh-line text-success fs-5 me-2"></i>
                                                <span class="fw-bold text-dark">Assign from Reusable Parts</span>
                                            </div>
                                            <div class="text-muted small" style="font-size: 11px;">Select previously unassigned reusable parts</div>
                                        </label>
                                    </div>
                                </div>

                                <!-- NEW STOCK SELECTOR -->
                                <div class="section-new">
                                    <div class="mb-3">
                                        <label class="form-label text-muted small fw-bold">Product (Warehouse Stock) <span class="text-danger">*</span></label>
                                        <select name="product_id" class="form-select select2" id="product_id">
                                            <option value="">Select Product...</option>
                                        </select>
                                    </div>
                                    <div class="row g-3 mb-3">
                                        <div class="col-md-6">
                                            <label class="form-label text-muted small fw-bold">Product SKU No <span class="text-danger">*</span></label>
                                            <select name="item_code_select" class="form-select select2" id="item_code_select">
                                                <option value="">Select SKU...</option>
                                            </select>
                                            <input type="hidden" name="item_code" id="item_code_input">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label text-muted small fw-bold">Purchase Cost (₹) <span class="text-danger">*</span></label>
                                            <input type="number" name="purchase_cost" id="purchase_cost_input" class="form-control" min="0" step="0.01" placeholder="0.00" readonly style="background-color: #f8fafc;">
                                        </div>
                                    </div>
                                </div>

                                <!-- REUSABLE STOCK SELECTOR -->
                                <div class="section-reusable" style="display: none;">
                                    <div class="mb-3">
                                        <label class="form-label text-muted small fw-bold">Reusable Part <span class="text-danger">*</span></label>
                                        <select name="part_id" class="form-select select2" id="part_id">
                                            <option value="">Select Reusable Part...</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <!-- Step 3: Assignment Log Details -->
                            <div class="border-top pt-4 mb-4">
                                <label class="form-section-title mb-2">Step 3: Installation Details</label>
                                <div class="row g-3 mb-3">
                                    <div class="col-md-6">
                                        <label class="form-label text-muted small fw-bold">Assignment Date <span class="text-danger">*</span></label>
                                        <input type="text" name="assigned_date" class="form-control datepicker" required value="{{ date('d-m-Y') }}" placeholder="DD-MM-YYYY">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label text-muted small fw-bold">Truck KM at Assignment <span class="text-danger">*</span></label>
                                        <input type="number" name="km_at_assignment" id="km_at_assignment" class="form-control" required min="0" placeholder="e.g. 15000">
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label text-muted small fw-bold">Remarks (Optional)</label>
                                    <input type="text" name="remarks" class="form-control" placeholder="e.g. Installed during regular quarterly maintenance">
                                </div>
                            </div>

                            <button type="button" class="btn btn-submit-action w-100" id="btnAssign" onclick="submitAssign()">
                                <i class="ri-check-line me-1"></i> Confirm & Assign Part to Truck
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- RIGHT SUMMARY & VERIFICATION COLUMN -->
            <div class="col-lg-5">
                <div class="preview-card mb-4">
                    <div class="d-flex align-items-center justify-content-between mb-3 border-bottom pb-2">
                        <h6 class="fw-bold mb-0 text-dark"><i class="ri-truck-line text-primary me-1"></i> Assignment Summary</h6>
                        <span class="badge bg-primary-subtle text-primary border" id="preview_badge">Verification</span>
                    </div>

                    <div id="preview_placeholder" class="text-center py-5 text-muted">
                        <i class="ri-steering-2-line fs-1 text-secondary opacity-50 d-block mb-2"></i>
                        <p class="mb-0 small">Select a truck, category, and warehouse part to see real-time installation summary.</p>
                    </div>

                    <div id="preview_content" style="display: none;">
                        <div class="detail-row">
                            <span class="detail-label">Target Truck</span>
                            <span class="detail-value text-primary font-monospace" id="pv_truck">—</span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">Category</span>
                            <span class="detail-value" id="pv_cat">—</span>
                        </div>
                        <div class="detail-row" id="pv_row_pos" style="display: none;">
                            <span class="detail-label">Position</span>
                            <span class="detail-value" id="pv_pos">—</span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">Selected Part</span>
                            <span class="detail-value" id="pv_prod">—</span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">Serial / Stencil SKU</span>
                            <span class="detail-value font-monospace text-success" id="pv_sku">—</span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">Cost Snapshot</span>
                            <span class="detail-value" id="pv_cost">—</span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">Assignment Odometer</span>
                            <span class="detail-value" id="pv_km">—</span>
                        </div>
                    </div>
                </div>

                <!-- Golden Rules Checklist Card -->
                <div class="p-3 bg-light rounded border">
                    <h6 class="fw-bold text-dark small mb-2"><i class="ri-checkbox-circle-line text-success me-1"></i> Inventory Rules</h6>
                    <ul class="text-muted small ps-3 mb-0" style="font-size: 12px; line-height: 1.6;">
                        <li><strong>Warehouse Stock Only:</strong> Parts must already be registered as <em>Available</em> in warehouse before assignment.</li>
                        <li><strong>One Part Per Position:</strong> The system automatically prevents fitting two parts in the same slot.</li>
                        <li><strong>Pure Fleet Physical Movement:</strong> Fits serialized physical parts without changing accounting financial ledger balance.</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('footer_script')
    <script src="{{ asset('theme/assets/select2/select2.min.js') }}"></script>
    <script src="{{ asset('theme/assets/sweetalert/sweet-alert.min.js') }}"></script>
    <script src="{{ asset('theme/assets/vendor/daterange/daterange.js') }}"></script>
    <script>
        $(document).ready(function() {
            $('.select2').select2({ width: '100%' });
            
            $('.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' }
            });
            
            toggleType();

            $('#vehicle_id').on('change', function() {
                checkConflict();
                updateLivePreview();
            });
            
            $('#category_id').on('change', function() {
                togglePosition();
                fetchParts();
                checkConflict();
                updateLivePreview();
            });

            $('#position').on('change', function() {
                checkConflict();
                updateLivePreview();
            });

            $('#km_at_assignment').on('input change', updateLivePreview);
        });

        function togglePosition() {
            let catOption = $('#category_id').find(':selected');
            if (catOption.length > 0 && catOption.data('has-position') == '1') {
                $('#positionContainer').slideDown(150);
            } else {
                $('#positionContainer').slideUp(150);
                $('#position').val('').trigger('change.select2');
            }
        }

        function toggleType() {
            let type = $('input[name="assignment_type"]:checked').val();
            if (type === 'new') {
                $('.section-new').show();
                $('.section-reusable').hide();
            } else {
                $('.section-new').hide();
                $('.section-reusable').show();
            }
            updateLivePreview();
        }

        function fetchParts() {
            let categoryId = $('#category_id').val();
            let productSelect = $('#product_id');
            let partSelect = $('#part_id');
            
            productSelect.empty().append('<option value="">Select Product...</option>');
            partSelect.empty().append('<option value="">Select Reusable Part...</option>');
            
            if (!categoryId) return;
            
            $.ajax({
                url: '{{ route("parts-inventory.assign.fetchParts") }}',
                data: { category_id: categoryId },
                success: function(res) {
                    if(res.success) {
                        // Populate New Products
                        if (res.new_products && res.new_products.length > 0) {
                            res.new_products.forEach(function(prod) {
                                let brandName = prod.brand ? prod.brand.brand_name : '';
                                let brandStr = brandName ? `(${brandName})` : '';
                                let text = `${prod.product_name} ${brandStr} - (Avail: ${prod.current_stock})`;
                                productSelect.append(new Option(text, prod.id, false, false));
                            });
                        }
                        
                        // Populate Reusable Parts
                        if (res.reusable_parts && res.reusable_parts.length > 0) {
                            res.reusable_parts.forEach(function(part) {
                                let productName = part.product ? part.product.product_name : 'Unknown';
                                let brandName = part.brand ? part.brand.brand_name : '';
                                let brandStr = brandName ? `(${brandName})` : '';
                                let text = `${productName} — ${part.item_code} ${brandStr}`;
                                partSelect.append(new Option(text, part.id, false, false));
                            });
                        }
                        window.availableSerialsList = res.available_serials || [];
                    }
                    productSelect.trigger('change.select2');
                    partSelect.trigger('change.select2');
                }
            });
        }

        $(document).on('change', '#product_id', function() {
            let pId = $(this).val();
            let skuSelect = $('#item_code_select');
            skuSelect.empty().append('<option value="">Select SKU...</option>');
            $('#item_code_input').val('');
            $('#purchase_cost_input').val('');

            if (pId && window.availableSerialsList) {
                let matching = window.availableSerialsList.filter(s => s.product_id == pId);
                matching.forEach(function(s) {
                    let batchStr = s.batch_no ? ' | Batch: ' + s.batch_no : '';
                    let text = s.item_code + batchStr + ' (₹' + parseFloat(s.purchase_cost).toFixed(2) + ')';
                    skuSelect.append(new Option(text, s.item_code, false, false));
                });
                if (matching.length === 1) {
                    skuSelect.val(matching[0].item_code).trigger('change.select2');
                    $('#item_code_input').val(matching[0].item_code);
                    $('#purchase_cost_input').val(matching[0].purchase_cost);
                }
            }
            skuSelect.trigger('change.select2');
            updateLivePreview();
        });

        $(document).on('change', '#item_code_select', function() {
            let code = $(this).val();
            $('#item_code_input').val(code);
            if (code && window.availableSerialsList) {
                let found = window.availableSerialsList.find(s => s.item_code === code);
                if (found) {
                    $('#purchase_cost_input').val(found.purchase_cost);
                }
            } else {
                $('#purchase_cost_input').val('');
            }
            updateLivePreview();
        });

        $(document).on('change', '#part_id', function() {
            updateLivePreview();
        });

        function checkConflict() {
            $('#conflictBanner').hide();
            $('#typeContainer').hide();
            $('#btnAssign').prop('disabled', false);
            
            let truckId = $('#vehicle_id').val();
            let categoryId = $('#category_id').val();
            let position = $('#position').val();
            let catOption = $('#category_id').find(':selected');
            
            if (!truckId || !categoryId) return;
            
            if (catOption.data('has-position') == '1' && !position) return;
            
            $.ajax({
                url: '{{ route("parts-inventory.assign.checkConflict") }}',
                data: { truck_id: truckId, category_id: categoryId, position: position },
                success: function(res) {
                    if (res.success && res.has_conflict) {
                        let conflict = res.conflict;
                        let name = conflict.stock && conflict.stock.product ? conflict.stock.product.product_name : 'Unknown Part';
                        let code = conflict.stock ? conflict.stock.item_code : '';
                        let dateStr = new Date(conflict.assignment_date).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' });
                        let truckNo = $('#vehicle_id').find(':selected').text();
                        
                        $('#conflictTitle').text(`${truckNo} already has a part installed here.`);
                        $('#conflictText').html(`<strong>${name} (${code})</strong> — installed ${dateStr}, currently at ${conflict.truck_km_at_assignment} km.<br>Unassign this part first, then come back to assign the new one.`);
                        $('#conflictBanner').slideDown(200);
                        $('#btnAssign').prop('disabled', true);
                    } else {
                        $('#typeContainer').slideDown(200);
                    }
                }
            });
        }

        function updateLivePreview() {
            let truck = $('#vehicle_id').find(':selected').text();
            let truckVal = $('#vehicle_id').val();
            let cat = $('#category_id').find(':selected').text();
            let catVal = $('#category_id').val();
            let pos = $('#position').val();

            if (!truckVal && !catVal) {
                $('#preview_placeholder').show();
                $('#preview_content').hide();
                return;
            }

            $('#preview_placeholder').hide();
            $('#preview_content').fadeIn(150);

            $('#pv_truck').text(truckVal ? truck : '—');
            $('#pv_cat').text(catVal ? cat : '—');

            if (pos) {
                $('#pv_pos').text(pos);
                $('#pv_row_pos').show();
            } else {
                $('#pv_row_pos').hide();
            }

            let type = $('input[name="assignment_type"]:checked').val();
            if (type === 'new') {
                let prodText = $('#product_id').find(':selected').text();
                $('#pv_prod').text($('#product_id').val() ? prodText : '—');
                $('#pv_sku').text($('#item_code_select').val() || '—');
                let cost = $('#purchase_cost_input').val();
                $('#pv_cost').text(cost ? ('₹ ' + parseFloat(cost).toFixed(2)) : '—');
            } else {
                let partText = $('#part_id').find(':selected').text();
                $('#pv_prod').text($('#part_id').val() ? partText : '—');
                $('#pv_sku').text('Reusable Stock');
                $('#pv_cost').text('Existing Inventory');
            }

            let km = $('#km_at_assignment').val();
            $('#pv_km').text(km ? (parseFloat(km).toLocaleString() + ' km') : '—');
        }
        
        function submitAssign() {
            let assignedDate = $('input[name="assigned_date"]').val();
            if(assignedDate && assignedDate.indexOf('-') !== -1) {
                let p = assignedDate.split('-');
                if(p[0].length === 2) $('input[name="assigned_date"]').val(p[2]+'-'+p[1]+'-'+p[0]);
            }
            
            let formData = new FormData($('#formAssign')[0]);
            $.ajax({
                url: '{{ route("parts-inventory.assign") }}',
                type: 'POST',
                data: formData,
                processData: false, contentType: false,
                success: function(res) {
                    if(res.success) {
                        swal({
                            title: "Assigned!",
                            text: res.message,
                            type: "success"
                        }, function() {
                            window.location.href = '{{ route("parts-inventory.assign-page") }}';
                        });
                    } else {
                        swal("Error", res.message, "error");
                    }
                },
                error: function(err) {
                    swal("Error", (err.responseJSON && err.responseJSON.message) ? err.responseJSON.message : "Something went wrong.", "error");
                }
            });
        }
    </script>
@endpush