@extends('layouts.app')

@section('sidebar')
    @include('sidebar')
@stop

@section('style')
<style>
    .modal-header, .modal-header h4 {
        background-color: #3c4483 !important; /* #226fab , #394398 ,#3c4483 */
        color:#ffffff !important;
    }
</style>
@endsection

@section('content')
    <div class="m-content">
        <div class="m-portlet m-portlet--full-height ">
            <div class="m-portlet__head">
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <h3 class="m-portlet__head-text">
                            Local Exchange Courier
                        </h3>
                    </div>
                </div>
                <div style="padding-top : 13px;">
                    <a href="javascript:;" id="new-bank" class="btn btn-accent m-btn m-btn--icon">
                        <span><i class="la la-plus"></i><span> Local Exchange</span></span>
                    </a>
                </div>    
            </div>
            
            <div class="m-portlet__body">
                
                <!--begin: Search Form -->
            <form class="m-form m-form--fit m--margin-bottom-20" onsubmit="return false;">
                <div class="row m--margin-bottom-20">
                    <div class="col-lg-3 col-md-3 m--margin-bottom-10-tablet-and-mobile">
                        <label>Search:</label>
                        <input type="text" class="form-control m-input" placeholder="Search" id="general-search">
                    </div>
                    
                    <div class="col-lg-3 col-md-3 m--margin-bottom-10-tablet-and-mobile">
                        <label>Status</label>
                        <select class="form-control m-input" id="bank-status">
                            <option value="1" selected>Active</option>
                            <option value="0">Inactive</option>
                            <option value="">All</option>
                        </select>
                    </div>

                </div>
            </form>
            <!-- Search End -->
                
                <table class="m_datatable table table-striped- table-bordered table-hover table-checkable" id="local-exchange">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Status</th>
                        <th>Filter Status</th>
                        <th>Action</th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('script')
    {{ Html::script('custom/datatables/datatables.bundle.js') }}
    {{ Html::script('custom/eModal/eModal.js') }}
    <script type="text/javascript">
        $(document).ready(function () {
            $('#local-exchange').each(function() {
                table = $(this).DataTable({
                    // Export Buttons End
                    'responsive':!0,
                    'searchDelay':500,
                    'processing':!0,
                    "oLanguage": {
                        "sProcessing": '<div class="m-loader m-loader--brand m-loader--left"><span>Please wait...</span></div>',
                    },
                    "serverSide": true,
                    "ajax": {
                        "url": "{{ Route('localexchange_datatable') }}",
                        "type": "GET",
                    },
                    "order": [[ 0, "desc" ]],
                    "aoColumns": [
                        { data: 'id', name: 'id', bSearchable: false, bVisible: false },
                        { data: 'name', name: 'name'},
                        { data: 'status_display', name: 'status_display', orderable: false, searchable: false },
                        { data: 'status', name: 'status', visible: false },
                        { data: 'action', name: 'action'},
                    ]
                });
                
                table.column(3).search('1').draw();
            });
            
            $('#bank-status').on('change', function() {
                var selectedStatus = $(this).val();
                table.column(3).search(selectedStatus).draw();
            });

            $(document).on("click", "a.local-exchnage", function(event){
                var id = $(this).attr('data-id');
                var url = base_url+"/local_exchange/localexchnagedetail/"+id;
                var options = {
                    url: url,
                    title:'Local-Exchange Detail',
                    size: 'md', //sm,lg,md,xl
                    buttons: [
                        {text: 'Cancel', style: 'btn btn-secondary', close: true },
                        {text: 'Submit', style: 'btn btn-primary',   close: false, click: saveDetail }
                    ]
                };
                eModal.ajax(options);
            });

            function saveDetail(){
                $('#localexchange-form').submit();
            }

            eModal.setModalOptions({
                backdrop: 'static',
                keyboard: false
            });

            /***** Client Active OR Inactive  *****/
			$(document).on('change', '.bank-active input', function(){
			    var checkbox = $(this);
			    var id = $(this).attr('data-id');
                var status;
			    if(checkbox.is(':checked')){
                    status = 1;
                    title = "Are you sure! Active This Bank?";
                    text= "If you'r active this user, this bank is displayed in Local Exchange deposit request!";
                } else {
                    status = 0;
                    title = "Are you sure! Inactive This Bank?";
                    text= "If you'r inactive this bank, this bank is not displayed in Local Exchange deposit request!";
                }

                swal({
                    title: title,
                    text: text,
                    type: "warning",
                    showCancelButton: !0,
                    confirmButtonText: "Yes, Confirm It!"
                }).then(function(e) {
                    //$.blockUI({ css: { backgroundColor: '#f00', color: '#fff'} });
                    if( e.value ) {
                        $.blockUI({ message: '<img src="{{ URL::to("images/loading.svg") }}" height="100%" width="100%" />', css: { border:'none', backgroundColor:'transparent' , top: '0%' , bottom: '0%'} });
                        $.post( "{{ Route('localexchangeActive') }}", { 'bank_id': id, 'status': status }, function( data ) {
                            if(data.success){
                                if(data.action == 1) {
                                    swal("Active!", "Courier Active Successfully.", "success")
                                    .then((isOK) => {
                                        $('#local-exchange').DataTable().ajax.reload();
                                    });
                                } else {
                                    swal("Deactivated!", "Courier Deactivated Successfully.", "error")
                                    .then((isOK) => {
                                        $('#local-exchange').DataTable().ajax.reload();
                                    });
                                }
                            }
                            if(data.error){
                                swal(data["error"], data[0], "error")
                                .then((isOK) => {
                                    $('#local-exchange').DataTable().ajax.reload();
                                });
                            }
                            $.unblockUI();
                        });
                    }
                })
            });

            $(document).on("click", "a.local-exchange", function(event){
                var id = $(this).attr('data-id');
				var url = base_url+"/banks/local-exchange/edit/"+id;
				var options = {
					url: url,
					title:'Edit Courier',
                    size: 'md', //sm,lg,md,xl
					buttons: [
						{text: 'Cancel', style: 'btn btn-secondary', close: true },
						{text: 'Edit Courier', style: 'btn btn-primary',   close: false, click: saveBank }
					]
				};
				eModal.ajax(options);
            });

            $(document).on("click", "a.delete-bank", function(event){
                var id = $(this).attr('data-id');
                
                swal({
                    title: 'Are you sure to delete this bank?',
                    text: 'This courier is not longer available for clients.',
                    type: "warning",
                    showCancelButton: !0,
                    confirmButtonText: "Yes, Confirm It!"
                }).then(function(e) {
                    //$.blockUI({ css: { backgroundColor: '#f00', color: '#fff'} });
                    if( e.value) {
                        $.blockUI({ message: '<img src="{{ URL::to("images/loading.svg") }}" height="100%" width="100%" />', css: { border:'none', backgroundColor:'transparent' , top: '0%' , bottom: '0%'} });
                        $.get( base_url+"/local-exchange/delete/"+id, function( data ) {
                            if(data.success){
                                swal("Deleted!", "Courier Deleted Successfully.", "success")
                                .then((isOK) => {
                                    $('#local-exchange').DataTable().ajax.reload();
                                });
                            }
                            if(data.error){
                                swal(data["error"], data[0], "error")
                                .then((isOK) => {
                                    $('#local-exchnage').DataTable().ajax.reload();
                                });
                            }
                            $.unblockUI();
                        });
                    }
                })
            });
            
            $("#general-search")
                    .unbind() // Unbind previous default bindings
                    .bind("keyup", function(e) { // Bind our desired behavior
                        var data = $(this).val();
                        
                        // If the length is 3 or more characters, or the user pressed ENTER, search
                        if(e.keyCode == 13 || e.keyCode == 8){


                            
                                table.search(data).draw();
                            
                        }
                    });

            //Add new Client
            $("#new-bank").click(function(){
                var url = base_url+"/banks/local-exchange/new";
                var options = {
                    url: url,
                    title:'Create New Courier',
                    size: 'md',
                    buttons: [
                        {text: 'Cancel', style: 'btn btn-secondary', close: true },
                        {text: 'Create Courier', style: 'btn btn-primary',   close: false, click: saveBank }
                    ]
                };
                eModal.ajax(options);
            });

            function saveBank()
            {
                $('#newbank-form').submit();
            }
        });
    </script>
@endsection