@extends('layouts.merchant-backend-layout') 
@section('content')

<style type="text/css">

    table.dataTable thead > tr > th
    {
        padding-right: 0;
    }
    .heading
    {
        font-weight: 700;
    }
    .form-field
    {
        margin-bottom: 10px;
    }
    .form-fields
    {
        margin-bottom: 20px;
    }
    ol
    {
        padding-left: 20px;
    }
    ol li
    {
        margin-bottom: 10px;
    }
    .coupon-heading
    {
        font-size: 15px;
        font-weight: 700;
        color:#00aeef;
        margin-bottom: 10px;
    }
    .coupon-rows
    {
        margin-bottom:10px;
    }
    .inactive
    {
        background-color:#ccc;
    }

</style>

<div class="content-wrapper">
 <!-- Content Header (Page header) -->
    <section class="content-header">
         <h1>Inactive Booklets</h1>
    </section>
     <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="box box-warning">
                    <div class="box-header with-border">
                        @include('includes.messages')
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body table-responsive">
                        <table id="data-table" class="table table-bordered table-hover">
                            <thead>
                            <tr>
                               <th class="text-center">Booklet ID</th>
                               <th class="text-center">Booklet Name</th>
                               <th class="text-center">No. of Coupons in the Booklet</th>
                               <th class="text-center">Booklets Issued</th>
                               <th class="text-center">Booklet Value</th>
                               <th class="text-center">Total Earned</th>
                               <th class="text-center">Sub Account Linking</th>
                               <th class="text-center">Status</th>
                               <th class="text-center">Action</th>
                               <th class="text-center">Remarks</th>
                            </tr>
                            </thead>
                            <tbody>
                                                       @foreach($booklets as $booklet)
                                                                <tr id="{{$booklet->id}}">
                                    <td class="text-center inactive">{{$booklet->id}}</td>
                                    <td class="booklet-name inactive">{{$booklet->name}}</td>
                                    <td class="text-center inactive"><a href="#" data-toggle="modal" data-target="#coupon_details" class="coupon-count">{{$no_of_coupon[$i]}}</a></td>
                                    <td class="text-center inactive"><a href="{{url('merchant/booklet_report/'.$booklet->id)}}" >{{$booklet->issued}}</a></td>
                                    <td class="text-center inactive booklet-value">{{$value}}</td>
                                    <td class="text-center inactive">{{$income}}</td>
                                    <td class="text-center inactive"><a href="#" data-toggle="modal" data-target="#sub_account_linking" data-links="{{$booklet->allowed_subaccount}}" class="account-linking">Link</a></td>
                                    <td class="text-center inactive"><span style="color:red">Inactive</span></td>
                                    @if($booklet->remarks=="Deactivated by merchant")
                                        <td class="text-center inactive"><a href="{{url('merchant/activate/'.$booklet->id)}}">Activate</a></td>
                                    @else
                                        <td class="text-center inactive"></td>
                                    @endif
                                    <td class="text-center inactive">{{$booklet->remarks}}</td>
                                </tr>
                                                        @endforeach
                            </tbody>
                        </table>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </section>
</div>

<!-- Modal for sending booklet -->
<div id="send_booklet" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <div class="modal-title"><h4>Send Booklet</h4></div>
            </div>
            <div class="modal-body">
                <form  class="send-booklet-form" method="post" action="{{url('merchant/send_booklet') }}">
                    <div class="form-fields">
                        <label for="mobile_no" class="heading">Enter mobile number of recipient:</label>
                        <input type="text" class="form-control" id="mobile_no" placeholder="Enter the Mobile Number" name="mobile_no1" onkeypress="return isNumberKey(event)">
                    </div>
                    <div class="heading" style="margin-bottom:10px;text-align:center">-OR-</div>
                    <div class="form-fields">
                        <label for="mobile_no" class="heading">Select your recipient:</label>
                        <select class="form-control"  name="mobile_no2" id="recipient">
                                <option value="0" selected>Select Recipient</option>
                            @for($i=0; $i<count($user_details); $i++)
                                <option value="{{$user_details[$i]['mobile']}}">{{$user_details[$i]["name"]}} ({{$user_details[$i]["mobile"]}})</option>
                            @endfor
                        </select>
                    </div> 
                    <div class="form-fields">
                      <div class="heading">Booklet Selected:</div>
                        <div class="coupon-selected">
                        </div>
                    </div>
                    <div class="form-field" style="text-align: center">
                      <button class="btn btn-primary submit-booklet">Submit</button>
                    </div>
                </form>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
</div>

