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

@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>
        .form-card { background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
        .nav-btn-primary { background-color: #1B2A4A; color: white; border: none; }
        .nav-btn-primary:hover { background-color: #121c32; color: white; }
    </style>
@endpush

@section('content')
    <div class="app-hero-header d-flex align-items-center mb-4">
        <ol class="breadcrumb">
            <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">
            <div class="col-md-8 mx-auto">
                <div class="form-card">
                    <div class="mb-4">
                        <h4 class="mb-1" style="color: #1B2A4A;">Assign Part to Truck</h4>
                        <p class="text-muted font-size-14">One active part per category / position — the system checks before you can proceed.</p>
                    </div>

                    <form id="formAssign">
                        @csrf
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label text-muted font-size-12 fw-bold uppercase">Truck</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 mb-3">
                                <label class="form-label text-muted font-size-12 fw-bold uppercase">Category</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 class="col-md-12 mb-3" id="positionContainer" style="display: none;">
                                <label class="form-label text-muted font-size-12 fw-bold uppercase">Position</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>
                            
                            <!-- Conflict Warning Banner -->
                            <div class="col-md-12 mb-4" id="conflictBanner" style="display: none;">
                                <div class="alert alert-warning border-warning" 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-warning-emphasis" id="conflictTitle">This truck already has a part installed here.</h6>
                                            <div id="conflictText" class="mb-3 text-dark font-size-14"></div>
                                            <a href="{{ route('parts-inventory.unassign-page') }}" class="btn btn-sm btn-warning text-dark fw-bold">Go to Unassign <i class="ri-arrow-right-line"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- ASSIGNMENT TYPE & DYNAMIC FIELDS -->
                            <div class="col-md-12" id="typeContainer" style="display: none;">
                                <hr class="mb-4">
                                <div class="mb-4">
                                    <label class="form-label text-muted font-size-12 fw-bold uppercase">Assignment Type</label>
                                    <div class="d-flex gap-4">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="assignment_type" id="type_new" value="new" checked onchange="toggleType()">
                                            <label class="form-check-label" for="type_new">
                                                Assign from New Stock <small class="text-muted">(Deducts from warehouse)</small>
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="assignment_type" id="type_reusable" value="reusable" onchange="toggleType()">
                                            <label class="form-check-label" for="type_reusable">
                                                Assign from Reusable Parts <small class="text-muted">(Old stock)</small>
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <!-- NEW STOCK SECTION -->
                                <div class="row section-new">
                                    <div class="col-md-12 mb-3">
                                        <label class="form-label text-muted font-size-12 fw-bold uppercase">Product (From Warehouse)</label>
                                        <select name="product_id" class="form-select select2" id="product_id">
                                            <option value="">Select Product...</option>
                                        </select>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label text-muted font-size-12 fw-bold uppercase">Item Code / Serial No</label>
                                        <input type="text" name="item_code" class="form-control" placeholder="Enter unique serial no">
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label text-muted font-size-12 fw-bold uppercase">Purchase Cost (₹)</label>
                                        <input type="number" name="purchase_cost" class="form-control" min="0" step="0.01">
                                    </div>
                                </div>

                                <!-- REUSABLE STOCK SECTION -->
                                <div class="row section-reusable" style="display: none;">
                                    <div class="col-md-12 mb-3">
                                        <label class="form-label text-muted font-size-12 fw-bold uppercase">Reusable Part</label>
                                        <select name="part_id" class="form-select select2" id="part_id">
                                            <option value="">Select Reusable Part...</option>
                                        </select>
                                    </div>
                                </div>
                                <hr class="mb-4">
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-label text-muted font-size-12 fw-bold uppercase">Assignment Date</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 mb-3">
                                <label class="form-label text-muted font-size-12 fw-bold uppercase">Truck KM at Assignment</label>
                                <input type="number" name="km_at_assignment" class="form-control" required min="0">
                            </div>
                            
                            <div class="col-md-12 mb-4">
                                <label class="form-label text-muted font-size-12 fw-bold uppercase">Remarks (Optional)</label>
                                <input type="text" name="remarks" class="form-control">
                            </div>
                            
                            <div class="col-md-12">
                                <button type="button" class="btn nav-btn-primary w-100 py-2" id="btnAssign" onclick="submitAssign()">Assign Part</button>
                            </div>
                        </div>
                    </form>
                </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', checkConflict);
            
            $('#category_id').on('change', function() {
                togglePosition();
                fetchParts();
                checkConflict();
            });

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

        function togglePosition() {
            let catOption = $('#category_id').find(':selected');
            if (catOption.length > 0 && catOption.data('has-position') == '1') {
                $('#positionContainer').show();
            } else {
                $('#positionContainer').hide();
                $('#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();
            }
        }

        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));
                            });
                        }
                    }
                    productSelect.trigger('change.select2');
                    partSelect.trigger('change.select2');
                }
            });
        }

        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 category requires position but none selected, don't check conflict yet
            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').show();
                        $('#btnAssign').prop('disabled', true);
                    } else {
                        $('#typeContainer').show();
                    }
                }
            });
        }
        
        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.message || "Something went wrong.", "error");
                }
            });
        }
    </script>
@endpush