@extends('index-left-sidebar')

@section('content')
<div id="krik-single-event-accommodations">
  <div class="panel krik-panel">
    <div class="panel-heading">
      <h3 class="krik-single-event-reports-title">{{ $singleEvent->name }}</h3>
      <h4 class="krik-single-event-reports-info">
        @php
          $event_start = new DateTime($singleEvent->start_ts);
          $event_end = new DateTime($singleEvent->end_ts);
          $event_days_diff = $event_start->diff($event_end)->d;
        @endphp
        @if($singleEvent->type_by_venue == 'physical')
          @if ($event_days_diff > 0)
            {{ date("d.m.Y. H:i", strtotime($singleEvent->start_ts)) . ' - ' . date("d.m.Y. H:i", strtotime($singleEvent->end_ts)) . ', ' . $singleEvent->venue_name }}
          @else
           {{ date("d.m.Y. H:i", strtotime($singleEvent->start_ts)) . ', ' . $singleEvent->venue_name }}
          @endif
        @else
          @if ($event_days_diff > 0)
            {{ date("d.m.Y. H:i", strtotime($singleEvent->start_ts)) . ' - ' . date("d.m.Y. H:i", strtotime($singleEvent->end_ts)) }}
          @else
            {{ date("d.m.Y. H:i", strtotime($singleEvent->start_ts)) }}
          @endif
        @endif
      </h4>
    </div>
  </div>

  <div class="col-md-12">
    <div class="panel panel-teal">
      <div class="panel-heading">
        <div class="pull-left">
          <h3 class="panel-title">All Accommodation Reservations</h3>
        </div>
        <div class="clearfix"></div>
      </div>
      <div class="table-responsive">
        <table class="table table-striped krik-report-tables" id="krik-report-accommodations-table" cellspacing="0" width="100%">
          <thead>
            <tr>
              <th style="max-width: 30px !important;"><div class="ckbox ckbox-success ckbox-registration"><input name="choosen-all" id="choosen-all" type="checkbox"><label for="choosen-all" class="th-label label-registration"></label></div></th>
              <th style="max-width: 10px !important;">#</th>
              <th>Lead name</th>
              <th>Accommodation</th>
              <th>Room Type</th>
              <th>Arival</th>
              <th>Departure</th>
              <th>Registered</th>
              <th style="min-width: 130px !important;">Status</th>
              <th style="max-width: 50px !important;" class="text-center">Actions</th>
            </tr>
          </thead>
        </table>
      </div>
      <script>
        var table = $('#krik-report-accommodations-table').DataTable({
          processing: true,
          serverSide: false,
          ajax: {
            url: '{!! route('report-accommodations.data') !!}',
            data: {
              event_code: '{{ $event_code }}'
            },
            type: 'POST',
            headers: {
              'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
          },
          scrollCollapse: true,
          searching: true,
          info: false,
          bSort: false,
          autoWidth: true,
          columns: [
            {
              searchable: false,
              orderable: false,
              className: 'dt-body-center',
              render: function (data, type, row) {
                  return '<div class="ckbox ckbox-success"><input name="choosen-leads[]" id="choosen-' + row.id + '" type="checkbox" value="' + row.id + '"><label for="choosen-' + row.id + '"></label></div>';
              }
            },
            {
              orderable: false,
              searchable: false,
              className: 'no-reorder',
              render: function() { return ''; }
            },
            { data: 'name', name: 'name' },
            { data: 'accommodation', name: 'accommodations.name' },
            { data: 'room_type', name: 'room_type' },
            { data: 'accomodation_arrival_date', name: 'registrations.accomodation_arrival_date' },
            { data: 'accomodation_departure_date', name: 'registrations.accomodation_departure_date' },
            { data: 'registered_ts', name: 'registrations.registered_ts' },
            {
              searchable: false,
              className: 'no-selecting',
              render: function(data, type, full, meta) {
                var registration_status = full.status_accomodation;
                var registration_id = full.id;
                var registration_status_html = null;

                if(registration_status == 'Confirmed') {
                  registration_status_html = '<span class="krik-registration-confirmed">Confirmed</span>';
                } else if(registration_status == 'Waiting') {
                  registration_status_html = '<span class="krik-registration-waiting">Waiting</span>';
                } else if(registration_status == 'Canceled') {
                  registration_status_html = '<span class="krik-registration-canceled">Canceled</span>';
                }

                if(registration_status == 'Waiting') {
                  registration_status_html = registration_status_html + '<i class="fa fa-times-circle krik-registration-accomodation-cancel" data-registration-id="'+ registration_id + '" data-toggle="modal" data-target=".krik-registration-accomodation-status-cancel" data-info="tooltip" data-placement="top" title="Cancel accommodation registration"></i><i class="fa fa-check-circle krik-registration-accomodation-confirm" data-registration-id="'+ registration_id + '" data-toggle="modal" data-target=".krik-registration-accomodation-status-confirm" data-info="tooltip" data-placement="top" title="Confirm accommodation registration"></i>';
                } else if(registration_status == 'Confirmed') {
                  registration_status_html = registration_status_html + '<i class="fa fa-times-circle krik-registration-accomodation-cancel" data-registration-id="'+ registration_id + '" data-toggle="modal" data-target=".krik-registration-accomodation-status-cancel" data-info="tooltip" data-placement="top" title="Cancel accommodation registration"></i>';
                }

                return registration_status_html;
              }
            },
            {
              orderable: false,
              searchable: false,
              className: 'text-center no-selecting',
              render: function(data, type, full, meta) {
                var registration_id = full.id;
                @if($pro_forma_invoice == 1)
                  return '<form method="POST" action="/events/{{ $event_code }}/report-accommodations" accept-charset="UTF-8" class="form-horizontal krik-generate-invoice"><input name="_method" type="hidden" value="PUT">{!! csrf_field() !!}<input name="type" type="hidden" value="accomodation"><input name="id" type="hidden" value="'+ registration_id + '"><i class="fa fa-info-circle krik-invoices-submit" data-info="tooltip" data-placement="top" title="Download accomodation invoice"></i></form><i class="fa fa-trash-o krik-delete-registration-accomodation" data-registration-id="'+ registration_id + '" data-toggle="modal" data-target=".krik-registration-delete-accomodation" data-info="tooltip" data-placement="top" title="Delete accommodation registration"></i>';
                @else
                  return '<i class="fa fa-trash-o krik-delete-registration-accomodation" data-registration-id="'+ registration_id + '" data-toggle="modal" data-target=".krik-registration-delete-accomodation" data-info="tooltip" data-placement="top" title="Delete accommodation registration"></i>';
                @endif
              }
            }
          ],
          language: {
            search: "_INPUT_",
            searchPlaceholder: "Search",
            lengthMenu: "_MENU_",
            processing: "Loading data, please wait...",
            zeroRecords: "No data to display",
            buttons: {
              colvis: 'Columns'
            }
          },
          paging:  true,
          pagingType: 'simple_numbers',
          ordering: true,
          order: [[ 6, "desc" ]],
          orderClasses: false,
          stateSave: true,
          // deferRender: true,
          colReorder: true,
          pageLength: 10,
          lengthMenu: [[ 10, 20, 50, 100, -1 ], [ 10, 20, 50, 100, 'All' ]],
          select: {
            style: 'multi',
            selector: 'td:not(.no-selecting)'
          },
          dom: 'Bfrtilp',
          bInfo: true,
          buttons: [
            {
              extend: 'collection',
              text: 'Export',
              buttons: [
                {
                  extend: 'copyHtml5',
                  text: 'Copy (all entries from current page)',
                  exportOptions: {
                    columns: [1,2,3,4,5,6]
                  }
                },
                {
                  extend: 'copyHtml5',
                  text: 'Copy (selected entries from current page)',
                  exportOptions: {
                    modifier: {
                      selected: true
                    },
                    columns: [1,2,3,4,5,6]
                  }
                },
                {
                  extend: 'print',
                  text: 'Print (all entries from current page)',
                  exportOptions: {
                    columns: [1,2,3,4,5,6]
                  }
                },
                {
                  extend: 'print',
                  text: 'Print (selected entries from current page)',
                  exportOptions: {
                    modifier: {
                      selected: true
                    },
                    columns: [1,2,3,4,5,6]
                  }
                },
                {
                  extend: 'excelHtml5',
                  text: 'Excel (all entries from current page)',
                  exportOptions: {
                    columns: [1,2,3,4,5,6]
                  }
                },
                {
                  extend: 'excelHtml5',
                  text: 'Excel (selected entries from current page)',
                  exportOptions: {
                    modifier: {
                      selected: true
                    },
                    columns: [1,2,3,4,5,6]
                  }
                },
                {
                  extend: 'csvHtml5',
                  text: 'CSV (all entries from current page)',
                  exportOptions: {
                    columns: [1,2,3,4,5,6]
                  }
                },
                {
                  extend: 'csvHtml5',
                  text: 'CSV (selected entries from current page)',
                  exportOptions: {
                    modifier: {
                      selected: true
                    },
                    columns: [1,2,3,4,5,6]
                  }
                }
              ]
            },
            'colvis'
          ],
          initComplete: function(settings, json) {
            $('[data-info="tooltip"]').tooltip();
          },
          createdRow: function () {
            table.column(1, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {
                cell.innerHTML = i+1;
            });
          }
        });

        table.on('order.dt search.dt column-reorder', function () {
            table.column(1, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {
                cell.innerHTML = i+1;
            });
        }).draw();

        $('select[name="krik-report-accommodations-table_length"]').on('change', function (){
          $('#choosen-all').prop('checked', false);
        });

        $('#krik-report-accommodations-table').on( 'page.dt', function () {
          $('#choosen-all').prop('checked', false);
        });
      </script>
    </div>
    <div class="accommodation-select">
      {{ Form::open(array('url' => getenv('APP_URL') . '/events/' . $event_code . '/report-accommodations', 'name' => 'accommodations-change-form', 'id' => 'accommodations-change-form', 'class' => 'form-horizontal status-change-form', 'method'=>'patch', 'files' => true)) }}
        <input type="hidden" name="form_type" value="change_registration">
        <input type="hidden" name="registration_select">
        <select name="selected_option">
          <option value="" disabled selected>Bulk</option>
          <option value="confirmed">Confirmed</option>
          <option value="canceled">Canceled</option>
          <option value="delete">Delete</option>
        </select>
        {{ Form::submit('Change',array('class' => 'btn btn-change btn-sm', 'name' => 'save')) }}
      {{Form::close()}}
    </div>
  </div>

  <div class="modal krik-registration-delete-accomodation animated fadeIn" tabindex="0" role="dialog" aria-hidden="true" style="display: none;">
    <div class="bs-example-modal krik-delete-modal">
      <div class="modal modal-danger">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times krik-delete-modal-close"></i></button>
              <h4 class="modal-title">Please confirm delete</h4>
            </div>
            <div class="modal-body">
              <p>This action can not be undone.</p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default krik-modal-inline" data-dismiss="modal">Go back</button>
              <button type="submit" class="btn btn-danger" id="krik-delete-submit">Delete reservation</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal krik-registration-accomodation-status-confirm animated fadeIn" tabindex="0" role="dialog" aria-hidden="true" style="display: none;">
    <div class="bs-example-modal krik-delete-modal">
      <div class="modal modal-danger">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times krik-delete-modal-close"></i></button>
              <h4 class="modal-title">Please confirm change</h4>
            </div>
            <div class="modal-body">
              <p>Change accommodation status to Confirmed.</p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default krik-modal-inline" data-dismiss="modal">Go back</button>
              <button type="submit" class="btn btn-danger" id="krik-change-submit">Change</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal krik-registration-accomodation-status-cancel animated fadeIn" tabindex="0" role="dialog" aria-hidden="true" style="display: none;">
    <div class="bs-example-modal krik-delete-modal">
      <div class="modal modal-danger">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times krik-delete-modal-close"></i></button>
              <h4 class="modal-title">Please confirm change</h4>
            </div>
            <div class="modal-body">
              <p>Change accommodation status to Canceled.</p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default krik-modal-inline" data-dismiss="modal">Go back</button>
              <button type="submit" class="btn btn-danger" id="krik-change-submit">Change</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>
@endsection