{{-- @extends('frontdesk.layouts.master_fullwidth') --}}
@extends('admin.layout.master')

@section('custom_style')

    <style>
        select{
            box-shadow: inset -1px 4px 10px 0px rgb(212 212 212);
            height: 28px !important;
            font-size: 14px !important;
        }
    </style>

@endsection
@section('content')

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card sina-card">
                <div class="card-header">
                    <h5>{{__('obs.rate_change_list')}}</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-2 pe-1">
                            <div class="form-group">
                                <label for="">{{__('obs.agent')}}</label>
                                <select name="" id="agent_id" class="form-control fd_agent_search">
                                </select>
                            </div>
                        </div>
                        <div class="col-1 px-1">
                            <div class="form-group">
                                <label for="">{{__('obs.type')}}</label>
                                <select name="" id="type" class="form-control select_2">
                                    <option value="">All</option>
                                    <option value="1">Booking</option>
                                    <option value="2">Checkin</option>
                                    <option value="3">After Checkin</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-1 px-1">
                            <div class="form-group">
                                <label for="">{{__('obs.status')}}</label>
                                <select name="" id="status" class="form-control select_2">
                                    <option value="">All</option>
                                    <option value="1" selected>Unapproved</option>
                                    <option value="2">Approved</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-2 px-1">
                            <div class="form-group">
                                <label for="">{{__('obs.resv_code')}}</label>
                                <select name="" class="form-control fd_checkin_resv_code_search" id="booking_id"></select>
                            </div>
                        </div>
                        <div class="col-2 px-1">
                            <div class="form-group">
                                <label for="" title="From Date">{{__('obs.start_date')}}</label>
                                <input type="text" id="start_date" class="form-control date_picker" value="{{ date('01-m-Y') }}">
                            </div>
                        </div>
                        <div class="col-2 px-1">
                            <div class="form-group">
                                <label for="" title="From Date">{{__('obs.end_date')}}</label>
                                <input type="text" id="end_date" class="form-control date_picker" value="{{ date('d-m-Y') }}">
                            </div>
                        </div>
                        <div class="col-1 px-1">
                            <label for="">&nbsp;</label><br>
                            <button type="submit" class="btn btn-info btn-sm w-100" onclick="getRateChangeList()">{{__('obs.filter')}}</button>
                        </div>
                        <div class="col-1 ps-1">
                            <label for="">&nbsp;</label><br>
                            <button type="submit" class="btn btn-danger btn-sm w-100" onclick="resetForm()">{{__('obs.reset')}}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12">
            <div id="rate_change_list" style="height: calc(100vh - 250px); overflow-y: scroll"></div>
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" data-backdrop="static" data-keyboard="false" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">{{__('obs.')}}Changed Rate</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <table class="table table-bordered table-stripe">
                    <thead>
                        <tr>
                            <th>{{__('obs.sl')}}</th>
                            <th>{{__('obs.room')}}</th>
                            <th>{{__('obs.room Type')}}</th>
                            <th>{{__('obs.qty')}}</th>
                            <th>{{__('obs.start_date')}}</th>
                            <th>{{__('obs.end_date')}}</th>
                            <th>{{__('obs.total_night')}}</th>
                            <th>{{__('obs.original_rent')}}</th>
                            <th>{{__('obs.requested_rent')}}</th>
                        </tr>
                    </thead>
                    <tbody class="room_details">

                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">{{__('obs.close')}}</button>
                <button type="submit" data-id="" class="btn btn-success btn-sm rate_change_approve_modal rate_change_approval">Approve</button>
            </div>
        </div>
    </div>
</div>

@include('frontdesk.common.common')
@endsection

@section('script')
    <script>
        $(document).ready(function(){
            // $('.rate_change_approval_info').click(function(){
            //     var id = $(this).data('id');
            //     var method="GET";
            //     var url="/frontdesk/reservation/get_booking_details_info";
            //     var data={id:id};
            //     ajaxCustom(function(data){
            //         console.log(data);
            //         $('#exampleModal').modal('show');
            //         var list = '';
            //         $.each(data, function(key, val){
            //             list += '<tr>'+
            //                 '<td>'+(key+1) +'</td>'+
            //                 '<td>'+(val.room != null ? val.room.room_number : '-')+'</td>'+
            //                 '<td>'+(val.get_room_type != null ? val.get_room_type.name : '-')+'</td>'+
            //                 '<td>'+val.qty+'</td>'+
            //                 '<td>'+val.start_date+'</td>'+
            //                 '<td>'+val.end_date+'</td>'+
            //                 '<td>'+val.total_night+'</td>'+
            //                 '<td>'+val.o_rent+'</td>'+
            //                 '<td>'+val.rent+'</td>'+
            //             '</tr>'
            //         });
            //         $('.room_details').html(list);
            //         $('.rate_change_approve_modal').attr('data-id',id);
            //     },method,url,data);
            // });
            // $('.rate_change_approval').click(function(){
            //     if(confirm('Are You Sure')){
            //         var id = $(this).data('id');
            //         var method="POST";
            //         var url="/frontdesk/reservation/reservation_approve";
            //         var data={id:id};
            //         ajaxCustom(function(data){
            //             getLoadingStatus();
            //             var alertData={icon: 'success',title:'Approved',position:'center'};
            //             sweetAlertCustom(alertData);
            //             window.location.reload();
            //         },method,url,data);
            //     }else{
            //         return false;
            //     }
            // });
            $(document).on('change', '#check_all', function(){
                if($(this).is(':checked')){
                    $('.check_individual').prop('checked', true);
                } else {
                    $('.check_individual').prop('checked', false);
                }
            })
        });
        function getRateChangeList(){
            let agent_id = $("#agent_id").val();
            let type = $("#type").val();
            let status = $("#status").val();
            let booking_id = $("#booking_id").val();
            let start_date = $("#start_date").val();
            let end_date = $("#end_date").val();
            let payload = {
                agent_id, type, status, booking_id, start_date, end_date
            };
            getLoadingStatusNew();
            ajaxCustom(function(res){
                $('#rate_change_list').html(res.html);
                closeSweetAlert();
            }, 'GET',"{{ route('frontdesk.booking.reservation.rate_change.list') }}", payload);
        }
        function resetForm(){
            $('#agent_id').val(null).trigger('change');
            $('#type').val(null).trigger('change');
            $('#status').val(2).trigger('change');
            $('#booking_id').val(null).trigger('change');
            // $('#start_date').val('');
            // $('#end_date').val('');
        }
        function approve(){
            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, approve it!',
                input: 'text',
                inputAttributes: {
                    autocapitalize: 'off',
                    placeholder: 'Write Note (Optional)',
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    getLoadingStatusNew();
                    let ids = [];
                    $('.check_individual:checked').each(function(){
                        ids.push($(this).val());
                    });
                    let payload = {
                        ids,
                        note: result.value
                    };
                    ajaxCustom(function(res){
                        Swal.fire('Approved', 'Successfully Approved', 'success');
                        getRateChangeList();
                    }, 'POST', "{{ route('frontdesk.rate_change.approve') }}", payload);
                }
            });

        }
    </script>
@endsection