@extends('layouts/pos_layout')
@section('title', '| Pos Due Summery')
@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 Due Summery 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><br><br>
        <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">Date</label>
            <input type="date" id="from" name="from" 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>
        <h1>Total Branch Completed:<span id="branchTotal">0</span> of <span id="branchTotalGiven">0</span></h1>
        <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;
            }
        }

        /////////////////////
        $("#checkbox").click(function() {
            if ($("#checkbox").is(':checked')) {
                $('#branch_id').select2('destroy').find('option').prop('selected', 'selected').end().select2();
            } 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 branchName = $("#branch_id").select2('data');


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

                })
                return false;
            }
            if (branceId == '' || from == '') {
                Swal.fire({
                    icon: 'error',
                    title: 'Warning!',
                    text: 'Please select Branch & Date',
                    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
                    },
                    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++;
                            $('.branchmsg').append("<span >" + _response.responseTextBranch + "</span>");
                            $('#branchTotal').html(branchTotal);
                            if(branceId.length == branchTotal){
                                clearInterval(Interval);
                            }
                        }
                    }
                });
            });


        });

    });
</script>
@endsection