@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('users.store') action="{{ route('users.store') }}" @endcan>
                @can('users.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="tel" class="form-control" name="phone"
                    placeholder="ტელეფონი">
                </div>
                <div class="col-md-4 mb-2">
                  <label for="flat_no" class="form-label">ბინის ნომერი</label>
                  <input value="{{ old('flat_no') }}" type="text" class="form-control" name="flat_no"
                    placeholder="ბინის ნომერი">
                </div>
                <div class="col-md-4 mb-2">
                  <label for="service_id" class="form-label">სერვისი</label>
                  <select name="service_id" id="service_id" class="form-control">
                    @foreach ($services as $service)
                      <option @if (old('service_id') == $service->id) selected @endif value="{{ $service->id }}"
                        @if ($service->id == 15) selected @endif>{{ $service->name }}</option>
                    @endforeach
                  </select>
                </div>
                <div class="col-md-4 mb-2 d-flex">
                  <div class="d-flex flex-row align-items-center">
                    <div class="form-check form-switch form-check-success">
                      <input type="checkbox" class="form-check-input" name="alwaysOn" value="1" id="alwaysOn"
                        @if (old('alwaysOn') === 1) checked @endif />
                      <label class="form-check-label" for="alwaysOn">
                        <span class="switch-icon-left"><i data-feather="check"></i></span>
                        <span class="switch-icon-right"><i data-feather="x"></i></span>
                      </label>
                    </div>
                    <label class="form-check-label me-50 mb-50" for="alwaysOn">ყოველთვის ჩართული</label>
                  </div>
                </div>
                <div class="col-md-4 mb-2 d-flex">
                  <div class="d-flex flex-row align-items-center">
                    <div class="form-check form-switch form-check-success">
                      <input type="checkbox" class="form-check-input" name="alwaysOff" value="1" id="alwaysOff"
                        @if (old('alwaysOff') === 1) checked @endif />
                      <label class="form-check-label" for="alwaysOff">
                        <span class="switch-icon-left"><i data-feather="check"></i></span>
                        <span class="switch-icon-right"><i data-feather="x"></i></span>
                      </label>
                    </div>
                    <label class="form-check-label me-50 mb-50" for="alwaysOff">ყოველთვის გათიშული</label>
                  </div>
                </div>
                <div class="col-md-4 mb-2">
                  <label for="amount" class="form-label">სააბონენტო</label>
                  <input value="{{ old('amount') }}" type="tel" class="form-control" name="amount"
                    placeholder="სააბონენტო" required>
                </div>
                <div class="col-md-4 mb-2 d-flex">
                  <div class="d-flex flex-row align-items-center">
                    <div class="form-check form-switch form-check-success">
                      <input type="checkbox" class="form-check-input" name="alwaysOnPhone" value="1"
                        id="alwaysOnPhone" @if (old('alwaysOnPhone') === 1) checked @endif />
                      <label class="form-check-label" for="alwaysOnPhone">
                        <span class="switch-icon-left"><i data-feather="check"></i></span>
                        <span class="switch-icon-right"><i data-feather="x"></i></span>
                      </label>
                    </div>
                    <label class="form-check-label me-50 mb-50" for="alwaysOnPhone">ყოველთვის ჩართული მობილური</label>
                  </div>
                </div>
                <div class="col-md-4 mb-2 d-flex">
                  <div class="d-flex flex-row align-items-center">
                    <div class="form-check form-switch form-check-success">
                      <input type="checkbox" class="form-check-input" name="alwaysOffPhone" value="1"
                        id="alwaysOffPhone" @if (old('alwaysOffPhone') === 1) checked @endif />
                      <label class="form-check-label" for="alwaysOffPhone">
                        <span class="switch-icon-left"><i data-feather="check"></i></span>
                        <span class="switch-icon-right"><i data-feather="x"></i></span>
                      </label>
                    </div>
                    <label class="form-check-label me-50 mb-50" for="alwaysOffPhone">ყოველთვის გათიშული მობილური</label>
                  </div>
                </div>
                <div class="col-md-4 mb-2">
                  <label for="pay_day" class="form-label">გადახდის თარიღი</label>
                  <input value="{{ old('pay_day') }}" type="tel" class="form-control" name="pay_day"
                    placeholder="გადახდის თარიღი" required>
                </div>
                <div class="col-md-4 mb-2">
                  <label for="email" class="form-label">ელ. ფოსტა</label>
                  <input value="{{ old('email') }}" type="email" class="form-control" name="email"
                    placeholder="ელ. ფოსტა">
                </div>
                <div class="col-md-4 mb-2">
                  <label for="account_number" class="form-label">აბონენტის ნომერი</label>
                  <input value="{{ old('account_number') }}" type="text" class="form-control"
                    name="account_number" placeholder="აბონენტის ნომერი" required>
                </div>
                <div class="form-group col-md-4 mb-2">
                  <label for="block_id" class="form-label">კორპუსი</label>
                  <select name="block_id" id="block_id" class="form-select select2">
                    <option value="">კორპუსი</option>
                    @foreach ($blocks as $block)
                      <option value="{{ $block->id }}" @selected((string) old('block_id') === (string) $block->id)>
                        {{ $block->name }}</option>
                    @endforeach
                  </select>
                </div>
                <div class="form-group col-md-4 mb-2">
                  <label for="entrance_id" class="form-label">სადარბაზო</label>
                  <div class="dropdown">
                    <button class="btn border w-100" style="text-align: left" type="button" id="entranceDropdown"
                      data-bs-toggle="dropdown" aria-expanded="false">
                      აირჩიე სადაბაზო
                    </button>
                    <ul class="dropdown-menu w-100" id="entranceList" aria-labelledby="entranceDropdown">
                      <!-- Entrances will be appended here -->
                    </ul>
                  </div>
                </div>
                <!-- Other form fields -->
                <div class="col-12 text-end">
                  @can('users.store')
                    <button type="submit" class="btn btn-success">დამატება</button>
                  @endcan
                  <a href="{{ route('users.index') }}" class="btn btn-danger">უკან</a>
                </div>
              </form>
            </div>
          </div>
          <!-- list and filter end -->
        </section>
        <!-- users list ends -->

      </div>
    </div>
  </div>
  <!-- END: Content-->
  @push('scripts')
    <script>
      $(document).ready(function() {
        const entranceList = $('#entranceList');
        const entranceDropdownButton = $('#entranceDropdown');
        const oldBlockId = @json(old('block_id'));
        const oldEntrances = @json(old('entrances', []));

        const updateEntrancesButtonText = function() {
          const selectedCount = entranceList.find('input[name="entrances[]"]:checked').length;
          entranceDropdownButton.html(selectedCount > 0 ? `არჩეულია ${selectedCount}` : 'აირჩიე სადაბაზო');
        };

        const loadEntrances = function(blockId) {
          if (!blockId) {
            entranceList.empty();
            entranceDropdownButton.html('აირჩიე სადაბაზო');
            return;
          }

          $.ajax({
            url: `/blocks/${blockId}/entrances`,
            type: 'GET',
            dataType: 'json',
            success: function(data) {
              entranceList.empty();
              $.each(data, function(index, entrance) {
                const isChecked = oldEntrances.includes(String(entrance.id)) || oldEntrances.includes(entrance.id);
                const listItem = `
                                  <li>
                                      <label class="dropdown-item">
                                          <input type="checkbox" name="entrances[]" value="${entrance.id}" class="form-check-input" ${isChecked ? 'checked' : ''}>
                                          ${entrance.entrance_number} სადარბაზო
                                      </label>
                                  </li>`;
                entranceList.append(listItem);
              });
              updateEntrancesButtonText();
            }
          });
        };

        $('#block_id').on('change', function() {
          loadEntrances($(this).val());
        });

        entranceList.on('change', 'input[name="entrances[]"]', function() {
          updateEntrancesButtonText();
        });

        if (oldBlockId) {
          $('#block_id').val(String(oldBlockId)).trigger('change');
        }
      });
    </script>
  @endpush
@endsection