@extends(\Auth::user()->role != 10 ? 'layout' : 'layoutfrontdesk')

@section('title', 'Guest Data')

@section('css')
<style type="text/css">
	.datatable-column-width{
		overflow: hidden; text-overflow: ellipsis; max-width: 200px;
	}
</style>
@endsection

@section('content')

	<!-- Page header -->
	<div class="page-header page-header-light">
		<div class="page-header-content header-elements-md-inline">
			<div class="page-title d-flex">
				<h4>  <span class="font-weight-semibold">Guest Data</span></h4>
				<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
			</div>
		</div>
	</div>
	<!-- /page header -->

	<!-- Content area -->
	<div class="content">

		<!-- Hover rows -->
		<div class="card">
			@if (\Auth::user()->role != 20)
				<div class="card-header header-elements-inline">
					<a href="{{ route('guestprofile.create')}}"><button type="button" class="btn btn-success rounded-round"><i class="icon-add mr-2"></i> Add</button></a>

                    <span class="float-right p-1 ">
                        <a href="{{route('download.guestmaster')}}" class="m-1"><button type="button" class="btn btn-light"><i class="fas fa-download"></i>Download Master Data Guest or Template</button></a>
                        <button class="btn btn-success m-1" data-toggle="modal" data-target="#modal_upload"> <i class="far fa-file-excel"></i>Upload or import new input only</button>
                        {{-- <button type="button" class="btn btn-warning" id="open-merge" onclick="openMerge()"><i class="icon-merge"></i>&nbsp;Merge</button>
                        <button type="button" class="btn btn-danger" id="cancel-merge" onclick="cancelMerge()" style="display: none;"><i class="icon-cross3"></i>&nbsp;Cancel</button>
                        <button type="button" class="btn btn-success" id="submit-merge" onclick="submitMerge()" style="display: none;"><i class="icon-checkmark"></i>&nbsp;Submit</button> --}}
                        <button type="button" class="btn btn-warning" id="open-merge" onclick="submitMerge()"><i class="icon-merge"></i>&nbsp;Merge</button>
                    </span>
				</div>
			@endif
			<table class="table datatable-basic table-hover table-responsive" id="table-data-guest">
				<thead>
					<tr>
                        <th>#</th>
						<th style="width: 10%">No</th>
						<th style="width: 15%">Name</th>
						<th style="width: 15%">Phone</th>
						<th style="width: 15%">Email</th>
						<th style="width: 20%">Address</th>
						<th style="width: 10%">Individual Ledger</th>
						<th class="" style="width: 25%">Actions</th>
					</tr>
				</thead>
				<tbody>
				{{-- @if(!$guests->isEmpty()) --}}
				@if(count($guests) > 0)
					@php ($i = 1) @endphp
					@foreach($guests as $guest)
				    <tr>
                        <td>
                            <input type="checkbox" class="checklist_guest" id="guest_{{$guest->id}}" data-idx="{{$guest->id}}" data-name="{{$guest->name}}" data-phone="{{$guest->phone}}" data-email="{{$guest->email}}" >
                        </td>
				        <td>{{$i}}</td>
				        <td><div class="datatable-column-width">{{$guest->name}}</div></td>
				        <td><div class="datatable-column-width">{{$guest->phone}}</div></td>
				        <td><div class="datatable-column-width">{{$guest->email}}</div></td>
				        <td><div class="datatable-column-width">{{$guest->address}}</div></td>
				        <td><div class="datatable-column-width">{{$guest->individual_ledger == 1?'Yes':'No'}}</div></td>
				        <td align="center">
                            <div class="dropdown outerHTML">
                                <button type="button" class="btn btn-light" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    More
                                    <i class="icon-more"></i>
                                </button>
                                <div class="dropdown-menu dropdown-menu-right" style="z-index:5">
                                    <a href="{{ url('formpenawaranlist').'/'.$guest->id}}" class="dropdown-item btn btn-warning btn-icon"> <i class="fas fa-clipboard-list"></i>Form List</a>
                                    <a href="{{ route('guestprofile.edit',$guest->id)}}" class="dropdown-item btn btn-primary btn-icon"> <i class="icon-pencil7"></i>Edit</a>
                                    <a href="{{ route('bookings.create')}}?guest_profile_id={{$guest->id }}" target="_blank" class="dropdown-item btn btn-success btn-icon"><i class="icon-notebook"></i>Booking</a>
                                    <a class="dropdown-item guest_history_booking btn-tooltip btn-icon" data-toggle="modal" data-target="#guest_history_booking_modal" data-guest_profile_id="{{ $guest->id }}" id="guest_history_booking" title="Guest History Booking"><i class="fas fa-history"></i>Guest History Booking</a>
                                    @if (!in_array(\Auth::user()->role, [10, 20, 30, 40, 50, 99]))
                                        @if(!count($guest->booking) > 0 && !count($guest->folioDummies) > 0)
                                            <a class="dropdown-item delbutton btn-tooltip btn-icon" title="Delete" data-toggle="modal" data-target="#modal_theme_danger" data-uri="{{ route('guestprofile.destroy', $guest->id)}}">
                                                <i class="fas fa-trash"></i> Delete
                                            </a>
                                        @endif
                                    @endif
                                </div>

                                {{-- <a href="{{ url('formpenawaranlist').'/'.$guest->id}}" class="btn-tooltip" title="Form"><button type="button" class="btn btn-primary btn-icon"><i class="icon-pencil7"></i></button></a>
                                <a href="{{ route('guestprofile.edit',$guest->id)}}" class="btn-tooltip" title="Edit"><button type="button" class="btn btn-primary btn-icon"><i class="icon-pencil7"></i></button></a>

                                <a href="{{route('bookings.create')}}?guest_profile_id={{$guest->id}}" target="_blank"
                                   class="btn btn-success btn-tooltip"
                                   title="Booking"
                                >
                                    <i class="icon-notebook"></i>
                                </a> --}}

                                {{-- guest history booking --}}
                                {{-- <a class="guest_history_booking btn-tooltip"
                                   data-toggle="modal"
                                   data-target="#guest_history_booking_modal"
                                   data-guest_profile_id="{{ $guest->id }}"
                                   id="guest_history_booking"
                                   title="Guest History Booking"
                                >
                                    <button type="button" class="btn btn-info btn-icon " >
                                        <i class="fas fa-history"></i>
                                    </button>
                                </a>

                                @if (!in_array(\Auth::user()->role, [10, 20, 30, 40, 50, 99]))
                                <a class="delbutton btn-tooltip" title="Delete" data-toggle="modal" data-target="#modal_theme_danger" data-uri="{{ route('guestprofile.destroy', $guest->id)}}">
                                    <button type="button" class="btn btn-danger btn-icon " ><i class="icon-x"></i></button>
                                </a>
                                @endif --}}
                            </div>
						</td>
				    </tr>
				    @php ($i++)
				    @endforeach
				@else
				  	<tr><td align="center" colspan="7">No Data</td></tr>
				@endif

				</tbody>
			</table>
		</div>
		<!-- /hover rows -->

	</div>
	<!-- /content area -->

    <!--MODAL-->
    <div id="modal_upload" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header" align="center">
                    <h6 class="modal-title" id="formTitle">Upload Guest Data Excel</span></h6>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <form action="{{ route('upload.guestdata') }}" method="post" id="upload-form" enctype="multipart/form-data">
                    @csrf

                    <input type="hidden" name="_method" id="method" value="post">
                    <div class="modal-body">
                        <div class="form-group">
                            <input class="form-control-uniform" id="file" name="file" type="file" accept=".xls,.xlsx,.csv">
                        </div>
                        <span class="form-text text-muted">Accepted format: .xls .xlsx .csv</span>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-link"  data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-success" id="submit-upload">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!--/MODAL-->

    <!-- Danger modal -->
	<div id="modal_theme_danger" class="modal fade" tabindex="-1">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header bg-danger" align="center">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<form action="" method="post" id="delform">
				    @csrf
				    @method('DELETE')
					<div class="modal-body" align="center">
						<h3> Are you sure? You will not be able to recover this data. </h3>
					</div>

					<div class="modal-footer">
						<button type="button" class="btn btn-link" data-dismiss="modal">Cancel</button>
						<button type="submit" class="btn bg-danger">Delete</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	<!-- /default modal -->

        {{--
    --------------------------------------------------------------
    Guest History Booking Modal
    --------------------------------------------------------------
    --}}
    <!--MODAL-->
    <div id="guest_history_booking_modal" class="modal fade">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header bg-info" align="center">
                    <h6 class="modal-title">
                        <i class="fas fa-history"></i>&nbsp;Guest History Booking - <span class="guest_name"></span>
                    </h6>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <div class="modal-body">
                    <div class="col-lg-3">
                        <p style="font-weight: bold" class="mb-0">Night Total: <span class="total_malam">0</span></p>
                        <p>Remark: <span id="remark_note"></span> </p>
                    </div>
                    <table class="table datatable-guest-history-booking table-hover" id="table_guest_history_booking" style="width: 100%">
                        <thead>
                            <tr>
                                <th class="d-none">Sort No</th>
                                <th class="d-none">Booking Code Filter</th>
                                <th class="d-none">Date Filter</th>

                                <th style="width:10px !important">#</th>
                                <th>Date</th>
                                <th>Room Number</th>
                                <th>Qty</th>
                                <th>Description / Voucher</th>
                                <th class="text-right">Per Item</th>
                                <th class="text-right">Total</th>
                            </tr>
                        </thead>
                        <tbody id="tbody_guest_history_booking">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!--/MODAL-->

    <!-- MODAL MERGE -->
    <div id="modal_merge" class="modal fade" tabindex="-1">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header bg-success" align="center">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<form action="{{ route('merge.guest') }}" method="post" id="delform">
				    @csrf
					<div class="modal-body" align="center">
						<h3> Merge Guest Data To Guest: </h3>

                        <div id="list_merge_hidden">

                        </div>

                        <div id="list_merge">
                        </div>

					</div>

					<div class="modal-footer">
						<button type="button" class="btn btn-link" data-dismiss="modal">Cancel</button>
						<button type="submit" class="btn bg-success">Merge Now</button>
					</div>
				</form>

			</div>
		</div>
	</div>
    <!-- MODAL MERGE -->

