@extends('layouts.app')

@section('content')
<style>
</style>
<section class="content" style="background:blue">
    <div class="box box-solid">
        <div class="box-header">
        	<h2>Credit Card Maintenance</h2>
            <div class="box-tools">
                <button type="button" class="btn btn-lg btn-primary btn-modal" 
                    data-href="{{action('CreditCardController@create')}}" 
                    data-container=".card_modal">
                    <i class="fa fa-plus"></i>NEW</button>
            </div>
        </div>
        <div class="box-body"  style="margin-left:20px;margin-right:20px;">
            <div class="table-responsive">
                <table width="100%"  class="table table-bordered table-striped" id="card_table">
                    <thead>
                        <tr>
                            <th>Code</th>
                            <th>Name Of Credit Card</th>
                            <th>Commi.</th>
                            <th>Cre. A/C</th>
                            <th>Rec</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    {!! Form::close() !!}   
    </div>
    <div class="modal fade card_modal" tabindex="-1" role="dialog" 
    	aria-labelledby="gridSystemModalLabel">
    </div>
</section>
@endsection
@section('javascript')
    <script>
    $(document).ready(function () {
        var card_table = $('#card_table').DataTable({
            processing: true,
            serverSide: true,
            ajax: '/credit-cards',
            columnDefs: [{
                "targets": 5,
                "orderable": false,
                "searchable": true
            }]
        });

        $(document).on('submit', 'form#card_add_form', function (e) {
            e.preventDefault();
            var data = $(this).serialize();

            $.ajax({
                method: "POST",
                url: $(this).attr("action"),
                dataType: "json",
                data: data,
                success: function (result) {
                    if (result.success == true) {
                        $('div.card_modal').modal('hide');
                        toastr.success(result.msg);
                        card_table.ajax.reload();
                    } else {
                        toastr.error(result.msg);
                    }
                }
            });
	    });

        $(document).on('click', 'button.edit_card_button', function () {

            $("div.card_modal").load($(this).data('href'), function () {

                $(this).modal('show');

                $('form#card_edit_form').submit(function (e) {
                    e.preventDefault();
                    var data = $(this).serialize();
                    $.ajax({
                        method: "POST",
                        url: $(this).attr("action"),
                        dataType: "json",
                        data: data,
                        success: function (result) {
                            if (result.success == true) {
                                $('div.card_modal').modal('hide');
                                toastr.success(result.msg);
                                card_table.ajax.reload();
                            } else {
                                toastr.error(result.msg);
                            }
                        }
                    });
                });
            });
        });
    });         
    </script>
@endsection