@extends('dashboard.layout.default')

@section('page_title',$page_title)

@section('content')
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-left">
            <li class="breadcrumb-item"><a href="{{Route('dashboard')}}">{{ __("pages.home") }}</a></li>
            <li class="breadcrumb-item"><a href="{{Route('bookings.index')}}">{{__('pages.bookings')}}</a></li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">


    @if(session()->has('success'))
        <div class="alert alert-success">
            {{ session()->get('success') }}
        </div>
    @endif
    @if($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif


    <div class="card card-info no-print">
        <div class="card-header">
            <h3 class="card-title">{{__('pages.booking_status')}}</h3>
        </div>
        <!-- /.card-header -->
        <div class="card-body">
            <form action="{{Route('bookings.update_status',$booking->id)}}" method="post">
                @csrf
                @method('PUT')
                <div class="row">
                    <div class="form-group col-12">
                        <label for="status">{{__('pages.status')}}</label>
                        <select name="status" id="status" class="form-control" required>
                            <option value="">{{__('pages.select_status')}}</option>
                            <option value="new" >{{__('pages.new')}}</option>
                            <option value="pending" >{{__('pages.pending')}}</option>
                            <option value="confirmed" >{{__('pages.confirmed')}}</option>
                            <option value="cancelled" >{{__('pages.cancelled')}}</option>
                        </select>
                    </div>
                    <div class="form-group col-12">
                        <label for="comment">{{__('pages.comment')}}</label>
                        <textarea name="comment" id="comment" class="form-control" required></textarea>
                    </div>
                    <div class="form-group col-12">
                        <button type="submit" class="btn btn-primary">{{__('pages.save')}}</button>
                    </div>
                </div>
            </form>
        </div>
    </div>


    <div class="card card-info">
        <div class="card-header">
        <h3 class="card-title">{{$page_title}}</h3>
        </div>
        <!-- /.card-header -->
        <!-- form start -->
        
        <div class="card-body">
          <div class="row">
            <div class="col-12 mb-4">
              <h4  class="text-bold">{{__('pages.customer_info')}}</h4>
            </div>
              <div class="form-group col-md-2 col-2-print">
                  <label for="title">{{__('pages.title')}}</label>
                  <input type="text" name="title" class="form-control" id="title" value="{{ $booking->title }}" readonly>
              </div>

              <div class="form-group col-md-6 col-6-print">
                  <label for="name">{{__('names.name')}}</label>
                  <input type="text" name="name" class="form-control" id="name" value="{{ $booking->name }}" readonly>
              </div>

              
              <div class="form-group col-md-4  col-4-print">
                  <label for="gender">{{__('pages.gender')}}</label>
                  <input type="gender" name="gender" class="form-control" id="gender" value="{{ $booking->gender == 1 ? __('names.male') : __('names.female') }}" readonly>
              </div>

              
              <div class="form-group col-md-6 col-6-print">
                  <label for="email">{{__('names.email')}}</label>
                  <input type="email" name="email" class="form-control" id="email" value="{{ $booking->email }}" readonly>
              </div>

              <div class="form-group col-md-6 col-6-print">
                  <label for="phone">{{__('names.phone')}}</label>
                  <input type="phone" name="phone" class="form-control" id="phone" value="{{ $booking->phone }}" readonly>
              </div>


              <hr class="col-12">

              <div class="col-12 mb-4">
                <h4  class="text-bold">{{__('pages.booking_info')}}</h4>
              </div>


              <div class="form-group col-md-6  col-6-print">
                  <label for="start_date">{{__('pages.start_date')}}</label>
                  <input type="start_date" name="start_date" class="form-control" id="start_date" value="{{ $booking->start_date }}" readonly>
              </div>

                <div class="form-group col-md-6 col-6-print">
                    <label for="status">{{__('pages.status')}}</label>
                    @if($booking->logs->count() > 0)
                        <input type="status" name="status" class="form-control" id="status" value="{{ $booking->logs->last()->status }}" readonly>
                    @else
                        <input type="status" name="status" class="form-control" id="status" value="{{ __('pages.new') }}" readonly>
                    @endif
                </div>


              <div class="form-group col-md-4 col-4-print">
                  <label for="adults">{{__('pages.adults')}}</label>
                  <input type="adults" name="adults" class="form-control" id="adults" value="{{ $booking->adults }}" readonly>
              </div>

              <div class="form-group col-md-4  col-4-print">
                  <label for="children">{{__('pages.children')}}</label>
                  <input type="children" name="children" class="form-control" id="children" value="{{ $booking->children }}" readonly>
              </div>

              <div class="form-group col-md-4  col-4-print">
                  <label for="infants">{{__('pages.infants')}}</label>
                  <input type="infants" name="infants" class="form-control" id="infants" value="{{ $booking->infants }}" readonly>
              </div>

              <div class="form-group col-md-12 col-12-print">
                  <label for="comment">{{__('pages.comment')}}</label>
                  <textarea name="comment" class="form-control" id="comment" readonly>{{ $booking->comment }}</textarea>
              </div>


              <div class="col-12 text-center d-print-none">
                  <a href="javascript:void(0);" onclick="window.print();" class="btn btn-primary">{{__('pages.print')}} <i class="fa fa-print"></i></a>
              </div>

          </div>
        </div>
        <!-- /.card-body -->

    </div>
    <!-- /.card -->

    @if($booking->logs->count() > 0)
        <div class="card card-info no-print">
            <div class="card-header">
                <h3 class="card-title">{{__('pages.booking_logs')}}</h3>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
                <table id="log-table" class="table table-bordered">
                    <thead>
                        <tr>
                            <th>{{__('pages.date')}}</th>
                            <th>{{__('pages.status')}}</th>
                            <th>{{__('pages.changed')}} {{__('pages.by')}}</th>
                            <th>{{__('pages.comment')}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($booking->logs->sortByDesc('created_at') as $log)
                            <tr class="{{ $loop->first ? 'bg-green' : '' }}">
                                <td>{{ $log->created_at}}</td>
                                <td>{{ $log->status }}</td>
                                <td>{{ $log->user->name }}</td>
                                <td>
                                    <button type="button" class="btn btn-sm show-comment btn-warning" data-toggle="modal" data-target="#commentModal">{{__('Show More')}}</button>
                                    <div class="full-comment d-none">{{ $log->comment }}</div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    @endif

    <!-- Modal -->
    <div class="modal fade" id="commentModal" tabindex="-1" aria-labelledby="commentModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="commentModalLabel">{{__('Full Comment')}}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p id="full-comment-text"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">{{__('Close')}}</button>
                </div>
            </div>
        </div>
    </div>




    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

@endsection

@push('js_scripts')
<script>
    $(document).ready(function() {
        $('#log-table').DataTable();

        $('.show-comment').on('click', function() {
            var fullComment = $(this).siblings('.full-comment').text();
            $('#full-comment-text').text(fullComment);
        });
    });
</script>
@endpush