@extends('layouts/pos_layout')
@section('title', '| Pos Day End')
@section('content')
    <style>
        .page-container .main-content {
            overflow: hidden;
            background-color: #00000091;
            color: #00c200;
            font-weight: bold;
            font-family: monospace;
        }

        label {
            font-weight: 400;
            font-size: 17px;
        }

        #manualForm .select2-container {
            min-width: 100% !important;
            min-height: 128px;
            overflow: scroll !important;
            max-height: 150px !important;
        }
    </style>
    <div class="container ">
        <center>
            <h3>Manual Voucher Generate Panel All Branch For Dev</h3>
        </center>
        <hr />

        <form method="post" id="manualForm">
            @csrf
            <br><br><br>
            <input type="checkbox" id="checkbox">Select All
            <br>
            <div class="form-group col-sm-6 col-sm-offset-3">
                <label for="fillReportLevel">Report Label:</label>
                <select class="form-control" name="fillReportLevel" id="fillReportLevel" required>
                    <option value=''>Select Report Level</option>
                    <option value='Branch'>Branch</option>
                    <option value='Area'>Area</option>
                    <option value='Zone'>Zone</option>
                    <option value='Region'>Division</option>
                </select>
            </div>
            @php
                $areas = App\Service\Service::getUserAccessibleAreas();
                $zones = App\Service\Service::getUserAccessibleZones($areas->pluck('id')->toArray());
                $regions = App\Service\Service::getUserAccessibleRegions($zones->pluck('id')->toArray());
            @endphp
            <div class="form-group col-sm-6 col-sm-offset-3" id="regionDiv"
                style="display: none;>
                {!! Form::label('OptRegion', 'Division:', ['class' => 'control-label']) !!} <br />
                <select id="fillRegionId"
                name="fillRegionId" class="form-control input-sm custom-select2 fillReportLevelCustom">
                <option value="">Select an option</option>
                @foreach ($regions as $region)
                    <option value="{{ $region->id }}">{{ $region->name }}</option>
                    @php
                        $zoneIds = str_replace(['"', '[', ']'], '', $region->zoneId);
                        $zoneIds = explode(',', $zoneIds);
                        $thsiRegionZones = $zones->whereIn('id', $zoneIds);
                    @endphp
                    @foreach ($thsiRegionZones as $zone)
                        <option value="" disabled="disabled">&nbsp {{ $zone->name }}</option>
                    @endforeach
                @endforeach
                </select>
            </div>

            <div class="form-group col-sm-6 col-sm-offset-3" id="zoneDiv"
                style="display: none;>
                {!! Form::label('OptZone', 'Zone:', ['class' => 'control-label']) !!} <br />
                <select id="fillZoneId"
                name="fillZoneId" class="form-control input-sm custom-select2 fillReportLevelCustom">
                <option value="">Select an option</option>
                @foreach ($zones as $zone)
                    <option value="{{ $zone->id }}">{{ $zone->name }}</option>
                    @php
                        $areaIds = str_replace(['"', '[', ']'], '', $zone->areaId);
                        $areaIds = explode(',', $areaIds);
                        $thisZoneAreas = $areas->whereIn('id', $areaIds);
                    @endphp
                    @foreach ($thisZoneAreas as $area)
                        <option value="" disabled="disabled">&nbsp {{ $area->name }}</option>
                    @endforeach
                @endforeach
                </select>
            </div>

            <div class="form-group col-sm-6 col-sm-offset-3" id="areaDiv"
                style="display: none;>
                {!! Form::label('OptArea', 'Area:', ['class' => 'control-label']) !!} <br />
                <select id="fillAreaId"
                name="fillAreaId" class="form-control input-sm custom-select2 fillReportLevelCustom">
                <option value="">Select an option</option>
                @foreach ($areas as $area)
                    <option value="{{ $area->id }}">{{ $area->name }}</option>
                    @php
                        $barnchIds = str_replace(['"', '[', ']'], '', $area->branchId);
                        $barnchIds = explode(',', $barnchIds);
                        $thisAreaBranches = $branches->whereIn('id', $barnchIds);
                    @endphp
                    @foreach ($thisAreaBranches as $branch)
                        <option value="" disabled="disabled">&nbsp {{ $branch->name }}</option>
                    @endforeach
                @endforeach
                </select>
            </div>
            <div class="form-group col-sm-6 col-sm-offset-3">
                <label for="branch_id">
                    Branch:</label>
                <select class="form-control custom-select2" name="branch_id[]" id="branch_id" required multiple="multiple">
                    <option value=''>Select Branch</option>
                    @foreach ($branches as $branch)
                        <option value='{{ $branch->id }}'>{{ $branch->branchCode }} - {{ $branch->name }}</option>
                    @endforeach
                </select>
            </div>

            <div class="form-group col-sm-6 col-sm-offset-3">
                <label for="sector"> Sector:</label>
                <label class="checkbox-inline">
                    <input id="selectAll" name="selectAll" type="checkbox" value="1" />All
                </label><br>
                <div class="form-group col-sm-6">
                    <ul style="list-style: none;">
                        <li>
                            <label class="checkbox-inline">
                                <input type="checkbox" value="purchase" name="purchase"
                                    class="manual_voucher_value_add">Purchase
                            </label>
                        </li>
                        <li>
                            <label class="checkbox-inline">
                                <input type="checkbox" value="purchase_return" name="purchase_return"
                                    class="manual_voucher_value_add">Purchase Return
                            </label>
                        </li>
                        <li>
                            <label class="checkbox-inline">
                                <input type="checkbox" value="cash_sale" name="cash_sale"
                                    class="manual_voucher_value_add">Cash Sale
                            </label>
                        </li>
                        <li>
                            <label class="checkbox-inline">
                                <input type="checkbox" value="installment_sale" name="installment_sale"
                                    class="manual_voucher_value_add">Installment Sale
                            </label>
                        </li>
                        <li>
                            <label class="checkbox-inline">
                                <input type="checkbox" value="due_sale" name="due_sale"
                                    class="manual_voucher_value_add">Due Sale
                            </label>
                        </li>
                        <li>
                            <label class="checkbox-inline">
                                <input type="checkbox" value="billing_sale" name="billing_sale"
                                    class="manual_voucher_value_add">Billing Sale
                            </label>
                        </li>
                        <li>
                            <label class="checkbox-inline">
                                <input type="checkbox" value="daily_due_summery" name="daily_due_summery"
                                    class="manual_voucher_value_add">Daily Due Summery
                            </label>
                        </li>
                    </ul>
                </div>
                <div class="form-group col-sm-6">
                    <ul style="list-style: none;">
                        <li>
                            <label class="checkbox-inline">
                                <input type="checkbox" value="sale_return" name="sale_return"
                                    class="manual_voucher_value_add">Sale Return
                            </label>
                        </li>
                        <li>
                            <label class="checkbox-inline">
                                <input type="checkbox" value="sale_replace" name="sale_replace"
                                    class="manual_voucher_value_add">Sale Replace
                            </label>
                        </li>
                        <li>
                            <label class="checkbox-inline">
                                <input type="checkbox" value="damage" name="damage"
                                    class="manual_voucher_value_add">Damage
                            </label>
                        </li>
                        <li>
                            <label class="checkbox-inline">
                                <input type="checkbox" value="gift" name="gift"
                                    class="manual_voucher_value_add">Gift
                            </label>
                        </li>
                        <li>
                            <label class="checkbox-inline">
                                <input type="checkbox" value="write_off" name="write_off"
                                    class="manual_voucher_value_add">Write Off
                            </label>
                        </li>
                        <li>
                            <label class="checkbox-inline">
                                <input type="checkbox" value="rebate_off" name="rebate_off"
                                    class="manual_voucher_value_add">Rebate Off
                            </label>
                        </li>
                    </ul>

                </div>

            </div>
            <div class="form-group col-sm-6 col-sm-offset-3">
                <label for="from">From</label>
                <input type="date" id="from" name="from" class="form-control">

            </div>
            <div class="form-group col-sm-6 col-sm-offset-3">
                <label for="to">To</label>
                <input type="date" id="to" name="to" class="form-control">
            </div>

            <div class="form-group col-sm-6 col-sm-offset-3">
                <button type="button" class="btn btn-success actionbtn">Submit</button>
            </div>



        </form>

        <br />


    </div>
    <div class="row" style="background-color:#000;">
        <div class="msg col-md-9" style="color: #379226;">

        </div>

        <div class="col-md-3">
            Clear Log:<button type="button" value="clear" class="btn btn-warning clearBtn">Clear</button>
            <h4>Timer: <p><span id="seconds">00</span>:<span id="tens">00</span> Secons</p>
            </h4>
            <h3>Total Branch Completed:<span id="branchTotal">0</span> of <span id="branchTotalGiven">0</span></h3>
            <div class="branchmsg">

            </div>

        </div>

    </div>
    <script>
        $(document).ready(function() {
            $('#selectAll').click(function () {
                $('.manual_voucher_value_add').prop('checked', this.checked);
            });

            $('.manual_voucher_value_add').click(function () {
                if ($('.manual_voucher_value_add:checked').length === $('.manual_voucher_value_add').length) {
                    $('#selectAll').prop('checked', true);
                } else {
                    $('#selectAll').prop('checked', false);
                }
            });

            var seconds = 00;
            var tens = 00;
            var appendTens = document.getElementById("tens")
            var appendSeconds = document.getElementById("seconds")
            var buttonStart = document.getElementById('button-start');
            var buttonStop = document.getElementById('button-stop');
            var buttonReset = document.getElementById('button-reset');
            var Interval;



            function startTimer() {
                tens++;
                if (tens <= 9) {
                    appendTens.innerHTML = "0" + tens;
                }
                if (tens > 9) {
                    appendTens.innerHTML = tens;

                }
                if (tens > 99) {
                    // console.log("seconds");
                    seconds++;
                    appendSeconds.innerHTML = "0" + seconds;
                    tens = 0;
                    appendTens.innerHTML = "0" + 0;
                }
                if (seconds > 9) {
                    appendSeconds.innerHTML = seconds;
                }
            }

            /////////////////////
            $("#checkbox").click(function() {
                if ($("#checkbox").is(':checked')) {
                    $('#branch_id').select2('destroy').find('option').prop('selected', 'selected').end()
                        .select2();
                    $('#fillReportLevel').val('Branch').trigger('change');
                    $("#areaDiv").hide();
                    $("#zoneDiv").hide();
                    $("#regionDiv").hide();
                } else {
                    $('#branch_id').select2('destroy').find('option').prop('selected', false).end()
                        .select2();
                }
            });

            $(".clearBtn").click(function() {
                $('.msg').html("");
                $('.branchmsg').html("");
                $('#branchTotal').html('0');
                $('#branchTotalGiven').html('');
                //clear timer
                resetTimer();
            });

            function resetTimer() {
                clearInterval(Interval);
                tens = "00";
                seconds = "00";
                appendTens.innerHTML = tens;
                appendSeconds.innerHTML = seconds;
            }

            $(".actionbtn").click(function() {

                clearInterval(Interval);
                Interval = setInterval(startTimer, 10);
                var branceId = $('#branch_id').val();
                $('#branchTotalGiven').html(branceId.length);
                $('.msg').html("");
                $('.msg').append(
                    "<h3><span style='color:green;'> => Process start for this branch.</span></h3> <br>"
                );
                var from = $('#from').val();
                var to = $('#to').val();
                var branchName = $("#branch_id").select2('data');
                const manual_voucher_value_adds = document.querySelectorAll(".manual_voucher_value_add");
                // let selectedManualVoucherValueAdd = [];

                // manual_voucher_value_adds.forEach(manual_voucher_value_add => {
                //     if (manual_voucher_value_add.checked) {
                //         // selectedManualVoucherValueAdd.push(manual_voucher_value_add.value);
                //         selectedManualVoucherValueAdd[manual_voucher_value_add.value] = manual_voucher_value_add.value;
                //         // selectedManualVoucherValueAdd.push({
                //         //     key: manual_voucher_value_add.value,  // Change 'key' to your preferred property name
                //         //     value: manual_voucher_value_add.value
                //         // });
                //     }
                // });
                let selectedManualVoucherValueAdd = {};

                manual_voucher_value_adds.forEach(manual_voucher_value_add => {
                    if (manual_voucher_value_add.checked) {
                        selectedManualVoucherValueAdd[manual_voucher_value_add.value] = manual_voucher_value_add.value;
                    }
                });


                if (branceId == '') {
                    Swal.fire({
                        icon: 'error',
                        title: 'Warning!',
                        text: 'Please select Branch ',
                        showConfirmButton: true,
                        confirmButtonColor: '#d33',

                    })
                    return false;
                }
                if (branceId == '' || from == '' || to == '') {
                    Swal.fire({
                        icon: 'error',
                        title: 'Warning!',
                        text: 'Please select Branch & Date range',
                        showConfirmButton: true,
                        confirmButtonColor: '#d33',

                    })
                    return false;
                }
                var branchTotal = 0;
                $.each(branceId, function(index, brnach_id) {

                    $.ajax({
                        type: 'post',
                        url: '{{ Request::url() }}',
                        data: {
                            '_token': $('input[name=_token]').val(),
                            'id': brnach_id,
                            'name': branchName[index].text,
                            'date': from,
                            'to': to,
                            'selectedManualVoucherValueAdd': selectedManualVoucherValueAdd,
                        },
                        beforeSend: function() {
                            $('#loadingModal').show();
                        },
                        success: function(_response) {
                            $('#loadingModal').hide();
                            if (_response.responseTitle == 'success') {


                                $('.msg').append("<span > => " + _response
                                    .responseText + "</span> <br>");
                                $('#loadingModal').hide();

                            } else {

                                $('.msg').append("<span > => " + _response
                                    .responseText + "</span> <br> ");
                                $('#loadingModal').hide();
                            }


                            if (_response.responseTextBranch) {
                                branchTotal++;
                                $('.branchmsg').append("<span >" + _response
                                    .responseTextBranch + "</span>");
                                $('#branchTotal').html(branchTotal);
                                if (branceId.length == branchTotal) {
                                    clearInterval(Interval);
                                }
                                $('#loadingModal').hide();
                            }
                        },
                        error: function( _response ){
                            toastr.error(_response.errors);
                            $('#loadingModal').hide();
                        }
                    });
                });


            });


            $("#fillReportLevel").change(function(event) {
                if ($(this).val() == "Branch") {
                    $('#branch_id').select2('destroy').find('option').prop('selected', 'selected').end()
                        .select2();
                    $("#areaDiv").hide();
                    $("#zoneDiv").hide();
                    $("#regionDiv").hide();
                } else if ($(this).val() == "Area") {
                    $("#areaDiv").show();
                    $("#zoneDiv").hide();
                    $("#regionDiv").hide();
                    $('#branch_id').select2('destroy').find('option').prop('selected', false).end()
                        .select2();
                } else if ($(this).val() == "Zone") {
                    $("#areaDiv").hide();
                    $("#zoneDiv").show();
                    $("#regionDiv").hide();
                    $('#branch_id').select2('destroy').find('option').prop('selected', false).end()
                        .select2();
                } else if ($(this).val() == "Region") {
                    $("#areaDiv").hide();
                    $("#zoneDiv").hide();
                    $("#regionDiv").show();
                    $('#branch_id').select2('destroy').find('option').prop('selected', false).end()
                        .select2();
                } else {
                    $("#areaDiv").hide();
                    $("#zoneDiv").hide();
                    $("#regionDiv").hide();
                    $('#branch_id').select2('destroy').find('option').prop('selected', false).end()
                        .select2();
                }
            });

            $(".fillReportLevelCustom").change(function(event) {
                event.preventDefault();
                var fillReportLevel = $('#fillReportLevel').val();
                var customFilled = null;
                if (fillReportLevel == "Branch") {
                    customFilled = $('#branch_id').val();
                } else if (fillReportLevel == "Area") {
                    customFilled = $('#fillAreaId').val();

                } else if (fillReportLevel == "Zone") {
                    customFilled = $('#fillZoneId').val();

                } else if (fillReportLevel == "Region") {
                    customFilled = $('#fillRegionId').val();
                }
                $.ajax({
                    type: "post",
                    url: "{{ url('pos/manualProcess/getReportLevelForBranch') }}",
                    data: {
                        'fillReportLevelCustom': fillReportLevel,
                        'customFilled': customFilled
                    },
                    dataType: "json",
                    success: function(_response) {
                        if (_response.length > 0) {
                            $('#branch_id').val(_response).trigger('change');
                        } else {
                            $('#branch_id').select2('destroy').find('option').prop('selected',
                                    false).end()
                                .select2();
                        }
                        // console.log(_response);
                    }
                });
            });
        });
    </script>
@endsection