@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">
        <!-- coworker form start -->
        <section class="app-user-list">
          <!-- list and filter start -->
          <div class="card">
            <div class="card-body border-bottom d-flex justify-content-between">
              <h4 class="card-title">{{ $title }}</h4>
              <form action="{{ route('coworkers.refreshPhone', $coworker->id) }}" method="POST" class="d-inline">
                @csrf
                @method('patch')
                <button type="submit" class="btn btn-sm btn-primary">ტელეფონების გადატვირთვა</button>
              </form>
            </div>

            <div class=" p-2">
              <form method="POST" class="row"
                @can('coworkers.update') action="{{ route('coworkers.update', $coworker->id) }}" @endcan>
                @can('coworkers.update')
                  @method('patch')
                  @csrf
                @endcan
                <!-- coworker details form -->
                <div class="col-md-4 mb-2">
                  <label for="name" class="form-label">სახელი</label>
                  <input value="{{ $coworker->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="{{ $coworker->phone }}" type="text" class="form-control" name="phone"
                    placeholder="ტელეფონი">
                </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" {{ in_array('all', $selectedBlocks) ? 'selected' : '' }}>ყველა</option>
                    @foreach ($blocks as $block)
                      <option value="{{ $block->id }}" {{ in_array($block->id, $selectedBlocks) ? 'selected' : '' }}>
                        {{ $block->name }}
                      </option>
                    @endforeach
                  </select>
                </div>

                <div class="col-12 text-end">
                  @can('coworkers.update')
                    <button type="submit" class="btn btn-success">შენახვა</button>
                  @endcan
                  <a href="{{ route('coworkers.index') }}" class="btn btn-danger">უკან</a>
                </div>
              </form>
            </div>
          </div>

          <!-- coworker's tags start -->
          <div class="card">
            <div class="card-header d-flex justify-content-between">
              <h4 class="card-title">{{ 'თანამშრომელის ჩიპები' }}</h4>
              <div>
                <form action="{{ route('coworkers.refreshTags', $coworker->id) }}" method="POST" class="d-inline ms-1">
                  @csrf
                  @method('patch')
                  <button type="submit" class="btn btn-sm btn-secondary">ჩიპების გადატვირთვა</button>
                </form>
                <a class="btn btn-sm btn-success ms-1" href="{{ route('cotags.create', $coworker->id) }}">ჩიპის
                  დამატება</a>
              </div>
            </div>
            <div class="card-body">
              <table class="datatables-basic table">
                <thead>
                  <tr>
                    <th>თანამშრომელი</th>
                    <th>ჩიპის ID</th>
                    <th>ჩიპის პინი</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody>
                  @forelse($coworker->tags as $tag)
                    <tr>
                      <td>{{ $tag->user->name }}</td>
                      <td>{{ $tag->tag_id }}</td>
                      <td>{{ $tag->personal_id }}</td>
                      <td>
                        <div class="d-flex justify-content-start">
                          <a class="me-1 btn btn-sm btn-icon rounded-circle btn-warning"
                            href="{{ route('cotags.edit', $tag->id) }}"><i data-feather="edit"></i></a>
                          @if ($tag->status == 1)
                            <form method="POST" action="{{ route('cotags.deactivate', $tag->id) }}">
                              @csrf
                              <button type="submit" class="btn btn-sm btn-icon rounded-circle btn-danger"><i
                                  data-feather="power"></i></button>
                            </form>
                          @else
                            <form method="POST" action="{{ route('cotags.activate', $tag->id) }}">
                              @csrf
                              <button type="submit" class="btn btn-sm btn-icon rounded-circle btn-success"><i
                                  data-feather="play"></i></button>
                            </form>
                            <form method="POST" action="{{ route('cotags.destroy', $tag->id) }}">
                              @csrf
                              @method('DELETE')
                              <button type="submit"
                                class="btn btn-sm btn-icon rounded-circle btn-danger ms-1 showTagDelete"><i
                                  data-feather="trash"></i></button>
                            </form>
                          @endif
                        </div>
                      </td>
                    </tr>
                  @empty
                    <h6>თანამშრომელს ჩიპები არ აქვს!</h6>
                  @endforelse
                </tbody>
              </table>
            </div>
          </div>
          <!-- coworker's tags end -->
        </section>
        <!-- coworker form ends -->
      </div>
    </div>
  </div>
  <!-- END: Content-->
@endsection

@push('scripts')
  <script>
    $('.showTagDelete').click(function(event) {
      var form = $(this).closest("form");
      event.preventDefault();
      new swal({
          title: `გსურთ ჩიპის წაშლა?`,
          text: "თუ წაშლით ჩიპს წაიშლება სამუდამოდ.",
          icon: "warning",
          buttons: true,
          dangerMode: true,
          confirmButtonText: "წაშლა",
          cancelButtonText: "გაუქმება",
        })
        .then((result) => {
          if (result.isConfirmed) {
            form.submit();
          }
        });
    });
  </script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const blocksDropdown = $('#blocks');

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

      // Initialize Select2 with necessary configuration
      blocksDropdown.select2({
        allowClear: true,
        placeholder: 'აირჩიეთ კორპუსები',
        width: '100%'
      });

      // Prevent recursion flag
      let isHandlingChange = false;

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

        const selectedValues = blocksDropdown.val() || [];

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

          blocksDropdown.val(allOptions).trigger('change.select2');
        } else {
          // Handle normal selection/deselection
          blocksDropdown.val(selectedValues).trigger('change.select2');
        }

        isHandlingChange = false;
      }

      // Handle deselection through Select2's 'unselect' event
      blocksDropdown.on('select2:unselect', function(e) {
        if (isHandlingChange) return;

        const unselectedValue = e.params.data.id;
        const currentValues = blocksDropdown.val() || [];

        // If 'all' is unselected, clear all selections
        if (unselectedValue === 'all') {
          blocksDropdown.val(null).trigger('change.select2');
        }

        // Update the selection
        const newValues = currentValues.filter(value => value !== unselectedValue);
        blocksDropdown.val(newValues).trigger('change.select2');
      });

      // Handle selection
      blocksDropdown.on('select2:select', function(e) {
        if (isHandlingChange) return;
        handleBlocksSelection();
      });

      // Initial setup
      handleBlocksSelection();
    });
  </script>
@endpush