@extends('layouts/contentLayoutMaster')
@section('title', 'Update Reverted Target')

@section('vendor-style')
    {{-- vendor css files --}}
    <link rel="stylesheet" href="{{ asset('vendors/css/tables/datatable/dataTables.bootstrap5.min.css') }}">
    <link rel="stylesheet" href="{{ asset('vendors/css/tables/datatable/buttons.bootstrap5.min.css') }}">
    <link rel="stylesheet" href="{{ asset('vendors/css/extensions/sweetalert2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('/css/custom.css') }}">
@endsection
@section('content')
    <!-- Column Search -->
    <section id="pricing_div">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="row border-bottom py-2">
                        <div class="col-3">
                            <h4 class="card-title pt-1 my-auto">Update Target - {{$target->code}}</h4>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row pb-1">
                            <div class="col-6">
                                <h5 class="pb-1 text-primary">
                                    <b>Type :</b>  {{$target->type ? $target->type : ''}}
                                </h5>
                                <h5 class="pb-1 text-primary">
                                    <b>From :</b>  {{$target->from ? $target->from : ''}}
                                </h5>
                                <h5 class="pb-1 text-primary">
                                    <b>To :</b>  {{ $target->to ? $target->to : '' }}
                                </h5>
                                {{-- <h5 class="pb-1">
                                    <b>Created By :</b>  {{$target->createdBy ? $target->createdBy->name : ''}}
                                </h5> --}}
                            </div>
                        </div>
                        <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>
                                    <input type="hidden" value="{{$target->_id}}" name="target_id" id="target_id"/>
                                    <input type="hidden" value="{{$target->code}}" name="code" id="code"/>
                                </div>
                            </div>
                            <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 mt-1 ">
                            @include('content._partials._sections.target_filter')
                        </div>
                        <div class="row d-flex">
                            
                            <div class="col-12 d-flex">
                                <button type="button" id="addItem" class="btn btn-primary me-1">Add</button>
                                <a id="resetItem" class="btn btn-outline-secondary " onclick="getSelectedParent('reset')">Reset</a>
                            </div>
                        </div>

                        <div class="card-datatable table-responsive mt-3">
                            <table class="table" id="price_table">
                                <thead>
                                    <tr>
                                        <th class="text-center">Sr</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">Target (Vol)</th>
                                        <th class="text-center">Target (Price)</th>
                                        <th class="text-center">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <form action="#" id="edit_price">
                                        
                                        @foreach ($targetDetails as $key => $tar)
                                            <tr id="row_{{ $tar->id }}" class="prices_tr">
                                                <td>{{ $key + 1 }}</td>
                                                <td style="background-color: {{ empty($tar->plantText) ? '#fff4f4' : 'transparent' }};">
                                                    {{ $tar->plantText ?? '' }}
                                                </td>
                                                <td style="background-color: {{ empty($tar->area_office_text) ? '#fff4f4' : 'transparent' }};">
                                                    {{ $tar->area_office_text ?? '' }}
                                                </td>
                                                <td style="background-color: {{ empty($tar->collection_point_text) ? '#fff4f4' : 'transparent' }};">
                                                    {{ $tar->collection_point_text ?? '' }}
                                                </td>
                                                <td style="background-color: {{ empty($tar->source_type_text) ? '#fff4f4' : 'transparent' }};">
                                                    {{ $tar->source_type_text ?? '' }}
                                                </td>
                                                <td style="background-color: {{ empty($tar->employee_text) ? '#fff4f4' : 'transparent' }};">
                                                    {{ $tar->employee_text ?? '' }}
                                                </td>
                                                <td>
                                                    <input id="volume_{{ $tar->id }}" name="volume[]" required
                                                        type="number" class="form-control width-100"
                                                        value="{{ $tar->volume }}" min="0" max="100000"
                                                        step=".01">
                                                </td>
                                                <td>
                                                    <input id="price_{{ $tar->id }}" name="price[]" required
                                                        type="number" class="form-control width-100"
                                                        value="{{ $tar->rate }}" min="0" max="10000"
                                                        step=".01">
                                                </td>
                                                <td>
                                                    <a onclick="delRow('{{ $tar->id }}')"
                                                        class="btn btn-danger btn-sm del_btn"><i
                                                            data-feather="trash"></i></a>
                                                    <a onclick="editRow('{{ $tar->id }}')"
                                                        class="btn btn-primary btn-sm edit_btn">
                                                        <i data-feather="edit"></i>
                                                </td>
                                            </tr>
                                        @endforeach
                                            <tr id="sbt_tr">
                                                <td colspan="8"></td>
                                                <td class="px-2"><input type="submit" value="Submit" id="sbt_approval_btn" class="btn btn-success btn-sm w-100"></td>
                                            </tr>
                                    </form>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </section>
@endsection

