@extends('master.admin')

@push('header.scripts')
<!-- BEGIN PAGE LEVEL PLUGINS -->
<link href="{{ asset('public/assets/global/plugins/datatables/datatables.min.css') }}" type="text/css" />
<link href="{{ asset('public/assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.css') }}" rel="stylesheet" type="text/css" />
<!-- END PAGE LEVEL PLUGINS -->
@stop

@push('footer.scripts')
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="{{ asset('public/assets/global/scripts/datatable.js') }}" type="text/javascript"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.24/datatables.min.js"></script>
<script src="{{ asset('public/assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js') }}" type="text/javascript"></script>
<!-- END PAGE LEVEL SCRIPTS -->
<script>

    var dataTableObj;
    var formData = $('#advance_search_form').serializeArray();
    var advance_search_form_data = {'action': 'advance_search', 'search_form_data': formData};
    var dt_html = '';

    $(function() {

        dt_html = $("#events-outer-div").html();
        dataTableObj = dt_init();


        $("#advance_search_form").submit(function (e) {
            var formData = $('#advance_search_form').serializeArray();
            advance_search_form_data = {'action': 'advance_search', 'search_form_data': formData};
            $("#events_dt_wrapper").children().remove();
            $("#events-outer-div").html(dt_html);
            dataTableObj = dt_init();
            e.preventDefault(); //STOP default action
        });

        // Update Order Status Modal Open
        $('#events-outer-div').on('click', 'a.update_email', function () {
            endBlockUI('#updateemail_form');
            $('#updateemail_error_div').hide();
            $('#updateemail_success_div').hide();
            $('#updateemail_form #id').val( $(this).attr('data-id') );
            $('#updateemail_form #check_number').val( '' );
            $('#updateemail_form #email_address').val( '' );
            $('#updateEmailModal').modal('show', {backdrop: 'static'});
        });

        /*
         * Submit form for add new Record information
         */
        $("#updateemail_form").submit(function(e){
            startBlockUI('#updateemail_form', 'animate');
            $('#updateemail_error_div').hide();
            $('#updateemail_success_div').hide();
            var token = $('#token_csrf').val();
            $.ajax({
                url : $(this).attr('action'),
                headers: {'X-CSRF-TOKEN': token},
                type: $(this).attr('method'),
                data : $(this).serialize(),
                dataType: 'json',
                success:function(response) {
                    if(response.status){
                        if( response.status == '0' ){

                            $('#updateemail_success_div').hide();
                            $('#updateemail_error_div').show();
                            $('#updateemail_error_msg').html(response.message);
                            endBlockUI('#updateemail_form');
                            $("#updateemail_error_div").fadeTo(0, 1);
                            fadeout_div('updateemail_error_div');
                            return false;
                        }else{
                            $('#updateemail_error_div').hide();
                            $('#updateemail_success_div').show();
                            $('#updateemail_success_msg').html(response.message);

                            window.setTimeout(function(){
                                $("#advance_search_form").submit();
                                endBlockUI('#updateemail_form');
                                $('#updateEmailModal').modal('toggle');
                            }, 2000);
                        }
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    let errorMsg  = '';
                    console.log(jqXHR.responseJSON);
                    $.each(jqXHR.responseJSON, function(index, value) {
                        let unitMsg = '<p>' + value + '</p>';
                        errorMsg = errorMsg +  unitMsg;
                    });
                    if( errorMsg != '' ){
                        $('#updateemail_success_div').hide();
                        $('#updateemail_error_div').show();
                        $('#updateemail_error_msg').html(errorMsg);
                        endBlockUI('#updateemail_form');
                    }
                    return false;
                }
            });
            e.preventDefault(); //STOP default action
        });


    });

    function dt_init() {
        var token = $('#token_csrf').val();
        returnObj = $('#events_dt').DataTable({
            responsive: false,
            processing: true,
            serverSide: true,
            bFilter: false,
            "scrollX": true,
            "scrollY": false,
            "order": [[ 2, "ASC" ]],
            ajax: {
                url: '{!! url("admin/creditdeferrals/ajax") !!}',
                type: "POST",
                headers: {'X-CSRF-TOKEN': token},
                data: advance_search_form_data
            },
            columns: [
                { data: 'actions', name: 'actions', "bSearchable": false },
                { data: 'email_notification_sent', name: 'email_notification_sent', className:'text-center', "bSearchable": false },
                { data: 'team_name', name: 'credit_deferral.team_name' },
                { data: 'first_name', name: 'credit_deferral.first_name' },
                { data: 'email_address', name: 'credit_deferral.email_address' },
                
                { data: 'combined_discount_code', name: 'credit_deferral.combined_discount_code' },
                { data: 'combined_discount_amount', name: 'credit_deferral.combined_discount_amount' },
                { data: 'new_team_name', name: 'credit_deferral.new_team_name' },
                { data: 'new_event_name', name: 'credit_deferral.new_event_name' },

                { data: 'discount1_amount', name: 'credit_deferral.discount1_amount' },
                { data: 'discount1_uid', name: 'credit_deferral.discount1_uid' },
                { data: 'discount1_redeemed_datetime', name: 'credit_deferral.discount1_redeemed_datetime' },
                { data: 'discount1_redeemed_order_id', name: 'credit_deferral.discount1_redeemed_order_id' },

                { data: 'discount2_amount', name: 'credit_deferral.discount2_amount' },
                { data: 'discount2_uid', name: 'credit_deferral.discount2_uid' },
                { data: 'discount2_redeemed_datetime', name: 'credit_deferral.discount2_redeemed_datetime' },
                { data: 'discount2_redeemed_order_id', name: 'credit_deferral.discount2_redeemed_order_id' },

                { data: 'discount3_amount', name: 'credit_deferral.discount3_amount' },
                { data: 'discount3_uid', name: 'credit_deferral.discount3_uid' },
                { data: 'discount3_redeemed_datetime', name: 'credit_deferral.discount3_redeemed_datetime' },
                { data: 'discount3_redeemed_order_id', name: 'credit_deferral.discount3_redeemed_order_id' },

                { data: 'discount4_amount', name: 'credit_deferral.discount4_amount' },
                { data: 'discount4_uid', name: 'credit_deferral.discount4_uid' },
                { data: 'discount4_redeemed_datetime', name: 'credit_deferral.discount4_redeemed_datetime' },
                { data: 'discount4_redeemed_order_id', name: 'credit_deferral.discount4_redeemed_order_id' },
                
                
            ]
        });
    }

</script>
@stop

@section('content')
<!-- BEGIN CONTENT -->
<div class="page-content-wrapper">
    <!-- BEGIN CONTENT BODY -->
    <div class="page-content">
        <!-- BEGIN PAGE HEADER-->
        <!-- BEGIN PAGE BAR -->
        <div class="page-bar">

            <ul class="page-breadcrumb">
                <li>
                    <span>Credit Deferrals</span>
                </li>
            </ul>
        </div>
        <!-- END PAGE BAR -->
        <!-- BEGIN PAGE TITLE-->
        <h3 class="page-title"> </h3>
        <!-- END PAGE TITLE-->
        <div class="row">
            <div class="col-md-12">

                <!-- BEGIN ADVANCE SEARCH-->
                <div class="row">
                    <div class="col-md-12" id="advance_search_cantainer">
                        <div class="panel panel-default">
                            <div class="panel-heading"><i class="fa fa-search"></i> Advance Search</div>
                            <div class="panel-body">
                                <form id="advance_search_form" name="advance_search_form">
                                    <input type="hidden" name="token_csrf" id="token_csrf" value="{{ csrf_token() }}"/>
                                    <div class="row">
                                        <div class="col-md-3 col-sm-6">
                                            <label> Team Name </label>
                                            <div class="form-group">
                                                <input type="text" id="team_name" name="team_name" class="form-control" placeholder="Team Name" />
                                            </div>
                                        </div>

                                        <div class="col-md-3 col-sm-6">
                                            <label> First Name </label>
                                            <div class="form-group">
                                                <input type="text" id="first_name" name="first_name" class="form-control" placeholder="First Name" />
                                            </div>
                                        </div>
                                        <div class="col-md-3 col-sm-6">
                                            <label> Last Name </label>
                                            <div class="form-group">
                                                <input type="text" id="last_name" name="last_name" class="form-control" placeholder="Last Name" />
                                            </div>
                                        </div>
                                        <div class="col-md-3 col-sm-6">
                                            <label> Email Address </label>
                                            <div class="form-group">
                                                <input type="email" id="email_address" name="email_address" class="form-control" placeholder="Email Address" />
                                            </div>
                                        </div>
                                        <div class="col-md-12 col-sm-12 text-right">
                                            <label> &nbsp; </label>
                                            <div class="form-group">
                                                <button type="button" id="dt_clear" name="dt_clear" class="btn default"
                                                        onclick="javascript:window.location.reload()">Clear
                                                </button>
                                                <button type="submit" class="btn blue">Search <i class="fa fa-search"></i></button>
                                            </div>
                                        </div>
                                    </div>

                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END ADVANCE SEARCH-->

                <!-- Begin: life time statistics -->
                <div class="portlet light portlet-fit portlet-datatable bordered">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="fa fa-ticket"></i>
                            <span class="caption-subject font-dark sbold uppercase">Credit Deferrals</span>
                        </div>
                        <div class="actions">
                        </div>
                    </div>
                    <div class="portlet-body" style="height:auto !important;">
                        <div class="table-scrollable" id="events-outer-div">
                            <table id="events_dt" class="table table-striped table-bordered table-hover " cellspacing="0" width="100%">
                                <thead>
                                    <tr>
                                        <th>Actions</th>
                                        <th class="text-center">Status</th>

                                        <th>Team Name</th>
                                        <th>Full Name</th>
                                        <th>Email Address</th>
                                        
                                        <th>Combined Deferral Code</th>
                                        <th>Combined Deferral Amount</th>
                                        <th>New Team Name</th>
                                        <th>New Event Name</th>

                                        <th>Credit Amount</th>
                                        <th>Credit Code</th>
                                        <th>Credit Redeemed Date</th>
                                        <th>Credit Redeemed Order ID</th>

                                        <th>Deferral 1 Amount</th>
                                        <th>Deferral 1 Code</th>
                                        <th>Deferral 1 Redeemed Date</th>
                                        <th>Deferral 1 Redeemed Order ID</th>

                                        <th>Deferral 2</th>
                                        <th>Deferral 2 Code</th>
                                        <th>Deferral 2 Redeemed Date</th>
                                        <th>Deferral 2 Redeemed Order ID</th>

                                        <th>Deferral 3</th>
                                        <th>Deferral 3 Code</th>
                                        <th>Deferral 3 Redeemed Date</th>
                                        <th>Deferral 3 Redeemed Order ID</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>

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

    </div>
    <!-- END CONTENT BODY -->
</div>
<!-- END CONTENT WRAPPER -->


<!-- BEGIN INCLUDE MODAL  "UPDATE EMAIL" -->
<div class="modal fade" id="updateEmailModal" tabindex="-1" role="basic" aria-hidden="true">
    <div class="modal-dialog">
        <form class="modal-content horizontal-form" action="{!! url('admin/creditdeferrals/updateemail') !!}" id="updateemail_form" method="post">
            <input type="hidden" name="token_csrf" id="token_csrf" value="{{ csrf_token() }}" />
            <input type="hidden" name="id" id="id" value="" />
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title">Update Email Address</h4>
            </div>
            <div class="form-horizontal modal-body" role="form">
                <div class="form-body">
                    <div id="updateemail_success_div" class="error-block form-group" style="display:none; ">
                        <div id="updateemail_success_msg" class="alert alert-success col-md-12"></div>
                    </div>
                    <div id="updateemail_error_div" class="error-block form-group" style="display:none; ">
                        <div id="updateemail_error_msg" class="alert alert-danger col-md-12"></div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">

                            <div class="form-group">
                                <label class="control-label col-md-4">Email Address <span class="required">*</span></label>
                                <div class=" col-md-8">
                                    <input type="email" class="form-control form-inline" id="email_address" name="email_address" required="" />
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn default" data-dismiss="modal">Close</button>
                <button type="submit" class="btn blue"><span class="glyphicon glyphicon-floppy-disk"></span> Update</button>
            </div>
        </form>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- END INCLUDE MODAL -->


@stop