@extends('layouts.authenticated')
@section('action','active')
@section('additionalstylesheets')
    <style type="text/css">
        .btn-large {
            padding: 11px 19px;
            font-size: 17.5px;
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            border-radius: 6px;
            /*width: 300px;*/
        }

        .progress-bar {
            margin-bottom: 10px;
        }

    </style>
@endsection
@section('content')

    <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <div class="panel panel-info">
        <div class="panel-heading text-center panel-relative">TLOGS</div>
        <div class="panel-body">
            <div class="row col-sm-12">
                <div id="progress-get-tlogs"
                     class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar"
                     aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
                     style="display: none">
                    0%
                </div>
            </div>
            <div class="row">
                <div class="form-group col-sm-4">
                    <button id="btn-get-tlogs" class="btn btn-large btn-primary btn-block"
                            type="button">Get TLOGS from trunc
                    </button>
                </div>
                <div class="col-sm-8">
                    <ul>
                        {{--<span>Description</span>--}}
                        <li>
                            <span style="display: none" id="spinnerGetTlogs" class="fa fa-spinner fa-spin"></span>
                            <span style="display: none" id="successGetTLOGS" class="fa fa-check"></span>
                            <span style="display: none" id="errorGetTLOGS" class="fa fa-times"></span>
                            Get TLOGS from trunc by date parameter
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
  {{--  <div class="panel panel-info">
        <div class="panel-heading text-center panel-relative">POS INVENTORY</div>
        <div class="panel-body">
            <div class="row col-sm-12">
                <div id="progress-get-posdelta"
                     class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar"
                     aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
                     style="display: none">
                    0%
                </div>
            </div>
            <div class="row">
                <div class="form-group col-sm-4">
                    <button id="btn-auto-pos-delta" class="btn btn-large btn-primary btn-block"
                            type="button">Auto Run POS DELTA
                    </button>
                </div>
                <div class="col-sm-8">
                    <ul>
                        <li>
                            <span style="display: none" id="spinnerGetPosDelta" class="fa fa-spinner fa-spin"></span>
                            <span style="display: none" id="successGetPosDelta" class="fa fa-check"></span>
                            <span style="display: none" id="errorGetTPosDelta" class="fa fa-times"></span>
                            Get POS DELTA from CDN
                        </li>
                        <li>
                            <span style="display: none" id="spinnerSendPosDelta" class="fa fa-spinner fa-spin"></span>
                            <span style="display: none" id="successSendPosDelta" class="fa fa-check"></span>
                            <span style="display: none" id="errorSendTPosDelta" class="fa fa-times"></span>
                            Send POS DELTA to SFTP
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>--}}

    <div id="modal-get-tlogs" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Confirmation</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <form id="form-get-tlogs">
                            <input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}">
                            <div class="form-group col-sm-12">
                                <label for="date">Transaction Date</label>
                                <input type="date" name="tlog_transaction_date" id="tlog_transaction_date"
                                       class="form-control"
                                       placeholder="dd-mm-yyyy" value="{{date('Y-m-d')}}" required
                                       value="{{ old('tlog_transaction_date') }}">
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success btn-get-tlogs">Generate</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>
    <div id="modal-auto-pos-delta" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Confirmation</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <form id="form-get-tlogs">
                            <input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}">
                            <div class="form-group col-sm-12">
                                <label for="date">Transaction Date</label>
                                <input type="date" name="posdelta_transaction_date" id="posdelta_transaction_date"
                                       class="form-control"
                                       placeholder="dd-mm-yyyy" value="{{date('Y-m-d')}}" required
                                       value="{{ old('tlog_transaction_date') }}">
                            </div>
                            <div class="form-check col-sm-12">
                                <input class="form-check-input" type="checkbox" id="chk-get-posdelta" checked>
                                <label class="form-check-label" for="defaultCheck1">
                                    Get POS DELTA from CDM
                                </label>
                            </div>
                            <div class="form-check col-sm-12">
                                <input class="form-check-input" type="checkbox" id="chk-send-posdelta" checked>
                                <label class="form-check-label" for="defaultCheck1">
                                    Send .offset files to SFTP
                                </label>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success btn-auto-pos-delta">Generate</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('customjs')

    <script type="text/javascript">
        $(document).ready(function (e) {
            document.getElementById('tlog_transaction_date').max = new Date(new Date().getTime() - new Date().getTimezoneOffset() * 60000).toISOString().split("T")[0];
            toastr.options = {
                "closeButton": false,
                "debug": false,
                "newestOnTop": true,
                "progressBar": false,
                "positionClass": "toast-top-right",
                "preventDuplicates": false,
                "onclick": null,
                "showDuration": "300",
                "hideDuration": "1000",
                "timeOut": "5000",
                "extendedTimeOut": "1000",
                "showEasing": "swing",
                "hideEasing": "linear",
                "showMethod": "fadeIn",
                "hideMethod": "fadeOut"
            }
            /////////
            //TLOGS//
            /////////

            $('#btn-get-tlogs').click(function (e) {
                $('#modal-get-tlogs').modal('show')
            })

            $('.btn-get-tlogs').click(function (e) {
                $('#modal-get-tlogs').modal('hide')
                $(".fa-check, .fa-times").hide();
                updateStatusBar("progress-get-tlogs", 15);
                $("#spinnerGetTlogs").show();
                getTLOGS();
            })

            //////////////////////
            //POS DELTA AUTO RUN//
            //////////////////////

            $('#btn-auto-pos-delta').click(function (e) {
                $('#modal-auto-pos-delta').modal('show')
            })

            $('.btn-auto-pos-delta').click(function (e) {
                $('#modal-auto-pos-delta').modal('hide')
                $(".fa-check, .fa-times").hide();
                updateStatusBar("progress-get-posdelta", 15);
                $("#spinnerGetPosDelta").show();
                $("#spinnerSendPosDelta").show();
                var transaction_date = $('#posdelta_transaction_date').val();
                var get_posdelta = $('#chk-get-posdelta').is(':checked');
                var send_posdelta = $('#chk-send-posdelta').is(':checked');

                if (get_posdelta == true && send_posdelta == true) {
                    getPOSDELTA(transaction_date, send_posdelta)
                } else if (get_posdelta == true && send_posdelta == false) {
                    getPOSDELTA(transaction_date)
                } else if (get_posdelta == false && send_posdelta == true) {
                    sendPOSDELTA()
                } else {
                    Command: toastr["error"]("Please check at least 1 checkbox.")
                }

            })
        })

        function getTLOGS() {
            disableButtons(true)
            $.ajax({
                url: 'api/get-tlog/' + $('#tlog_transaction_date').val(),
                type: 'GET',
                before: function () {
                },
                success: function (response) {
                    if (response.status == 200) {
                        updateStatusBar("progress-get-tlogs", 100);
                        $("#successGetTLOGS").show();
                        Command: toastr["success"](response.message, "Success")
                    } else {
                        $("#errorGetTLOGS").show();
                        Command: toastr["error"](response.message, "Failed")
                    }
                },
                complete: function () {
                    disableButtons(false)
                    $("#spinnerGetTlogs").hide();
                    setTimeout(function () {
                        $("#progress-get-tlogs").hide()
                    }, 1000);
                },
            });
        }

        function getPOSDELTA(transaction_date, send_posdelta) {
            updateStatusBar("progress-get-posdelta", 30);
            $("#progress-get-posdelta").show();
            disableButtons(true);
            $.ajax({
                url: 'api/get-pos-delta/' + transaction_date,
                type: 'GET',
                before: function (response) {
                    updateStatusBar("progress-get-posdelta", 50);
                },
                success: function (response) {
                    $("#spinnerGetPosDelta").hide();
                    if (response.status == 200) {
                        updateStatusBar("progress-get-posdelta", 100);
                        $("#successGetPosDelta").show();
                        Command: toastr["success"](response.message, "Success, Get POS DELTA from CDN")
                    } else {
                        $("#errorGetTPosDelta").show();
                        Command: toastr["error"](response.message, "Failed, Get POS DELTA from CDN")
                    }
                },
                complete: function () {
                    disableButtons(false)
                    setTimeout(function () {
                        $("#progress-get-posdelta").hide()
                    }, 1000);
                    if (send_posdelta == true) {
                        sendPOSDELTA()
                    }
                },
            });
        }

        function sendPOSDELTA() {
            updateStatusBar("progress-send-posdelta", 15);
            $("#progress-get-posdelta").show();
            disableButtons(true);
            $.ajax({
                url: 'api/send-pos-delta/',
                type: 'GET',
                before: function (response) {
                    updateStatusBar("progress-get-posdelta", 50);
                },
                success: function (response) {
                    $("#spinnerSendPosDelta").hide();
                    if (response.status == 200) {
                        updateStatusBar("progress-send-posdelta", 100);
                        $("#successSendPosDelta").show();
                        Command: toastr["success"](response.message, "Success Send POS DELTA to SFTP")
                    } else {
                        $("#errorSendTPosDelta").show();
                        Command: toastr["error"](response.message, "Failed Send POS DELTA to SFTP")
                    }
                },
                complete: function () {
                    disableButtons(false)
                    setTimeout(function () {
                        $("#progress-get-posdelta").hide()
                    }, 1000);
                },
            });
        }

        function updateStatusBar(id, percent) {
            $("#" + id).attr('style', 'width: ' + percent + '%').html(percent + '%');
        }

        function disableButtons(val) {
            document.getElementById("btn-get-tlogs").disabled = val;
           // document.getElementById("btn-auto-pos-delta").disabled = val;
        }

    </script>
@endsection