@endsection

@section('js')
	<!-- Theme JS files -->
	<script src="{{asset('global_assets/js/plugins/notifications/pnotify.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/notifications/bootbox.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/tables/datatables/datatables.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/forms/selects/select2.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/buttons/spin.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/buttons/ladda.min.js')}}"></script>

    <!-- Helpers JS -->
    <script src="{{asset('assets/js/custom.js')}}"></script>

	<script src="{{asset('assets/js/app.js')}}"></script>
	<script src="{{asset('global_assets/js/demo_pages/components_modals.js')}}"></script>
	<script>
        // Json encode config
        let jenis_pembayaran = {!!json_encode(config('custom.jenis_pembayaran')) !!}
        let jenis_deposit = {!!json_encode(config('custom.jenis_deposit')) !!}

		//modal delete
		$(document).on("click", ".delbutton", function () {
		     var url = $(this).data('uri');
		     $("#delform").attr("action", url);
		});

		//Guest History Booking JQuery
		$(document).on("click", "#guest_history_booking", function () {
            // get data guest profile id then insert to variable
            let guest_profile_id = $(this).data('guest_profile_id');

            // reset total malam
            $('.total_malam').text(0)
            $('#guest_history_booking_modal #remark_note').html('-')

            // Ajax Guest History Booking
            $.ajax({
                type: 'GET',
                url: "{{ url('/guest-history-booking')}}/"+guest_profile_id,
                success: function (results) {
                    $('.datatable-guest-history-booking').DataTable().clear().destroy();

                    if (results.guest_profile) {
                        $('.guest_name').text(results.guest_profile.name)
                    }

                    let html_guest_history_booking = ''

                    if (results.booking_details.length > 0) {
                        let no = 1
                        let sort_no = 1
                        let total_malam = 0

                        console.log(results.booking_details)

                        $.each(results.booking_details, function(key, booking_detail){
                            let refunds = []
                            let checkin = ''
                            let checkout = ''
                            let booking = booking_detail.booking
                            let invoice_array = results.invoice_array
                            let invoice = booking_detail.nomor_kamar != null ? invoice_array[booking.id][booking_detail.nomor_kamar] : (invoice_array[booking.id][''][booking_detail.room_index]??null)

                            if (booking_detail.start_date_old && booking_detail.end_date_old) {
                                checkin += moment(booking_detail.start_date_old, "YYYY-MM-DD").format('YYYY-MM-DD');
                                checkout += moment(booking_detail.end_date_old, "YYYY-MM-DD").format('YYYY-MM-DD');

                                total_malam += booking_detail.jumlah_malam_old
                            } else {
                                checkin += moment(booking_detail.start_date, "YYYY-MM-DD").format('YYYY-MM-DD');
                                checkout += moment(booking_detail.end_date, "YYYY-MM-DD").format('YYYY-MM-DD');

                                total_malam += booking_detail.jumlah_malam
                            }

                            html_guest_history_booking += `<tr>
                                                                <td class="d-none">${sort_no}</td>
                                                                <td class="d-none">${booking.kode_booking}</td>
                                                                <td class="d-none">${checkin} - ${checkout}</td>
                                                                <td class="d-none">
                                                                    ${invoice ? invoice.no_invoice : ''}
                                                                </td>

                                                                <td>${no}</td>
                                                                <td colspan="6">
                                                                    No. Reservation: ${booking.kode_booking}<span style="font-weight:bold;"> (No. Bill: <a href="{{url('invoice-draft/${invoice ? invoice.id : null}')}}" target="_blank">${invoice ? invoice.no_invoice : ''}</a>)</span> | <span class="text-success"><i class="icon-enter2"></i>&nbsp;${moment(checkin, "YYYY-MM-DD").format('DD-MM-YYYY')}</span> - <span class="text-danger"><i class="icon-exit2"></i>&nbsp;${moment(checkout, "YYYY-MM-DD").format('DD-MM-YYYY')}</span>
                                                                </td>
                                                                <td class="d-none"></td>
                                                                <td class="d-none"></td>
                                                                <td class="d-none"></td>
                                                                <td class="d-none"></td>
                                                                <td class="d-none"></td>
                                                            </tr>`

                            // Invoice Detail
                            if (invoice?.invoicedetail.length > 0) {
                                $.each(invoice.invoicedetail, function(key, invoice_detail){
                                    html_guest_history_booking += `<tr>
                                                                        <td class="d-none">${sort_no}</td>
                                                                        <td class="d-none">${booking.kode_booking}</td>
                                                                        <td class="d-none">${moment(invoice_detail.date).format('YYYY-MM-DD')}</td>
                                                                        <td class="d-none">${invoice ? invoice.no_invoice : ''}</td>

                                                                        <td></td>
                                                                        <td>${moment(invoice_detail.date).format('DD-MM-YYYY')}</td>
                                                                        <td>No. ${invoice.nomor_kamar}</td>
                                                                        <td>${invoice_detail.qty ?? ''}</td>
                                                                        <td>${invoice_detail.description}</td>
                                                                        <td class="text-right">${invoice_detail?.harga_satuan ? ribuanWithComma(invoice_detail?.harga_satuan) : ''}</td>
                                                                        <td class="text-right">${invoice_detail.booking_deposit_id ? '(-)' : ''}${ribuanWithComma(invoice_detail?.total ?? 0)}</td>
                                                                    </tr>`
                                })

                                sort_no++
                            }

                            // Pembayaran
                            if (booking.pembayaran.length > 0) {
                                $.each(booking.pembayaran, function(key, pembayaran){
                                    if (pembayaran.tipe_pembayaran == 1) {
                                        html_guest_history_booking += `<tr>
                                                                            <td class="d-none">${sort_no}</td>
                                                                            <td class="d-none">${booking.kode_booking}</td>
                                                                            <td class="d-none">${moment(pembayaran.transaction_date).format('YYYY-MM-DD')}</td>
                                                                            <td class="d-none">${invoice ? invoice.no_invoice : ''}</td>

                                                                            <td></td>
                                                                            <td>${moment(pembayaran.transaction_date).format('DD-MM-YYYY')}</td>
                                                                            <td>No. ${booking_detail.nomor_kamar ?? ''}</td>
                                                                            <td></td>
                                                                            <td>Payment ${jenis_pembayaran[pembayaran.jenis_pembayaran_id]} ${pembayaran.bank ?? ''} A.N. ${booking.nama}</td>
                                                                            <td></td>
                                                                            <td class="text-right">(-)${ribuanWithComma(pembayaran?.nominal ?? 0)}</td>
                                                                        </tr>`
                                    }else{
                                        refunds.push(pembayaran)
                                    }
                                })

                                sort_no++
                            }

                            // Deposit
                            if (booking.deposits.length > 0) {
                                $.each(booking.deposits, function(key, deposit){
                                    html_guest_history_booking += `<tr class="${deposit.jenis_transaksi == 1 ? '' : 'text-danger' }">
                                                                        <td class="d-none">${sort_no}</td>
                                                                        <td class="d-none">${booking.kode_booking}</td>
                                                                        <td class="d-none">${moment(deposit.transaction_date).format('YYYY-MM-DD')}</td>
                                                                        <td class="d-none">${invoice ? invoice.no_invoice : ''}</td>

                                                                        <td></td>
                                                                        <td>${moment(deposit.transaction_date).format('DD-MM-YYYY')}</td>
                                                                        <td>No. ${deposit.nomor_kamar ?? ''}</td>
                                                                        <td></td>
                                                                        <td>${deposit.jenis_deposit != 5 ? 'Payment' : ''} ${jenis_deposit[deposit.jenis_deposit]} ${deposit.bank ?? ''} A.N. ${deposit.nama}</td>
                                                                        <td></td>
                                                                        <td class="text-right">${deposit.jenis_transaksi == 1 ? '(-)' : '' }${ribuanWithComma(deposit?.nominal ?? 0)}</td>
                                                                    </tr>`
                                })

                                sort_no++
                            }

                            // Shop Transaction
                            if (invoice?.old_shop_transaction.length > 0) {
                                $.each(invoice.old_shop_transaction, function(key, shop_transaction){
                                    let harga_satuan = shop_transaction.grand_total / shop_transaction.jumlah

                                    html_guest_history_booking += `<tr class="${shop_transaction.jenis_transaksi == 1 ? '' : 'text-danger' }">
                                                                        <td class="d-none">${sort_no}</td>
                                                                        <td class="d-none">${booking.kode_booking}</td>
                                                                        <td class="d-none">${moment(shop_transaction.transaction_date).format('YYYY-MM-DD')}</td>
                                                                        <td class="d-none">${invoice ? invoice.no_invoice : ''}</td>

                                                                        <td></td>
                                                                        <td>${moment(shop_transaction.transaction_date).format('DD-MM-YYYY')}</td>
                                                                        <td>No. ${invoice.nomor_kamar}</td>
                                                                        <td>${shop_transaction.jumlah}</td>
                                                                        <td>${shop_transaction.menu ? shop_transaction.menu.nama : shop_transaction.keterangan_custom}</td>
                                                                        <td class="text-right">${ribuanWithComma(harga_satuan ?? 0)}</td>
                                                                        <td class="text-right">${shop_transaction.jenis_transaksi == 0 ? '(-)' : '' }${ribuanWithComma(shop_transaction?.grand_total ?? 0)}</td>
                                                                    </tr>`
                                })

                                sort_no++
                            }

                            // Transaksi POS hanya total bill
                            if (booking.pembayaran_pos.length > 0) {
                                $.each(booking.pembayaran_pos, function(key, pembayaran_pos){
                                    html_guest_history_booking += `<tr class="${pembayaran_pos.jenis_transaksi == 1 ? '' : 'text-danger' }">
                                                                        <td class="d-none">${sort_no}</td>
                                                                        <td class="d-none">${booking.kode_booking}</td>
                                                                        <td class="d-none">${moment(pembayaran_pos.transaction_date).format('YYYY-MM-DD')}</td>
                                                                        <td class="d-none">${invoice ? invoice.no_invoice : ''}</td>

                                                                        <td></td>
                                                                        <td>${moment(pembayaran_pos.transaction_date).format('DD-MM-YYYY')}</td>
                                                                        <td>No. ${booking_detail.nomor_kamar ?? ''}</td>
                                                                        <td></td>
                                                                        <td>Outlet Bill${pembayaran_pos?.cart ? ': '+pembayaran_pos?.cart?.order_flag : ''}</td>
                                                                        <td class="text-right">${ribuanWithComma(pembayaran_pos?.nominal ?? 0)}</td>
                                                                        <td class="text-right">${pembayaran_pos.jenis_transaksi == 0 ? '(-)' : '' }${ribuanWithComma(pembayaran_pos?.nominal ?? 0)}</td>
                                                                    </tr>`
                                })

                                sort_no++
                            }

                            // refunds
                            if (refunds.length > 0) {
                                $.each(refunds, function(key, refund){
                                    html_guest_history_booking += `<tr>
                                                                        <td class="d-none">${sort_no}</td>
                                                                        <td class="d-none">${booking.kode_booking}</td>
                                                                        <td class="d-none">${moment(refund.transaction_date).format('YYYY-MM-DD')}</td>
                                                                        <td class="d-none">${invoice ? invoice.no_invoice : ''}</td>

                                                                        <td></td>
                                                                        <td>${moment(refund.transaction_date).format('DD-MM-YYYY')}</td>
                                                                        <td>No. ${booking_detail.nomor_kamar ?? ''}</td>
                                                                        <td></td>
                                                                        <td>Refund ${jenis_pembayaran[refund.jenis_pembayaran_id]} ${refund.bank ?? ''} A.N. ${booking.nama}</td>
                                                                        <td></td>
                                                                        <td class="text-right">${refund?.nominal}</td>
                                                                    </tr>`
                                })

                                sort_no++
                            }

                            no++;
                            sort_no++
                        })

                        $('.total_malam').text(total_malam)
                        $('#guest_history_booking_modal #remark_note').html(results.guest_profile.codes ? results.guest_profile.codes : '-')
                    }

                    $('#tbody_guest_history_booking').html(html_guest_history_booking)
                    DatatableBasic.init();
                    $('.datatable-guest-history-booking').DataTable().draw();
                }
            });
		});

        let ambil_table = '';
		var DatatableBasic = function() {

		    // Basic Datatable examples
		    var _componentDatatableBasic = function() {
		        if (!$().DataTable) {
		            console.warn('Warning - datatables.min.js is not loaded.');
		            return;
		        }

		        // Setting datatable defaults
		        $.extend( $.fn.dataTable.defaults, {
		            autoWidth: false,
		            columnDefs: [{
		                orderable: false,
		                width: 200,
		                targets: 1
		            }],
		            dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
		            language: {
		                search: '<span>Filter:</span> _INPUT_',
		                searchPlaceholder: 'Type to filter...',
		                lengthMenu: '<span>Show:</span> _MENU_',
		                paginate: { 'first': 'First', 'last': 'Last', 'next': $('html').attr('dir') == 'rtl' ? '&larr;' : '&rarr;', 'previous': $('html').attr('dir') == 'rtl' ? '&rarr;' : '&larr;' }
		            }
		        });

		        // Basic datatable
                // $('.datatable-guest-history-booking').DataTable();
                $('.datatable-guest-history-booking').DataTable({
                    autoWidth: false,
                    columnDefs: [{
                        orderable: false,
                        // width: 150,
                        targets: [ 0,4,5,6,7,8,9,10 ],
                        searchable: false,
                    }],
                    bInfo : false,
                    dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
                    language: {
                        search: '<span>Filter:</span> _INPUT_',
                        searchPlaceholder: 'No. Reservation/No. Bill/Date...',
                        lengthMenu: '<span>Show:</span> _MENU_',
                        paginate: { 'first': 'First', 'last': 'Last', 'next': $('html').attr('dir') == 'rtl' ? '&larr;' : '&rarr;', 'previous': $('html').attr('dir') == 'rtl' ? '&rarr;' : '&larr;' }
                    }
				});

                ambil_table = $('.datatable-basic').DataTable();

		        // Alternative pagination
		        $('.datatable-pagination').DataTable({
		            pagingType: "simple",
		            language: {
		                paginate: {'next': $('html').attr('dir') == 'rtl' ? 'Next &larr;' : 'Next &rarr;', 'previous': $('html').attr('dir') == 'rtl' ? '&rarr; Prev' : '&larr; Prev'}
		            }
		        });

		        // Datatable with saving state
		        $('.datatable-save-state').DataTable({
		            stateSave: true
		        });

		        // Scrollable datatable
		        var table = $('.datatable-scroll-y').DataTable({
		            autoWidth: true,
		            scrollY: 300
		        });

		        // Resize scrollable table when sidebar width changes
		        $('.sidebar-control').on('click', function() {
		            table.columns.adjust().draw();
		        });
		    };

		    // Select2 for length menu styling
		    var _componentSelect2 = function() {
		        if (!$().select2) {
		            console.warn('Warning - select2.min.js is not loaded.');
		            return;
		        }

		        // Initialize
		        $('.dataTables_length select').select2({
		            minimumResultsForSearch: Infinity,
		            dropdownAutoWidth: true,
		            width: 'auto'
		        });
		    };


		    //
		    // Return objects assigned to module
		    //

		    return {
		        init: function() {
		            _componentDatatableBasic();
		            _componentSelect2();
		        }
		    }
		}();


		// Initialize module
		// ------------------------------

		document.addEventListener('DOMContentLoaded', function() {
		    DatatableBasic.init();
		});
	</script>
	<script type="text/javascript">
		$( document ).ready(function() {
	        // Default style
	        @if(session('error'))
	            new PNotify({
	                title: 'Error',
	                text: '{{ session('error') }}.',
	                icon: 'icon-blocked',
	                type: 'error'
	            });
            @endif
            @if ( session('success'))
	            new PNotify({
	                title: 'Success',
	                text: '{{ session('success') }}.',
	                icon: 'icon-checkmark3',
	                type: 'success'
	            });
            @endif

            // function change to selected checkbox
            $('#table-data-guest tbody').on('change', '.checklist_guest', function () {
                console.log(this)
                let tr_parent = $(this).parent().parent()
                if (tr_parent.hasClass('selected')) {
                    tr_parent.removeClass('selected');
                } else {
                    tr_parent.addClass('selected');
                }
            });

            $('.table-responsive').on('show.bs.dropdown', function(){
                $('.table-responsive').css("overflow", "inherit");
            });
            $('.table-responsive').on('hide.bs.dropdown', function(){
                $('.table-responsive').css("overflow", "auto");
            })

        });

        // OPEN MERGE OPTIONS
        function openMerge() {
            console.log('open the merge')
            $('#open-merge').hide()
            $('#cancel-merge').show()
            $('#submit-merge').show()
            // $('.checklist_guest').show()
        }
        // CANCEL MERGE OPTIONS
        function cancelMerge() {
            console.log('cancel the merge')
            $('#cancel-merge').hide()
            $('#submit-merge').hide()
            $('#open-merge').show()
            // $('.checklist_guest').hide()
        }
        // SUBMIT MERGE OPTIONS
        function submitMerge() {
            console.log('submit the merge')

            // get selected data
            var data = ambil_table.rows('.selected').nodes();

            var newarray=[];
            for (var i=0; i < data.length ;i++){
                newarray.push(data[i]);
            }
            console.log(newarray)
            // var option_raws = $('#table-data-guest input:checked')
            if (newarray.length > 1) {

                // all selected guest data :
                let data_hidden = ``;

                // for option merge to :
                let html_option = `<table class="table datatable-basic table-hover">
                                    <tr>
                                        <th>#</th>
                                        <th colspan="3"></th>
                                    </tr>`;

                // newarray.each(function() {
                $.each(newarray, function (indexInArray, valueOfElement) {
                    // let id_guest    = $(this).attr('data-idx')
                    // let nama_guest  = $(this).attr('data-name')
                    // let phone       = $(this).attr('data-phone')
                    // let email       = $(this).attr('data-email')

                    let id_guest    = $(valueOfElement).find(".checklist_guest").data('idx')
                    let nama_guest  = $(valueOfElement).find(".checklist_guest").data('name')
                    let phone       = $(valueOfElement).find(".checklist_guest").data('phone')
                    let email       = $(valueOfElement).find(".checklist_guest").data('email')

                    data_hidden += `
                        <input type="hidden" name="guests[${id_guest}]" value="${id_guest}">
                    `

                    html_option += `
                    <tr>
                        <td><div class="datatable-column-width">
                            <input type="radio" name="merge_to" id="to_${id_guest}" value="${id_guest}">
                        </div></td>
                        <td><div class="datatable-column-width">${nama_guest ?? '-'}</div></td>
                        <td><div class="datatable-column-width"> ${phone ?? '-'} </div></td>
                        <td><div class="datatable-column-width"> ${email ?? '-'} </div></td>
                    </tr>
                    `;
                });
                // })

                html_option += `</table>`;

                $('#list_merge_hidden').html(data_hidden)
                $('#list_merge').html(html_option)

                $('#modal_merge').modal('show')

            }else{
                new PNotify({
	                title: 'Alert',
	                text: 'Please choose more than 1',
	                icon: 'icon-blocked',
	                type: 'error'
	            });
            }
        }
	</script>
@endsection