@extends('admin.layouts.admin')
@section('title')
Admin | Restaurant List
@endsection

@section('styles')
<link rel="stylesheet" href="{{ asset('plugins/datatables/dataTables.bootstrap4.css') }}">
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.4.0/css/bootstrap4-toggle.min.css" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('css/custom.button-switch.css') }}">

<style type="text/css">
    #demo-modal {
    text-align: center;
    padding: 20px;
}

.demo-title {
    font-size: 2em;
    margin-bottom: 200px;
}

.btn-modal-target {
    padding: 10px 20px;
    color: #F0F0F0;
    margin: 5px;
    border-radius: 15px;
    cursor: pointer;
    display: inline-block;
}

#btn-jquery {
    background: #e85545;
}

#btn-bootstrap {
    background: #43cb83;
}

#btn-responsive {
    background: #ff9e8f;
}

.modal-text {
    margin-top: 15px;
    line-height: 25px;
    font-size: 1.0em;
    font-family: arial;
}
.modal-menu .modal-dialog {
    max-width: 800px;
}

.modal-content {
  max-height: 95vh;
  overflow: scroll;
}
</style>
@endsection

@section('content')
<!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0 text-dark">All Restaurants</h1>
          </div><!-- /.col -->
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
              <li class="breadcrumb-item"><a href="#">Campaigns</a></li>
              <li class="breadcrumb-item active">Restaurant</li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <!-- Small boxes (Stat box) -->        
        <!-- /.row -->

        @if ($errors->any())            
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <p>&nbsp;</p>
        <div class="form-group">
          <div class="row">
            <div class="col-md-7">
                <div class="row">
                    <div class="col-md-5 pb-md-0 pb-lg-2 pb-3">
                        <select class="form-control filter-button" name="active_status" >
                            <option value="">Select Approve status</option>                      
                            <option value="1" {!! old('active_status')?'selected="selected"':'' !!}>Active</option>
                            <option value="0" {!! old('active_status')?'selected="selected"':'' !!}>Inactive</option>
                        </select>
                    </div>

                    <div class="col-md-5 pb-md-0 pb-lg-2 pb-3">                        
                    </div>

                    <div class="col-md-2 pb-md-0 pb-lg-2 pb-3">
                        <a href="javascript:void(0)" class="btn btn-danger col-sm-12 filter-clear-button" style="display: none;">Clear</a>
                    </div>
                                                          
                </div>         
            </div>

            <div class="col-md-1 pb-md-0 pb-lg-2 pb-3" >
                <a href="{{ url('admin/campaigns/restaurant/export/restaurant') }}" class="btn btn-primary col-sm-12" >Export</a>
            </div>            
            
            <div class="col-md-2 pb-md-0 pb-lg-2 pb-3" >
                <a href="{{ url('admin/campaigns/'.(Request::segment(3)).'/fetchRestaurants') }}" class="btn btn-primary float-right col-sm-12">Fetch Restaurants</a>
            @if(false)
                <a href="{{ url('admin/campaigns/'.(Request::segment(3)).'/add') }}" class="btn btn-primary float-right col-sm-12">Add New</a>
            @endif
            </div>

            <div class="col-md-2 pb-md-0 pb-lg-2 pb-3" >
                <a href="{{ url('admin/campaigns/restaurant/sendFormLink') }}" class="btn btn-primary col-sm-12" >Send Reg. form</a>
            </div>
            
          </div>
        </div>


        <!-- Main row -->
        <div class="row">
        <div class="col-12">
          <div class="card">            
            <!-- /.card-header -->
            <div class="card-body table-responsive">
              <table id="artists-table" class="table table-bordered table-hover" style="width: 100%;">
                <thead>
                <tr>
                  <th>Restaurant Owner details</th>
                  <th>Restaurant details</th>
                  <th>Badge Discount (%)</th>
                  <th>Email</th>
                  <th>Phone</th>                  
                  <th>Status</th>
                  <th>Action</th>
                  <th>id</th>                  
                </tr>
                </thead>
                <tbody>                
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="7" class="tfoot"><b>Note::</b>  
                            <label class="switch"><input type="checkbox" checked="" disabled="disabled" class="success"><span class="slider round checkbox-disable"></span></label> : Active and Already Associated,
                            <label class="switch"><input type="checkbox" disabled="disabled" checked="checked" class="success active-status"><span class="slider round" ></span></label> : Active,
                            <label class="switch"><input type="checkbox" disabled="disabled" class="success"><span class="slider round checkbox-disable"></span></label> : Inactive 
                        </td>
                    </tr>
                </tfoot>                
              </table>
            </div>
            <!-- /.card-body -->
          </div>
          <!-- /.card -->
        </div>
        <!-- /.col -->
      </div>        
        <!-- /.row (main row) -->
      </div><!-- /.container-fluid -->

      <!-- modal-menu -->
      <div class="modal fade modal-menu" id="bootstrap-modal" role="dialog">    
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header center">
                    <a href="#" class="btn btn-primary download-button">Download</a>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>                    
                </div>
                <div id="demo-modal"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
      </div>
      <!-- end modal-menu -->  
    </section>
    <!-- /.content -->
