@extends('layouts.main')

@section('title', 'Open-Close Rooms')

@section('css')

@endsection

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

@section('content')

   <!-- Main-body start -->
       <div class="main-body">
         <div class="page-wrapper">
           <div class="mobile-check">

              <div class="page-header">

                 <div class="page-header-title">
                      <h3>Open/Close Rooms</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="#!">Rates and availability</a>
                        </li>
                     </ul>
                   </div>

                </div>
                        <!-- Page header end -->

                <!-- Page body start -->
                   <div class="col-md-12">
                     {!! Form::open(['url' => 'open/close/rooms', 'method' => 'post']) !!}
                     <div class="choose-date">
                      
                      <div class="m-l-15">
                       <h6 class="mini-panel-title-1">
                         Date
                       </h6>

                      <div class="col-sm-12 col-xl-3 col-md-4 m-b-30 date-select-1 m-l-15">
                        <P>From</P>
                        <input class="form-control" name="date_from" type="date" value="{{ $data->today->format('Y-m-d') }}"/>
                      </div>

                      <div class="col-sm-12 col-xl-3 col-md-4 m-b-30 date-select-1">
                        <P>To </P>
                        <input class="form-control" name="date_to" type="date" value="{{ $data->today->format('Y-m-d') }}"/>
                      </div>

                     </div> 


                     <div class="left-content row">
                        <div class="col-md-4 mobile-check">
                           <p class="open-p">On one or more of these days:</p>
                             <ul class="weekday-ul" id="checkbox_1">

                               <li class="checkbox-fade fade-in-primary p-b-15">
                                <button type="button" id="selectAll_1" class="select-all">
                                    <span class="sub"></span> Select All
                                </button>

                                </li>

                                <li class="checkbox-fade fade-in-info">
                                                        <label class="check-task">
                                                            <input type="checkbox" name="monday" value="monday">
                                                              <span class="cr">
                                                                <i class="cr-icon icofont icofont-ui-check txt-primary"></i>
                                                              </span>
                                                            <span>Monday</span>
                                                        </label>
                                </li>

                                                    <li class="checkbox-fade fade-in-info">
                                                        <label class="check-task">
                                                            <input type="checkbox" name="tuesday" value="tuesday">
                                                              <span class="cr">
                                                                <i class="cr-icon icofont icofont-ui-check txt-primary"></i>
                                                              </span>
                                                            <span>Tuesday</span>
                                                        </label>
                                                    </li>
                                                    <li class="checkbox-fade fade-in-info">
                                                        <label class="check-task">
                                                            <input type="checkbox" name="wednesday" value="wednesday">
                                                              <span class="cr">
                                                                <i class="cr-icon icofont icofont-ui-check txt-primary"></i>
                                                              </span>
                                                            <span>Wednesday</span>
                                                        </label>
                                                    </li>
                                                    <li class="checkbox-fade fade-in-info">
                                                        <label class="check-task">
                                                            <input type="checkbox" name="thursday" value="thursday">
                                                              <span class="cr">
                                                                <i class="cr-icon icofont icofont-ui-check txt-primary"></i>
                                                              </span>
                                                            <span>Thursday</span>
                                                        </label>
                                                    </li>
                                                    <li class="checkbox-fade fade-in-info">
                                                        <label class="check-task">
                                                            <input type="checkbox" name="friday" value="friday">
                                                              <span class="cr">
                                                                <i class="cr-icon icofont icofont-ui-check txt-primary"></i>
                                                              </span>
                                                            <span>Friday</span>
                                                        </label>
                                                    </li>
                                                    <li class="checkbox-fade fade-in-info">
                                                        <label class="check-task">
                                                            <input type="checkbox" name="saturday" value="saturday">
                                                              <span class="cr">
                                                                <i class="cr-icon icofont icofont-ui-check txt-primary"></i>
                                                              </span>
                                                            <span>Saturday</span>
                                                        </label>
                                                    </li>
                                                    <li class="checkbox-fade fade-in-info">
                                                        <label class="check-task">
                                                            <input type="checkbox" name="sunday" value="sunday">
                                                              <span class="cr">
                                                                <i class="cr-icon icofont icofont-ui-check txt-primary"></i>
                                                              </span>
                                                            <span>Sunday</span>
                                                        </label>
                                                    </li>
                                                </ul>

                                            </div>

                                            <div class="col-md-4 mobile-check">
                                                <p class="open-p">For</p>
                                                <ul class="weekday-ul">
                                                    <li class="checkbox-fade fade-in-info">
                                                        <label class="check-task">
                                                            <input type="checkbox" name="entireroom" value="entireroom">
                                                              <span class="cr">
                                                                <i class="cr-icon icofont icofont-ui-check txt-primary"></i>
                                                              </span>
                                                            <span>Entire Room</span>
                                                        </label>
                                                    </li>
                                                </ul>


                                                <ul class="weekday-ul" id="checkbox_2">
                                                    <li class="checkbox-fade fade-in-primary p-b-15">
                                                        <button type="button" id="selectAll_2" class="select-all">
                                                            <span class="sub"></span> Select All
                                                        </button>

                                                    </li>

                                                    <li class="checkbox-fade fade-in-info">
                                                        <label class="check-task">
                                                            <input type="checkbox" name="rate_type" value="STD">
                                                              <span class="cr">
                                                                <i class="cr-icon icofont icofont-ui-check txt-primary"></i>
                                                              </span>
                                                            <span>Standard Rates</span>
                                                        </label>
                                                    </li>
                                                </ul>
                                            </div>

                                            <div class="col-md-4 mobile-check">
                                                <p class="open-p">For one or more of these rooms:</p>

                                                <ul class="weekday-ul" id="checkbox_3">

                                                    <li class="checkbox-fade fade-in-primary p-b-15">
                                                        <button type="button" id="selectAll_3" class="select-all"><span
                                                                    class="sub"></span> Select All
                                                        </button>

                                                    </li>

                                                    @foreach( $property->rooms as $key => $room )

                                                      @if( $room->status == 'Active' )
                                                          <li class="checkbox-fade fade-in-info">
                                                              <label class="check-task">
                                                                  <input type="checkbox" name="rooms[]" value="{{ $room->id }}">
                                                                    <span class="cr">
                                                                      <i class="cr-icon icofont icofont-ui-check txt-primary"></i>
                                                                    </span>
                                                                  <span>@if($room->display_name === NULL) {{ $room->roomtype->name }} @else {{ $room->display_name }} @endif</span>
                                                              </label>
                                                          </li>
                                                        @endif
                                                    @endforeach

                                                </ul>
                                            </div>


                                            <div class="col-md-4 m-t-35 mobile-check m-b-30">
                                                <p class="open-p">Action to Perform</p>

                                                <ul class="weekday-ul form-radio">
                                                    <form>
                                                        <li class="radio radio-inline radiofill radio-info ">
                                                            <label>
                                                                <input type="radio" name="status" value="Open" checked="checked">
                                                                <i class="helper"></i>Open
                                                            </label>
                                                        </li>

                                                        <li class="radio radio-inline radiofill radio-info ">
                                                            <label>
                                                                <input type="radio" name="status" value="Close" checked="checked">
                                                                <i class="helper"></i>Close
                                                            </label>
                                                        </li>
                                                    </form>

                                                    <button class="btn btn-info m-t-30">Update and stay</button>
                                                    <a class="btn btn-info m-t-30" href="{{ url('calendar-view') }}">Show Changes</a>
                                                </ul>
                                            </div>

                                        </div> <!-- .left content -->


                                    </div>
                                    {!! Form::close() !!}
                                    <!-- .choose date -->
                                </div>
                                <!-- Page body end -->

                            </div> <!-- container-fluid -->
                        </div> <!-- page-wrapper -->
                    </div> <!-- main-body -->
               

