@extends('layouts.app')

@section('content')
<div class="d-flex justify-content-between align-items-center flex-wrap grid-margin mb-3">
  <div>
    <h4 class="mb-0">Edit Time Group: {{ $timegroup->name }}</h4>
    <div class="text-secondary small mt-1">Manage group details and scheduling rules.</div>
  </div>
  <div class="mt-2 mt-md-0">
    <a href="{{ route('applications.timegroups.index') }}" class="btn btn-outline-secondary btn-sm">Back</a>
  </div>
</div>

@if(session('success'))
  <div class="alert alert-success">{{ session('success') }}</div>
@endif

@if ($errors->any())
  <div class="alert alert-danger">
    <ul class="mb-0">
      @foreach ($errors->all() as $error) <li>{{ $error }}</li> @endforeach
    </ul>
  </div>
@endif

<div class="row g-3">
  {{-- Group Details --}}
  <div class="col-12 col-lg-5">
    <div class="card">
      <div class="card-body">
        <h6 class="card-title mb-3">Group Details</h6>
        <form method="POST" action="{{ route('applications.timegroups.update',$timegroup->id) }}">
          @csrf @method('PUT')
          <div class="mb-3">
            <label class="form-label">Name <span class="text-danger">*</span></label>
            <input name="name" value="{{ old('name',$timegroup->name) }}" class="form-control" required>
          </div>
          <div class="mb-3">
            <label class="form-label">Description</label>
            <input name="description" value="{{ old('description',$timegroup->description) }}" class="form-control">
          </div>
          <div class="d-flex gap-2">
            <button type="submit" class="btn btn-primary">Save</button>
          </div>
        </form>

        <hr class="my-3">

        <form method="POST" action="{{ route('applications.timegroups.destroy',$timegroup->id) }}" onsubmit="return confirm('Delete group and all its rules?')">
          @csrf @method('DELETE')
          <button type="submit" class="btn btn-outline-danger btn-sm">
            <i data-feather="trash-2" class="icon-sm"></i> Delete Group
          </button>
        </form>
      </div>
    </div>
  </div>

  {{-- Rules --}}
  <div class="col-12 col-lg-7">
    <div class="card">
      <div class="card-body">
        <h6 class="card-title mb-3">Add Rule</h6>
        <form method="POST" action="{{ route('applications.timegroups.rules.add',$timegroup->id) }}" id="rule-form">
          @csrf
          <div class="row g-3">
            <div class="col-md-4">
              <label class="form-label">Kind</label>
              <select name="kind" id="rule-kind" class="form-select">
                <option value="weekly">Weekly</option>
                <option value="date">Specific Date</option>
                <option value="range">Date Range</option>
              </select>
            </div>

            <div class="col-md-8 rule-field rule-kind-weekly">
              <label class="form-label">Days of Week</label>
              <input type="hidden" name="dow_mask" id="dow-mask-value">
              <div class="d-flex flex-wrap gap-1" id="dow-checkboxes">
                @foreach(['Mon','Tue','Wed','Thu','Fri','Sat','Sun'] as $day)
                  <label class="btn btn-sm btn-outline-secondary dow-btn" style="min-width:52px;font-size:.78rem;padding:4px 8px;">
                    <input type="checkbox" value="{{ $day }}" class="d-none dow-check"> {{ $day }}
                  </label>
                @endforeach
              </div>
              <div class="mt-2 d-flex gap-2">
                <button type="button" class="btn btn-outline-primary btn-sm" style="font-size:.7rem;padding:2px 8px;" onclick="setDow(['Mon','Tue','Wed','Thu','Fri'])">Mon–Fri</button>
                <button type="button" class="btn btn-outline-secondary btn-sm" style="font-size:.7rem;padding:2px 8px;" onclick="setDow(['Mon','Tue','Wed','Thu','Fri','Sat','Sun'])">All Days</button>
                <button type="button" class="btn btn-outline-secondary btn-sm" style="font-size:.7rem;padding:2px 8px;" onclick="setDow(['Sat','Sun'])">Weekends</button>
              </div>
            </div>

            <div class="col-md-8 rule-field rule-kind-date" style="display:none">
              <label class="form-label">Date</label>
              <input type="date" name="date" class="form-control">
            </div>

            <div class="col-md-4 rule-field rule-kind-range" style="display:none">
              <label class="form-label">Start Date</label>
              <input type="date" name="start_date" class="form-control">
            </div>
            <div class="col-md-4 rule-field rule-kind-range" style="display:none">
              <label class="form-label">End Date</label>
              <input type="date" name="end_date" class="form-control">
            </div>

            <div class="col-md-6">
              <label class="form-label">Start Time</label>
              <input type="time" name="start_time" class="form-control" value="00:00">
            </div>
            <div class="col-md-6">
              <label class="form-label">End Time</label>
              <input type="time" name="end_time" class="form-control" value="23:59">
            </div>

            <div class="col-12">
              <button type="submit" class="btn btn-success btn-sm">
                <i data-feather="plus" class="icon-sm"></i> Add Rule
              </button>
            </div>
          </div>
        </form>

        <hr class="my-4">

        <h6 class="card-title mb-3">Existing Rules</h6>
        @if($rules->isEmpty())
          <div class="text-center py-4 text-secondary">No rules defined yet.</div>
        @else
          <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
              <thead>
                <tr>
                  <th>Kind</th>
                  <th>Schedule</th>
                  <th>Time</th>
                  <th class="text-end">Actions</th>
                </tr>
              </thead>
              <tbody>
                @foreach($rules as $r)
                  <tr>
                    <td><span class="badge bg-light text-dark">{{ strtoupper($r->kind) }}</span></td>
                    <td>
                      @if($r->kind==='weekly') {{ $r->dow_mask ?? '—' }}
                      @elseif($r->kind==='date') {{ $r->date }}
                      @elseif($r->kind==='range') {{ $r->start_date }} &rarr; {{ $r->end_date }}
                      @endif
                    </td>
                    <td>{{ $r->start_time ?? '00:00' }} – {{ $r->end_time ?? '23:59' }}</td>
                    <td class="text-end">
                      <form method="POST" action="{{ route('applications.timegroups.rules.delete',[$timegroup->id,$r->id]) }}" onsubmit="return confirm('Delete rule?')" class="d-inline">
                        @csrf @method('DELETE')
                        <button type="submit" class="btn btn-sm btn-outline-danger">Delete</button>
                      </form>
                    </td>
                  </tr>
                @endforeach
              </tbody>
            </table>
          </div>
        @endif
      </div>
    </div>
  </div>
