@extends('layouts/layoutMaster')


@section('title', __('Edit Admin'))

@section('vendor-style')
@vite([
  'resources/assets/vendor/libs/flatpickr/flatpickr.scss',
    'resources/assets/vendor/libs/pickr/pickr-themes.scss',
  'resources/assets/vendor/libs/@form-validation/form-validation.scss'
])
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.css" integrity="sha512-MQXduO8IQnJVq1qmySpN87QQkiR1bZHtorbJBD0tzy7/0U9+YIC93QWHeGTEoojMVHWWNkoCp8V6OzVSYrX0oQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

@endsection


@section('page-style')
@endsection
@section('styles')
@endsection

@section('content')
    <div class="content-wrapper">
        <div class="content-header row">
            <div class="content-header-left col-md-9 col-12 mb-2">
                <div class="row breadcrumbs-top">
                    <div class="col-12">
                        <h2 class="content-header-title float-left mb-0">{{__('Edit Admin') }}</h2>
                        <div class="breadcrumb-wrapper">
                            <ol class="breadcrumb">
                                  <li class="breadcrumb-item"><a href="{{ route('dashboard.main') }}">{{ __('Dashboard') }}</a>
                                </li>
                                @if (isset($menu))
                                    <li class="breadcrumb-item"><a href="{{ route($menu_link) }}">{{ __($menu) }}</a>
                                    </li>
                                @endif
                                <li class="breadcrumb-item active">
                                {{ __('Admins')}}
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="content-body">

            <section class="form-control-repeater">
                <div class="row">

                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <form action="{{ route("dashboard.admins.update", ["admin" =>  $admin->id]) }}" method="post" enctype="multipart/form-data">
                                    @csrf
                                    @method('PUT')
                                    <div class="row">
                                            
                                            <hr />
                                            <div class="col-6">
                                            <button class="btn btn-success" type="submit">
                                                {{__(' Save')}}
                                            </button>
                                            </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                </div>
            </section>
        </div>
    </div>
@endsection



@section('vendor-script')
@vite([
  'resources/assets/vendor/libs/moment/moment.js',
  'resources/assets/vendor/libs/flatpickr/flatpickr.js',
  'resources/assets/vendor/libs/pickr/pickr.js',
  'resources/assets/vendor/libs/@form-validation/popular.js',
  'resources/assets/vendor/libs/@form-validation/bootstrap5.js',
  'resources/assets/vendor/libs/@form-validation/auto-focus.js'
])
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.js" integrity="sha512-K/oyQtMXpxI4+K0W7H25UopjM8pzq0yrVdFdG21Fh5dBe91I40pDd9A4lzNlHPHBIP2cwZuoxaUSX0GJSObvGA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
@endsection



@section('page-script')
<script>
    const flatpickrDate = document.querySelector('#flatpickr-date'),
    flatpickrTime = document.querySelector('#flatpickr-time'),
    flatpickrDateTime = document.querySelector('#flatpickr-datetime');


  // Date
  if (flatpickrDate) {
    flatpickrDate.flatpickr({
      monthSelectorType: 'static'
    });
  }

  // Time
  if (flatpickrTime) {
    flatpickrTime.flatpickr({
      enableTime: true,
      noCalendar: true
    });
  }

  // Datetime
  if (flatpickrDateTime) {
    flatpickrDateTime.flatpickr({
      enableTime: true,
      dateFormat: 'Y-m-d H:i'
    });
  }

  var polymorphicTypes = []
  if (typeof array !== 'undefined' && array.length === 0);
  else{
    document.addEventListener('DOMContentLoaded', function () {
      const model_name = {!! "'".\Str::singular(request()->segment(count(request()->segments())-2)). "'" !!}; 
      const polyMorphTypeSelect = document.getElementById(model_name+'able_type');
      const polyMorphIdSelect = document.getElementById(model_name+'able_id');
      const data = {
          @foreach($polymorphicTypes as $polymorphicType)
                {{ class_basename($polymorphicType) }} : @json($polymorphicType::all()),
          @endforeach
      };
      console.log(data);

      const oldSelectedType = $("#"+model_name+"able_type option:selected").text();
      const options = data[oldSelectedType];
      options.forEach(option => {
        const opt = document.createElement('option');
        opt.value = option.id;
        opt.textContent = option.title || option.name || `ID: ${option.id}`;
        polyMorphIdSelect.appendChild(opt);
      });
      console.log('$'+model_name+'->'+model_name+'able_id');
      polyMorphIdSelect.value = {{$admin->id}};

  
      polyMorphTypeSelect.addEventListener('change', function () {
        //const selectedType = this.value;
        const selectedType = $("#"+model_name+"able_type option:selected").text();
        polyMorphIdSelect.innerHTML = '';
        if (selectedType) {
            const options = data[selectedType];
            console.log(selectedType)
            options.forEach(option => {
                const opt = document.createElement('option');
                opt.value = option.id;
                opt.textContent = option.title || option.name || `ID: ${option.id}`;
                polyMorphIdSelect.appendChild(opt);
            });
        } 
      });
    });
  }



</script>
@endsection