@php
  $providerTypes = \App\Models\ProviderType::where('active', true)->pluck('name', 'id')->toArray();
@endphp

<div class="row mt-4">
  <div class="col-12">
    <label>1.2 Third-Party / Service Providers:</label>
    <div id="serviceProvidersContainer">

      @php
        $savedProviders = $account->serviceProviders ?? collect([]);
        $hasProviders = $savedProviders->isNotEmpty();
      @endphp

      @if($hasProviders)
        @foreach($savedProviders as $i => $sp)
          <div style="margin-bottom: 10px" class="row mx-0 service-provider-row">
            <div class="col-md-2 px-1">
              <select name="service_providers[{{ $i }}][provider_type_id]"
                      class="form-control sp-provider-type">
                <option value="">Select provider type</option>
                @foreach($providerTypes as $ptId => $ptName)
                  <option value="{{ $ptId }}" {{ $sp->provider_type_id == $ptId ? 'selected' : '' }}>
                    {{ $ptName }}
                  </option>
                @endforeach
                @if($sp->providerType && !$sp->providerType->active)
                  <option value="{{ $sp->provider_type_id }}" selected>
                    {{ $sp->providerType->name }} (inactive)
                  </option>
                @endif
              </select>
            </div>
            <div class="col-md-2 px-1">
              <input type="text"
                     name="service_providers[{{ $i }}][provider_name]"
                     class="form-control sp-provider-name"
                     placeholder="Provider Name"
                     value="{{ $sp->provider_name }}">
            </div>
            <div class="col-md-2 px-1">
              <input type="text"
                     name="service_providers[{{ $i }}][domain_url]"
                     class="form-control"
                     placeholder="domain.com / URL"
                     value="{{ $sp->domain_url }}">
            </div>
            <div class="col-md-2 px-1">
              <input type="text"
                     name="service_providers[{{ $i }}][notes]"
                     class="form-control"
                     placeholder="Notes"
                     value="{{ $sp->notes }}">
            </div>
            <div class="col-md-1 px-1">
              <button type="button" class="btn btn-danger btn-remove-sp">
                <i class="fa fa-minus"></i>
              </button>
            </div>
          </div>
        @endforeach
      @else
        <div style="margin-bottom: 10px" class="row mx-0 service-provider-row">
          <div class="col-md-2 px-1">
            <select name="service_providers[0][provider_type_id]" class="form-control sp-provider-type">
              <option value="">Select provider type</option>
              @foreach($providerTypes as $ptId => $ptName)
                <option value="{{ $ptId }}">{{ $ptName }}</option>
              @endforeach
            </select>
          </div>
          <div class="col-md-2 px-1">
            <input type="text" name="service_providers[0][provider_name]"
                   class="form-control sp-provider-name" placeholder="Provider Name">
          </div>
          <div class="col-md-2 px-1">
            <input type="text" name="service_providers[0][domain_url]"
                   class="form-control" placeholder="domain.com / URL">
          </div>
          <div class="col-md-2 px-1">
            <input type="text" name="service_providers[0][notes]"
                   class="form-control" placeholder="Notes">
          </div>
          <div class="col-md-1 px-1">
            <button type="button" class="btn btn-danger btn-remove-sp">
              <i class="fa fa-minus"></i>
            </button>
          </div>
        </div>
      @endif

    </div>
  </div>

  <div class="col-12">
    <button type="button" class="btn btn-success btn-add-sp" style="margin-bottom: 15px">
      <i class="fa fa-plus"></i> Add Provider
    </button>
  </div>
</div>

<script type="text/javascript">
  $(function () {
    const spTypes = @json($providerTypes);
    const container = $('#serviceProvidersContainer');

    function getSpIndex() {
      return container.find('.service-provider-row').length;
    }

    function renderSpTypeOptions() {
      let opts = '<option value="">Select provider type</option>';
      $.each(spTypes, function (id, name) {
        opts += `<option value="${id}">${name}</option>`;
      });
      return opts;
    }

    function addSpRow() {
      const i = getSpIndex() + 100;
      container.append(`
            <div style="margin-bottom: 10px" class="row mx-0 service-provider-row">
                <div class="col-md-2 px-1">
                    <select name="service_providers[${i}][provider_type_id]" class="form-control sp-provider-type">
                        ${renderSpTypeOptions()}
                    </select>
                </div>
                <div class="col-md-2 px-1">
                    <input type="text" name="service_providers[${i}][provider_name]"
                           class="form-control sp-provider-name" placeholder="Provider Name">
                </div>
                <div class="col-md-2 px-1">
                    <input type="text" name="service_providers[${i}][domain_url]"
                           class="form-control" placeholder="domain.com / URL">
                </div>
                <div class="col-md-2 px-1">
                    <input type="text" name="service_providers[${i}][notes]"
                           class="form-control" placeholder="Notes">
                </div>
                <div class="col-md-1 px-1">
                    <button type="button" class="btn btn-danger btn-remove-sp">
                        <i class="fa fa-minus"></i>
                    </button>
                </div>
            </div>
        `);
    }

    $(document).on('click', '.btn-add-sp', addSpRow);

    $(document).on('click', '.btn-remove-sp', function () {
      const rows = container.find('.service-provider-row');
      if (rows.length > 1) {
        $(this).closest('.service-provider-row').remove();
      } else {
        $(this).closest('.service-provider-row').find('input, select').val('');
      }
    });
  });
</script>