@endsection

@section('scripts')
<script type='text/javascript' src="{{asset('plugins/datatables/jquery.dataTables.js') }}"></script> 
<script type='text/javascript' src="{{asset('plugins/datatables/dataTables.bootstrap4.js') }}"></script>
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.4.0/js/bootstrap4-toggle.min.js"></script>

<script>
    function loadDynamicContentModal(modal){
        var options = {
                modal: true,
                height:300,
                width:500
            };

        $('#bootstrap-modal').find("a.download-button").attr("href", baseUrl+'admin/campaigns/restaurant/'+modal+'/download-menu');

        $('#demo-modal').load(baseUrl+'admin/campaigns/restaurant/'+modal+'/menu',function(){
            $('#bootstrap-modal').modal({show:true});
        });    
    }
</script>

<script type="text/javascript">
    var oTable = '';
    $(document).ready(function () {
        oTable = $('#artists-table').DataTable({
            "language": {
                "lengthMenu": "Show: _MENU_ records per page",
                "zeroRecords": "Oops No record Found",                
                "infoEmpty": "No records available",
                "infoFiltered": "(filtered from _MAX_ total records)"
            },
            paging: true,
            processing: true,
            serverSide: true,
            pagingType: 'full_numbers',
            ajax: {
                "url": baseUrl + 'admin/campaigns/restaurant/list',
                "type": "GET",
                "data": function(d){
                    d.is_active = $("select[name=active_status]").val();
                    d.is_school = $("select[name=is_school]").val();                    
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                }
            },
            columns: [
                {
                    data: null,                    
                    className: 'text-left',
                    name: 'restaurantUser.email',
                    render: function (data, type, row) {
                        var users = "<span class='text-danger'>Not assign</span>";
                        if(typeof(data['restaurant_associate_user']) != "undefined" && data['restaurant_associate_user'] !== null && data['restaurant_associate_user'].length ) {
                            users = '';
                            $.each( data['restaurant_associate_user'], function( key, value ) {                                
                                users += "<div class='border border-white'>"+(value['associate_users']['name'])+"<br/>"+"<span class='text-primary'>"+(value['associate_users']['email'])+"</span>";

                                if(value['associate_users']['is_active'] != "undefined" && value['associate_users']['is_active'] == 1) {
                                    users += "<br/><span class='text-success font-weight-bold'>Active</span>";
                                }
                                else {
                                    users += "<br/><span class='text-secondary font-weight-bold'>Inactive</span>";
                                }

                                users += "</div>";
                            });
                        }                                

                        return users;
                    }
                },
                {
                    data: null,
                    name: 'restaurant_name',
                    className: 'text-left',
                    render: function (data, type, row) {
                        return (row.restaurant_name?"<span class='text-primary'>"+(row.restaurant_name)+'</span><br />':"Not available<br />")+'<span class="text-danger">'+(row.phone?'<i class="nav-icon fa fa-phone"></i> '+(row.phone+'<br />'):'');
                    }
                },
                {
                    data: null,
                    name: 'zip_code',
                    className: 'text-left',
                    render: function (data, type, row) {
                        var discount = "<span class='text-danger'>Not assign</span>";
                        if(typeof(data['restaurant_badge']) != "undefined" && data['restaurant_badge'] !== null  ) {
                            discount = data['restaurant_badge']['discount'];                            
                        }

                        return discount;
                    }
                },
                { data: 'address',  name: 'address' },
                { data: 'phone', name: 'phone' },                                
                {
                    data: null,
                    className: 'text-center',
                    render: function (data, type, row) {
                        var user_assign = [];
                        user_assign["status"] = 0;
                        user_assign["message"] = "Please assign restaurant owner first";
                        
                        if(typeof(data['restaurant_associate_user']) != "undefined" && data['restaurant_associate_user'] !== null && data['restaurant_associate_user'].length ) {
                            user_assign["message"] = "First activate restaurant owner";

                            $.each( data['restaurant_associate_user'], function( key, value ) {
                                if(value['associate_users']['is_active'] != "undefined" && value['associate_users']['is_active'] == 1) {
                                    user_assign["status"] = 1;
                                    user_assign["message"] = '';
                                    return false;
                                }
                            });
                        }

                        var title = '';
                        var disabledValue = '';

                        if(user_assign["status"] != 1) {
                            title = user_assign["message"];
                            disabledValue = 'disabled';
                        }

                        var htmlContent = '<label class="switch" title="'+title+'"><input type="checkbox" '+(data.is_active==1?'checked':'')+' data-id="'+data.id+'" class="success active-status" '+disabledValue+'><span class="slider round"></span></label>';

                        return htmlContent;
                    }
                },                
                {
                    data: null,
                    className: 'text-center',
                    render: function (data, type, row) {
                        
                        return '<a href="javascript:void(0)" title="Show Menu" onclick="loadDynamicContentModal('+data.id+')" class="btn btn-success btn-xs"><i class="fa fa-cutlery" aria-hidden="true"></i></a>'+'\xa0\xa0\xa0'+
                            '<a  title="Edit" href="' + baseUrl + 'admin/campaigns/restaurant/edit/' + data.id + '" class="edit-btn btn btn-info btn-xs"><i class="fa fa-pencil" aria-hidden="true"></i></a>'+'\xa0\xa0\xa0'+
                            '<a title="Show Associate Charitable Organizations" href="' + baseUrl + 'admin/campaigns/restaurant/charitable-organization/' + data.id + '" class="delete-btn btn btn-warning btn-xs"><i class="fa fa-building-o " aria-hidden="true"></i></a>';                       
                    }
                },
                { data: 'id', name: 'id' },
            ],
            'columnDefs': [ 
                {
                    'targets': [ 5, 6 ], /* column index */
                    'orderable': false, /* true or false */
                    "searchable": false
                },
                {
                    'targets': [ 0, 2 ], /* column index */
                    'orderable': false, /* true or false */                   
                },
                {
                    "targets": [ 7 ],
                    "visible": false,
                    "searchable": false
                },
                {
                    "targets": [ 3, 4 ],
                    "visible": false,                    
                }           
            ],
            'aaSorting': [ 7, 'DESC']
        });

        $("select[name=active_status], select[name=category], select[name=fetch-mode], select[name=is_school]").on("change", function(){
            filterButton();
            oTable.draw();
        });

        $(".filter-clear-button").on("click", function(){
            $(".filter-button").each(function(){  
                $(this).val('');
            });
            $(".filter-clear-button").hide();
            oTable.draw();
        });
    });

    function filterButton()
    {  
        $(".filter-clear-button").hide();
        $(".filter-button").each(function(){            
            if(($(this).val()).length)
            {
                $(".filter-clear-button").show();
            }
        });
    }

    $(document).on('change', '.active-status', function (event) {
        
        var status = "inactive";
        if ($(this).is(':checked')) {
            status = "active";
        }        
        //console.log(status);        
            
        var serviceRow = $(this).attr('data-id');
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
            }
        });
        $.ajax({
            url: baseUrl + 'admin/campaigns/restaurant/change_status',
            method: 'post',
            dataType: 'json',
            data: {
                is_active: status,
                id: serviceRow,
                _token: $('meta[name="csrf_token"]').attr('content')                   
            },
            success: function (result) {
                if (parseInt(result.res) == parseInt(1)) {
                    showSuccessMsg(result.msg);
                    oTable.draw();
                } else {
                    //Do nothing
                }
            }
        });
        
    });
    
    
</script>
@endsection