@extends('layouts.admin')
@section('style')
    <style>
        .dataTables_filter{
            text-align: center;
        }
        .dataTables_paginate{
            text-align: center;
        }
        .pagination {
            float: right;
            text-align: right;
            margin-right: 10px;
        }

        section.popup{
            padding: 60px 20px;
            position: fixed;
            top: 0px;
            z-index: 1000;
            height: 100vh;
            width: 100%;
            background-color: RGBA(0,0,0,0.8);
        }
        div.popup-content{
            margin-left: auto;
            margin-right: auto;
            width: 100%;
            height: auto;
            background-color: #FFFFFF;
        }
        div#validate_receipt_container{
            overflow-y: scroll;
        }
        img#validate_receipt_image{
            height: calc(80vh - 120px);
        }
        p#validate_dropdown_container select{
            width: 100%;
            font-size: 1.2em;
        }
    </style>
@endsection


@section('script')
    <script type="text/javascript">
        $(function () {
            var csrf = $('meta[name="csrf-token"]').attr('content');
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': csrf
                }
            });

            $('#start_date, #end_date').daterangepicker({
                singleDatePicker: true,
                locale: {
                    cancelLabel: 'Clear',
                    format: 'YYYY-MM-DD'
                },
                autoUpdateInput: false,
            });


            console.log("ready");

            function update(id){

                $.ajax({
                    method: "post",
                    url: "{{ route('hide_unhide_receipt.post') }}",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    dataType: 'json',
                    data: {
                        "id": id
                    }
                }).done(function (response) {
                    console.log(response);
                    if(response.status == 'success'){
                        console.log(response);

                    }

                });
            }

            function change_status(receipt_uid, user_uid, grid_id, new_status){

                $.ajax({
                    method: "post",
                    url: "{{ route('change_status.post') }}",
                    data: {
                        "receipt_uid": receipt_uid,
                        "user_uid": user_uid,
                        "grid_id": grid_id,
                        "new_status": new_status
                    }
                }).done(function (response) {
                    console.log(response);
                    if(response.status == 'success'){
                        console.log(response);
                    }

                });
            }


            fetch_data('no');

            function fetch_data(is_date_search, start_date='', end_date=''){

                var table =  $('.yajra-datatable').DataTable({
                    "serverSide": true,
                    dom:
                        "<'row p-2'<'#range.col-sm-6 mb-2 text-left'><'#import_export.col-sm-6 mb-2 text-left text-sm-right'B>>" +
                        "<'row px-3'<'col-sm-6'l><'col-sm-6 d-block'f>>" +
                        "<'row'<'col-sm-12 overflow-auto'tr>>" +
                        "<'row p-2'<'col-sm-5'i><'col-sm-7'p>>",
                    oLanguage: {
                        sLengthMenu: "_MENU_",
                    },

                    buttons: [
                        {
                            extend: 'csv',
                            footer: false,
                            exportOptions: {
                                columns: [0,1,2,3,4,5,6,8]
                            },
                            text: '<i class="fas fa-file-export"></i> Export CSV',
                            className: 'btn btn-sm btn-default'
                        },
                    ],
                    "autoWidth": true,
                    processing: true,
                    "info": false,
                    "bInfo": false,
                    ajax: {
                        url:'{{ route('admin.receipts-list-admin') }}',
                        data: {is_date_search:is_date_search, start_date:start_date, end_date:end_date}
                    },
                    columns: [
                        {data: 'sn', name: 'sn', orderable: false, searchable: false},
                        {data: 'uid', name: 'uid'},
                        {data: 'plain_name', name: 'plain_name'},
                        {data: 'plain_email', name: 'plain_email'},
                        {data: 'plain_mobile', name: 'plain_mobile'},
                        {data: 'products', name: 'products'},
                        {data: 'name', name: 'name'},
                        {data: 'merchant_state', name: 'merchant_state'},
                        {data: 'receipt_path', name: 'receipt_path'},
                        {data: 'timestamp', name: 'timestamp', orderable: false, searchable: false},
                        {data: 'user_uid', name: 'user_uid'},
                        {data: 'card_id', name: 'card_id'},
                        {data: 'grid_id', name: 'grid_id'},
                        {data: 'status', name: 'status'},
                        // {data: 'action', name: 'action', orderable: false, searchable: false},
                        {data: 'receipt_detail', name: 'receipt_detail', orderable: false, searchable: false, className: 'text-center'},
                    ],

                    "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {

                        if ( aData.color_code == "yellow" )
                        {
                            // $('td', nRow).css('background-color', 'yellow');
                            $('td', nRow).addClass('table-warning');
                        }
                        else if ( aData.color_code == "red" )
                        {
                            $('td', nRow).addClass('text-danger');
                            // $('td', nRow).css('background-color', 'red');
                        }

                    },
                    "initComplete": function(){

                        show_validation_popup();
                    }
                });

                $('.yajra-datatable').off('click').on('click', '.checkbox', function(){
                    var id = $(this).attr("id");
                    update(id);
                    table.ajax.reload();
                });

                $('.yajra-datatable').off('change').on('change', '.receipt_status', function(){
                    var receipt_uid = $(this).attr("receipt_uid");
                    var user_uid = $(this).attr("user_uid");
                    var grid_id = $(this).attr("grid_id");
                    var new_status = $(this).val();
                    change_status(receipt_uid, user_uid, grid_id, new_status);
                    if(new_status == 'completed'){
                        $(this).attr("disabled",true);
                    }
                });

                $('#validate_dropdown_container').off('change').on('change', '.receipt_status', function(){
                    var receipt_uid = $(this).attr("receipt_uid");
                    var user_uid = $(this).attr("user_uid");
                    var grid_id = $(this).attr("grid_id");
                    var new_status = $(this).val();

                    $("select[receipt_uid='"+receipt_uid+"']").val(new_status);
                    change_status(receipt_uid, user_uid, grid_id, new_status);

                    if(new_status == 'completed'){
                        $(this).attr("disabled",true);
                    }

                    $("#validation_popup").hide();
                    total_pending = total_pending - 1;
                    console.log("Total Pending:" + window.total_pending);
                    if(total_pending > 0){
                        show_validation_popup();
                    }else{
                        $("a[data-dt-idx='8']").trigger("click");
                    }

                });

            }

            $(document).on("click", "a[aria-controls='DataTables_Table_0']", function(){
                setTimeout(function(){ show_validation_popup(); }, 2000);
            });

            $('#search').click(function(){
                var start_date = $('#start_date').val();
                var end_date =  $('#end_date').val();
                // if(start_date != '' && end_date !='') {
                    $('.yajra-datatable').DataTable().destroy();
                    fetch_data('yes', start_date, end_date);
                // }
                // else {
                //     makeToast('bg-danger', 'Both dates are required');
                // }
            });

            $("#close_popup").on("click", function(){
                $("#validation_popup").hide();
            });

            function show_validation_popup(){
                console.log("Show validation popup");
                var x = false;
                window.total_pending = 0;
                var receipts = $("#DataTables_Table_0").find("tbody").find("tr");
                console.log(receipts);

                $(receipts).each(function(index){
                    var receipt_status = $(this).find("select").val();
                    console.log(receipt_status);
                    if(receipt_status == 'pending' && x == false){
                        console.log($(this));
                        x = true;
                        total_pending = total_pending + 1;
                        var receipt_uid = $(this).find("td")[1].innerText;
                        var receipt_txn_products = $(this).find("td")[5].innerHTML;
                        var receipt_location = $(this).find("td")[6].innerText;
                        var receipt_img_src = $(this).find("img").attr("src");
                        var dropdown = $(this).find("td")[13].innerHTML;

                        $("#validate_receipt_image").attr("src", receipt_img_src);
                        $("#validate_store").text(receipt_location);
                        // $("#validate_amount").text(receipt_txn_amt);
                        $("#validate_products").html(receipt_txn_products);
                        $("#validate_dropdown_container").html( dropdown );

                        $("#validation_popup").show();
                    }else if(receipt_status == 'pending' && x == true){
                        total_pending = total_pending + 1;
                    }
                });

                console.log("Total Pending:" + window.total_pending);
            }

        });

    </script>
