@extends('adminlte::page')
@section('content_header')
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0 text-dark">Dashboard</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="#">Admin</a></li>
                    <li class="breadcrumb-item active">Clear Boxes</li>
                </ol>
            </div>
        </div>
    </div>
</div>
@endsection

@section('content')
<style>
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: #444;
        line-height: 28px;
        float: left;
    }
</style>
<div class="card card-outline card-primary">
    <div class="card-header">
        <h3 class="card-title">Clear Boxes</h3>
        <div class="float-right">
            <a href="{{route('clear-boxes.create')}}" class="btn btn-info btn-sm"> <i class="fas fa-plus"></i> Create
                New</a>
        </div>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-sm-12">
                <div class="table-responsive">
                    <table id="data_table" width="100%" class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Date</th>
                                <th>Invoice No</th>
                                <th>Customer</th>
                                <th>Phone</th>
                                <th>weight</th>
                                <th>Qty</th>
                                <th>Total</th>
                                <th>Payment Status</th>
                                <th>Shipping Status</th>
                                <th width = "12%">{{__('auth.action')}}</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<script type="text/javascript">
    let table = $('#data_table').DataTable({
        "bDestroy": true,
        ordering: false,
        serverSide: true,
        lengthMenu: [[20, 50, 100,200,500,1000,-1], [20, 50, 100,200,500,1000,'All']],
        ajax: "{{ route('clear-boxes.index') }}",
        columns:
        [
            {data: 'DT_RowIndex','searchable': false},
            {data: 'created_at'},
            {data: 'invoice_no'},
            {data: 'full_name'},
            {data: 'phone'},
            {data: 'full_size'},
            {data: 'count_box'},
            {data: 'grand_total_usd'},
            {data: 'payment_status'},
            {data: 'status_en'},
            {data: 'action'},
        ],
        rowCallback: function(row, data) {
            $(function() {
                $('input[data-toggle="toggle"]').bootstrapToggle();
            });
        },
        "initComplete": function(settings, json) {}
    });

    $(document).on('click' ,'.btn-status', function (){
        let id = $(this).data('id');

        $.ajax({
            method  :'GET',
            dataType:'json',
            url     :'{{ route("clearbox_getStatus") }}',
            data    :{ id: id },
            success:function(res){
                if(res.success == 'success'){
                    var cont = '';
                    $.each(res.status, function(k,v){
                        cont += '<option value="'+v.order+'" >'+v.status_en+'</option>';
                    });
                    $.confirm({
                        title: '{{__("auth.shipping_status")}}!',
                        content: '' +
                            '<form action="" class="formName">' +
                                '<div class="form-group text-left">' +
                                    '<select name="status" class="status form-control select2">'+
                                        '<option value="" >{{__("auth.please_select")}}</option>'+
                                        ''+cont+''+
                                    '</select>'+
                                '</div>' +
                            '</form>',
                        theme:'modern',
                        buttons: {
                            close: {
                                text: '{{__('auth.close')}}',
                                btnClass: 'button_warning',
                                keys: ['esc'],
                                action: function () {
                                }
                            },
                            formSubmit: {
                                text: '{{__("auth.save")}}',
                                btnClass: 'btn-blue',
                                action: function () {
                                    var status = this.$content.find('.status').val();

                                    if(!status){
                                        $.alert('Provide a valid status');
                                        return false;
                                    }
                                    $.ajax({
                                        method:'GET',
                                        dataType:'json',
                                        url:'{{ route("clearbox_updateStatus") }}',
                                        data:{status:status ,id:id},
                                        success:function(response){
                                            notifier(response.status, response.msg);
                                            table.ajax.reload(null, false);
                                        }
                                    });
                                }
                            },
                        },
                        onContentReady: function () {
                            var jc = this;
                            jc.$content.find('.select2').select2({
                                dropdownParent:$('.jconfirm')
                            });
                            this.$content.find('form').on('submit', function (e) {
                                e.preventDefault();
                                jc.$$formSubmit.trigger('click');
                            });
                        }
                    });
                }
            }
        });
    });

    $(document).on('click','.show_invoice',function () {
        let url = $(this).data('url');
        $.ajax({
            url:url,
            success: function (data) {
                let content_ = (data);
                $.confirm({
                    title: '',
                    content: content_,
                    boxWidth: '60%',
                    useBootstrap: false,
                    buttons: {
                        print: {
                            text: '{{__('auth.print')}}',
                            btnClass: 'button_success',
                            keys: ['enter'],
                            action: function () {
                                $('.invoice-box').printThis({
                                    importCSS: false,
                                    // loadCSS: "{{asset('/css/invoice_payment.css')}}",
                                    afterPrint: function () {
                                        window.location.reload();
                                    }
                                });
                                return false;
                            }
                        },
                        close: {
                            text: '{{__('auth.close')}}',
                            btnClass: 'button_warning',
                            action: function () {

                            }
                        }
                    },
                });
                $('.loading_btn').hide();
                $('input[type=submit]').show();
                $('button[type=submit]').show();
            }
        });
    });

    $(document).on('click', '.AddPayment', function() {
        var box_id = $(this).data('box_id');
        var remain = $(this).data('total');
        var customer_id = $(this).data('customer_id');

        $.confirm({
            title: '{{__("auth.add_payment")}}!',
            theme:'modern',
            content:
                `
                    <form class="formName" method="POST">
                        <div class="form-group">
                            <label style="float:left;">Remain($)</label>
                            <input name="remain" data-remain="${remain}" value="${remain}" class="remain form-control number-only remain" readonly>
                            <br/>
                            <label class="required" style="float:left;">Amount($)</label>
                            <input name="amount" data-box_id="${box_id}" value="${remain}" class="name form-control number-only" readonly>
                            <br/>
                            <label class="required" style="float:left;">{{__('auth.payment_method')}}</label>
                            <select name="payment_type" id="payment_method" class="form-control payment-type select2" required>
                                @foreach($payment_method as $item)
                                    <option value="{{$item->id}}">{{$item->bank_name}} ( {{ $item->bank_account }} - {{ $item->bank_number }} )</option>
                                @endforeach
                            </select>
                        </div>
                    </form>
                `,
                buttons: {
                    close: {
                        text: '{{__('auth.close')}}',
                        btnClass: 'button_warning',
                        keys: ['esc'],
                        action: function () {
                        }
                    },
                    formSubmit: {
                        text: '{{__("auth.submit")}}',
                        btnClass: 'btn-blue',
                        action: function () {

                            var amount       = this.$content.find('.name').val();
                            var box_id       = this.$content.find('.name').data('box_id');
                            var balance_type = this.$content.find('.payment-type').val();

                            if(!amount){
                                $.alert('Please Input Amount');
                                return false;
                            }
                            $.ajax({
                                method: "GET",
                                url: "{{ route('add_box_payment') }}",
                                data: { amount: amount ,box_id:box_id,customer_id:customer_id, balance_type:balance_type},
                                success:function (response){
                                    notifier(response.status, response.msg);
                                    table.ajax.reload(null, false);
                                },
                            })
                        }
                    },
                },
                onContentReady: function () {
                    // bind to events
                    var jc = this;
                    jc.$content.find('.select2').select2({
                        dropdownParent:$('.jconfirm')
                    });
                    this.$content.find('form').on('submit', function (e) {
                        // if the user submits the form by pressing enter in the field.
                        e.preventDefault();
                        jc.$$formSubmit.trigger('click'); // reference the button and click it
                    });
                }
        });

    });
</script>
@endsection