@extends('contentNavbarLayout')

@section('title', 'Assign Properties')

@section('content')
<div class="card">
  {{-- Flash Message --}}
    @if(session('success'))
      <div class="alert alert-success alert-dismissible fade show m-3" role="alert">
        <i class="mdi mdi-check-circle-outline me-1"></i>
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
    @endif

    {{-- Global Error List --}}
    @if ($errors->any())
      <div class="alert alert-danger alert-dismissible fade show m-3" role="alert">
        <i class="mdi mdi-alert-circle-outline me-1"></i>
        <strong>Whoops!</strong> Please fix the following:
        <ul class="mb-0 mt-1 ps-3">
          @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
          @endforeach
        </ul>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
    @endif

  <h5 class="card-header">Step 2: Assign Properties for <b>{{ $recordType->name }}</b></h5>

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

      <div class="table-responsive text-nowrap">
        <table class="table table-bordered">
          <thead class="table-secondary">
            <tr>
              <th style="width: 50px;">
                <input type="checkbox" id="select-all">
              </th>
              <th>Property Name</th>
              <th>Description</th>
              <th>Data Type</th>
              <th style="width: 120px;">Required</th>
            </tr>
          </thead>
          <tbody>
            @foreach($properties as $property)
              <tr>
                <td>
                  <input type="checkbox" name="properties[]" value="{{ $property->id }}" class="property-checkbox">
                </td>
                <td>{{ $property->name }}</td>
                <td>{{ $property->description }}</td>
                <td>
                  <span class="badge bg-label-primary">{{ $property->data_type }}</span>
                </td>
                <td class="text-center">
                  <div class="form-check form-switch d-flex justify-content-center">
                    <input class="form-check-input required-toggle" type="checkbox" 
                           name="required[{{ $property->id }}]" value="1"
                           data-property-id="{{ $property->id }}" disabled>
                    <label class="form-check-label ms-2 required-label-{{ $property->id }}" style="font-size: 0.8rem; color: #999;">
                      Optional
                    </label>
                  </div>
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>

      <div class="mt-3">
        <button type="submit" class="btn btn-primary">
          <i class="mdi mdi-content-save me-1"></i> Save Properties
        </button>
      </div>
    </form>
  </div>
</div>

{{-- Select All Script --}}
<script>
  // Select/Deselect All Properties
  document.getElementById('select-all').addEventListener('change', function(e) {
    let checkboxes = document.querySelectorAll('input[name="properties[]"]');
    checkboxes.forEach(cb => {
      cb.checked = e.target.checked;
      // Enable/disable required toggle based on property selection
      toggleRequiredSwitch(cb);
    });
  });

  // Enable/disable required toggle when individual property is selected
  document.querySelectorAll('.property-checkbox').forEach(checkbox => {
    checkbox.addEventListener('change', function() {
      toggleRequiredSwitch(this);
    });
  });

  // Function to enable/disable and update required toggle
  function toggleRequiredSwitch(propertyCheckbox) {
    const propertyId = propertyCheckbox.value;
    const requiredToggle = document.querySelector(`.required-toggle[data-property-id="${propertyId}"]`);
    const requiredLabel = document.querySelector(`.required-label-${propertyId}`);
    
    if (propertyCheckbox.checked) {
      // Enable the required toggle when property is selected
      requiredToggle.disabled = false;
      requiredToggle.checked = false; // Default to optional
      requiredLabel.textContent = 'Optional';
      requiredLabel.style.color = '#999';
    } else {
      // Disable and reset when property is deselected
      requiredToggle.disabled = true;
      requiredToggle.checked = false;
      requiredLabel.textContent = 'Optional';
      requiredLabel.style.color = '#999';
    }
  }

  // Update label when required toggle is changed
  document.querySelectorAll('.required-toggle').forEach(toggle => {
    toggle.addEventListener('change', function() {
      const propertyId = this.dataset.propertyId;
      const label = document.querySelector(`.required-label-${propertyId}`);
      
      if (this.checked) {
        label.textContent = 'Required';
        label.style.color = '#dc3545'; // Red color for required
      } else {
        label.textContent = 'Optional';
        label.style.color = '#999'; // Gray color for optional
      }
    });
  });
</script>
@endsection