@extends('layouts/pos_layout')
@section('title', '| Manual Monthend Summary Generate Process')
@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 Monthend Summary Generate Process</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="fillOptionLevel">Option</label><br>
                @foreach ($optionLevel as $keyOption => $optionVal)
                    <input type="checkbox" class="optionVal" id="fillOption_{{ $keyOption }}" name="optionVal[]"
                        value="{{ $optionVal }}">
                    <label for="fillOption_{{ $keyOption }}">{{ $optionVal }}</label><br>
                @endforeach
            </div>
            <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="sel1">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="sel1">Month</label>
                <input type="text" id="month" name="month" class="form-control">
            </div>
            <div class="form-group col-sm-6 col-sm-offset-3">
                <label for="sel1">Total Request Will be Sent ?</label>
                <input type="number" id="requestNumber" name="requestNumber" class="form-control" value = "35">
            </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 class="col-md-3">
            Clear Log:<button type="button" value="clear" class="btn btn-warning clearBtn">Clear</button>
            <h3>Total Branch Completed:<span id="branchTotal">0</span></h3>
            <div class="branchmsg">

            </div>

        </div> --}}

    </div>
    <script>
        $(document).ready(function() {
            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;
                }
            }

            $("#month").datepicker({
                dateFormat: 'MM yy',
                changeMonth: true,
                changeYear: true,
                showButtonPanel: true,

                onClose: function(dateText, inst) {
                    var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                    var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                    $(this).val($.datepicker.formatDate('yy-MM', new Date(year, month, 1)));
                }
            });

            $("#month").focus(function() {
                $(".ui-datepicker-calendar").hide();
                //$(".ui-datepicker-current").hide();
                $("#ui-datepicker-div").position({
                    my: "center top",
                    at: "center bottom",
                    of: $(this)
                });
            });

            /////////////////////
            $("#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();
                    $('#requestNumber').val(35);
                } 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() {
                // $('.msg').html("");
                // $('.msg').append(
                //     "<h3><span style='color:green;'> => Process start for this branch.</span></h3> <br>"
                // );
                // var branceId = $("#branch_id").select2('val');

                clearInterval(Interval);
                Interval = setInterval(startTimer, 10);
                //var branceId = $('#branch_id').val();
                var branceId = $("#branch_id").select2('val');
                $('#branchTotalGiven').html(branceId.length);
                $('.msg').html("");
                $('.msg').append(
                    "<h3><span style='color:green;'> => Process start for this branch.</span></h3> <br>"
                );

                var requestNumber = $("#requestNumber").val();
                // var optionVal = document.querySelector('.optionVal:checked').value;
                var checkedValue = [];
                var i = 0;
                $('.optionVal:checked').each(function() {
                    checkedValue[i++] = $(this).val();
                });

                // var branchName = $("#branch_id").select2('data');
                var monthName = $("#month").val();
                if (branceId == '') {
                    Swal.fire({
                        icon: 'error',
                        title: 'Warning!',
                        text: 'Please select Branch ',
                        showConfirmButton: true,
                        confirmButtonColor: '#d33',
                    })
                    return false;
                }
                if (requestNumber == '') {
                    Swal.fire({
                        icon: 'error',
                        title: 'Warning!',
                        text: 'Please enter request number to sent ',
                        showConfirmButton: true,
                        confirmButtonColor: '#d33',
                    })
                    return false;
                }
                var branchTotal = 0;
                var finalReQuestNo = parseInt(branceId.length / requestNumber);
                const n = finalReQuestNo
                const result = new Array(Math.ceil(branceId.length / n))
                    .fill()
                    .map(_ => branceId.splice(0, n));



                $.each(result, function(index, brnach_ids) {
                    $.ajax({
                        type: 'post',
                        url: '{{ Request::url() }}',
                        data: {
                            '_token': $('input[name=_token]').val(),
                            'ids': brnach_ids,
                            'date': monthName,
                            'optionData': checkedValue,
                        },
                        beforeSend: function() {
                            $('#loadingModal').show();
                        },
                        success: function(_response) {
                            $('#loadingModal').hide();
                            if (_response.responseTitle == 'success') {
                                $('.msg').append("<span > => " + _response
                                    .responseText + "</span> <br>");
                            } else {
                                $('.msg').append("<span > => " + _response
                                    .responseText + "</span> <br> ");
                            }
                            if (_response.responseTextBranch) {
                                // branchTotal += _response.total;
                                branchTotal += _response.total;
                                $('.branchmsg').append("<span >" + _response
                                    .responseTextBranch + "</span>");
                                $('#branchTotal').html(branchTotal);
                                if (result.length == branchTotal) {
                                    clearInterval(Interval);
                                }
                            }
                        },
                        error: function(_response) {
                            $('#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;
                var requestNumber = 1;
                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) {
                        // console.log(_response.length);
                        if (_response.length > 0) {
                            $('#branch_id').val(_response).trigger('change');
                            requestNumber = Math.round((_response.length) / 5);
                            $('#requestNumber').val(requestNumber);
                        } else {
                            $('#branch_id').select2('destroy').find('option').prop('selected',
                                    false).end()
                                .select2();
                        }
                        // console.log(_response);
                    }
                });
            });
        });
    </script>
@endsection