@extends('admin.layouts.admin')
@section('title')
Admin | Nightlife
@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">
  #artists-table th:nth-child(2){
    width: 30%!important;
  }
  #artists-table th:nth-child(6){
    width: 10%!important;
  }
  #artists-table th:nth-child(5){
    width: 10%!important;
  }
</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">Nightlife</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="#">Services</a></li>
              <li class="breadcrumb-item active">Nightlife</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 -->
        <p>&nbsp;</p>
        <div class="form-group">
          <div class="row">
            <div class="col-md-3">
              <!-- <label for="exampleInputEmail1">Status</label>  -->
              <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-3" style="display: none;">
              <!-- <label for="exampleInputEmail1">Status</label>  -->
              <select class="form-control filter-button" name="category" >
                <option value="">Select Category</option>                      
                  <option value="1" {!! old('active_status')?'selected="selected"':'' !!}>Restaurant</option>
                  <option value="2" {!! old('active_status')?'selected="selected"':'' !!}>Nightlife</option>                         
              </select>                 
            </div>

            <div class="col-md-3" >
              <!-- <label for="exampleInputEmail1">Status</label>  -->
              <select class="form-control filter-button" name="fetch-mode" >
                <option value="">Select fetch mode</option>                      
                  <option value="1" {!! old('active_status')?'selected="selected"':'' !!}>From API</option>
                  <option value="0" {!! old('active_status')?'selected="selected"':'' !!}>Normal</option>
              </select>                 
            </div>
            
            <div class="col-md-2">
                <div class="btn btn-primary filter-clear-button" style="display: none;">Clear</div>
            </div>
            <div class="col-md-4"></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>Provider Details</th>
                    <th>Service Details</th> 
                    <th>Category</th>
                    <th>Cost for Two</th>
                    <th>Approve</th>
                    <th></th>
                    <th>Phone</th> 
                    <th>Id</th>
                    <th>provider name</th>
                    <th>provider email</th>
                    <th>provider mobile</th>
                    <th>Service name</th>                                     
                </tr>
                </thead>
                <tbody>                
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="6" class="tfoot"><b>Note::</b>  
                            <label class="switch"><input type="checkbox" checked="" disabled="disabled" class="success"><span class="slider round checkbox-disable"></span></label> : 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 -->
    </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 type="text/javascript">
    var oTable = '';
    $(document).ready(function () {

        oTable = $('#artists-table').DataTable({
           // "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
            "language": {
                "lengthMenu": "Show: _MENU_ records per page",
                "zeroRecords": "Oops No record Found",
                //"info": "Showing page _PAGE_ of _PAGES_",
                "infoEmpty": "No records available",
                "infoFiltered": "(filtered from _MAX_ total records)"
            },
            paging: true,
            processing: true,
            serverSide: true,
            ajax: {
                "url": baseUrl + 'admin/services/nightlife',
                "type": "GET",
                "data": function(d){
                    d.is_active = $("select[name=active_status]").val();
                    d.category  = $("select[name=category]").val();
                    d.fetchMode = $("select[name=fetch-mode]").val();
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                }
            },           
            columns: [
                {
                    data: null,
                    name: 'users.name',
                    className: 'text-left',
                    render: function (data, type, row) {
                        return row.user_name?"<span class='text-success'>"+(row.user_name)+'</span><br />'+(row.user_email)+(row.user_phone?'<br /><i class="nav-icon fa fa-phone"></i> '+(row.user_phone):''):"Not available";
                    }
                },                
                {
                    data: null,
                    name: 'rns.res_night_address',
                    className: 'text-left',
                    render: function (data, type, row) {
                        return "<span class='text-primary'>"+row.res_night_name+'</span><br />'+(row.res_night_address).substring(0,70)+((row.res_night_address).length>'70'?'...':'')+((row.res_night_ph!=0)?'<br /><i class="nav-icon fa fa-phone"></i> '+row.res_night_ph:'');
                    }
                },                
                { data: 'service_name', name: 'services.name' },
                { data: 'cost_for_two', name: 'rns.cost_for_two' },
                {
                    data: null,
                    className: 'text-center',
                    render: function (data, type, row) {
                        return '<label class="switch"><input type="checkbox" '+(data.is_active==1?'checked':'')+' data-id="'+data.id+'" class="success active-status"><span class="slider round"></span></label>';
                    }
                },
                {
                    data: null,
                    className: 'text-center',
                    render: function (data, type, row) {
                        return '<a  title="Edit" href="' + baseUrl + 'admin/services/res-night/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" href="' + baseUrl + 'admin/services/res-night/show/' + data.id + '" class="btn btn-warning btn-xs"><i class="fa fa-eye text-dark" aria-hidden="true"></i></a>'+'\xa0\xa0\xa0'+
                            '<!--a  title="Delete" href="javascript:void(0)" data-id="'+data.id+'" class="delete-btn btn btn-danger btn-xs btn-deleteRecord"><i class="fa fa-trash" aria-hidden="true"></i></a-->';                       
                    }
                },
                { data: 'res_night_ph', name: 'rns.res_night_ph' },
                { data: 'id', name: 'rns.id' },
                { data: 'user_name', name: 'users.name' },
                { data: 'user_email', name: 'users.email' },
                { data: 'user_phone', name: 'users.phone' },
                { data: 'res_night_name', name: 'rns.res_night_name' },
            ],
            'columnDefs': [ {
                'targets': [0, 1, 4, 5], /* column index */
                'orderable': false, /* true or false */
            },
            {
                "targets": [ 6, 7, 8, 9, 10, 11 ],
                "visible": false
            },
            {
                "targets": [ 4, 5, 7 ],
                "searchable": false
            }],
            'aaSorting': [ 7, 'DESC']
        });

        $("select[name=active_status], select[name=category], select[name=fetch-mode]").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";
        }      
            
        var serviceRow = $(this).attr('data-id');
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
            }
        });
        $.ajax({
            url: baseUrl + 'admin/services/res-night/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