@extends('layout.backend.main')

@section('content')

<style>
    td.details-control, 
    td.details-control:hover,
    td.details-control:focus {
        background: url('/assets/img/details_open.png') no-repeat center center!important;
        cursor: pointer;
        outline: none!important;
    }
    tr.details td.details-control,
    tr.details td.details-control:hover,
    tr.details td.details-control:focus {
        background: url('/assets/img/details_close.png') no-repeat center center!important;
        outline: none!important;
    }
</style>

<div class="page-content-container">
	<div class="page-content-row">

        <!-- BEGIN PAGE SIDEBAR -->

            @include('sidebars.settings')

        <!-- END PAGE SIDEBAR -->
        <div class="page-content-col">

            <div class="col-md-12">
                <div class="portlet light bordered">

                    <div class="portlet-title">
                        <div class="caption font-dark">
                            <i class="icon-settings font-dark"></i>
                            <span class="caption-subject bold uppercase"> {{ trans('x.Payment Options') }}</span>
                        </div>
                        <div class="btn-group" style="margin-left:20px">
                            <a id="modal_add_user_button" href="#" data-toggle="modal" data-target="#modal_add_payment" class="btn sbold green"> 
                                {{ trans('x.Add New') }} <i class="fa fa-plus"></i>
                            </a>
                        </div>
                    </div>

                    <div class="portlet-body">
                        <table class="table table-striped table-bordered table-hover" id="payments-list">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th>{{ trans('x.Name') }}</th>
                                    <th>Slug</th>
                                    <th>{{ trans('x.Variation') }}</th>
                                    <th>{{ trans('x.Orders') }}</th>
                                    <th>{{ trans('x.Options') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($payments as $payment)
                                <tr @if($payment->active == '0') style="color:grey" @endif >
                                    <td class="details-control" data-payment="{{ $payment->id }}"></td>
                                    <td>{{ $payment->name }}</td>
                                    <td>{{ $payment->slug }}</td>
                                    <td>{{ ($payment->action != '') ? $payment->action.$payment->amount.'%' : '' }} </td>
                                    <td>
                                        {{ \App\Order::where('payment_id', $payment->id)->count() }}
                                    </td>
                                    <td>
                                        <button href="#" data-toggle="modal" data-target="#modal_edit_payments" data-payment_id="{!!$payment->id!!}" class="btn btn-default btn-rounded btn-condensed btn-xs"><span class="fa fa-pencil"></span></button>

                                        <a href="#" data-toggle="modal" data-target="#modal_delete_payment" data-url="/settings/payments/{{ $payment->id}}/delete" class="btn btn-danger btn-xs"><i class="fa fa-trash"></i></a>

                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    
                </div>
            </div>

        </div>
    </div>
</div>

{{-- MODAL --}}
<div class="modal animated fadeIn" 
    id="modal_edit_payments" 
    tabindex="-1" 
    role="dialog" 
    aria-labelledby="smallModalHead" 
    aria-hidden="true" 
    style="display: none;">
</div>
{{-- END MODAL--}}
{!! X::dynamicDeletionModal('modal_delete_payment', 'payment option') !!}

@include('modals.settings.add_payment')

@stop

@section('pages-scripts')

    <script>

        var currentLocale = $('#getcurrentlocale').text();
        var languageUrl = "/assets/js/plugins/datatables/"+currentLocale+".json";
        
        var Table = $('#payments-list').DataTable({

            "language": { "url": languageUrl },

            buttons: [
                { extend: 'print', className: 'btn dark btn-outline', exportOptions: { columns: ':visible' } },
                { extend: 'copy', className: 'btn red btn-outline', exportOptions: { columns: ':visible' } },
                { extend: 'pdf', className: 'btn green btn-outline', exportOptions: { columns: ':visible' } },
                { extend: 'excel', className: 'btn yellow btn-outline', exportOptions: { columns: ':visible' } },
                { extend: 'csv', className: 'btn purple btn-outline', exportOptions: { columns: ':visible' } },
                { extend: 'colvis', className: 'btn brown btn-outline', text: '<i class="fa fa-table"></i>', exportOptions: { columns: ':visible' } },
            ],

            responsive: true,

            //"ordering": false, disable column ordering 
            //"paging": false, disable pagination

            "order": [
                [0, 'asc']
            ],

            "lengthMenu": [
                [10, 20, 30, 40, -1],
                [10, 20, 30, 40, "All"] // change per page values here
            ],
            // set the initial value
            "pageLength": 20,

            "dom": "<'row' <'col-md-12'B>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", // horizontal scrollable datatable

            // Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout
            // setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js). 
            // So when dropdowns used the scrollable div should be removed. 
            //"dom": "<'row' <'col-md-12'T>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
        });

        var detailRows = [];

        $('#payments-list tbody').on( 'click', 'tr td.details-control', function () {
            var tr = $(this).closest('tr');
            var row = Table.row( tr );
            var idx = $.inArray( tr.attr('id'), detailRows );
            var payment_id = $(this).attr('data-payment');
    
            if ( row.child.isShown() ) {
                tr.removeClass( 'details' );
                row.child.hide();
    
                // Remove from the 'open' array
                detailRows.splice( idx, 1 );
            }
            else {
                $.ajax({
                    url : '/settings/payments/'+payment_id+'/terms',
                    method : 'GET',
                    data : { _token : '{{ csrf_token() }}' }
                })
                .success (function( msg ) {
                    tr.addClass( 'details' );
                    payments = '<div style="width:100%">';
                    payments += '<div style="display:inline-block; width:20%"><b>#</b></div>';
                    payments += '<div style="display:inline-block; width:50%"><b>N. {{ trans("x.days") }}</b></div>';
                    payments += '<div style="display:inline-block; width:30%"><b>{{ trans("x.Percentage") }}</b></div>';
                    payments += '<br>';

                    for (var index in msg) {

                        if (msg[index].spec == 'exact')
                            spec = "{{ strtolower( trans('x.Exact') ) }}";
                        if (msg[index].spec == 'after_delivery')
                            spec = "{{ strtolower( trans('x.After delivery') ) }}";
                        if (msg[index].spec == 'end_month')
                            spec = "{{ strtolower( trans('x.End of month') ) }}";

                        if (msg[index].days == 0 && msg[index].spec == 'exact' )
                            days_and_spec = "{{ trans('x.immediate') }}";
                        else
                            days_and_spec = '{{ trans("x.to") }} ' + msg[index].days + ' {{ trans("x.days")}} ' + spec;

                        payments += '<div style="display:inline-block; width:20%">' + index +'</div>';
                        payments += '<div style="display:inline-block; width:50%">' + days_and_spec + '</div>';
                        payments += '<div style="display:inline-block; width:30%">' + msg[index].percentage + ' %</div><br>';
                    };
                    payments += '</div>';
                    row.child( payments ).show();
                })
                .error (function( msg ) {
                    toastr.error('ajax error');
                });
    
                // Add to the 'open' array
                if ( idx === -1 ) {
                    detailRows.push( tr.attr('id') );
                }
            }
        } );
    
        // On each draw, loop over the `detailRows` array and show any child rows
        Table.on( 'draw', function () {
            $.each( detailRows, function ( i, id ) {
                $('#'+id+' td.details-control').trigger( 'click' );
            } );
        } );

        $('body').on('show.bs.modal', '#modal_edit_payments', function (event) {

            var button = $(event.relatedTarget) // Button that triggered the modal
            var payment_id = button.data('payment_id') // Extract info from data-* attributes

            if (payment_id !== undefined) {

                // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
                // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
                var modal = $(this)
                    
                modal.empty();
                
                $.ajax({
                    type: 'GET',
                    url: '/settings/modal-edit',
                    data: { '_token' : '{!!csrf_token()!!}', payment_id: payment_id },
                    success:function(data){
                    // successful request; do something with the data
                    modal.append(data);
                    },
                    error:function(){
                    // failed request; give feedback to user
                    alert('ajax error');
                    }
                });   
            }
        })
    </script>
@stop