@extends('layouts/contentLayoutMaster')
@section('title', 'Revenue Items Return')

@section('vendor-style')
    <!-- vendor css files -->
    <link rel="stylesheet" href="{{ asset('vendors/css/pickers/pickadate/pickadate.css') }}">
    <link rel="stylesheet" href="{{ asset('vendors/css/pickers/flatpickr/flatpickr.min.css') }}">
    <link rel="stylesheet" href="{{ asset('vendors/css/forms/select/select2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('vendors/css/extensions/sweetalert2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('/css/custom.css') }}">
@endsection

@section('page-style')
    <link rel="stylesheet" href="{{ asset('css/base/plugins/forms/pickers/form-flat-pickr.css') }}">
    <link rel="stylesheet" href="{{ asset('css/base/plugins/forms/pickers/form-pickadate.css') }}">
    <link rel="stylesheet" href="{{ asset('css/base/style.css') }}">

@endsection

@section('content')
    <!-- Basic multiple Column Form section start -->
    <section id="multiple-column-form">
        <div class="row">
            <div class="col-12">
                {{-- <h4 class="card-title my-2">Add Dispatch Point</h4> --}}
                <div class="card"> 
                    <div class="card-header f-flex flex-column align-items-start">
                        <h4 class="text-primary"> <b>
                            Location : {{$store->plant ? $store->plant->name : ($store->ao ? $store->ao->ao_name : 'N/A')}}
                        </b>
                        </h4>
                        <h5>
                            <b>
                                Store : {{$store->name ? $store->name : 'None'}}
                            </b>
                        </h5>
                    </div>
                    <div class="card-body">
                        @if ($message = Session::get('success'))
                            <div class="demo-spacing-0 my-2">
                                <div class="alert alert-success alert-dismissible fade show" role="alert">
                                    <div class="alert-body">{{ $message }}</div>
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"
                                        aria-label="Close"></button>
                                </div>
                            </div>
                        @endif
                        @if ($errorMessage = Session::get('errorMessage'))
                            <div class="demo-spacing-0 my-2">
                                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                    <div class="alert-body">{{ $errorMessage }}</div>
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"
                                        aria-label="Close"></button>
                                </div>
                            </div>
                        @endif
                        <form class="form">
                            
                            @csrf
                            <div class="row">
                                <div class="col-md-3 col-12">
                                    <div class="mb-1">
                                        <input type="hidden" id="store_id" name="store_id" value="{{ $store->_id }}">
                                        <label class="form-label" for="column-ao-1">Return Code *</label>
                                        <input type="text" disabled id="column-ao-1" class="form-control" name="code"
                                            value="{{ old('code', $code) }}" maxlength="7" />
                                        @error('code')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-3 col-6 ">
                                    <label class="form-label">Select Return Type</label>
                                    <div class="mb-1">
                                        <select name="parent" id="parent" class="form-control select2" required onchange="getSelectedParent()">
                                            <option value="" selected="" disabled="">Select Return Type</option>
                                            <option value="user">User</option>
                                            @if ((auth()->user()->roles->first()->access_level == 6 || auth()->user()->roles->first()->access_level == 5 || auth()->user()->roles->first()->access_level == 4) && $store->plant_id != null)
                                                <option value="plant">Plant</option>
                                                <option value="building">Building (Plant)</option>
                                                <option value="plant_mcc">Collection Point (Plant)</option>
                                                <option value="ao">Area Office</option>

                                            @else
                                                <option value="ao">Area Office</option>
                                                <option value="dp">Dispatch Point</option>
                                                <option value="mcc">Collection Point</option>
                                        
                                                <option value="ao_building">Building (Area Office)</option>
                                            @endif
                                            
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="column-ao-3">Note <small>(Optional)</small></label>
                                        <input type="text" id="note" class="form-control" placeholder="Write Any Note"
                                            name="note" value="{{ old('note') }}" />
                                        @error('note')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-1 d-flex justify-content-start align-items-center p-0 m-0">
                                    <span class="spinner-border spinner-border-md spinner" style="margin-top:3px" role="status" aria-hidden="true"></span>
                                </div>
                            </div>
                            <div class="row">
                                @include('content._partials._sections.revenue_return_filter')
                                
                            </div>
                            <div class="row mt-4">
                                <div class="col-12 d-flex justify-content-end">
                                    <button type="submit" class="btn btn-primary me-1 submitButton" id="submitButton">Submit</button>
                                    {{-- <button type="reset" class="btn btn-outline-secondary me-1">Reset</button>
                                    <a class="btn btn-outline-secondary cancel-btn"
                                        href="{{ route('inventory.items-transfer.index') }}">Cancel</a> --}}
                                </div>
                            </div>
                            <h4 id="errorMsg" class="text-danger"></h4>
                            <div class="row " id="returnTable">
                                <div class="col-12 mt-2 mb-1">
                                    <h4>
                                        Available Items
                                    </h4>
                                </div>
                                <div class="col-12 p-0 m-0" >
                                    <table class="table table-bordered" id="returnItemsTable">
                                        <thead>
                                            <tr>
                                                <th class="text-center pb-0"><input type="checkbox" id="selectAll" style="height:18px; width:18px"></th>
                                                <th>Item Name</th>
                                                <th class="text-center">Current Quantity</th>
                                                <th class="text-center">WAR</th>
                                                <th class="text-center">Quantity to Return</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {{-- Data will be appended here dynamically via AJAX --}}
                                        </tbody>
                                    </table>
                                    
                                    <button id="submitReturnItems" class="btn btn-primary mt-3">Submit Returns</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('vendor-script')
    <!-- vendor files -->
    <script src="{{ asset('vendors/js/pickers/pickadate/picker.js') }}"></script>
    <script src="{{ asset('vendors/js/pickers/pickadate/picker.date.js') }}"></script>
    <script src="{{ asset('vendors/js/pickers/pickadate/picker.time.js') }}"></script>
    <script src="{{ asset('vendors/js/pickers/pickadate/legacy.js') }}"></script>
    <script src="{{ asset('vendors/js/pickers/flatpickr/flatpickr.min.js') }}"></script>
    <script src="{{ asset('vendors/js/forms/select/select2.full.min.js') }}"></script>
    <script src="{{ asset('vendors/js/extensions/sweetalert2.all.min.js') }}"></script>
    <script src="{{ asset('/js/custom.js') }}"></script>
