@extends('layouts/pos_layout')
@section('title', '| Manual Day End & Day Back')
@section('content')
    <style>
        .select2-container--default .select2-selection--multiple .select2-selection__rendered {
            height: 100px;
        }

        .msg {
            height: 200px;
            overflow-y: auto;
        }
    </style>
    <div class="row add-data-form" style="height:100%">
        <div class="col-md-12">
            <div class="col-md-1"></div>
            <div class="col-md-10 fullbody">
                <div class="viewTitle" style="border-bottom: 1px solid white;">
                    <a href="{{ url('pos/posDayEnd/') }}" class="btn btn-info pull-right addViewBtn"><i
                            class="glyphicon glyphicon-th-list viewIcon">
                        </i>Pos Day End List</a>
                </div>
                <div class="panel panel-default panel-border">
                    <div class="panel-heading">
                        <div class="panel-title">Manual Day End & Day Back</div>
                    </div>
                    <div class="panel-body">

                        <div class="row">

                            <div class="tab-content" id="formDiv">

                                <div class="col-md-offset-2 col-md-8" id="opening">

                                    {!! Form::open([
                                        'url' => '',
                                        'id' => 'manualForm',
                                        'method' => 'post',
                                        'enctype' => 'multipart/form-data',
                                        'role' => 'form',
                                        'class' => 'form-horizontal form-groups',
                                    ]) !!}

                                    @csrf
                                    <div class="col-md-12">

                                        <div class="form-group">
                                            {!! Form::label('Action Sector', 'Action Sector:*', ['class' => 'col-sm-3 control-label']) !!}
                                            <div class="col-sm-9">
                                                {!! Form::select('action_system', $actionSectorType, null, [
                                                    'class' => 'form-control',
                                                    'id' => 'action_system',
                                                    'placeholder' => 'Select Action Sector',
                                                ]) !!}
                                                <p id='action_systeme' style="max-height:3px;"></p>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            {!! Form::label('branch_id', 'Branch*', ['class' => 'col-sm-3 control-label']) !!}
                                            <div class="col-sm-9">
                                                <select name="branch_id[]" id="branch_id"
                                                    class="form-control custom-select2" required>
                                                    <option value=''>Select Branch</option>
                                                    @if ($branches)
                                                        @foreach ($branches as $key => $branch)
                                                            <option value='{{ $branch->id }}'>{{ $branch->branchCode }} -
                                                                {{ $branch->name }}</option>
                                                        @endforeach
                                                    @endif
                                                </select>
                                                <p id='branch_ide' style="max-height:3px;position: relative;top:65px;">
                                                </p>
                                            </div>
                                            {{-- <input type="checkbox" id="checkbox"><label for="checkbox">Select All</label> --}}
                                        </div>
                                        <div class="form-group">
                                            {!! Form::label('from', 'From:*', ['class' => 'col-sm-3 control-label']) !!}
                                            <div class="col-sm-9">
                                                {!! Form::text('from', $value = null, [
                                                    'class' => 'form-control',
                                                    'id' => 'from',
                                                    'type' => 'text',
                                                    'placeholder' => 'Enter Effect From',
                                                    'readonly' => true,
                                                ]) !!}
                                                <p id='frome' style="max-height:3px;"></p>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            {!! Form::label('to', 'To:*', ['class' => 'col-sm-3 control-label']) !!}
                                            <div class="col-sm-9">
                                                {!! Form::text('to', $value = null, [
                                                    'class' => 'form-control',
                                                    'id' => 'to',
                                                    'type' => 'text',
                                                    'placeholder' => 'Enter Effect To',
                                                    'readonly' => true,
                                                ]) !!}
                                                <p id='toe' style="max-height:3px;"></p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6"></div>
                                        <div class="form-group col-md-10 text-center">
                                            {!! Form::label('submit', ' ', ['class' => 'col-sm-2 control-label']) !!}
                                            <div class="col-sm-12">
                                                <button type="button" class="btn btn-info actionbtn">Submit</button>
                                                <a href="{{ url('pos/posDayEnd/') }}"
                                                    class="btn btn-danger closeBtn">Close</a>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <span id="success" style="color:green; font-size:20px;"></span>
                                        </div>
                                    </div>

                                    {!! Form::close() !!}

                                </div>
                            </div>

                        </div>

                    </div>
                </div>
                <div class="footerTitle" style="border-top:1px solid white"></div>
            </div>
            <div class="col-md-1"></div>
        </div>
    </div>



    {{-- <div class="container ">
        <center>
            <h3>Manual Voucher Day End & 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">Action Sector</label>
                <select class="form-control" name="action_system" id="action_system" required>
                    <option value=''>Select Action</option>
                    <option value='day_end_delete'>Day End Delete</option>
                    <option value='day_end_update'>Day End</option>
                </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">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="sel1">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>
            <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() {

            $("#from").datepicker({
                changeMonth: true,
                changeYear: true,
                dateFormat: 'dd-mm-yy',
                onSelect: function() {
                    var from = $("#from").val();
                    if (from) {
                        $('#frome').hide();
                    } else {
                        $('#frome').show();
                    }
                }
            });

            $("#to").datepicker({
                changeMonth: true,
                changeYear: true,
                dateFormat: 'dd-mm-yy',
                onSelect: function() {
                    var to = $("#to").val();
                    if (to) {
                        $('#toe').hide();
                    } else {
                        $('#toe').show();
                    }
                }
            });

            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 action_system = $('#action_system').val();
                var from = $('#from').val();
                var to = $('#to').val();
                var branchName = $("#branch_id").select2('data');

                if (action_system == '') {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Warning!',
                        text: 'Please select Action Sector ',
                        showConfirmButton: true,
                        confirmButtonColor: '#d33',

                    })
                    //clearInterval(Interval);
                    return false;

                }

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

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

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

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

                        Swal.fire({
                            icon: _response.responseStatus,
                            title: _response.responseTitle,
                            text: _response.responseText,
                            showConfirmButton: true,
                            confirmButtonColor: '#d33',
                        });

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

                        // if (_response.responseStatus == 'success') {
                        //     // Swal.fire({
                        //     //     icon: _response.responseTitle,
                        //     //     title: 'Success!',
                        //     //     text: _response.responseText,
                        //     //     showConfirmButton: true,
                        //     //     confirmButtonColor: '#d33',

                        //     // })
                        // } else {
                        //     $('.msg').append("<span > => " + _response
                        //         .responseText + "</span> <br> ");
                        //     // Swal.fire({
                        //     //     icon: _response.responseTitle,
                        //     //     title: 'Warning!',
                        //     //     text: _response.responseText,
                        //     //     showConfirmButton: true,
                        //     //     confirmButtonColor: '#d33',

                        //     // })
                        // }


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


            });

        });
    </script>
@endsection