@extends('fastag.default')

@section('content-wrapper')

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper"><!-- Content Wrapper. Contains page content -->
        <div class="new-content-wrapper">
            <!-- Content Header (Page header) -->
            <section class="content-header">
                <h1 class="">FASTag Transactions

                </h1>
                <h1 class="pull-right">
                        <span>User :  <b class="fastag_user"></b>, </span>
                        <span>IP : <b class="fastag_ip"></b>, </span>
                        <span>Gate Name : <b class="fastag_gate_name"></b></span>
                    </h1>
                <!-- added to export report -->
                {{--<div class="pull-right">
                    <a class="btn btn-warning" href="#">Export
                        as Excel</a>
                    <a class="btn btn-warning" href="#">Export
                        as PDF</a>
                </div>
                <!-- end -->
                <div class="title-addition">

                </div>--}}

            </section>

            <section class="content">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="adv_search_filter">
                            <div class="search-head padding0">
                                <div class="row">
                                    <div class="col-sm-2 form-group">
                                        <label class="margin0">FASTag Id</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="search_fastag_id"
                                                   name="search_fastag_id" value="">
                                        </div>
                                    </div>
                                    <div class="col-sm-2 form-group">
                                        <label class="margin0">Barcode</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="search_ticket_no"
                                                   name="search_ticket_no" value="">
                                        </div>
                                    </div>
                                    <div class="col-sm-2 form-group">
                                        <label class="margin0">Vehicle Number</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="search_vehicle_no"
                                                   name="search_vehicle_no" value="">
                                        </div>
                                    </div>
                                    <div class="col-sm-1 form-group">
                                        <label class="margin0"></label>
                                        <div class="input-group btn-block">
                                            <button type="submit" id="search_entry" class="btn btn-info"><i
                                                        class="fa fa-search"></i>&nbsp;
                                                Search
                                            </button>
                                        </div>
                                    </div>
                                    <div class="col-sm-2 form-group">
                                        <label class="margin0"></label>
                                        <div class="input-group btn-block">
                                            <button type="button"  class="btn btn-success" onclick="window.location.reload()"><i
                                                        class="fa fa-refresh"></i>&nbsp;
                                                Refresh
                                            </button>
                                            <button type="button" id="clear" name="clear" class="btn btn-link-only">
                                                Clear All
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /.col -->
                </div>
                <div class="row">
                    <div class="col-xs-12">
                        <div class="box">
                            <!-- /.box-header -->
                            <div class="box-body">
                                <div id="example1_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">
                                    <div class="row">
                                        <div id="feedback_table" class="col-xs-12 col-sm-12">
                                            <div class="table-responsive" id="trans_table">
                                                <table id="table_transactions"
                                                       class="table table-hover table-condensed margin0 table-bordered table-striped dataTable"
                                                       role="grid" aria-describedby="example1_info">
                                                    <thead>
                                                    <tr role="row">
                                                        <th nowrap="">Sr. No.</th>
                                                        <th nowrap="">Barcode</th>
                                                        <th nowrap="">Vehicle Number</th>
                                                        <th nowrap="">FASTag Id</th>
                                                        <th nowrap="">In Time</th>
                                                        <th nowrap="">Out Time</th>
                                                        <th nowrap="">Duration</th>
                                                        <th nowrap="">Amount Mode</th>
                                                        <th nowrap="">Transaction Status</th>
                                                        <th>Action</th>
                                                    </tr>
                                                    </thead>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- /.box -->
                        </div>
                        <!-- /.col -->
                    </div>
                    <!-- /.row -->
                </div>
            </section>
        </div>
    </div>
    <!-- /.col -->
    <div class="modal fade" id="confirm_fastag_action" role="dialog" style="z-index: 9999;">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content modal-sm">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Are you sure?</h4>
                </div>
                <form id="fastag-status-form" autocomplete="on" method="post" role="form">
                    <div class="modal-body">
                        <p><span style="vertical-align: top;"> Are you sure you want to continue without selecting payment status?</span></p>
                        <div class="card mx-3">
                            <div class="row card-body">
                                <div class="col-12 form-group">
                                    <label for="fastag_status">FASTag Status</label>
                                    <select class="form-control" name="fastag_status" id="fastag_status">
                                        <option value="">Select</option>
                                        <option value="cancel">Cancel</option>
                                        <option value="pending">Pending</option>
                                    </select>
                                </div>
                                <div class="col-12 form-group">
                                    <label for="fastag_comment">FASTag Comment</label>
                                    <textarea class="form-control" name="fastag_comment" id="fastag_comment" cols="" rows="4"></textarea>
                                </div>
                                <div><p id="error_msg"></p></div>
                            </div>
                            <input type="hidden" name="fastag_transaction_id" id="fastag_transaction_id" value="" />
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary"
                                id="confirm_payment_mode">Proceed
                        </button>
                        <button type="button" class="btn btn-default" id="paymode_no"
                                data-dismiss="modal">Cancel
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div><!-- /.modal -->
@stop
@section('page-js')
    <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
    <script>
        var searchFastagId = $("#search_fastag_id").val();
        var searchTicketNo = $("#search_ticket_no").val();
        var searchVehicleNo = $("#search_vehicle_no").val();
        let gateId = null;

        if (window.localStorage.hasOwnProperty('fastagLoginResponse')) {
            var fastagResponse = window.localStorage.getItem('fastagLoginResponse');

            fastagResponse = JSON.parse(fastagResponse)
            var user = fastagResponse.User;
            var ip = fastagResponse.IP;
            var gateName = fastagResponse.gate.gate_name;
            gateId = fastagResponse.gate.gate_id;
            $(".fastag_user").html(user);
            $(".fastag_ip").html(ip);
            $(".fastag_gate_name").html(gateName);
        }

        getTransaction(searchFastagId, searchTicketNo, searchVehicleNo, gateId);

        function checkLoginStatus() {

            /*if (!window.localStorage.hasOwnProperty('fastLogin')) {
                window.localStorage.clear();
                window.location.href = "{{ route('fastag.login') }}";
            }*/
        }

        function getTransaction(searchFastagId, searchTicketNo, searchVehicleNo, gateId) {

            $('span.loading').removeClass('invisible');
            $('#login-btn').attr('disabled', 'true');
            var User = $('#User').val();
            var Password = $('#Password').val();
            var IP = $('#IP').val();

            $.ajax({
                'url': "{{route('fastag.transaction')}}",
                'method': "POST",
                'headers': {'X-CSRF-TOKEN': $('[name="_token"]').val()},
                'data' : {
                    'search_outgate': gateId,
                    'search_fastag_id': searchFastagId,
                    'search_ticket_no': searchTicketNo,
                    'search_vehicle_no': searchVehicleNo,
                },
                'dataType': "json",
                //'contentType': 'application/json'
            }).done(function (data) {

                //makeInAndOutGateOption(data);

                $('#table_transactions').dataTable({
                    "aaData": data.data.entry_result.data,
                    "columns": [
                        {data: "id"},
                        {data: "barcode"},
                        {data: "fastag_vehicle_no"},
                        {data: "fastag_id"},
                        {data: "in_time"},
                        {data: "out_time"},
                        {data: "total_time"},
                        {data: "total_payment_amount"},
                        {
                            data: "fastag_pay",
                            className: "dt-center editor-delete",
                            orderable: false,
                            "mRender": function (data, type, row) {
                                var cls = '';
                                if (data == "pending") {
                                    cls = "text-warning";
                                } else if (data == "cancel") {
                                    cls = "text-danger";
                                } else if (data == "failure") {
                                    cls = "text-danger";
                                } else if (data == "inprocess") {
                                    cls = "text-info";
                                } else {
                                    cls = "text-success";
                                }
                                data = data != null ? data.toUpperCase() : '';
                                return '<h4 class="text-bold ' + cls + '" >' + data + '<i class="fe fe-delete"></i></h4>';

                            }
                        },
                        {
                            data: 'id',
                            className: "dt-center editor-delete",
                            orderable: false,
                            "mRender": function (data, type, row) {
                                if (row.fastag_pay == "pending") {
                                    return '<a href="javascript:void(0)" class="btn btn-danger" onclick="cancelTransaction(' + data + ')" >Cancel <i class="fe fe-delete"></i></a>';
                                }
                                return '';
                            }
                        }

                    ]
                })
            })
        }

        function makeInAndOutGateOption(data) {

            var inGateHtml = '<option value="">Select</option>';
            var outGateHtml = '<option value="">Select</option>';
            if (data.data.ingate.length > 0) {
                for (var i = 0; i < data.data.ingate.length; i++) {
                    inGateHtml += '<option value="'+ data.data.ingate[i].in_gate +'">'+ data.data.ingate[i].gate_name +'</option>';
                }
            }

            if (data.data.outgate.length > 0) {
                for (var i = 0; i < data.data.outgate.length; i++) {
                    outGateHtml += '<option value="' + data.data.outgate[i].out_gate + '">'+ data.data.outgate[i].gate_name +'</option>';
                }
            }

            $("#search_ingate").html(inGateHtml);
            $("#search_outgate").html(outGateHtml);
        }

        $("#search_entry").on("click", function () {
            var searchFastagId = $("#search_fastag_id").val();
            var searchTicketNo = $("#search_ticket_no").val();
            var searchVehicleNo = $("#search_vehicle_no").val();
            $('#table_transactions').DataTable().clear().destroy();
            getTransaction(searchFastagId, searchTicketNo, searchVehicleNo, gateId);
        });

        $("#clear").on("click", function () {
            window.location.reload();
        });

        /*$.ajax({
            url: "{{route('fastag.transaction')}}",
            type: 'POST',
            headers: {'X-CSRF-TOKEN': $('[name="_token"]').val()},
            data: {User: User, IP : IP, Password : Password},
            dataType: "json",
            success: function (resp) {
                console.log(resp)
            }
        });*/

        function cancelTransaction(txnId) {
            $("#fastag_transaction_id").val(txnId)
            $("#confirm_fastag_action").modal("show");
        }

        $(document).on('click', '#confirm_payment_mode', function () {
            $("#fastag-status-form").validate({
                // Specify the validation rules
                rules: {
                    fastag_status: {
                        required: true
                    },
                    fastag_comment: {
                        required: true
                    },
                    fastag_transaction_id: {
                        required: true
                    }
                },
                messages: {
                    fastag_status: {
                        required: "Status is required."
                    },
                    fastag_comment: {
                        required: "Comment is required"
                    },
                    fastag_transaction_id: {
                        required: "Transaction ID is required"
                    }
                },
                submitHandler: function (form) {
                    updateFastagStatus();
                }
            });
        });

        function updateFastagStatus() {
            $('span.loading').removeClass('invisible');
            $('#confirm_payment_mode').attr('disabled', 'true');
            var status = $('#fastag_status option:selected').val();
            var comment = $('#fastag_comment').val();
            var fastag_transaction_id = $('#fastag_transaction_id').val();

            $.ajax({
                url: "{{route('fastag.updateFastagStatus')}}",
                type: 'POST',
                headers: {'X-CSRF-TOKEN': $('[name="_token"]').val()},
                data: {status: status, comment: comment, fastag_transaction_id: fastag_transaction_id},
                dataType: "json",
                success: function (resp) {
                    $('#confirm_payment_mode').removeAttr('disabled');
                    $('.alert').hide();
                    $('span.loading').addClass('invisible');
                    $('#error_msg').remove();

                    if (resp.status != 200) {
                        $('.live-notification').fadeIn().removeClass('green-bg').addClass('red-bg').find('.noti-body').html(resp.message);
                    } else {
                        $('.live-notification').fadeIn().removeClass('red-bg').addClass('green-bg').find('.noti-body').html(resp.message);
                    }

                    $("#confirm_fastag_action").modal("hide");
                    window.location.reload();
                }
            });
        }

        $('.date').datetimepicker({
            format: 'DD-MM-YYYY HH:mm:ss',
            //sideBySide: true
        }).on('dp.change', function (event) {
            if ($(this).hasClass('from_date_entry')) {
                $('#from_date').val(event.date.format('DD-MM-YYYY HH:mm:ss'));
            }
            if ($(this).hasClass('to_date_entry')) {
                $('#to_date').val(event.date.format('DD-MM-YYYY HH:mm:ss'));
            }
        });
        $('.time').datetimepicker({
            format: 'HH:mm'
        });
    </script>
@stop