@endsection

@section('scripts')


    <!-- select all checkboxes -->

    <script>
        $(document).ready(function () {
            $('body').on('click', '#selectAll_1', function () {
                if ($(this).hasClass('allChecked')) {
                    $('input[type="checkbox"]', '#checkbox_1').prop('checked', false);
                } else {
                    $('input[type="checkbox"]', '#checkbox_1').prop('checked', true);
                }
                $(this).toggleClass('allChecked');
            })
        });
    </script>

    <script>
        $(document).ready(function () {
            $('body').on('click', '#selectAll_2', function () {
                if ($(this).hasClass('allChecked')) {
                    $('input[type="checkbox"]', '#checkbox_2').prop('checked', false);
                } else {
                    $('input[type="checkbox"]', '#checkbox_2').prop('checked', true);
                }
                $(this).toggleClass('allChecked');
            })
        });
    </script>

    <script>
        $(document).ready(function () {
            $('body').on('click', '#selectAll_3', function () {
                if ($(this).hasClass('allChecked')) {
                    $('input[type="checkbox"]', '#checkbox_3').prop('checked', false);
                } else {
                    $('input[type="checkbox"]', '#checkbox_3').prop('checked', true);
                }
                $(this).toggleClass('allChecked');
            })
        });
    </script>
    <!-- .select all checkboxes -->

@endsection