@extends('layouts/contentNavbarLayout')

@section('title', 'Article')


@section('content')

<div class="card">
  <div class="card-header">
      <h5>Create New Article </h5>
  </div>
  <div class="card-body">
      <form method="POST" action="{{ route('events.store') }}"  enctype="multipart/form-data">
          @csrf
          <div class="mb-3">
              <label for="name" class="form-label">Title Ar <span style="color: red;">*</span></label>
              <input type="text" class="form-control" id="title_ar" name="title_ar" required  >
          </div>
          <div class="mb-3">
              <label for="slug" class="form-label">Title En <span style="color: red;">*</span></label>
              <input type="text" class="form-control" id="title_en" name="title_en" required>
          </div>
          <div class="mb-3">
              <label for="slug" class="form-label">Category quiz <span style="color: red;">*</span></label>
              <select name="category_quiz_id" id="category_quiz_id" class="form-control" >
                  @foreach( $entities as $entity)
                      <option value="{{$entity->id}}">{{$entity->title_en}}</option>
                  @endforeach
              </select>
          </div>
  <div class="mb-3">
              <label for="slug" class="form-label">Category event  <span style="color: red;">*</span></label>
              <select name="category_event_id" id="category_event_id" class="form-control" >
                  @foreach( $categoryEvents as $entity)
                      <option value="{{$entity->id}}">{{$entity->title_en}}</option>
                  @endforeach
              </select>
          </div>

            <div class="mb-3">
              <label for="slug" class="form-label">Type event <span style="color: red;">*</span></label>
                <select name="type_event" id="type_event" class="form-control"  >
                    <option value="1">Fitness</option>
                    <option value="2">Programmes</option>
                </select>
            </div>

          <div class="mb-3" >
              <label for="slug" class="form-label">Picture <span style="color: red;">*</span></label>
              <input type="file" class="form-control" id="path" name="path"  >
          </div>

          <div class="mb-3">
              <label for="slug" class="form-label">Type Video <span style="color: red;">*</span></label>
              <select name="video_type" id="video_type" class="form-control" onchange="changeTypeVideo(this.value)">
                  <option value="local">Local</option>
                  <option value="youtube">Youtube</option>
              </select>
          </div>

          <div class="mb-3" id="div_local_url" >
              <label for="slug" class="form-label">Local Video <span style="color: red;">*</span></label>
              <input type="file" class="form-control" id="video_link" name="video_link"  >
          </div>


          <div class="mb-3" id="div_youtube_url" style="display: none">
              <label for="slug" class="form-label">Youtube Video <span style="color: red;">*</span></label>
              <input type="text" class="form-control" id="youtube_link" name="youtube_link"  >
          </div>

         <div class="mb-3"  >
              <label for="slug" class="form-label">Author event <span style="color: red;">*</span></label>
              <input type="text" class="form-control" id="author_event" name="author_event"  >
          </div>

           <div class="mb-3"  >
              <label for="slug" class="form-label">Author picture <span style="color: red;">*</span></label>
              <input type="file" class="form-control" id="author_picture_event" name="author_picture_event"  >
          </div>
          <div class="mb-4">
              <div class="form-check form-switch">
                  <input class="form-check-input" type="checkbox" name="enabled" id="enabled" checked>
                  <label class="form-check-label" for="enabled">Active</label>
              </div>
          </div>
          <div class="mb-3"  >
              <label for="slug" class="form-label">Description EN <span style="color: red;">*</span></label>
              <textarea  class="form-control" id="description_en" name="description_en" ></textarea>
          </div>
          <div class="mb-3"  >
              <label for="slug" class="form-label">Description AR <span style="color: red;">*</span></label>
              <textarea  class="form-control" id="description_ar" name="description_ar" ></textarea>
          </div>
          <div class="d-flex justify-content-end">
              <button type="submit" class="btn btn-primary">Save</button>
              <a href="{{ route('events.index') }}" class="btn btn-secondary ms-2">Cancel</a>
          </div>
      </form>
  </div>
</div>

@endsection
@section('scripts')
    <script>
        function changeTypeVideo(value){
            if(value == 'local'){
                $("#div_local_url").show();
                $("#div_youtube_url").hide();
            }else{
                $("#div_local_url").hide();
                $("#div_youtube_url").show();
            }
        }
    </script>
@endsection