@extends('layouts.app')
@section('title')
{{ __("messages.Halls") }}
@endsection
@section('style')
@include('admin.shows.inc.style')
@endsection
@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
    @include('inc.breadcrumb' , ['breadcrumb_items'=>[
         __("messages.Home")=>route('home'),
         __("messages.Halls")=>route('admin.admins.index'),
         $hall->name =>null,
         __("messages.Add a theatrical show")=>"active"
    ]])


 <!-- Content -->

 <div class="container-xxl flex-grow-1 container-p-y">
    <!-- Default -->
    <div class="row">




      <!-- Default Wizard -->
      <div class="col-12 mb-4">
        <div class="bs-stepper wizard-numbered mt-2">
          <div class="bs-stepper-header">
            <div class="step" data-target="#account-details">
              <button type="button" class="step-trigger">
                <span class="bs-stepper-circle">1</span>
                <span class="bs-stepper-label">
                  <span class="bs-stepper-title">{{ __("messages.Basic information") }}</span>
                  <span class="bs-stepper-subtitle">{{ __("messages.Theatrical show and work team data") }}</span>
                </span>
              </button>
            </div>
            <div class="line">
              <i class="ti ti-chevron-right"></i>
            </div>
            <div class="step" data-target="#personal-info">
              <button type="button" class="step-trigger">
                <span class="bs-stepper-circle">2</span>
                <span class="bs-stepper-label">
                  <span class="bs-stepper-title">{{ __("messages.Media") }}</span>
                  <span class="bs-stepper-subtitle">{{ __("messages.Photos and videos") }}</span>
                </span>
              </button>
            </div>
            <div class="line">
              <i class="ti ti-chevron-right"></i>
            </div>
            <div class="step" data-target="#social-links">
              <button type="button" class="step-trigger">
                <span class="bs-stepper-circle">3</span>
                <span class="bs-stepper-label">
                  <span class="bs-stepper-title">{{ __("messages.Dates and Prices") }}</span>
                  <span class="bs-stepper-subtitle">{{ __("messages.Show dates and prices") }}</span>
                </span>
              </button>
            </div>
          </div>
          <div class="bs-stepper-content">
            <form id="form_submit" method="POST"   enctype="multipart/form-data" action="{{ route('admin.shows.store' , $hall->id) }}" >
                @csrf
              <!-- Account Details -->
                @include('admin.shows.inc.step_1')
              <!-- Personal Info -->
                @include('admin.shows.inc.step_2')
              <!-- Social Links -->
                @include('admin.shows.inc.step_3')
            </form>
          </div>
        </div>
      </div>
      <!-- /Default Wizard -->
    </div>
  </div>
  <!-- / Content -->

 </div>

 <div class="modal fade" id="exLargeModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel4">{{ __("messages.Hall shape") }}</h5>
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="modal"
            aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <h1>هنا صورة لشكل القاعة</h1>
        </div>

      </div>
    </div>
</div>
@endsection
@section('script')
<script src="{{ asset('assets/vendor/libs/bs-stepper/bs-stepper.js') }}"></script>
<script src="{{ asset('assets/js/form-wizard-numbered.js') }}"></script>
<script src="{{ asset('assets/vendor/libs/jquery-repeater/jquery-repeater.js') }}"></script>
<script src="{{asset('assets/lib/file-input')}}/js/plugins/piexif.min.js" type="text/javascript"></script>
<script src="{{asset('assets/lib/file-input')}}/js/plugins/sortable.min.js" type="text/javascript"></script>
<script src="{{asset('assets/lib/file-input')}}/js/fileinput.min.js"></script>

<script src="{{asset('assets/lib/file-input')}}/themes/fas/theme.min.js"></script>

<script src="{{asset('assets/lib/file-input')}}/js/locales/LANG.js"></script>
<script src="{{asset('assets/vendor/libs/toastr/toastr.js')}}"></script>
<script>
     $(function() {



        })
</script>

<script>
    $(function(){
         $("#inp-images").fileinput({
                theme: "fa",
                maxFileCount: 20,
                allowedFileTypes: ['image'],
                showCancel: true,
                showRemove: false,
                showUpload: false,
                overwriteInitial: true,
         });

         $('.fileinput-remove').
                                html('<i class="fa  fa-times-circle text-danger"></i>')
                                .addClass('rounded p-1 m-1')
            ;


        // $(document).on("change" , ".select_group" , function(){
        //     var _this = $(this);
        //     var selct_name = $(this).attr("name");
        //     var value = $(this).val();
        //     $(".select_group").each(function(key , val){
        //         var each_selct_name = $(this).attr("name");
        //         if(each_selct_name != selct_name){

        //          $(this).find(`option[value='${value}']`).remove();
        //         }


        //     })
        // })


    })
    </script>
    @include('admin.shows.inc.script_submit')

@endsection