@section('vendor-script')
    <script src="{{ asset('vendors/js/tables/datatable/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('vendors/js/tables/datatable/dataTables.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendors/js/tables/datatable/datatables.buttons.min.js') }}"></script>
    <script src="{{ asset('vendors/js/tables/datatable/buttons.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendors/js/extensions/sweetalert2.all.min.js') }}"></script>
    <script src="{{ asset('/js/custom.js') }}"></script>

    <script>
        $("#sbt_approval_btn").click(function(e) {
            e.preventDefault();
            let code = $('#code').val();
            let msg = ''
            if (!code) {
                msg = ' for approval';
            }
            let priceIds = [];
            $('.prices_tr').each(function() {
                let id = $(this).attr('id').split('_')[1];
                priceIds.push(id);
            });

            // Including price IDs in the data to be sent
            let data = {
                targetId : $('#target_id').val(),
                code: code,
                id: priceIds,
                type: 'revert'
            };
            // let data = $(this).serialize();
            Swal.fire({
                title: 'Are you sure?',
                text: "You want to send these targets" + msg + "?",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        data: data,
                        type: "get",
                        dataType: 'JSON',
                        url: '{{ route('target.send.for.updateRevertedTargetApproval') }}',
                        success: function(response) {
                            if (response.success == true) {
                                showAlert('success', response.message);
                                $('#sbt_approval_btn').hide();
                                $('.del_btn').hide();
                                $('.edit_btn').hide();
                            } else {
                                showAlert('error', response.message);
                            }
                        }
                    });
                }
            })
        })

        function delRow(id) {
            if ($('.prices_tr').length >= 1) {
                $('#row_' + id).remove();
                $.ajax({
                    type: "get",
                    dataType: 'JSON',
                    url: '{{ route('target.del') }}',
                    data: {
                        id: id
                    },
                    success: function(response) {
                        if (response.success) {
                            $('#row_' + id).remove();
                            addedTargets = addedTargets.filter(item => item._id !== id);
                            let counter = parseInt($('#created_counter').text()) - 1;
                            $('#created_counter').text(counter);
                            if (counter < 1) {
                                $('#empty_tr').show();
                                $('#sbt_tr').hide();
                            }

                            Swal.fire(
                                'Done!',
                                response.message,
                                'success'
                            )
                        } else {
                            Swal.fire(
                                'Oops!',
                                response.message,
                                'error'
                            )
                        }
                    }
                });
            } else {
                showAlert('error', 'At least 1 entry is required');
            }

        }

        function editRow(id) {
            var price = document.getElementById('price_' + id).value;
            var volume = document.getElementById('volume_' + id).value;

            $.ajax({
                url: '{{ route('target.updateReverted') }}',
                type: 'POST',
                data: {
                    id: id,
                    price: price,
                    volume: volume,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    showAlert('success', response.message);
                },
                error: function(response) {
                    if (response.status === 422) {
                        var errors = response.responseJSON.errors;
                        var errorMessage = '';
                        for (var field in errors) {
                            if (errors.hasOwnProperty(field)) {
                                errorMessage += errors[field] + '\n';
                            }
                        }
                        showAlert('error', errorMessage);
                    } else {
                        console.error("Error updating data", response);
                        showAlert('error', 'An unexpected error occurred.');
                    }
                }
            });
        }



        /////////////////////////////////////////////////////////////////////////////

        let addedTargets = @json($targetDetails); 

        $('.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 !== "") {
                
                $('.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);
                }
                $('#item,#packing_search,#quantity').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 selectedOption = $('#collection_point_search').find('option:selected');
                const agent_id = selectedOption.data('user-id') ? selectedOption.data('user-id') : null;
                const agent_text = selectedOption.data('user-name') ? selectedOption.data('user-name') : null;

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

                let employee = null;
                let employee_text = null;

                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 };


                // 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;
                }


                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:{
                        target_id: $('#target_id').val(),
                        type: type,
                        typeText: typeText,
                        plant: plant,
                        plantText: plantText,
                        area_office: area_office,
                        area_office_text: area_office_text,
                        collection_point: collection_point,
                        collection_point_text: collection_point_text,
                        source_type: source_type,
                        source_type_text: source_type_text,
                        employee: employee,
                        employee_text: employee_text,
                        volume: volume,
                        rate: rate,
                        workflow_type:'reverted'
                    },
                    success: function (response) {
                            
                            if (response.success == true) {

                                addedTargets.push(response.tar);
                                console.log(addedTargets);
                                $('#price_table').find('tbody').prepend(response.data);

                                $('#created_counter').text(parseInt($('#created_counter').text()) + 1);
                                $('#sbt_tr').show();
                                $('#empty_tr').hide();

                                $('#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);
                            }
                            $('.sbt_btn').toggleClass("btn-danger", "btn-primary");
                    }
                });

                // Clear input fields
                });

        })


    </script>
@endsection