@extends('layouts.app')
@section('content')
<div class="container-fluid add-event-page">
   <div class="row">
      <div class="card">
         <div class="card-body">
            <h4 class="card-title">Add Event</h4>
            <p class="card-title-desc"></p>
            <ul class="nav nav-tabs" id="myTab" role="tablist">
               <li class="nav-item" role="presentation">
                  <button class="nav-link active" id="single-event-tab" data-bs-toggle="tab" data-bs-target="#single-event" type="button" role="tab" aria-controls="single-event" aria-selected="true">One-of Event</button>
               </li>
               <li class="nav-item" role="presentation">
                  <button class="nav-link" id="weekly-event-tab" data-bs-toggle="tab" data-bs-target="#weekly-event" type="button" role="tab" aria-controls="weekly" aria-selected="false">Weekly Event</button>
               </li>
            </ul>
            <div class="tab-content" id="eventTabContent">
               <div class="tab-pane fade show active" id="single-event" role="tabpanel" aria-labelledby="single-event-tab">
                  {{Form::model($list ?? '', ['route'=>['events.store'],'files' => 'true', 'class' =>'submit-form','id' =>'submit-form','autocomplete'=> 'off']) }}
                  <input type="hidden" name="event_type" value="Single Event">
                  <div class="row">
                     @include('admin.events.common-fields')
                     <h4 class="border-bottom pb-2">Schedule</h4>
                     <div class="col-md-12 mb-3">
                        <div class="align-items-start">
                           <div class="nav nav-pills p-2 row" id="date-pills-tab" role="tablist" aria-orientation="vertical">
                              <button class="nav-link active col-md-6 border" id="v-pills-single-tab" data-bs-toggle="pill" data-bs-target="#v-pills-single" type="button" data-type="Single Event" role="tab" aria-controls="v-pills-single" aria-selected="true">Single Day
                              </button>
                              <button class="nav-link col-md-6 border" id="v-pills-multiple-tab" data-bs-toggle="pill" data-bs-target="#v-pills-multiple" data-type="Datewise Event" type="button" role="tab" aria-controls="v-pills-multiple" aria-selected="false">Multiple Days
                              </button>
                           </div>
                           <div class="tab-content" id="v-pills-tabContent">
                              <div class="tab-pane fade show active" id="v-pills-single" role="tabpanel" aria-labelledby="v-pills-home-tab">
                                 <div class="row">
                                    <div class="mb-3 col-md-6">
                                       <label class="form-label">Event Date</label>
                                       <div class="col-md-12">
                                          {{Form::text('start_date',null,['class'=>'form-control datepicker','placeholder'=>'Event date'])}}
                                       </div>
                                    </div>
                                    <div class="mb-3 col-md-2">
                                       <label class="form-label">Start Time</label>
                                       <div class="col-md-12">
                                          {{Form::text('start_time',null,['class'=>'form-control timepicker','placeholder'=>'Event Start date time'])}}
                                       </div>
                                    </div>
                                    <div class="mb-3 col-md-2">
                                       <label class="form-label">End Time</label>
                                       <div class="col-md-12">
                                          {{Form::text('end_time',null,['class'=>'form-control timepicker','placeholder'=>'Event End time'])}}
                                       </div>
                                    </div>
                                    <div class="mb-3 col-md-1">
                                       <label class="form-label">Seats</label>
                                       <div class="col-md-12">
                                          {{Form::text('number_of_seats',null,['class'=>'form-control','placeholder'=>'Seats','id'=>'seat-cost','required'=>'required'])}}
                                       </div>
                                    </div>
                                    <div class="mb-3 col-md-1">
                                       <label class="form-label">Price</label>
                                       <div class="col-md-12">
                                          {{Form::text('price',null,['class'=>'form-control','placeholder'=>'Price','required'=>'required'])}}
                                       </div>
                                    </div>
                                 </div>
                              </div>
                              <div class="tab-pane fade" id="v-pills-multiple" role="tabpanel" aria-labelledby="v-pills-multiple-tab">
                                 <div class="row">
                                    <div class="mb-3 col-md-3">
                                       <label class="form-label">Start Date</label>
                                       <div>
                                          <input type="text" class="form-control datepicker" name="start_date" required placeholder="Start date" />
                                       </div>
                                    </div>
                                    <div class="mb-3 col-md-3">
                                       <label class="form-label">End Date</label>
                                       <div>
                                          <input type="text" class="form-control datepicker" name="end_date" required placeholder="End date"/>
                                       </div>
                                    </div>
                                    <div class="mb-2 col-md-3">
                                       <label class="form-label">Seats</label>
                                       <input type="number" name="number_of_seats" class="form-control" required placeholder="Enter seats">
                                    </div>
                                    <div class="mb-2 col-md-3">
                                       <label class="form-label">Price</label>
                                       <input type="number" name="price" class="form-control" required placeholder="Price">
                                    </div>
                                    <div class="mb-3 col-md-12">
                                       <ul class="add-date-element child">
                                          <li class="list-data mb-3 row align-items-end">
                                             <div class="col">
                                                <label>Start Time</label>
                                                <input type="text" name="start_time[]" class="multi timepicker form-control" required placeholder="Start time">
                                             </div>
                                             <div class="col">
                                                <label>End Time</label>
                                                <input type="text" name="end_time[]" class="multi timepicker form-control" required placeholder="End time">
                                             </div>
                                             <div class="actionBtns col text-center">
                                                <a href="javascript:void(0)" data-length="3" class="mgT10 addBtn childAdd" onclick="addMoreContent(this,'list-data','addDatewiseLast')"><i class="bx bx-plus"></i>
                                                </a>
                                                <a href="javascript:void(0)" class="deleteItem removeRow hidden deleteBtn">
                                                <i class="bx bx-trash"></i>
                                                </a>                                                    
                                             </div>
                                          </li>
                                          <li class="addDatewiseLast"></li>
                                       </ul>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="d-flex flex-wrap gap-2">
                     <button type="submit" class="btn btn-primary waves-effect waves-light submit-btn">Submit</button>
                     <a href="{{url()->previous()}}" class="btn btn-secondary waves-effect">Back</a>
                  </div>
                  {{Form::close()}}
               </div>
               <div class="tab-pane fade" id="weekly-event" role="tabpanel" aria-labelledby="weekly-event-tab">
                  {{Form::model($list ?? '', ['route'=>['events.store'],'files' => 'true', 'class' =>'submit-form','id' =>'','autocomplete'=> 'off']) }}
                  <input type="hidden" name="event_type" value="Weekly Event">   
                  <div class="row">
                     @include('admin.events.common-fields')
                     <div class="mb-3 col-md-12">
                        <h4 class="border-bottom pb-2">Schedule</h4>
                        <div class="row mb-3 mt-2">
                           <div class="col-md-4">
                              <label class="form-label">End Date</label>
                              <div class="">
                                 <input type="text" class="form-control datepicker" name="end_date" required placeholder="End date"/>
                              </div>
                           </div>
                           <div class="col-md-4">
                              <label class="form-label">Seats</label>
                              <div class="">
                                  <input type="number" name="number_of_seats" class="form-control" required placeholder="Enter seats">
                              </div>
                           </div>
                           <div class="col-md-4">
                              <label class="form-label">Price</label>
                              <div class="">
                                 <input type="number" name="price" class="form-control" required placeholder="Price">
                              </div>
                           </div>
                        </div>

                        <ul class="nav nav-pills" id="daysTab" role="tablist">
                           @foreach( getDaysName() as $i=>$day )
                           @php $name = strtolower($day) @endphp
                           @php $active = $i == 0?'active':'' @endphp
                           <li class="nav-item" role="presentation">
                              <button class="nav-link {{ $active }}" id="{{ $name }}-tab" data-bs-toggle="tab" data-bs-target="#{{ $name }}" type="button" role="tab" aria-controls="{{ $name }}" aria-selected="true">{{ $day }}</button>
                           </li>
                           @endforeach
                        </ul>
                        <div class="tab-content" id="daysTabContent">
                           @foreach( getDaysName() as $i=>$day )
                           @php $name = strtolower($day) @endphp
                           @php $active = $i == 0?'show active':'' @endphp
                           <div class="tab-pane fade {{ $active }}" id="{{ $name }}" role="tabpanel" aria-labelledby="{{ $name }}-tab">
                              <input type="hidden" name="dayname[{{ $i }}]" value="{{ $name }}">
                              <input type="hidden" name="daynumber[{{ $i }}]" value="{{ $i }}">
                              <ul class="add-date-element child">
                                 <li class="list-data timeWise mb-3 mt-2">
                                    <div>
                                       <label>Start Time</label>
                                       <input type="text" name="start_time[{{ $i }}][]" class="multi timepicker form-control">
                                    </div>
                                    <div>
                                       <label>End Time</label>
                                       <input type="text" name="end_time[{{ $i }}][]" class="multi timepicker form-control">
                                    </div>
                                    <div class="actionBtns">
                                       <a href="javascript:void(0)" class="mgT10 addBtn childAdd" onclick="addMoreContent(this,'list-data','addInLast')" data-length="5">
                                       <i class="bx bx-plus"></i>
                                       </a>
                                       <a href="javascript:void(0)" class="deleteItem removeRow hidden deleteBtn">
                                       <i class="bx bx-trash"></i>
                                       </a>                                                    
                                    </div>
                                 </li>
                                 <li class="addInLast"></li>
                              </ul>
                           </div>
                           @endforeach    
                        </div>
                     </div>
                  </div>
                  <div class="d-flex flex-wrap gap-2">
                     <button type="submit" class="btn btn-primary waves-effect waves-light submit-btn">Submit</button>
                     <a href="{{url()->previous()}}" class="btn btn-secondary waves-effect">Back</a>
                  </div>
                  {{Form::close()}}                   		
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
<script type="text/javascript">
   $('#date-pills-tab.nav-pills .nav-link').click(function(){
       var f = $(this).closest('form'),
       	e = $("#v-pills-tabContent"),
       	id = $(this).attr('data-bs-target');
       f.find('[name="event_type"]').val($(this).attr('data-type'))
       e.find('input').prop('disabled',true);
       $(id).find('input').prop('disabled',false);
   })	
   
</script>
@endsection