@extends('frontdesk.layouts.master_fullwidth')

@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="col-lg-12">
    <div class="row">
        @include("frontdesk.share.fd_booking_rightside_quick_access")
    </div>
    <div class="row" style="margin-top: 10px;">
        {{-- <div class="col-1" ></div> --}}
        <div class="col-12" style="margin-top: 10px">
            {{-- <div class="card">
                <div class="card-header">
                    <h5>Reservation Filter</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-12">
                            <div class="row">
                                <div class="col-1">
                                    <div class="form-group">
                                        <label for="">Resv Type</label>
                                        <select name="" id="" class="form-control">
                                            <option value="">Room</option>
                                            <option value="">Bed</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-3">
                                    <div class="form-group">
                                        <label for="">Agent</label>
                                        <select name="" id="" class="form-control fd_agent_search">

                                        </select>
                                    </div>
                                </div>

                                <div class="col-1">
                                    <div class="form-group">
                                        <label for="">Resv.Code</label>
                                        <input type="text" class="form-control">
                                    </div>
                                </div>

                                <div class="col-3">
                                    <div class="form-group">
                                        <label for="">Start Date</label>
                                        <input type="text" class="form-control fd_bs_datepicker" data-type="datepicker">
                                    </div>
                                </div>

                                <div class="col-3">
                                    <div class="form-group">
                                        <label for="">End</label>
                                        <input type="text" class="form-control fd_bs_datepicker" data-type="datepicker">
                                    </div>
                                </div>
                                <div class="col-1">
                                    <label for="">&nbsp;</label><br>
                                    <button type="submit" class="btn btn-info btn-sm">Filter</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div> --}}
            <div class="card" style="margin: 0;padding: 0">
                <div class="card-header" id="headingOne">
                    <h5 class="mb-0">
                        Reservation Rate Change List
                    </h5>
                </div>
                <div class="card-body">
                    <table class="table table-bordered table-striped table-hover">
                        <thead>
                            <tr class="bg-dark">
                                <th class="text-center text-light">Sl</th>
                                <th class="text-center text-light">Resv.Code</th>
                                <th class="text-center text-light">Agent</th>
                                <th class="text-center text-light">Room/Bed</th>
                                <th class="text-center text-light">Date</th>
                                <th class="text-center text-light">Expected Check in Date</th>
                                <th class="text-center text-light">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($reservations as $key=>$rsb)
                                <tr>
                                    <td class="text-center">{{$key+1}}</td>
                                    <td class="text-center">{{$rsb->resv_code}}</td>
                                    {{-- <td>{{$rsb->allotment_id}}</td> --}}
                                    <td class="text-center">{{$rsb->get_agent_info->name_eng}}</td>
                                    <td class="text-center">@if($rsb->type == 1) Room @else Bed @endif</td>
                                    <td class="text-center">{{$rsb->date}}</td>
                                    <td class="text-center">
                                        @foreach ($rsb->get_booking_details as $rsb_info)
                                            {{$rsb_info->start_date}} <br>
                                        @endforeach
                                    </td>
                                    {{-- <td>{{$rsb->get_booking_details->id}}</td> --}}
                                    <td class="text-center">
                                        <a href="" class="btn btn-info btn-sm">Print</a>
                                        <button data-id="{{$rsb->id}}" class="btn btn-success btn-sm rate_change_approval">Approve</button>
                                        <button data-id="{{$rsb->id}}" class="btn btn-info btn-sm rate_change_approval_info">See Changed Rate</button>
                                    </td>
                                </tr>
                            @empty

                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        {{-- <div class="col-1" style="margin: 0;padding: 0"></div> --}}
    </div>
    <form id="form_booking" method="post"
          action="{{ url('/frontdesk/booking-room-bed') }}"
          name="form" enctype="multipart/form-data">
        @csrf
        <div class="row">
            {{-- <div class="col-1" style="margin: 0;padding: 0">
                @include("frontdesk.share.fd_booking_leftside_quick_access")
            </div> --}}
            <div class="col-10">

            </div>
        </div>
    </form>
</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">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>Sl</th>
                            <th>Room</th>
                            <th>Room Type</th>
                            <th>Qty</th>
                            <th>Start Date</th>
                            <th>End Date</th>
                            <th>Total Night</th>
                            <th>Original Rent</th>
                            <th>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">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>

@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'};
                        sweetAlert(alertData);
                        window.location.reload();
                    },method,url,data);
                }else{
                    return false;
                }
            });
        });
    </script>

@endsection