@extends('layouts/contentNavbarLayout')

@section('title', 'Tours')



@section('content')

  <link rel="stylesheet" href="{{asset('assets/vendor/libs/tagify/tagify.css')}} "/>
  <link rel="stylesheet" href="{{asset('assets/vendor/libs/quill/typography.css')}}"/>
  <link rel="stylesheet" href="{{asset('assets/vendor/libs/quill/katex.css')}}"/>
  <link rel="stylesheet" href="{{asset('assets/vendor/libs/quill/editor.css')}}"/>


  <form action="{{route('admin.course.update')}}" method="post" id="news" class="repeater-default"
        enctype="multipart/form-data">
    @csrf

    <input value="{{$course->id}}" type="hidden" name="id">

    <div class="nav-align-top mb-4">

      <ul class="nav nav-pills mb-3" role="tablist">
        @foreach(config('lang') as $language)
          <li class="nav-item">
            <button type="button" class="nav-link @if($loop->first) active @endif text-capitalize" role="tab" data-bs-toggle="tab"
                    data-bs-target="#navs-pills-top-{{$language}}" aria-controls="navs-pills-top-{{$language}}"
                    aria-selected="true">
              {{$language}}</button>
          </li>
        @endforeach

      </ul>
      <div class="tab-content bg-opacity-10" style="background:none">
        @foreach(config('lang') as $language)
          <div class="tab-pane fade show @if($loop->first) active @endif" id="navs-pills-top-{{$language}}"
               role="tabpanel">
            <div class="card">
              <h5 class="card-header">Course Info </h5>
              <div class="card-body">


                <div class="row">
                  <div class="col-xl-6">
                    <label class="form-label">Name {{$language}}</label>
                    <input class="form-control" value="{{$course->getTranslation('name',$language)}}" name="name_{{$language}}" required autocomplete="off">
                  </div>
                  <div class="col-xl-6">
                    <label for="TagifyBasic-{{$language}}" class="form-label">objectives</label>
                    <input id="TagifyBasic-{{$language}}" class="form-control" value="{{$course->getTranslation('objectives',$language)}}"  name="objectives_{{$language}}"/>
                  </div>
                </div>

                <hr>
                <div class="row mt-3 mb-3">
                  <div class="col-xl-12">
                    <label class="form-label">Description {{$language}}</label>
                    <textarea class="form-control" rows="8" name="des_{{$language}}">{!! $course->getTranslation('description',$language) !!}</textarea>
                  </div>
                </div>

              </div>
            </div>
            <br>
            <div class="card">
              <h5 class="card-header">seo</h5>
              <div class="card-body">


                <div class="row">
                  <div class="col-xl-3">
                    <label class="form-label" >meta title {{$language}}</label>
                    <input class="form-control" value="{{$course->getTranslation('meta_title',$language)}}" name="meta_title_{{$language}}" autocomplete="off">
                  </div>
                </div>

                <br>

                <div class="row">
                  <div class="col-xl-3">
                    <label class="form-label">meta description {{$language}}</label>
                    <textarea class="form-control" name="meta_des_{{$language}}">{{$course->getTranslation('meta_description',$language)}}</textarea>
                  </div>
                </div>
                <br>

                <div class="row">
                  <div class="col-xl-3">
                    <label class="form-label" >slug {{$language}}</label>
                    <input class="form-control" value="{{$course->getTranslation('slug',$language)}}" name="slug_{{$language}}" autocomplete="off">
                  </div>
                </div>
              </div>
            </div>
          </div>
        @endforeach


      </div>
    </div>

    <br>
    <div class="card">
      <h5 class="card-header"></h5>
      <div class="card-body">
        <h3>More Info</h3>
        <div class="row">

          <div class="col">
            <label class="form-label">Category</label>
            <select class="form-control" name="category_id" required>
              @foreach($categories as $category)
                <option @if($course->category_id == $category->id) selected @endif value="{{$category->id}}">{{$category->getTranslation('name','en')}}</option>
              @endforeach
            </select>
          </div>
          <div class="col">
            <label class="form-label">lang</label>
            <select class="form-control" name="language" required>
              <option @if($course->language == 'ar') selected @endif value="ar">Arabic</option>
              <option @if($course->language == 'en') selected @endif value="en">English</option>
            </select>
          </div>
          <div class="col">
            <label class="form-label">City</label>
            <select id="selectpickerLiveSearch" name="city_id" class="selectpicker " required data-style="btn-default" data-live-search="true">
              @foreach($cities as $city)
                <option @if($city->id == $course->city_id) selected @endif value="{{$city->id}}">{{$city->city}}</option>
              @endforeach
            </select>
          </div>
          <div class="col">
            <label class="form-label">Date</label>
            <input type="date" class="form-control"  value="{{ $course->date }}" name="date" >
          </div>
        </div>
      </div>
    </div>
    <br>
    <button type="submit" class="btn btn-primary">save</button>

  </form>
@endsection


@section('vendor-script')
  <script src="{{asset('assets/vendor/libs/tagify/tagify.js')}}"></script>

  <script src="{{asset('assets/vendor/libs/masonry/masonry.js')}}"></script>
  <script src="{{asset('assets/vendor/libs/quill/katex.js')}}"></script>
  <script src="{{asset('assets/vendor/libs/quill/quill.js')}}"></script>
  <script>
    @foreach(config('lang') as $language)
    const tagifyBasicEl_{{$language}} = document.querySelector("#TagifyBasic-{{$language}}");
    const TagifyBasic_{{$language}} = new Tagify(tagifyBasicEl_{{$language}});


    @endforeach




@endsection