@endSection


@section('content')


@component('admin.components.tabs')
    <div class="px-3 mb-2 row input-daterange">
{{--        <div class="input-daterange">--}}
         <div class="col-6 col-md-4">
          <input type="text" placeholder="From Date" name="start_date" id="start_date" class="form-control" />
         </div>
         <div class="col-6 col-md-4">
          <input type="text" placeholder="End Date" name="end_date" id="end_date" class="form-control" />
         </div>
{{--        </div>--}}
        <div class="col-md-4 mt-2 mt-md-0">
            <button class="btn btn-info w-100" type="button" name="search" id="search">Search</button>
        </div>
    </div>
    <div class="col-sm-12 overflow-auto">
        <table class="table table-bordered table-hover yajra-datatable">
            <thead>
            <tr>
                <th>No</th>
                <th>Receipt UID</th>
                <th>Name</th>
                <th>Email</th>
                <th>Mobile</th>
                <th>Products</th>
                <th>Store</th>
                <th>State</th>
                <th>Receipt</th>
                <th>Date</th>
                <th>User ID</th>
                <th>Card ID</th>
                <th>Grid ID</th>
                <th>Status</th>
                {{--                                <th>Hide/Unhide</th>--}}
                <th>Receipt Detail</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
@endcomponent

<section id='validation_popup' class='popup' style='display: none;'>
    <p style='text-align: right'><span id='close_popup' style="color: #FFFFFF;">{{ __('heading.btn_close') }}</span></p>
    <div class='popup-content'>
        <div id='validate_receipt_container'>
            <center>
            <img id='validate_receipt_image' src=''></img>
            </center>
        </div>
        <div id='validate_details_container'>
{{--            <p>Amount: <span id='validate_amount'></span></p>--}}
            <p>Products: <span id='validate_products'></span></p>
            <p>Store: <span id='validate_store'></span></p>
            <p id='validate_dropdown_container'></p>
        </div>
    </div>
</section>
@endsection