@extends('layouts.main')

@section('title')
    {{ __('Hospitality Bookings') }}
@endsection

@section('page-main-title')
    {{ __('Hospitality Bookings') }} 
@endsection


@section('content')
    <section class="section">
        <div class="card">
            <div class="card-body">
                <div class="row justify-content-center" id="toolbar">
                    <div class="col-md-12">
                        <select id="filter_property" class="form-select" onchange="$('#table_list').bootstrapTable('refresh');">
                            <option value="">{{ __('All Properties') }}</option>
                            @foreach (App\Models\Property::where(['category_type' => 'hospitality', 'parent_id' => 0])->get()  as $property)
                                <option value="{{ $property->id }}">{{ $property->title }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <table class="table-light" aria-describedby="mydesc" class='table-striped' id="table_list"
                            data-toggle="table" data-url="{{ route('hospitality.booking.list') }}" data-click-to-select="true"
                            data-side-pagination="server" data-pagination="true"
                            data-page-list="[5, 10, 20, 50, 100, 200]" data-search="true" data-toolbar="#toolbar"
                            data-show-columns="true" data-show-refresh="true" data-trim-on-search="false"
                            data-responsive="true" data-sort-name="id" data-sort-order="desc"
                            data-pagination-successively-size="3" data-query-params="queryParams">
                            <thead>
                                <tr>
                                    <th scope="col" data-field="property_title" data-align="center">
                                        {{ __('Property') }}</th>
                                        <th scope="col" data-field="title" data-align="center">
                                        {{ __('Room') }}</th>
                                    <th scope="col" data-field="name" data-align="center">
                                        {{ __('Full Name') }}</th>
                                    <th scope="col" data-field="email" data-align="center">
                                        {{ __('Email') }}</th>
                                    <th scope="col" data-field="phone" data-align="center">
                                        {{ __('Phone') }}</th>
                                    <th scope="col" data-field="book_date" data-align="center" data-sortable="true">
                                        {{ __('Booking Date') }}</th>
                                    <th scope="col" data-field="check_in_date" data-align="center" data-sortable="true">
                                        {{ __('Checkin Date') }}</th>
                                    <th scope="col" data-field="check_out_date" data-align="center" data-sortable="true">
                                        {{ __('Checkout Date') }}</th>
                                    <th scope="col" data-field="booking_price" data-align="center" data-sortable="true">
                                        {{ __('Booking Price') }}</th>
                                    <th scope="col" data-field="is_bid" data-align="center" data-sortable="true">
                                        {{ __('Bid') }}</th>
                                    <th scope="col" data-field="bid_amount" data-align="center" data-sortable="true">
                                        {{ __('Bid Amount') }}</th>
                                    <th scope="col" data-field="book_status" data-sortable="false" data-align="center" data-width="5%" data-formatter="requestBookStatusFormatter"> {{ __('Book Status') }}</th>
                                    <th scope="col" data-field="operate" data-align="center" data-sortable="false">
                                        {{ __('Action') }}</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- VIEW MODAL -->
        <div class="modal fade" id="viewModal" tabindex="-1" role="dialog" aria-labelledby="viewModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="viewModalLabel">{{ __('Hospitality Booking Details') }}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6"><p><strong>{{ __('Property:') }}</strong> <span id="view-property_title"></span></p></div>
                            <div class="col-md-6"><p><strong>{{ __('Room:') }}</strong> <span id="view-room_title"></span></p></div>
                        </div>
                        <div class="row">
                            <div class="col-md-6"><p><strong>{{ __('Full Name:') }}</strong> <span id="view-full_name"></span></p></div>
                            <div class="col-md-6"><p><strong>{{ __('Email:') }}</strong> <span id="view-email"></span></p></div>
                        </div>
                        <div class="row">
                            <div class="col-md-6"><p><strong>{{ __('Phone:') }}</strong> <span id="view-phone"></span></p></div>
                            <div class="col-md-6"><p><strong>{{ __('Booking Date:') }}</strong> <span id="view-book_date"></span></p></div>
                        </div>
                        <div class="row">
                            <div class="col-md-6"><p><strong>{{ __('Check-in Date:') }}</strong> <span id="view-check_in_date"></span></p></div>
                            <div class="col-md-6"><p><strong>{{ __('Check-out Date:') }}</strong> <span id="view-check_out_date"></span></p></div>
                        </div>
                        <div class="row">
                            <div class="col-md-6"><p><strong>{{ __('Bid:') }}</strong> <span id="view-is_bid"></span></p></div>
                            <div class="col-md-6"><p><strong>{{ __('Bid Amount:') }}</strong> <span id="view-bid_amount"></span></p></div>
                        </div>
                        <div class="row">
                            <div class="col-md-6"><p><strong>{{ __('Booking Price:') }}</strong> <span id="view-booking_price"></span></p></div>

                        </div>
                        <div class="row">
                            <div class="col-md-6"><p><strong>{{ __('Book Status:') }}</strong> <span id="view-book_status"></span></p></div>
                                </div>
                        <div class="row" id="row-reject-reason" style="display:none;">
                            <div class="col-md-6"><p><strong>{{ __('Reject Reason:') }}</strong> <span id="view-reject_reason"></span></p></div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('Close') }}</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('script')
    <script>
        function queryParams(p) {
            return {
                limit: p.limit,
                sort: p.sort,
                order: p.order,
                offset: p.offset,
                search: p.search,
                property_id: $('#filter_property').val()
            };
        }

        // View Modal
        $('#viewModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget)
            var id = button.data('id')
            var modal = $(this)

            $.ajax({
                url: '{{ url('get-hospitality-booking-list') }}' + '?id=' + id,
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    var visit = data.rows[0];
                    modal.find('#view-property_title').text(visit.property_title ?? '');
                    modal.find('#view-room_title').text(visit.title ?? '');
                    modal.find('#view-full_name').text(visit.name ?? visit.full_name ?? '');
                    modal.find('#view-email').text(visit.email ?? '');
                    modal.find('#view-phone').text(visit.phone ?? '');
                    modal.find('#view-book_date').text(visit.book_date ?? '');
                    modal.find('#view-check_in_date').text(visit.check_in_date ?? '');
                    modal.find('#view-check_out_date').text(visit.check_out_date ?? '');
                    modal.find('#view-is_bid').text(visit.is_bid ?? '');
                    modal.find('#view-bid_amount').text(visit.bid_amount ?? '-');
                    modal.find('#view-booking_price').text(visit.booking_price ?? '');
                    modal.find('#view-book_status').text(visit.book_status.toUpperCase() ?? '');
                    modal.find('#view-purpose_of_visit').text(visit.purpose_of_visit ?? '-');
                    modal.find('#view-book_comment').text(visit.book_comment ?? '-');
                    // Status

                    // Reject Reason
                    if (visit.book_status == 'cancelled') {
                        $('#row-reject-reason').show();
                        modal.find('#view-reject_reason').text(visit.book_comment ? visit.book_comment : '-');
                    } else {
                        $('#row-reject-reason').hide();
                        modal.find('#view-reject_reason').text('');
                    }
                }
            });
        })

    </script>
@endsection