@endsection
@section('page-script')

    <script>

        const addedItems = []; 
        $('.plant,.department,.section,.zone,.ao,.cp,.bd,.dp,.user,.spinner').hide();
        $('#item,#packing_search,#quantity').prop('disabled', true);
        $("#submitReturnItems").hide();
        $('#returnTable').hide();
        $('#errorMsg').html('');

        function getSelectedParent()
        {
            $('#errorMsg').html('');
            var parentValue = $('#parent').val();

            $('.plant,.department,.section,.zone,.ao,.cp,.bd,.dp,.user').hide();
            $('.spinner').show();

            if (parentValue !== "") {
                
                // $('.plant,.department,.section,.zone,.ao,.cp,.bd,.dp').show();
                setTimeout(function() {
                    $('.plant, .department, .section, .zone, .ao, .cp, .bd, .dp, .user').show();
                     $('#item,#packing_search,#quantity').prop('disabled', false);
                }, 900);

                $('#plant_search,#department_search,#section_search,#zone_search,#area_office_search,#collection_point_search,#dispatch_point_search,#building_search,#meter_no').val('');
                $('#plant_search,#department_search,#section_search,#zone_search,#area_office_search,#collection_point_search,#dispatch_point_search,#building_search').trigger('change'); 
                
                if(parentValue == "user")
                {
                    setTimeout(function() {
                    $('.plant,.department,.section,.zone,.ao,.cp,.dp,.bd,.spinner').hide();
                    }, 900);
                    $('#user_search').prop('disabled', false);
                    $('#area_office_search,#dispatch_point_search,#collection_point_search,#building_search').prop('disabled', true);   
                }
                else if(parentValue == "plant")
                {
                    setTimeout(function() {
                    $('.department,.section,.zone,.ao,.cp,.dp,.bd,.user,.spinner').hide();
                    }, 900);

                    $('#area_office_search,#dispatch_point_search,#collection_point_search,#building_search,#user_search').prop('disabled', true);   
                }
                else if(parentValue == "plant_mcc")
                {
                    setTimeout(function() {
                    $('.department,.section,.zone,.ao,.dp,.bd,.user,.spinner').hide();
                    }, 900);

                    $('#collection_point_search').prop('disabled', false);
                    $('#area_office_search, #dispatch_point_search,#building_search,#user_search').prop('disabled', true);   
                }
                else if(parentValue == "ao")
                {
                    setTimeout(function() {
                        $('.dp,.cp,.bd,.user,.spinner').hide();
                    }, 900);

                    $('#area_office_search').prop('disabled', false);
                    $('#dispatch_point_search,#collection_point_search,#building_search,#user_search').prop('disabled', true);   
                }
                else if(parentValue == "dp")
                {   
                    setTimeout(function() {
                    $('.cp,.bd,.user,.spinner').hide();
                    }, 900);
                    
                    $('#dispatch_point_search').prop('disabled', false);
                    $('#building_search,#collection_point_search,#user_search').prop('disabled', true);
                }
                else if(parentValue == "mcc")
                {
                    setTimeout(function() {
                    $('.dp,.bd,.user,.spinner').hide();
                    }, 900);
                    $('#collection_point_search').prop('disabled', false);
                    $('#dispatch_point_search,#building_search,#user_search').prop('disabled', true);   
                } 
                else if(parentValue == "building")
                {
                    setTimeout(function() {
                    $('.department,.section,.zone,.ao,.cp,.dp,.user,.spinner').hide();
                    }, 900);
                    $('#building_search').prop('disabled', false);
                    $('#dispatch_point_search,#collection_point_search,#user_search').prop('disabled', true);   
                }
                else if(parentValue == "ao_building")
                {
                    setTimeout(function() {
                    $('.cp,.dp,.user,.spinner').hide();
                    }, 900);
                    $('#building_search').prop('disabled', false);
                    $('#dispatch_point_search,#collection_point_search,#user_search').prop('disabled', true);   
                }
                else
                {
                    $('.spinner').hide();
                    $('#department_search,#section_search,#zone_search,#area_office_search,#collection_point_search,#dispatch_point_search,#building_search,#user_search').prop('disabled', false);
                }

            }
        }


        $(document).ready(function() {
         
            // Submit the transfer note
             $('#submitButton').click(function (e) {

                e.preventDefault();
                $('#errorMsg').html('');
                // Clear the array
                selectedItems = [];

                // Uncheck "Select All" checkbox
                $("#selectAll").prop("checked", false);

                let user_id = $('#user_search').val();
                let store_id = $('#store_id').val();
                let plant_id = $('#plant_search').val();
                let ao_id = $('#area_office_search').val();
                let dp_id = $('#dispatch_point_search').val();
                let cp_id = $('#collection_point_search').val();
                let building_id = $('#building_search').val();
                let note =  $('#note').val();

                let type =  $('#parent').val();

                if(type == '' || type == null){
                
                    alert('Return Type is Required !');
                    return;
                }

                if(type == 'user')
                {
                    if(user_id == '' || user_id == null)
                    {
                        alert('User is required !');
                        return;
                    }                    
                }
                else if(type == 'plant')
                {
                    if(plant_id == '' || plant_id == null)
                    {
                        alert('Plant is required !');
                        return;
                    }
                }
                else if(type == 'building')
                {
                    if(plant_id == '' || plant_id == null || building_id == '' || building_id == null)
                    {
                        alert('Plant or Building is required !');
                        return;
                    }
                }
                else if(type == 'plant_mcc')
                {
                    if(plant_id == '' || plant_id == null || cp_id == '' || cp_id == null)
                    {
                        alert('Plant or Collection Point is required !');
                        return;
                    }
                }
                else if(type == 'ao')
                {
                    if(plant_id == '' || plant_id == null || ao_id == '' || ao_id == null)
                    {
                        alert('Plant or Area Office is required !');
                        return;
                    }
                }
                else if(type == 'dp')
                {
                    if(plant_id == '' || plant_id == null || ao_id == '' || ao_id == null || dp_id == '' || dp_id == null)
                    {
                        alert('Plant, Area Office or Dispatch Point is required !');
                        return;
                    }
                }
                else if(type == 'mcc')
                {
                    if(plant_id == '' || plant_id == null || ao_id == '' || ao_id == null || cp_id == '' || cp_id == null)
                    {
                        alert('Plant, Area Office or Collection Point is required !');
                        return;
                    }
                }
                else if(type == 'ao_building')
                {
                    if(plant_id == '' || plant_id == null || ao_id == '' || ao_id == null || building_id == '' || building_id == null)
                    {
                        alert('Plant, Area Office or Building is required !');
                        return;
                    }
                }
                else
                {
                    if(store_id == '' || store_id == null)
                    {
                        alert('Store is required !');
                        return;
                    }
                }


                const noteData = {
                    user_id: user_id,
                    store_id: store_id,
                    plant_id: plant_id,
                    ao_id: ao_id,
                    dp_id: dp_id,
                    cp_id: cp_id,
                    building_id: building_id,
                    type:type,
                    note: note,
                };

                $.ajax({
                        url: '{{ route("inventory.revenue-items-return.get.availableItems") }}',
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        },
                        data: noteData,
                        success: function (response) {
                            if(response.success)
                            {
                                let rows = "";
                                $.each(response.items, function (index, item) {
                                    rows += `<tr>
                                        <td class="text-center pb-0"><input style='height:18px; width:18px' 
                                            type="checkbox" 
                                            class="selectItem" 
                                            data-id="${item.itemId}" 
                                            data-name="${item.itemName}" 
                                            data-qty="${item.quantity}" 
                                            data-war="${item.war}">
                                        </td>
                                        <td>${item.itemName}</td>
                                        <td class='text-center text-primary'><b>${item.quantity}</b></td>
                                        <td>${item.war}</td>
                                        <td class='text-center'><input type="number" 
                                            class="form-control text-center text-success returnQty" 
                                            style='font-size:15px; font-weight:bold' 
                                            min="1" 
                                            max="${item.quantity}" 
                                            value="${item.quantity}" 
                                            disabled
                                            data-allow-decimal="${item.allow_decimal}">
                                        </td>
                                    </tr>`;
                                });
                                $('#returnTable').show();
                                $("#returnItemsTable tbody").html(rows);
                                $("#submitReturnItems").show();
                            }
                            else
                            {
                                 // Clear the array
                                selectedItems = [];

                                // Remove all table rows except headers
                                $("#returnItemsTable tbody").empty();

                                // Uncheck "Select All" checkbox
                                $("#selectAll").prop("checked", false);

                                $('#returnTable').hide();
                                $('#errorMsg').html(response.message);
                            }
                        }
                    });
            });


            let selectedItems = [];

            $("#selectAll").click(function () {
                let isChecked = $(this).prop("checked");

                // Select/unselect all checkboxes
                $(".selectItem").prop("checked", isChecked);

                // Enable/disable input fields accordingly
                $(".returnQty").prop("disabled", !isChecked);

                // If checked, collect data for all rows
                if (isChecked) {
                    selectedItems = [];
                    $(".selectItem:checked").each(function () {
                        let row = $(this).closest("tr");
                        let item = {
                            itemId: $(this).data("id"),
                            itemName: $(this).data("name"),
                            quantity: $(this).data("qty"),
                            returnQty: row.find(".returnQty").val()
                        };
                        selectedItems.push(item);
                    });
                } else {
                    selectedItems = [];
                }
            });


             // Handle individual checkbox click
            $(document).on("change", ".selectItem", function () {
                let row = $(this).closest("tr");
                let itemId = $(this).data("id");
                let itemName = $(this).data("name");
                let quantity = $(this).data("qty");
                let war = $(this).data("war");
                let returnQty = row.find(".returnQty").val();
                let isChecked = $(this).prop("checked");

                if (isChecked) {
                    // Enable return quantity field
                    row.find(".returnQty").prop("disabled", false);

                    // Add item to selectedItems array if checked
                    selectedItems.push({
                        itemId: itemId,
                        itemName: itemName,
                        quantity: quantity,
                        war:war,
                        returnQty: parseFloat(returnQty)
                    });
                } else {
                    // Disable return quantity field
                    row.find(".returnQty").prop("disabled", true);

                    // Remove unchecked item from the array
                    selectedItems = selectedItems.filter(item => item.itemId !== itemId);
                }

                // Check if all items are selected or not
                $("#selectAll").prop("checked", $(".selectItem:checked").length === $(".selectItem").length);
            });

            // Update return quantity in array when input is changed
            $(document).on("input", ".returnQty", function () {
                let row = $(this).closest("tr");
                let itemId = row.find(".selectItem").data("id");
                let maxQty = row.find(".selectItem").data("qty"); // Get max quantity from data attribute
                let allowDecimal = $(this).data("allow-decimal") ?? 0;
                let newQty = $(this).val();

                // Prevent decimals if not allowed
                if (allowDecimal != 1 && newQty.includes(".")) {
                    alert("Decimals are not allowed for this item.");
                    newQty = Math.floor(newQty); // Reset to integer
                    $(this).val(newQty);
                }

                // Ensure input does not exceed the current quantity
                if (parseFloat(newQty) > parseFloat(maxQty)) {
                    alert("Return quantity cannot exceed the current quantity!");
                    $(this).val(maxQty); // Reset input to max quantity
                    newQty = maxQty;
                } else if (parseFloat(newQty) < 1 || newQty === "") {
                    $(this).val(0);
                    newQty = 0;
                }

                 // Update quantity in selectedItems array
                let item = selectedItems.find(item => item.itemId === itemId);
                if (item) {
                    item.returnQty = parseFloat(newQty);
                }
            });

            // Submit selected items
            $("#submitReturnItems").click(function (e) {
                e.preventDefault();
                if (selectedItems.length === 0) {
                    alert("Please select at least one item.");
                    return;
                }
                let hasZeroQuantity = selectedItems.some(item => item.returnQty === 0);
        
                if (hasZeroQuantity) {
                    showAlert('error', 'Item Return Quantity cannot be 0 !');
                    return false; 
                }

                $('#submitReturnItems').prop('disabled', true);

                console.log(selectedItems);

                let user_id = $('#user_search').val();
                let store_id = $('#store_id').val();
                let plant_id = $('#plant_search').val();
                let ao_id = $('#area_office_search').val();
                let dp_id = $('#dispatch_point_search').val();
                let cp_id = $('#collection_point_search').val();
                let building_id = $('#building_search').val();
                let note =  $('#note').val();

                let type =  $('#parent').val();

                if(type == '' || type == null){
                
                    alert('Return Type is Required !');
                    return;
                }

                if(type == 'user')
                {
                    if(user_id == '' || user_id == null)
                    {
                        alert('User is required !');
                        return;
                    }                    
                }
                else if(type == 'plant')
                {
                    if(plant_id == '' || plant_id == null)
                    {
                        alert('Plant is required !');
                        return;
                    }
                }
                else if(type == 'building')
                {
                    if(plant_id == '' || plant_id == null || building_id == '' || building_id == null)
                    {
                        alert('Plant or Building is required !');
                        return;
                    }
                }
                else if(type == 'plant_mcc')
                {
                    if(plant_id == '' || plant_id == null || cp_id == '' || cp_id == null)
                    {
                        alert('Plant or Collection Point is required !');
                        return;
                    }
                }
                else if(type == 'ao')
                {
                    if(plant_id == '' || plant_id == null || ao_id == '' || ao_id == null)
                    {
                        alert('Plant or Area Office is required !');
                        return;
                    }
                }
                else if(type == 'dp')
                {
                    if(plant_id == '' || plant_id == null || ao_id == '' || ao_id == null || dp_id == '' || dp_id == null)
                    {
                        alert('Plant, Area Office or Dispatch Point is required !');
                        return;
                    }
                }
                else if(type == 'mcc')
                {
                    if(plant_id == '' || plant_id == null || ao_id == '' || ao_id == null || cp_id == '' || cp_id == null)
                    {
                        alert('Plant, Area Office or Collection Point is required !');
                        return;
                    }
                }
                else if(type == 'ao_building')
                {
                    if(plant_id == '' || plant_id == null || ao_id == '' || ao_id == null || building_id == '' || building_id == null)
                    {
                        alert('Plant, Area Office or Building is required !');
                        return;
                    }
                }
                else
                {
                    if(store_id == '' || store_id == null)
                    {
                        alert('Store is required !');
                        return;
                    }
                }

                const noteData = {
                    user_id: user_id,
                    store_id: store_id,
                    plant_id: plant_id,
                    ao_id: ao_id,
                    dp_id: dp_id,
                    cp_id: cp_id,
                    building_id: building_id,
                    type:type,
                    note: note,
                    items:selectedItems
                };

                var icon = 'info'
                var text = '<p style="color:red">This is a one time return and can not be reversed once submitted !</p>'

                Swal.fire({
                title: 'Are you Sure ?',
                html: text ,
                icon: icon,
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes'
            }).then((result) => {
                if (result.isConfirmed) {

                    $('#submitReturnItems').html('<i class="fa fa-spinner fa-spin"></i> Submitting ...');

                    $.ajax({
                        url: "{{ route('inventory.revenue-items-return.store') }}",
                        method: 'POST',
                        data: noteData,
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        },
                        success: function (response) {

                            if (response.success == true) {
                                showAlert('success', response.message);
                                // alert('Transfer Note created successfully!');
                                location.reload();
                            } else {
                                $('#submitReturnItems').prop('disabled', false);
                                showAlert('error', response.message);
                            }

                            // alert("Items returned successfully!");
                            // // Clear the array
                            // selectedItems = [];

                            // // Remove all table rows except headers
                            // $("#returnItemsTable tbody").empty();

                            // // Uncheck "Select All" checkbox
                            // $("#selectAll").prop("checked", false);

                            // $('#returnTable').hide();
                        }
                    });

                }
                else
                {
                    $('#submitReturnItems').prop('disabled', false);
                }
            });

            });
        });

       
        
   

    </script>


    <script src="{{ asset('js/scripts/forms/pickers/form-pickers.js') }}"></script>
    <script src="{{ asset('js/scripts/forms/form-select2.js') }}"></script>
        {{-- <script src="https://rawgit.com/RobinHerbots/Inputmask/4.x/dist/jquery.inputmask.bundle.js"></script> --}}
        <script src="https://cdn.jsdelivr.net/npm/inputmask@5.0.8/dist/jquery.inputmask.min.js"></script>
@endsection