@extends('dashboard.layout.layout')

@section('content')
  <!-- BEGIN: Content-->
  <div class="app-content content ">
    <div class="content-overlay"></div>
    <div class="header-navbar-shadow"></div>
    <div class="content-wrapper container-xxl p-0">
      <div class="content-header row">
      </div>
      <div class="content-body">
        <!-- users list start -->
        <section class="app-user-list">
          <!-- list and filter start -->
          <div class="card">
            <div class="card-body border-bottom">
              <h4 class="card-title">{{ $title }}</h4>
            </div>
            <div class="container pb-2 pt-2">
              <form method="POST" class="row" @can('coworkers.store') action="{{ route('coworkers.store') }}" @endcan>
                @can('coworkers.store')
                  @csrf
                @endcan
                <div class="col-md-4 mb-2">
                  <label for="name" class="form-label">სახელი</label>
                  <input value="{{ old('name') }}" type="text" class="form-control" name="name"
                    placeholder="სახელი" required>
                </div>
                <div class="col-md-4 mb-2">
                  <label for="phone" class="form-label">ტელეფონი</label>
                  <input value="{{ old('phone') }}" type="text" class="form-control" name="phone"
                    placeholder="ტელეფონი">
                </div>
                <div class="col-md-4 mb-2">
                  <label for="ip" class="form-label">აბონენტის ID</label>
                  <input value="{{ old('account_number') }}" type="text" class="form-control" name="account_number"
                    placeholder="აბონენტის ID">
                </div>
                <div class="col-md-4 mb-2">
                  <label for="blocks" class="form-label">კორპუსები</label>
                  <select name="blocks[]" class="form-select select2" id="blocks" multiple>
                    <option value="all">ყველა</option>
                    @foreach ($blocks as $block)
                      <option value="{{ $block->id }}">{{ $block->name }}</option>
                    @endforeach
                  </select>
                </div>
                <div class="col-12 text-end">
                  @can('coworkers.store')
                    <button type="submit" class="btn btn-success">დამატება</button>
                  @endcan
                  <a href="{{ route('coworkers.index') }}" class="btn btn-danger">უკან</a>
                </div>
              </form>
            </div>
          </div>
          <!-- list and filter end -->
        </section>
        <!-- users list ends -->

      </div>
    </div>
  </div>
  <!-- END: Content-->
@endsection

@push('scripts')
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const blocksDropdown = $('#blocks');

      if (!blocksDropdown.length) {
        console.error('Dropdown element with ID "blocks" not found!');
        return;
      }

      // Initialize Select2
      blocksDropdown.select2();

      // Prevent recursion flag
      let isHandlingChange = false;

      // Function to handle the selection logic
      function handleBlocksSelection() {
        if (isHandlingChange) return; // Prevent recursion
        isHandlingChange = true;

        const selectedValues = blocksDropdown.val();

        if (selectedValues.includes('all')) {
          // Select all options if 'all' is selected
          const allOptions = blocksDropdown.find('option').map(function() {
            return $(this).val();
          }).get();

          blocksDropdown.val(allOptions).trigger('change.select2'); // Avoid infinite loop
        } else {
          // Deselect all options except 'all' when 'all' is not selected
          const allOption = blocksDropdown.find('option[value="all"]');

          if (!allOption.is(':selected')) {
            blocksDropdown.val(selectedValues.filter(value => value !== 'all')).trigger('change.select2');
          }
        }

        isHandlingChange = false; // Reset flag
      }

      // Trigger selection logic on change
      blocksDropdown.on('change', handleBlocksSelection);

      // Trigger selection logic on page load
      handleBlocksSelection();
    });
  </script>
@endpush