@extends('layouts/contentLayoutMaster')
@section('title', 'Targets & Achievements')

@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 mb-0">
                        <h4 class="text-primary">
                            Create Targets
                        </h4>
                    </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-4 col-6 ">
                                    <label class="form-label">Select Type</label>
                                    <div class="mb-1">
                                        <select name="parent" id="parent" class="form-control select2 form-select" onchange="getSelectedParent()">
                                                <option value="" selected="" disabled="">Select Target Type</option>
                                                <option value="shedwise">Shed Wise</option>
                                                <option value="source_type">Source Type Wise</option>
                                                <option value="mcc">MCC Wise</option>
                                                <option value="mcc_source_type">MCC Source Wise</option>
                                                <option value="ao_employee">Employee (AO / DDO)</option>
                                                {{-- <option value="plant_employee">Employee (Plant)</option>
                                                <option value="ao_employee">Employee (Area Office)</option>
                                                <option value="cp_employee">Employee (Collection Point)</option> --}}
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-2 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="name-column">From</label>
                                        <input type="date" id="from" class="form-control" placeholder="From Date"
                                            name="from" value="{{ old('from') }}" required />
                                        @error('from')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-2 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="name-column">To</label>
                                        <input type="date" id="to" class="form-control" placeholder="To Date"
                                            name="to" value="{{ old('wef') }}" required />
                                        @error('to')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                
                            </div>
                            <div class="row mt-2">
                                @include('content._partials._sections.target_filter')
                                
                            </div>
                            <div class="row">
                                <div class="col-md-2 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="name-column">Volume</label>
                                        <input type="number" id="volume" class="form-control" placeholder="Volume"
                                            name="volume" value="{{ old('volume') }}" required />
                                        @error('volume')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-2 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="name-column">Rate</label>
                                        <input type="number" id="rate" class="form-control" placeholder="Rate"
                                            name="rate" value="{{ old('rate') }}" required />
                                        @error('rate')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="row d-flex align-items-end justify-content-end">
                                
                                {{-- <div class="col-3 d-flex align-items-end justify-content-end">
                                    <a class="btn btn-outline-secondary me-1">Reset</a>
                                </div> --}}
                                <div class="col-12 d-flex align-items-end justify-content-end">
                                    <a id="resetItem" class="btn btn-outline-secondary me-1" onclick="getSelectedParent('reset')">Reset</a>
                                    <button type="button" id="addItem" class="btn btn-primary">Add</button>
                                </div>
                            </div>
                            <div class="row p-0 m-0">
                                <div class="col-12 p-0 mb-1">
                                    <h5><b>
                                       <span id="date-text">From - To</span>
                                    </b></h5>
                                </div>
                                <div class="col-12 p-0 m-0 table-responsive">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th class="text-center">Type</th>
                                                <th class="text-center">Plant</th>
                                                <th class="text-center">AO</th>
                                                <th class="text-center">CP</th>
                                                <th class="text-center">Source Type</th>
                                                <th class="text-center">Employee</th>
                                                <th class="text-center">Volume</th>
                                                <th class="text-center">Rate</th>
                                                <th class="text-center">Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody id="itemsTable">
                                            <!-- Dynamic rows will be appended here -->
                                        </tbody>
                                    </table>
                                </div>
                            </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" style="display: none;">Submit</button>
                                                                        {{-- <a class="btn btn-outline-secondary cancel-btn"
                                        href="{{ route('inventory.items-transfer.index') }}">Cancel</a> --}}
                                </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 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>
    <script>
        let addedTargets = []; 

        $('.plant,.department,.section,.zone,.ao,.cp,.stype,.users').hide(); 

        function getSelectedParent(value="")
        {
            var parentValue = $('#parent').val();


            if(value !== "reset")
            {
                // Clear the addedTargets array
                addedTargets = [];

                // Remove all table rows (except the header if you have one)
                $('#itemsTable').empty();

                // Hide the submit button
                $('#submitButton').hide();
            }

            if (parentValue !== "") {

                // addedTargets.length = 0;

                $('#date-text').html(`From - To`);

                // Remove all rows from the table (except the header row)
                // $('#itemsTable').find('tr:gt(0)').remove();
                
                $('.plant,.department,.section,.zone,.ao,.cp,.stype,.users').show();
                $('#plant_search,#department_search,#section_search,#zone_search,#area_office_search,#source_type,#collection_point_search,#user_search').val('');
                // $('#plant_search,#department_search,#section_search,#zone_search,#area_office_search,#source_type').trigger('change'); 
                $('#plant_search,#area_office_search').trigger('change');

                if(parentValue == "shedwise")
                {   
                    $('.cp').hide();
                    $('.stype').show();
                    $('.users').hide();
                    // $('#department_search,#section_search,#zone_search,#area_office_search').prop('disabled', true);
                }
                else if(parentValue == "source_type")
                {
                    $('.cp').hide();
                    $('.stype').show();
                    $('.users').hide();
                }
                else if(parentValue == "mcc")
                {   
                    $('.cp').show();
                    $('.stype').hide();
                    $('.users').hide();
                }
                else if(parentValue == "mcc_source_type")
                {   
                    $('.cp').show();
                    $('.stype').show();
                    $('.users').hide();
                }
                else if(parentValue == "ao_employee")
                {
                    $('.cp').hide();
                    $('.stype').hide();
                    $('.users').show();
                }
                else
                {
                    $('#department_search,#section_search,#zone_search,#area_office_search').prop('disabled', false);
                }
            }
        }

        $(document).ready(function() {
            @if ($errors->any())
                showAlert('error', '{{ $errors->first() }}');
            @endif
           
            
            $('#addItem').click(function (event) {

                event.preventDefault();
                var addButton = $(this);

                const type = $('#parent').val() ? $('#parent').val() : '';
                const typeText = type && $('#parent').find('option:selected').text();

                const plant = $('#plant_search').val() ? $('#plant_search').val() : '';
                const plantText = plant && $('#plant_search').find('option:selected').text();

                const area_office = $('#area_office_search').val() ? $('#area_office_search').val() : '';
                const area_office_text = area_office && $('#area_office_search').find('option:selected').text();
                
                const collection_point = $('#collection_point_search').val() ? $('#collection_point_search').val() : '';
                const collection_point_text = collection_point && $('#collection_point_search').find('option:selected').text();

                const source_type = $('#source_type').val() ? $('#source_type').val() : ''; 
                const source_type_text = source_type && $('#source_type').find('option:selected').text();

                let employee = "";
                let employee_text = "";
                if(type === "mcc" || type === "mcc_source_type")
                {
                    const selectedOption = $('#collection_point_search').find('option:selected');
                    employee = selectedOption.data('user-id') ? selectedOption.data('user-id') : null;
                    employee_text = selectedOption.data('user-name') ? selectedOption.data('user-name') : null;                    
                }
                else
                {
                    employee = $('#user_search').val() ? $('#user_search').val() : ''; 
                    employee_text = employee && $('#user_search').find('option:selected').text();
                }

                const volume = $('#volume').val() ? parseFloat($('#volume').val()) : 0;
                const rate = $('#rate').val() ? parseFloat($('#rate').val()) : 0;

                const fromDate = $('#from').val() ? $('#from').val() : ''; 
                const toDate = $('#to').val() ? $('#to').val() : '';

                const newItem = { type, typeText, plant, plantText, area_office, area_office_text, collection_point, collection_point_text, source_type, source_type_text, employee, employee_text, volume, rate, fromDate, toDate };

                // targetValidationChecks(addedTargets, type, typeText, plant, plantText, area_office, area_office_text, collection_point, collection_point_text, source_type, source_type_text, employee, employee_text, volume, rate, fromDate, toDate);

                //Date Range Check
                if(fromDate == '' || toDate == '')
                {
                    alert('Please select date range !');
                    return;
                }

                // Ensure all records have the same type
                const isSameType = addedTargets.every(item => item.type === newItem.type);
                if (!isSameType) {
                    alert("All records must have the same type !");
                    return;
                }

                const isDateRangeSame = addedTargets.some(item => item.fromDate === newItem.fromDate && item.toDate === newItem.toDate);

                if (addedTargets.length > 0 && !isDateRangeSame) {
                    alert("All records must have the same date range !");
                    return;
                }

                if (type === "shedwise") {

                    if (!area_office && !source_type) {
                        alert('InValid Parameters !');
                        return;
                    }

                    if(addedTargets.length > 0)
                    {
                        const isDuplicateEntry = addedTargets.some(item =>
                            item.area_office === newItem.area_office &&
                            item.source_type === newItem.source_type
                        );

                        if (isDuplicateEntry) {
                            alert("Duplicate entry is not Allowed !");
                            return;
                        }
                    }

                    // Add the item to the addedTargets array
                    // addedTargets.push(newItem);

                }
                else if(type === "source_type")
                {
                    if ((!area_office && !source_type) || (area_office && source_type.trim() === "")) {
                        alert('InValid Parameters !');
                        return;
                    }
                    if ((!plant && source_type) || (plant && !source_type)) {
                        alert('InValid Parameters !');
                        return;
                    }

                    const isFirstEntry = addedTargets.length === 0; // Check if it's the first entry
                    const isSameAreaOffice = addedTargets.every(item => item.area_office === newItem.area_office);

                    if (!isFirstEntry && !isSameAreaOffice) {
                        alert("All records must have the same Area Office!");
                        return;
                    }

                    if(addedTargets.length > 0)
                    {
                    
                        const isDuplicateEntry = addedTargets.some(item =>
                            item.area_office === newItem.area_office &&
                            item.source_type === newItem.source_type
                        );

                        if (isDuplicateEntry) {
                            alert("Duplicate entry is not Allowed !");
                            return;
                        }
                    }

                    // Add the item to the addedTargets array
                    // addedTargets.push(newItem);
                } 
                else if(type === "mcc")
                {

                    if (!area_office || !collection_point) {
                        alert('InValid Parameters !');
                        return;
                    }

                    const isFirstEntry = addedTargets.length === 0; // Check if it's the first entry
                    const isSameAreaOffice = addedTargets.every(item => item.area_office === newItem.area_office);
                    const isDuplicateCollectionPoint = addedTargets.some(item => item.collection_point === newItem.collection_point);

                    if (!isFirstEntry && !isSameAreaOffice) {
                        alert("All records must have the same Area Office!");
                        return;
                    }

                    if (isDuplicateCollectionPoint) {
                        alert("Duplicate Collection Point Entry is not allowed !");
                        return;
                    }
                }
                else if(type === "mcc_source_type")
                {

                    if (!area_office || !collection_point || !source_type) {
                        alert('InValid Parameters !');
                        return;
                    }

                    const isFirstEntry = addedTargets.length === 0; // Check if it's the first entry
                    const isSameAreaOffice = addedTargets.every(item => item.area_office === newItem.area_office);
                    const isDuplicateCollectionPoint = addedTargets.some(item => item.collection_point === newItem.collection_point && item.source_type === newItem.source_type);

                    if (!isFirstEntry && !isSameAreaOffice) {
                        alert("All records must have the same Area Office!");
                        return;
                    }

                    if (isDuplicateCollectionPoint) {
                        alert("Duplicate Entry is not allowed !");
                        return;
                    }
                }
                else if(type === "ao_employee")
                {

                    if (!area_office || !employee) {
                        alert('InValid Parameters !');
                        return;
                    }

                    const isFirstEntry = addedTargets.length === 0; // Check if it's the first entry
                    const isSameAreaOffice = addedTargets.every(item => item.area_office === newItem.area_office);
                    const isDuplicateEmployee = addedTargets.some(item => item.employee === newItem.employee);

                    if (!isFirstEntry && !isSameAreaOffice) {
                        alert("All records must have the same Area Office!");
                        return;
                    }

                    if (isDuplicateEmployee) {
                        alert("Duplicate Entry is not allowed !");
                        return;
                    }
                }
                else 
                {
                    alert('Invalid Type !');
                    return;
                    if(addedTargets.length > 0)
                    {
                        // If typeText is NOT "shedwise", all records must have the same area_office
                        const isSameAreaOffice = addedTargets.every(item => item.area_office === newItem.area_office);
                        if (!isSameAreaOffice) {
                            alert("All records must have the same area_office unless typeText is 'shedwise'.");
                            return;
                        }
                    }

                    // Add the item to the addedTargets array
                    // addedTargets.push(newItem);
                }


                // Disable the button and show loading text
                addButton.prop("disabled", true).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Adding...');
                
                $.ajax({
                    url: '{{ route("target.check-target") }}',
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    },
                    data:{
                        type: type,
                        plant: plant,
                        area_office: area_office,
                        collection_point: collection_point,
                        source_type: source_type,
                        employee: employee,
                        from: $('#from').val(),
                        to: $('#to').val()
                    },
                    success: function (response) {
                            
                            if (response.success == true) {

                                addedTargets.push(newItem);

                                $('#date-text').html(`${fromDate} to ${toDate}`);

                                // Append a new row to the table
                                const newRow = `
                                    <tr class='text-center'>
                                        <td>${typeText}</td>
                                        <td>${plantText}</td>
                                        <td>${area_office_text}</td>
                                        <td>${collection_point_text}</td>
                                        <td>${source_type_text}</td>
                                        <td>${employee_text}</td>
                                        <td>${volume}</td>
                                        <td>${rate}</td>
                                        <td><a class="btn btn-danger btn-sm removeItem">Remove</a></td>
                                    </tr>
                                `;
                                $('#itemsTable').append(newRow);

                                // Show the submit button if at least one item is added
                                if (addedTargets.length > 0) {
                                    $('#submitButton').show();
                                }

                                $('#volume').val(0);
                                $('#rate').val(0);

                                addButton.prop("disabled", false).text("Add");

                                $('#quantity, #packing_search, #quantityPerUom, #aquantityPerUom, #war').val('');
                                $('#item, #packing_search').trigger('change');

                            } else {
                                addButton.prop("disabled", false).text("Add");
                                showAlert('error', response.message);
                            }
                    }
                });

                // Clear input fields
            });

            // Remove item from the table
            $('#itemsTable').on('click', '.removeItem', function () {
                // Get the index of the row
                const rowIndex = $(this).closest('tr').index();
                
                // Remove the corresponding item from the addedTargets array
                addedTargets.splice(rowIndex, 1);

                // Remove the row from the table
                $(this).closest('tr').remove();

                // Hide submit button if no items are left
                if (addedTargets.length === 0) {
                    $('#submitButton').hide();
                }
                console.log(addedTargets);
            });

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

                e.preventDefault();

                const submitButton = $(this);
                submitButton.prop('disabled', true);

                // Add a loading indicator if desired (optional)
                submitButton.html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Processing...');

                const fromDate = $('#from').val() ? $('#from').val() : ''; 
                const toDate = $('#to').val() ? $('#to').val() : '';

                const isDateRangeSame = addedTargets.some(item => item.fromDate === fromDate && item.toDate === toDate);

                if (addedTargets.length > 0 && !isDateRangeSame) {
                    alert("All records must have the same date range !");
                    submitButton.prop('disabled', false);
                    submitButton.text('Submit'); // Reset button text if you added loading indicator
                    return;
                }

                const targetData = {
                    type : $('#parent').val() ? $('#parent').val() : '',
                    fromDate : $('#from').val() ? $('#from').val() : '', 
                    toDate : $('#to').val() ? $('#to').val() : '',
                    data : addedTargets,
                };

                $.ajax({
                    url: '{{ route("target.targets.store") }}',
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    },
                    data: targetData,
                    success: function (response) {
                        if (response.success == true) {
                                showAlert('success', response.message);
                                // alert('Transfer Note created successfully!');
                                location.reload();
                            } else {
                                showAlert('error', response.message);
                                submitButton.prop('disabled', false);
                                submitButton.text('Submit'); // Reset button text
                            }
                    },
                    error: function(xhr, status, error) {
                        // Handle any AJAX errors here
                        showAlert('error', 'An error occurred: ' + error);
                        submitButton.prop('disabled', false);
                        submitButton.text('Submit'); // Reset button text
                    }
                });
            });

        });

        function getItemDropdownData(input_id, id) {

        $('#quantity, #packing_search, #quantityPerUom').val('');

        $.ajax('{{ route('inventory.get.revenue-items.packing') }}', {
            type: 'get',
            data: {
                id: id,
                type: input_id
            },
            success: function(data) {
                if (data.success == true) {
                    $('#' + input_id).html(data.data);

                    var selectedItem = $('#item option:selected');
                    // Fetch the uom_quantity from the selected option
                    var uomQuantity = selectedItem.data('uom_quantity');
                    var war = selectedItem.data('war');
                    
                    // Set the quantity field with the uom_quantity
                    if (uomQuantity !== undefined) {
                        $('#aquantityPerUom').val(uomQuantity);
                    }
                    if(war != undefined)
                    {
                        $('#war').val(war);
                    }
                }
            },
            error: function(jqXhr, textStatus, errorMessage) {
                alert('Error Occurred')
            }
        });
        }


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

        $('#price, #quantity, #quantityPerUom').val('');

    });

    $('#quantity').on('input', function () {

        calculateCurrentPerUom();
    });

    function calculateCurrentPerUom()
    {
         if($('#quantity').val() !== '') {

            var packingSize = $('#packing_search').val();
            var cQuantity = $('#quantity').val() ? parseFloat($('#quantity').val()) : 0;
            var aQuantityUom = $('#aquantityPerUom').val() ? parseFloat($('#aquantityPerUom').val()) : 0;

            let uomQuantity = 0;


            // If packing is other than a single UOM
            if (packingSize && packingSize !== 'uom') {
                packingSize = parseInt(packingSize, 10);
                uomQuantity = packingSize ? cQuantity * packingSize : cQuantity;
            } else {
                uomQuantity = cQuantity;
            }

            $('#quantityPerUom').val(uomQuantity);
            
        }
    }


    </script>
@endsection