@extends('admin.layouts.admin')
@section('title')
    Admin | {{ $data->service->res_night_name }}
@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>
        td.details-control {
            background: url({{ asset('images/details_open.png') }}) no-repeat center center;
            cursor: pointer;
        }
        tr.shown td.details-control {
            background: url({{ asset('images/details_close.png') }}) no-repeat center center;
        }
    </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">{{ $data->service->res_night_name }}</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="{{ route('admin.bookings.restaurant') }}">Restaurant bookings</a></li>
                    <li class="breadcrumb-item active">{{ $data->service->res_night_name }}</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 -->
        <!-- 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-striped table-hover w-100">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th>ID</th>
                                    <th>Booking ID</th>
                                    <th>Customer</th>
                                    <th>Date</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </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">
    /* Formatting function for row details - modify as you need */
    function format(data) {
        // `data` is the original data object for the row
        if(data.booking_status == 0) {
            data.booking_status = 'Not confirm';
        }
        else if(data.booking_status == 1) {
            data.booking_status = 'Confirm';
        }
        else if(data.booking_status == 2) {
            data.booking_status = 'Rejected by provider';
        }

        return '<table class="table table-sm table-borderless">'+
            '<tr>'+
                '<td>Customer contacts:</td>'+
                '<td>'+data.payment.customer.phone+', '+data.payment.customer.email+'</td>'+
            '</tr>'+
            '<tr>'+
                '<td>Booking Date:</td>'+
                '<td>'+moment(data.booking_date).format('DD MMM, YYYY')+' '+data.booking_time+'</td>'+
            '</tr>'+
            '<tr>'+
                '<td>Status:</td>'+
                '<td>'+data.booking_status+'</td>'+
            '</tr>'+
            '<tr>'+
                '<td>Booked for:</td>'+
                '<td>'+data.no_of_person+' person(s)</td>'+
            '</tr>'+
            '<tr>'+
                '<td>Note:</td>'+
                '<td>'+((data.booking_note) ? data.booking_note : 'Not found.')+'</td>'+
            '</tr>'+
        '</table>';
    }

    var oTable = '';
    $(document).ready(function() {
        oTable = $('#artists-table').DataTable({
            "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.)"
            },
            processing: true,
            serverSide: true,
            ajax: baseUrl + 'admin/bookings/restaurant/list/' + {{ request()->segment(5) }},
            columns: [
                {
                    className:      'details-control',
                    orderable:      false,
                    data:           null,
                    defaultContent: ''
                },
                { data: 'id', name: 'id' },
                { data: 'booking_id', name: 'booking_id' },
                { data: 'payment.customer.name', name: 'payment.customer.name' },
                { data: 'created_at', name: 'created_at', render: function(d) {
                   return moment(d).format("DD MMM, YYYY hh:mmA");
                }},
            ],
            'columnDefs': [ {
                'targets': [1], /* column index */
                'orderable': false, /* true or false */
            },
            {
                'targets': [1], /* column index */
                'visible': false, /* true or false */
                'searchable': false,
            }],
            'aaSorting': [4, 'DESC']
        });

        // Add event listener for opening and closing details
        $('#artists-table tbody').on('click', 'td.details-control', function() {
            var tr = $(this).closest('tr');
            var row = oTable.row(tr);

            if(row.child.isShown()) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            }
            else {
                // Open this row
                row.child(format(row.data())).show();
                tr.addClass('shown');
            }
        });
    });

    $(document).on('click', '.btn-deleteRecord11', function () {
        var r = confirm("Are you sure you want to delete this record ?");

        if (r === true) {
            var serviceRow = $(this).attr('data-id');
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                }
            });
            $.ajax({
                url: baseUrl + 'admin/user/delete',
                method: 'post',
                dataType: 'json',
                data: {
                    id: serviceRow
                },
                success: function (result) {
                    if (parseInt(result) == parseInt(1)) {
                        oTable.draw();
                    } else {
                        //Do nothing
                    }
                }
            });
        } else {
            return false;
        }
    });

    $(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/setting/home-banner/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