@extends('templates.structure')

@section('custom_css')
<link rel="stylesheet" href="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datatables/dataTables.bootstrap4.css')}}">
<link rel="stylesheet" href="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datepicker/datepicker3.css')}}">
<link rel="stylesheet" href="{{asset('AdminLTE-3.0.0-alpha.2/plugins/select2/select2.min.css')}}">
<link rel="stylesheet" href="{{asset('AdminLTE-3.0.0-alpha.2/dist/css/adminlte.min.css')}}">
<style>
    #ck-button span {
        margin:4px;
        background-color:#EFEFEF;
        border-radius:0px;
        border:1px solid #D0D0D0;
        overflow:auto;
        float:left;
        width: 150px;
        height: 70px;
        text-align:center;
        padding-top:20px;
        display:block;
    }

    #ck-button input[type=checkbox] {
        display: none;
    }

    #ck-button span:hover {
        border: 1px solid #00a65a;
        color: #00a65a;
    }

    #ck-button span {
        float:left;
        cursor: pointer;
    }

    #ck-button input {
        position:absolute;
        top:-20px;
    }

    #ck-button input:checked + span {
        /* border: 1px solid black; */
        color:#D0D0D0;
        background-color:#00a65a;
    }
</style>
<link rel="stylesheet" href="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datepicker/datepicker3.css')}}">
<link rel="stylesheet" href="{{asset('AdminLTE-3.0.0-alpha.2/plugins/select2/select2.min.css')}}">
@endsection
@section('content')

    <div class="row">
        <div class="col-12">
            <div class="card">
              <div class="card-header d-flex p-0">                
                <ul class="nav nav-pills ml-auto p-2">
                  <li class="nav-item"><a class="nav-link active" href="#tab_1" data-toggle="tab">Facility Schedule</a></li>
                  <li class="nav-item"><a class="nav-link" href="#tab_2" data-toggle="tab">Facility Book</a></li>
                </ul>
              </div>              
              <div class="card-body">
                <div class="tab-content">
                  <div class="tab-pane active" id="tab_1">
                      <form role="form" id="form_schedule">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Location: </label>
                                    <select name="location_id" class="form-control">
                                        <option value=""></option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Facility: </label>
                                    <select name="facility_id" class="form-control">
                                        <option value=""></option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Date: </label>
                                {{-- <input type="text" name="booking_date" value="0000-00-00" class="form-control datepick"> --}}
                                <input type="text" name="booking_date" value="{{\Carbon\Carbon::now()->toDateString()}}" class="form-control datepick">
                                </div>
                            </div>
                            <div class="col-md-3 text-left">
                                <button type="submit" class="btn btn-success" style="margin-top: 30px;"><i class="fa fa-search"></i> Search</button>
                            </div>
                        </div>
                    </form>
                    <hr>
                    <table id="example1" class="table table-hover" style="width:100%">
                        <thead>
                            <tr>
                                <th>No.</th>
                                <th>Location Name</th>
                                <th>Facility</th>
                                <th>Time (Till one hour)</th> 
                                <th>Client</th>
                                <th>Created By</th>
                                <th>Date Booked</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                  </div>                  
                  <div class="tab-pane" id="tab_2">
                    <form role="form" id="form_facility">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Location: </label>
                                <select name="location_opt" class="form-control">
                                    <option value=""></option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Facility: </label>
                                <select name="facility_opt" class="form-control">
                                    <option value=""></option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Date: </label>
                            <input type="text" name="book_date" value="{{\Carbon\Carbon::now()->toDateString()}}" class="form-control datepick">
                            </div>
                        </div>
                        <div class="col-md-3 text-left">
                            <button type="submit" class="btn btn-success" style="margin-top: 30px;"><i class="fa fa-search"></i> Search</button>
                        </div>
                    </div>
                    </form>
                    <hr>
                    <form role="form" id="form_booking" style="display:none">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label>Client:</label>
                                            <br>
                                            <select name="client_id" class="form-control">
                                            </select>                                            
                                        </div>                                
                                    </div> 
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label>Choose Plan:</label>
                                            <div id="listplan"></div>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label>Notes:</label>
                                            <br>
                                            <textarea name="notes" rows="3" class="form-control"></textarea>                                            
                                        </div>                                
                                    </div> 
                                </div>
                            </div>

                            <div class="col-md-6 schedule_time">
                                <label>Time Booking :</label>
                                <br>
                                <div id="ck-button" class="form-group">                                    
                                    <label>
                                        <input type="checkbox" value='800'>
                                        <span>08:00</span>
                                    </label>
                                    <label>
                                        <input type="checkbox" value='2200'>
                                        <span>22:00</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-md-12 text-right">
                                <button type="submit" class="btn btn-info float-right">Save</button>
                            </div>
                        </div>
                    </form>
                  </div>                                    
                </div>                
              </div>
            </div>
        </div>
    </div>    

