@extends('contentNavbarLayout')

@section('title', 'Edit Properties for ' . $recordType->name)

@section('content')
<div class="card">
  <h5 class="card-header">
    Edit Properties – {{ $recordType->name }}
  </h5>

  <div class="card-body">
    <form action="{{ route('record-types.update-properties', $recordType->id) }}" method="POST">
      @csrf
      @method('PUT')

      <div class="mb-3">
        <label class="form-label">Assign Properties</label>
        <table class="table table-bordered">
          <thead>
            <tr>
              <th>Select</th>
              <th>Property Name</th>
              <th>Data Type</th>
              <th>Required</th>
            </tr>
          </thead>
          <tbody>
            @foreach($allProperties as $property)
              @php
                $isAssigned = $recordType->properties->contains($property->id);
                $isRequired = false;
                if ($isAssigned) {
                  $pivot = $recordType->properties->find($property->id)->pivot ?? null;
                  $isRequired = $pivot && $pivot->is_required;
                }
              @endphp
              <tr>
                <td>
                  <input
                    type="checkbox"
                    class="form-check-input property-checkbox"
                    name="properties[]"
                    value="{{ $property->id }}"
                    id="prop{{ $property->id }}"
                    {{ $isAssigned ? 'checked' : '' }}
                    onchange="toggleRequired({{ $property->id }})">
                </td>
                <td>
                  <label for="prop{{ $property->id }}" class="form-label mb-0">
                    {{ $property->name }}
                  </label>
                </td>
                <td>{{ ucfirst($property->data_type) }}</td>
                <td>
                  <div class="form-check form-switch">
                    <input
                      type="checkbox"
                      class="form-check-input required-toggle"
                      name="required[{{ $property->id }}]"
                      id="required{{ $property->id }}"
                      {{ $isRequired ? 'checked' : '' }}
                      {{ !$isAssigned ? 'disabled' : '' }}>
                    <label for="required{{ $property->id }}" class="form-check-label" id="label{{ $property->id }}" style="color: {{ $isRequired ? 'red' : 'gray' }};">
                      {{ $isRequired ? 'Required' : 'Optional' }}
                    </label>
                  </div>
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>

      <script>
        function toggleRequired(propertyId) {
          const checkbox = document.getElementById('prop' + propertyId);
          const toggle = document.getElementById('required' + propertyId);
          const label = document.getElementById('label' + propertyId);
          
          if (checkbox.checked) {
            toggle.disabled = false;
          } else {
            toggle.disabled = true;
            toggle.checked = false;
            label.textContent = 'Optional';
            label.style.color = 'gray';
          }
        }

        // Update label when toggle is clicked
        document.querySelectorAll('.required-toggle').forEach(function(toggle) {
          toggle.addEventListener('change', function() {
            const propertyId = this.id.replace('required', '');
            const label = document.getElementById('label' + propertyId);
            
            if (this.checked) {
              label.textContent = 'Required';
              label.style.color = 'red';
            } else {
              label.textContent = 'Optional';
              label.style.color = 'gray';
            }
          });
        });

        // Before form submission, temporarily enable all toggles so their values get submitted
        document.querySelector('form').addEventListener('submit', function(e) {
          // Find all property checkboxes that are checked
          document.querySelectorAll('.property-checkbox:checked').forEach(function(propCheckbox) {
            const propertyId = propCheckbox.value;
            const toggle = document.getElementById('required' + propertyId);
            
            // Temporarily enable the toggle so its value gets submitted
            if (toggle && toggle.disabled) {
              toggle.disabled = false;
            }
          });
        });
      </script>

      <div class="mt-3">
        <button type="submit" class="btn btn-primary">Save Changes</button>
        <a href="{{ route('record-types.index') }}" class="btn btn-label-secondary">Cancel</a>
      </div>
    </form>
  </div>
</div>
@endsection