<!-- Modal for account Linking -->
<div id="sub_account_linking" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <div class="modal-title"><h4>Sub-Accounts allowed to send <span class="booklet_name"></span></h4></div>
            </div>
            <div class="modal-body">
                <form  class="account-linking-form" method="post" action="{{url('merchant/link_account')}}">
                    <div class="row">
                        <div class="col-lg-3 form-fields">
                            <a href="#" id="selectall" class="btn btn-primary">Select All</a>
                        </div>
                        <div class="col-lg-3">
                            <a href="#" id="deselectall" class="btn btn-primary">Unselect All</a>
                        </div>
                        <div class="col-lg-6"></div>
                    </div>
                    <div class="row">
                        <div class="col-lg-4">
                            <div class="heading form-fields">Sub Accounts</div>
                        </div>
                        <div class="col-lg-4">
                            <div class="heading form-fields">Business Name</div>
                        </div>
                        <div class="col-lg-4"></div>
                    </div>
                    @foreach($employees as $employee)
                        <div class="row">
                            <div class="col-lg-4">
                                <div class="form-field">
                                    <input type="checkbox" name="employees[]" value="{{$employee->id}}" id="{{$employee->id}}" class="employee_list"> {{$employee->email}}
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-field">{{$employee->business_name}}</div>
                            </div>
                            <div class="col-lg-4"></div>
                        </div>
                    @endforeach
                    <input type="hidden" name="id" class="id" >
                    <div class="form-field" style="text-align: center">
                      <button class="btn btn-primary">Submit</button>
                    </div>
                </form>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
</div>

<!-- Modal for coupons details -->
<div id="coupon_details" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <div class="modal-title"><h4>Coupons in <span id="booklet_name"></span></h4></div>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-lg-9">
                        <div class="coupon-heading">Coupons</div>
                    </div>
                    <div class="col-lg-3">
                        <div class="coupon-heading">No of Uses</div>
                    </div>
                </div>
                <div class="row coupon-details"></div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
</div>
@stop

@section('scripts')
<script>

$('#data-table').DataTable({
    "paging": true,
    "lengthChange": false,
    "searching": true,
    "ordering": false,
    "info": true,
    "autoWidth": false
});

$('#selectall').click(function () 
{
    $('.employee_list').prop('checked', true);
});

$('#deselectall').click(function () 
{
    $('.employee_list').prop('checked', false);
});

$('.coupon-count').click(function ()
{
    var booklet_id = $(this).parent().parent().attr('id');
    var booklet_name = $(this).parent().parent().find('.booklet-name').html();
    $('#booklet_name').html(booklet_name);

    $(".coupon-details").html("");

    $.ajax(
    {
        type: 'GET',
        url: '{{url('merchant/coupon_details')}}',
        data: {booklet_id:booklet_id},
        success: function (response)
        {
            var json = $.parseJSON(response);
            for (var i = 0; i <json.length; i++)
            {
                $(".coupon-details").append('<div class="coupon-rows"><div class="col-lg-9">'+json[i].name+'</div><div class="col-lg-3"><div class="coupon-fields">'+json[i].value+'</div></div></div>');
            }

        }

    });
});

$('.account-linking').click(function ()
{
    var booklet_id = $(this).parent().parent().attr('id');
    var booklet_name = $(this).parent().parent().find('.booklet-name').html();
    $('.booklet_name').html(booklet_name);

    var employee_ids  = new Array();
    employee_ids = ($(this).attr("data-links")).split(',');
    
    $(".employee_list").prop('checked', false);

    $.each(employee_ids, function( index, value )
    {
       $("#"+value).prop('checked', true);
    });

    $(".id").val(booklet_id);
});

$('.send-booklet').click(function ()
{
    $(".coupon-selected").html("");
    if($('.booklet-checkbox:checked').length == 0)
    {
        alert("Please Select atleast 1 Booklet");
    }
    else
    {
        var i=1;
        $('.booklet-checkbox:checked').each(function()
        {
            var booklet_id = $(this).parent().parent().attr('id');
            var booklet_name = $(this).parent().parent().find('.booklet-name').html();
            var coupon_count = $(this).parent().parent().find('.coupon-count').html();
            var booklet_value = $(this).parent().parent().find('.booklet-value').html();

            $(".coupon-selected").append('<div class="row" style="margin-top:10px;"><div class="col-lg-3"><input type="hidden" name="booklets[]" value="'+booklet_id+'">('+i+') '+booklet_name+'</div><div class="col-lg-9"> (<span style="color:green">'+coupon_count+' coupons - '+booklet_value+' credits</span>)</div></div>')
            i++;
        });
        $("#send_booklet").modal("show");
    }
});

$('.submit-booklet').click(function (e)
{
    e.preventDefault();
    var mobile = $("#mobile_no").val();
    var recipient = $("#recipient").find('option:selected').attr('value');

    if(mobile==""&&recipient=="0")
    {
        alert("Enter mobile no. or select recipient");
    }
    else if(mobile!=""&&recipient!="0")
    {
         alert("Cannot use both mobile no. and recipient, Enter either of them. ")
    }
    else
    {
        $(".send-booklet-form").submit();
    }
});

function isNumberKey(evt)
{
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
    {
        return false;
    }
    else
    {
        return true;
    }
}    

</script>
@stop