@endsection

@section('custom_js')
<!-- DataTables -->
{{-- <script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/ckeditor/ckeditor.js')}}"></script> --}}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@7.30.0/dist/sweetalert2.all.min.js"></script>
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datatables/jquery.dataTables.js')}}"></script>
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datatables/dataTables.bootstrap4.js')}}"></script>
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datepicker/bootstrap-datepicker.js')}}"></script>
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/select2/select2.full.min.js')}}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/ckeditor/ckeditor.js')}}"></script>
<script>
    
    var location_name = $('[name="location_id"]');
    var facility_name = $('[name="facility_id"]');
    var location_opt = $('[name="location_opt"]');
    var facility_opt = $('[name="facility_opt"]');

    location_name.select2({
        placeholder: 'Choose location ...',
        width: '100%',
        allowClear: true,
        ajax: {            
            url: '{{route("locations.datatable")}}',
            dataType: 'json',
            data: function(params) {                
                return {                    
                    start: params.page == NaN ? 0 : (params.page-1) * 25,
                    length: 25,
                    columns: {
                        0:{
                        name: 'op.location_name',
                        orderable: true,
                        searchable: true
                        }
                    },
                    search: {value: params.term},
                    order: {0:{dir:'asc'}}
                }
            },
            processResults: function (data, params) {
                params.page = params.page || 1;                
                var newData = []
                $.each(data.data, function(key, val){
                    newData[key] = {'id' : val.id, 'text' : val.location_name};                    
                })

                data.results = newData;
            
                return {
                    results: data.results,
                    pagination: {
                        more: (params.page * 25) < data.recordsFiltered
                    }
                }

            },
            cache: true
        }
    });

    facility_name.select2({        
        placeholder: 'Choose facility ...',
        width: '100%',
        allowClear: true
    });

    location_name.on('select2:select', function (e) {
        var locationid = e.params.data.id;
        facility_name.select2('val', '');
        facility_name.find('option').remove();

        facility_name.select2({        
            placeholder: 'Choose facility ...',
            width: '100%',
            allowClear: true,
            ajax: {            
                url: '{{route("facilities.datatable")}}',
                dataType: 'json',
                data: function(params) {                
                    return {                    
                        start: params.page == NaN ? 0 : (params.page-1) * 25,
                        length: 25,
                        columns: {
                            0:{
                            name: 'op.name',
                            // data: 'name',
                            orderable: true,
                            searchable: true,
                            search:{
                                value:params.term
                                }
                            },                        
                            1:{
                            name: 'op.location_id',
                            // data: 'location_id',
                            // orderable: true,
                            searchable: true,
                            search:{
                                value:locationid
                                }
                            },                        
                            2:{
                            name: 'op.status',                            
                            search:{
                                value:'1'
                                }
                            }
                        },
                        // search: {value: params.term},
                        order: {0:{dir:'asc'}}
                    }
                },
                processResults: function (data, params) {
                    params.page = params.page || 1;                
                    var newData = []
                    $.each(data.data, function(key, val){
                        newData[key] = {'id' : val.id, 'text' : val.name};                    
                    })

                    data.results = newData;
                
                    return {
                        results: data.results,
                        pagination: {
                            more: (params.page * 25) < data.recordsFiltered
                        }
                    }

                },
                cache: true
            }
            // minimumInputLength: 3,

        });
    });

    location_name.on("select2:unselect", function (e) { 
        facility_name.select2('val', '');
    })

    location_opt.select2({
        placeholder: 'Choose location ...',
        width: '100%',
        allowClear: true,
        ajax: {            
            url: '{{route("locations.datatable")}}',
            dataType: 'json',
            data: function(params) {                
                return {                    
                    start: params.page == NaN ? 0 : (params.page-1) * 25,
                    length: 25,
                    columns: {
                        0:{
                        name: 'op.location_name',
                        orderable: true,
                        searchable: true
                        }
                    },
                    search: {value: params.term},
                    order: {0:{dir:'asc'}}
                }
            },
            processResults: function (data, params) {
                params.page = params.page || 1;                
                var newData = []
                $.each(data.data, function(key, val){
                    newData[key] = {'id' : val.id, 'text' : val.location_name};                    
                })

                data.results = newData;
            
                return {
                    results: data.results,
                    pagination: {
                        more: (params.page * 25) < data.recordsFiltered
                    }
                }

            },
            cache: true
        }
    });

    facility_opt.select2({
        width: '100%',
        // data : unity_facilities,
        allowClear: true,
        placeholder: "Choose facility ..."
    });

    location_opt.on('select2:select', function (e) {
        var locationid = e.params.data.id;
        facility_opt.select2({
            placeholder: 'Choose facility ...',
            width: '100%',
            allowClear: true,
            ajax: {            
                url: '{{route("facilities.datatable")}}',
                dataType: 'json',
                data: function(params) {                
                    return {                    
                        start: params.page == NaN ? 0 : (params.page-1) * 25,
                        length: 25,
                        columns: {
                            0:{
                            name: 'op.name',
                            // data: 'name',
                            orderable: true,
                            searchable: true,
                            search:{
                                value:params.term
                                }
                            },                        
                            1:{
                            name: 'op.location_id',
                            // data: 'location_id',
                            // orderable: true,
                            searchable: true,
                            search:{
                                value:locationid
                                }
                            },                        
                            2:{
                            name: 'op.status',                            
                            search:{
                                value:'1'
                                }
                            }
                        },
                        // search: {value: params.term},
                        order: {0:{dir:'asc'}}
                    }
                },
                processResults: function (data, params) {
                    params.page = params.page || 1;                
                    var newData = []
                    $.each(data.data, function(key, val){
                        newData[key] = {'id' : val.id, 'text' : val.name};                    
                    })

                    data.results = newData;
                
                    return {
                        results: data.results,
                        pagination: {
                            more: (params.page * 25) < data.recordsFiltered
                        }
                    }

                },
                cache: true
            }
            // minimumInputLength: 3,

        });
    });

    location_opt.on("select2:unselect", function (e) { 
        facility_opt.select2('val', '');
    })

    $('#form_schedule .datepick').datepicker({
            autoclose: true,
            format: "yyyy-mm-dd",
            onSelect: function(selectedDate) { alert(selectedDate) }
        });

    let date = new Date();
    date.setDate(date.getDate());

    $('#form_facility .datepick').datepicker({
        autoclose: true,
        format: "yyyy-mm-dd",
        onSelect: function(selectedDate) { alert(selectedDate) },
        startDate: date,
    })


    var table = $('#example1').DataTable({
        "scrollX": true,
        "processing": true,
        "serverSide": true,
        "searching" : false,
        "ajax": {
            url: '{{route("facilities-schedule.datatable")}}',
            data: function (d) {
                d.location_id = $('[name=location_id]').val();
                d.facility_id = $('[name=facility_id]').val();
                d.booking_date = $('[name=booking_date]').val();
            }
        },        
        "columns": [
                { "name": "op.booked_slots", "data": "booked_slots", "orderable": false },                
                { "name": "unity_locations_ht.location_name", "data": "location_name", "orderable": false },                
                { "name": "unity_facilities.name", "data": "facility_name", "orderable": false },                
                { "name": "op.booked_slots", "data": function ( row, type, set ) {
                        var timeproces = row.booked_slots.split(",");
                        var timefix = ''
                        $.each(timeproces, function (index, value) {
                            timefix += value.slice(0, -2)+":00 - "+ (parseInt(value.slice(0, -2))+1) +":00"
                            if(timeproces.length > index +1){
                                timefix += "</br>"
                            }
                        })

                        return timefix
                    }, "orderable": false
                },
                { "name": "op.booked_slots", "data": function ( row, type, set ) {
                        return row.client_id+'-'+row.client_name
                    }, "orderable": false
                },                
                { "name": "op.created_by", "data": "created_by", "orderable": false },                
                { "name": "op.booking_date", "data": "booking_date", "orderable": false},                
            ],
        "order" :[[ 2, 'asc' ]],
        "columnDefs": [ 
            {
                "targets": -1,
                "data": "action",
                "render": function ( data, type, row, meta ) {                    
                    var action = '';
                    action += '<div class="float-right"><button class="btn btn-outline-success details-control" ><span class="fa fa-info"></span></button>&nbsp;'

                    if (row.status == 1){
                        action += '<button class="btn btn-outline-danger" onclick="cancelBook(\''+row.id+'\', \''+row.client_id+'-'+row.client_name+'\', \''+row.booked_slots+'\')"><span class="fa fa-remove"></span></button></div>&nbsp;'
                    }
                    
                    return action            
                }
            }
            
        ],
        "targets": 0,
    })

    table.on( 'order.dt search.dt', function () {
        table.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
            cell.innerHTML = i+1;
        } );
    } ).draw();

    let cancelBook = (id, clientname, slots) => {
        var timeproces = slots.split(",");
        var timefix = ''
        $.each(timeproces, function (index, value) {
            timefix += value.slice(0, -2)+':00 - '+ (parseInt(value.slice(0, -2))+1) +':00'
            if(timeproces.length > index +1){
                timefix += '</br>'
            }
        })
        
        Swal({ 
            title: 'Are you sure?', 
            type: 'warning', 
            html:
                'Do you want to cancel booked </br>'+ clientname +
                '</br>At :</br>'+timefix+'', 
            showCancelButton: true, 
            confirmButtonColor:'#3085d6', 
            cancelButtonColor: '#d33', 
            confirmButtonText: 'Yes, canceled it!' 
            })
            .then((result) => { if (result.value) {
                deleteBooked(id)
            }
        })
    }

    let deleteBooked = (id) => {

        let url = '{{url("facilities-schedule")}}/'+id;
        axios.delete(url, config) .then(function (response) {                                
            table.ajax.reload();
        })
        .catch(function (error) { console.log(error);            
            console.log(error.response)
            Swal({
                type: 'error',
                title: 'Oops...',
                text: error.response.data.data.message,
                // footer: '<a href>Why do I have this issue?</a>'
            })
        });
    }

    $('#form_schedule').on('submit', function(e) {
        table.draw();
        e.preventDefault();
    });

    $('#form_facility').on('submit', function(e) {        
        e.preventDefault();
        let bodyFormData = new FormData();
        bodyFormData.append('location_id', $('[name="location_opt"]').val());
        bodyFormData.append('facility_id', $('[name="facility_opt"]').val());
        bodyFormData.append('book_date', $('[name="book_date"]').val());

        axios.post('{{route("facilities-available.store")}}', bodyFormData, config) .then(function (response) {
            $('.newerror').remove()
            let data = response.data.data;
            let temp = '';
            $.each(data.facility_schedule, function (key, val) {
                if(val.bookable == true){
                    var disabl = 'disabled="" checked';
                    var spanl = 'style="background-color:#f56954"';
                    var name = 'time_booked[]';
                    var who = 'onclick="whoBooked(\''+val.client_id+'\', \''+val.username+'\', \''+val.company_name+'\', \''+val.time+'\', \''+val.createdby+'\', \''+val.created_at+'\')"';
                } else {
                    var disabl = '';
                    var spanl = '';
                    var name = 'time_booking[]';
                    var who = '';
                }

                temp += '<label '+who+'>\
                                <input name="'+name+'" type="checkbox" value='+val.time+' '+disabl+'>\
                                <span '+spanl+' class="rounded">'+val.time.toString().slice(0,-2) + ':00'+' - '+ (parseInt(val.time.toString().slice(0,-2)) +1) + ':00'+'</span>\
                            </label>';                
            })

            $('#ck-button').html(temp)
            $('#form_booking').css('display', 'block')

             
        })
        .catch(function (error) { console.log(error);
            $('.newerror').remove()
            console.log(error)
            $('#form_booking').css('display', 'none')
            var msgs = error.response.data.data.message
            $.each(msgs, function (index, value) {
                    if(index.split(".").length > 1){
                        var newindex = index.split(".")
                        $('[name="'+newindex[0]+'['+newindex[1]+']"]').closest( ".form-group" ).after('<label id="'+index+'-error" class="newerror" for="'+index+'">'+value[0]+'</label>')
                    } else {

                        if(index == 'location_id'){index = 'location_opt';}
                        if(index == 'facility_id'){index = 'facility_opt';}

                        $('[name="'+index+'"]').closest( ".form-group" ).after('<label id="'+index+'-error" class="newerror" for="'+index+'">'+value[0]+'</label>')
                    }
                    // console.log(value[0])
                });
        });
    });

    let whoBooked = (
        client_id, 
        client_name, 
        company_name, 
        time, 
        createdby, 
        created_at
        ) => {
        var company_name = (company_name != 'null') ? company_name : "";

        Swal.fire({
            title: '<strong>'+time.toString().slice(0,-2) + ':00 - '+ (parseInt(time.toString().slice(0,-2)) +1) + ':00</strong>',
            type: 'info',
            html:
                '<p class="text-center">' +
                'ClientID : <strong>'+client_id+'</strong></br>' +
                'Client Name : <strong>'+client_name+'</strong></br>' +
                'Company Name : <strong>'+company_name+'</strong></br>' +
                'Booked By : <strong>'+createdby+'</strong></br>' +
                'Booked At : <strong>'+created_at+'</strong></br>' +
                '</p>',
            showCloseButton: true
        })
    }


    let client = $("select[name='client_id']")

    $("select[name='client_id']").select2({
        placeholder: 'Client name ...',
        width: '100%',
        allowClear: true,
        ajax: {            
            url: '{{route("clients.datatable")}}',
            dataType: 'json',
            data: function(params) {                
                return {                    
                    start: params.page == NaN ? 0 : (params.page-1) * 25,
                    length: 25,
                    columns: {
                        0:{
                        name: 'op.fullname',
                        orderable: true,
                        searchable: true
                        },
                        1:{
                        name: 'op.company_name',
                        orderable: true,
                        searchable: true
                        },
                        2:{
                        name: 'op.clientid',
                        orderable: true,
                        searchable: true
                        },
                        3:{
                        name: 'op.status',
                        orderable: true,
                        searchable: true,
                        search: {
                                regex: true,
                                value : '1',
                            },
                        }
                    },
                    search: {value: params.term},
                    order: {0:{dir:'asc'}}
                }
            },
            processResults: function (data, params) {
                params.page = params.page || 1;                
                var newData = []
                $.each(data.data, function(key, val){
                    var text = val.clientid;
                    text += (val.fullname != null ? ' - '+val.fullname : '');
                    text += (val.company_name != null ? ' - '+val.company_name : '');

                    newData[key] = {'id' : val.clientid, 'text' : text};                    
                })

                data.results = newData;
            
                return {
                    results: data.results,
                    pagination: {
                        more: (params.page * 25) < data.recordsFiltered
                    }
                }

            },
            cache: true
        }
    });

    client.on('select2:select', function (e) {
            axios.get('{{route("plan.datatable")}}?columns[0][name]=op.members&columns[0][searchable]=true&columns[0][search][value]='+e.params.data.id+'&columns[1][name]=op.status&columns[1][searchable]=true&columns[1][search][value]=3', config) .then(function (response) {
                // console.log(response.data.data.length)
                $('#listplan').html('')
                if (response.data.data.length > 0){

                    $.each(response.data.data, function (index, value) {

                        var param = {
                            id: value.id,
                            product_name: value.product_name,
                            expired: value.next_renew_date,
                            quota: {
                                working_pass: value.working_pass,
                                meeting_room_hours: value.meeting_room_hours,
                            },
                        };
                        
                        $('#listplan').append(radioplan(param))
                    })

                } else {
                    $('#listplan').html('No Plan!')
                }
                
            })
            .catch(function (error) { 
                
                console.log(error);
            });
        });

    client.on("select2:unselect", function (e) { 
            
        })

    let radioplan = (data) => {
        return '<div class="callout callout-info">\
                        <div class="radio">\
                        <label>\
                        <input type="radio" name="plan_id" id="optionsRadios'+data.id+'" value="'+data.id+'">\
                        '+data.product_name+'\
                        <ul>\
                            <li>Expired At: '+data.expired+'</li>\
                            <li>Quota Meeting Room(s): '+data.quota.meeting_room_hours+'</li>\
                        </ul>\
                        </label>\
                    </div></div>'
    }


    $('#form_booking').on('submit', function(e) {
        e.preventDefault();
        let time_booking = $('[name="time_booking[]"]:checked').map(function() {return this.value;}).get().join(',')

        Swal({ title: 'Are you sure?', text: "You want to booking that facility at time "+time_booking+"!", type: 'warning', showCancelButton: true, confirmButtonColor:'#3085d6', cancelButtonColor: '#d33', confirmButtonText: 'Yes, booking it!' }).then((result) => { if (result.value) {
            storeData()
        } })
        
    });

    function storeData(){

        let bodyFormData = new FormData();
        let time_booking = $('[name="time_booking[]"]:checked').map(function() {return this.value;}).get().join(',')

        bodyFormData.append('client_id', $('[name="client_id"]').val() == null ? '' : $('[name="client_id"]').val());
        bodyFormData.append('plan_id', $('[name="plan_id"]:checked').val());
        bodyFormData.append('location_id', $('[name="location_opt"]').val());
        bodyFormData.append('facility_id', $('[name="facility_opt"]').val());
        bodyFormData.append('book_date', $('[name="book_date"]').val());
        bodyFormData.append('notes', $('[name="notes"]').val());
        bodyFormData.append('time_booking', time_booking);

        axios.post('{{route("facilities-schedule.store")}}', bodyFormData, config) .then(function (response) {
            $('.newerror').remove()
            Swal({                
                type: 'success',
                title: 'Your booking has been saved',
                showConfirmButton: false,
                timer: 1500
            }).then((result) => {
                if (
                    // Read more about handling dismissals
                    result.dismiss === Swal.DismissReason.timer
                ) {
                    console.log('I was closed by the timer')
                    window.location = response.data.additional.redirect;
                }
            })
        })
        .catch(function (error) { console.log(error);
            $('.newerror').remove()            
            if(error.response.data.data.error_code == 'BAD_REQUEST_01'){
                Swal({
                    type: 'error',
                    title: 'Oops...',
                    text: error.response.data.data.message,                    
                })
            }
            if(error.response.data.data.error_code == 'BAD_REQUEST'){

                var msgs = error.response.data.data.message
                $.each(msgs, function (index, value) {
                        if(index.split(".").length > 1){
                            var newindex = index.split(".")
                            $('[name="'+newindex[0]+'['+newindex[1]+']"]').closest( ".form-group" ).after('<label id="'+index+'-error" class="newerror" for="'+index+'">'+value[0]+'</label>')
                        } else {

                            if(index == 'time_booking'){

                                $('[name="'+index+'[]"]').closest( ".form-group" ).after('<label id="'+index+'-error" class="newerror" for="'+index+'">'+value[0]+'</label>')
                            }

                            $('[name="'+index+'"]').closest( ".form-group" ).after('<label id="'+index+'-error" class="newerror" for="'+index+'">'+value[0]+'</label>')
                        }
                        
                    });
            }
        });
    }


</script>
@endsection

@section('addCustomInfo')
if(v.name == 'status'){
    if(valuename == 2){
        valuename = 'Canceled';
    }
    if(valuename == 1){
        valuename = 'Active';
    }
}
if(v.name == 'total_slots'){
    keyname = 'Deductions_rates'
}
@endsection