@extends('layouts.main')

@section('title', 'View Bookings')

@section('css')

    <!-- Data Table Css -->
    <link rel="stylesheet" type="text/css" href="{{ asset('bower_components/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}">

    <link rel="stylesheet" type="text/css" href="{{ asset('assets/pages/data-table/extensions/responsive/css/responsive.dataTables.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('bower_components/bootstrap-daterangepicker/daterangepicker.css') }}">



@endsection

@section('nav')
    @include('layouts.nav')
@endsection

@section('content')

    <!-- Main-body start -->
    <div class="main-body">
        <div class="page-wrapper">
            <div class="page-header">
                <div class="page-header-title">
                    <h3>All reservation in one place</h3>
                </div>
                <div class="page-header-breadcrumb">
                    <ul class="breadcrumb-title">
                        <li class="breadcrumb-item">
                            <a href="{{ url('/') }}">
                                <i class="icofont icofont-home"></i>
                            </a>
                        </li>
                        <li class="breadcrumb-item"><a href="#!">Bookings</a>
                        </li>
                        <li class="breadcrumb-item"><a href="#!">View Bookings</a>
                        </li>
                    </ul>
                </div>
            </div><!-- /.box-header -->

            <div class="page-body">

                <div class="card">
                    <div class="card-block">

                        <div class="row">
                            <div class="col-sm-12 col-xl-6 m-b-30" style="display:flex;">
                                <h4 class="sub-title" style="line-height:2.5">Search By</h4>
                                
                                <div class="col-md-5 m-b-30 date-select-1">
                                    <select id="search_by" class="form-control">
                                        @if ( isset($by) )
                                            @if( $by == 'byCheckin' )
                                                <option value="byCheckin">Check in date</option>
                                                <option value="byBookedDate">Booked date</option>
                                            @elseif( $by == 'byBookedDate' )
                                                <option value="byBookedDate">Booked date</option>
                                                <option value="byCheckin">Check in date</option>
                                            @endif
                                        @else
                                            <option value="byBookedDate">Booked date</option>
                                            <option value="byCheckin">Check in date</option>
                                        @endif

                                    </select>
                                </div>

                                <div class="col-md-5 m-b-30 date-select-1">
                                    <input type="text" name="daterange" class="form-control" value="" />
                                    <input type="hidden" id="startDate" value="@if(isset($startDate)) {{ $startDate }} @endif">
                                    <input type="hidden" id="endDate" value="@if(isset($endDate)) {{ $endDate }} @endif">
                                </div>
                            </div>
                        </div>

                        <div class="table-responsive">
                           <div class="dt-responsive table-responsive">

                                <table id="example" class="table table-striped table-bordered nowrap" width="100%">


                                <thead>
                                <tr>
                                    <th>Hidden Culumn</th>
                                    <th>Guest Name</th>
                                    <th>Booker Name</th>
                                    <th>Arrival</th>
                                    <th>Departure</th>
                                    <th>Reference</th>
                                    <th>Channel</th>
                                    <th>Room</th>
                                    <th>Booked on</th>
                                    <th>Guests</th>
                                    <th>Rooms</th>
                                    <th>Discount</th>
                                    <th>Total</th>
                                    <th>Collect from Yoho</th>
                                    <th>Pay to Yoho</th>
                                    <th>No Show</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                                                @foreach($resevations as $key => $booking)
                                {{--  @if($booking->status != 'Pending' || $booking->source === 'OTA') --}}
                                        <tr>
                                            <td>{{ $booking->booked_on->format('Ymd') }}</td>
                                            <td> {{ $booking->guest_name }} </td>
                                            <td>
                                                <a href="{{ url('customer-'.urlencode(base64_encode($booking->customer_id))) }}">{{ $booking->customer_name }}</a>

                                            </td>

                                            <td data-sort="{{ $booking->checkin->format('Y-m-d') }}">{{ $booking->checkin->format('d M Y') }}</td>
                                            <td data-sort="{{ $booking->checkout->format('Y-m-d') }}">{{ $booking->checkout->format('d M Y') }}</td>
                                            <td><a class="small"
                                                   href="{{ url('reservation-view-'.urlencode(base64_encode($booking->reference))) }}">

                                                    @if($booking->type_of_booking == 'global')
                                                        {{ $booking->unique_id }}
                                                    @else
                                                        {{ $booking->reference }}
                                                    @endif

                                                </a>
                                            </td>
                                            <td>{{ $booking->channel }}</td>
                                            <td style="max-width: 180px; overflow-x: scroll;">
                                                @foreach($booking->room_name as $room_name)
                                                    {{ $room_name }},
                                                @endforeach
                                            </td>
                                            <td data-sort="{{ $booking->booked_on->format('Y-m-d') }}">{{ $booking->booked_on->format('d M Y') }}</td>
                                            <td>{{ $booking->guests }}</td>
                                            <td>{{ $booking->rooms }}</td>
                                            <td>{{ $booking->discount }}</td>
                                            <td>{{ $booking->currency.' '.$booking->amount }}</td>
                                            <td>@if($booking->checked_in) {{ $booking->collect_from_yoho }} @endif</td>
                                            <td>@if($booking->checked_in) {{ $booking->pay_to_yoho }} @endif</td>
                                            <td>@if($booking->no_show) No Show @else - @endif</td>

                                            <td> <!-- COMPOSE MESSAGE MODAL -->
                                                <div class="modal fade" id="compose-modal{{ $booking->booking_id }}"
                                                     tabindex="-1" role="dialog" aria-hidden="true">
                                                    <div class="modal-dialog">
                                                        <div class="modal-content">
                                                            <div class="modal-header">
                                                                <button type="button" class="close" data-dismiss="modal"
                                                                        aria-hidden="true">&times;
                                                                </button>
                                                                <h4 class="modal-title"><i class="fa fa-envelope-o"></i>
                                                                    Customer information</h4>
                                                            </div>
                                                            {!! Form::open(['action' => 'BookingsController@checkedIn']) !!}
                                                            <input type="hidden" name="id"
                                                                   value="{{ $booking->booking_id }}">
                                                            <input type="hidden" name="state" value="local">
                                                            <input type="hidden" name="customer_id"
                                                                   value="{{ $booking->customer_id }}">

                                                            <div class="modal-body">
                                                                <div class="form-group">
                                                                    <div class="input-group">
                                                                        <span class="input-group-addon">Guest Name:</span>
                                                                        <input type="text" name="customer_name"
                                                                               value="{{ $booking->customer_name }}"
                                                                               disabled class="form-control" autofocus>
                                                                    </div>
                                                                </div>
                                                                <div class="form-group">
                                                                    <div class="input-group">
                                                                        <span class="input-group-addon">Email:</span>
                                                                        <input type="email" name="email"
                                                                               value="{{ $booking->customer_email }}"
                                                                               disabled class="form-control">
                                                                    </div>
                                                                </div>
                                                                <div class="form-group">
                                                                    <div class="input-group">
                                                                        <span class="input-group-addon">Mobile:</span>
                                                                        <input type="text" name="mobile"
                                                                               value="{{ $booking->customer_mobile }}"
                                                                               disabled class="form-control">
                                                                    </div>
                                                                </div>
                                                                <div class="form-group">
                                                                    <div class="input-group">
                                                                        <span class="input-group-addon">NIC/Passport:</span>
                                                                        <input type="text" name="nic"
                                                                               value="{{ $booking->customer_nic }}"
                                                                               class="form-control">
                                                                    </div>
                                                                </div>
                                                                <div class="form-group">
                                                                    <div class="input-group">
                                                                        <span class="input-group-addon">Address:</span>
                                                                        <input type="text" name="address" id="address"
                                                                               value="{{ $booking->customer_address }}"
                                                                               class="form-control">
                                                                    </div>
                                                                </div>
                                                                <div class="form-group">
                                                                    <div class="input-group">
                                                                        <span class="input-group-addon">Country:</span>
                                                                        <select name="country" id="country"
                                                                                class="form-control">
                                                                            <option value="{{ $booking->customer_country }}">{{ $booking->customer_country }}</option>
                                                                            @foreach($data->countries as $key => $country)
                                                                                <option value="{{ $country->country }}">{{ $country->country }}</option>
                                                                            @endforeach
                                                                        </select>
                                                                    </div>
                                                                </div>

                                                            </div>
                                                            <div class="modal-footer clearfix">
                                                                <button type="submit" class="btn btn-primary pull-left"><i
                                                                            class="fa fa-sign-in"></i> Update and checkin
                                                                </button>
                                                            </div>
                                                            {!! Form::close() !!}
                                                        </div><!-- /.modal-content -->
                                                    </div><!-- /.modal-dialog -->
                                                </div><!-- /.modal -->
                                                <!-- compose message btn -->

                                                @if( $booking->status == 'Pending' )
                                                    {!! Form::open(['action' => 'BookingsController@approved']) !!}
                                                    <input type="hidden" name="booking_id"
                                                           value="{{ $booking->booking_id }}">
                                                    <button class="btn btn-success btn-link" type="submit">Approve</button>
                                                    {!! Form::close() !!}


                                                    {!! Form::open(['action' => 'BookingsController@rejected']) !!}
                                                    <input type="hidden" name="booking_id"
                                                           value="{{ $booking->booking_id }}">
                                                    <button class="btn btn-danger btn-link fix-width" type="submit">Reject
                                                    </button>
                                                    {!! Form::close() !!}

                                                @elseif( $booking->status == 'Approved' || $booking->status == 'Approved by property owner' )


                                                    {{--@if($booking->checked_in && $booking->checked_out)--}}
                                                    {{--<a href="{{ url('finance-invoice-'.urlencode(base64_encode($booking->booking_id))) }}"><i class="fa fa-print"></i> Invoice</a>--}}
                                                    {{--@elseif(!$booking->checked_in && !$booking->checked_out)--}}
                                                    {{--<a class="checked-out" data-toggle="modal"--}}
                                                    {{--data-target="#compose-modal{{$booking->booking_id}}">--}}
                                                    {{--<button class="btn btn-info fix-width btn-link"--}}
                                                    {{--type="submit"> Check in--}}
                                                    {{--</button>--}}
                                                    {{--</a>--}}

                                                    {{--@elseif($booking->checked_in && !$booking->checked_out)--}}
                                                    {{--{!! Form::open(['action' => 'BookingsController@checkedOut']) !!}--}}
                                                    {{--<input type="hidden" name="id" value="{{ $booking->booking_id }}">--}}
                                                    {{--<input type="hidden" name="state" value="local">--}}
                                                    {{--<button type="submit" class="btn btn-warning fix-width">--}}
                                                    {{--Check out--}}
                                                    {{--</button>--}}
                                                    {{--{!! Form::close() !!}--}}
                                                    {{--@endif--}}

                                                @else
                                                    @if($booking->status == 'Cancelled')
                                                        @if (!$booking->no_show)
                                                            <span class="btn cancel-label" style="padding:5px; display: inline-block; color:#fc0f0f; border-radius: 3px;text-align: center!important;"> {{ $booking->status }}</span>
                                                        @endif
                                                    @else
                                                        {{ $booking->status }}
                                                    @endif

                                                @endif
                                            </td>
                                        </tr>
                                    {{-- @endif --}}
                                @endforeach
                                </tbody>
                            </table>
                                </div>
                            </div>
                 </div>
                </div>


            </div>
            <!-- Config. table end -->
        </div>
    </div>

    </div>