</div>

<script>
(function(){
  const sel = document.getElementById('rule-kind');
  if (!sel) return;
  function sync() {
    const kind = sel.value;
    document.querySelectorAll('.rule-field').forEach(el => {
      el.style.display = el.classList.contains('rule-kind-' + kind) ? '' : 'none';
    });
  }
  sel.addEventListener('change', sync);
  sync();
})();

// Day-of-week checkbox logic
function updateDowMask() {
    const checks = document.querySelectorAll('.dow-check');
    const selected = [];
    checks.forEach(c => { if (c.checked) selected.push(c.value); });
    document.getElementById('dow-mask-value').value = selected.join(',');
}

function setDow(days) {
    document.querySelectorAll('.dow-check').forEach(c => {
        c.checked = days.includes(c.value);
        c.closest('.dow-btn').classList.toggle('active', c.checked);
        c.closest('.dow-btn').classList.toggle('btn-primary', c.checked);
        c.closest('.dow-btn').classList.toggle('btn-outline-secondary', !c.checked);
    });
    updateDowMask();
}

document.querySelectorAll('.dow-check').forEach(c => {
    c.addEventListener('change', function() {
        this.closest('.dow-btn').classList.toggle('active', this.checked);
        this.closest('.dow-btn').classList.toggle('btn-primary', this.checked);
        this.closest('.dow-btn').classList.toggle('btn-outline-secondary', !this.checked);
        updateDowMask();
    });
});
</script>
@endsection