@endsection

@section('scripts')


        <script>
            $(document).ready(function () {
                $('#example').DataTable({
                    "columnDefs": [
                        {
                            "targets": [ 0 ],
                            "visible": false,
                            "searchable": false
                        },
                        {
                            "targets": [ 0 ],
                            "visible": false
                        }
                    ],

                    "order": [4, 'desc']
                } );
            });
        </script>

        {{--daterange select--}}
       <script type="text/javascript">
           $(function() {
               $('input[name="daterange"]').daterangepicker();
           });
       </script>


       <script src="{{ asset('assets/pages/advance-elements/moment-with-locales.min.js', \App::environment() == 'production') }}" ></script>
      
       <script src="{{ asset('assets/pages/advance-elements/bootstrap-datetimepicker.min.js', \App::environment() == 'production') }}" ></script>
       <script src="{{ asset('bower_components/bootstrap-daterangepicker/daterangepicker.js', \App::environment() == 'production') }}" ></script>

       <script src="{{ asset('assets/js/script.js', \App::environment() == 'production') }}" ></script>
       <script src="{{ asset('assets/pages/advance-elements/custom-picker.js', \App::environment() == 'production') }}" ></script>

   
   <script type="text/javascript">
       $(function() {

           var today = new Date();
           var dd = today.getDate();
           var mm = today.getMonth()+1; //January is 0!
           var yyyy = today.getFullYear();

           if(dd<10) {
               dd = '0'+dd
           }

           if(mm<10) {
               mm = '0'+mm
           }

           var start = $('#startDate').val();
           var end = $('#endDate').val();

           if ( start === '' && end === '')
           {
               var startDate = mm+"-"+dd+"-"+yyyy;
               var endDate = mm+"-"+dd+"-"+yyyy;
           }else
           {
               var startArr = start.split("-");
               var endArr = end.split("-");
               var startDate = startArr[1]+"-"+startArr[2]+"-"+startArr[0];
               var endDate = endArr[1]+"-"+endArr[2]+"-"+endArr[0];
           }

           $('input[name="daterange"]').daterangepicker({
               "locale": {
                   "format": "MM-DD-YYYY",
                   "separator": " - ",
                   "applyLabel": "Apply",
                   "cancelLabel": "Cancel",
                   "fromLabel": "From",
                   "toLabel": "To",
                   "customRangeLabel": "Custom",
                   "weekLabel": "W",
                   "daysOfWeek": [
                       "Su",
                       "Mo",
                       "Tu",
                       "We",
                       "Th",
                       "Fr",
                       "Sa"
                   ],
                   "monthNames": [
                       "January",
                       "February",
                       "March",
                       "April",
                       "May",
                       "June",
                       "July",
                       "August",
                       "September",
                       "October",
                       "November",
                       "December"
                   ],
                   "firstDay": 1
               },
               "startDate": startDate,
               "endDate": endDate
           }, function(start, end, label) {
               var searchBy = $('#search_by').val();
               window.location.href = base_url+'bookings-view?startDate='+start.format('YYYY-MM-DD')+'&endDate='+end.format('YYYY-MM-DD')+'&by='+searchBy;
           });
       });
   </script>
@endsection