@extends('layouts.app')
@section('content')
@php $isEdit = $mode === 'edit'; @endphp

<div class="d-flex justify-content-between align-items-center flex-wrap grid-margin mb-3">
  <div>
    <h4 class="mb-0">{{ $isEdit ? 'Edit' : 'New' }} Pickup Group</h4>
    <div class="text-secondary small mt-1">Configure pickup group tag, details, and members.</div>
  </div>
  <div class="mt-2 mt-md-0">
    <a href="{{ route('apps.pickup-groups.index') }}" class="btn btn-outline-secondary btn-sm">Back</a>
  </div>
</div>

@if ($errors->any())
  <x-toast type="error" message="Please fix the highlighted fields." />
@endif

<form method="POST" action="{{ $isEdit ? route('apps.pickup-groups.update', $group->id) : route('apps.pickup-groups.store') }}">
  @csrf
  @if($isEdit) @method('PUT') @endif

  <div class="card mb-3">
    <div class="card-header">
      <div class="fw-semibold">General</div>
    </div>
    <div class="card-body">
      <div class="row g-3">
        <div class="col-12 col-md-6">
          <label class="form-label">Tag</label>
          <input name="tag" value="{{ old('tag', $group->tag ?? '') }}" class="form-control" placeholder="e.g. sales" required>
          <div class="form-text">Lowercase letters, numbers, dashes/underscores.</div>
          @error('tag')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
        </div>

        <div class="col-12 col-md-6">
          <label class="form-label">Name</label>
          <input name="name" value="{{ old('name', $group->name ?? '') }}" class="form-control" required>
          @error('name')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
        </div>

        <div class="col-12">
          <label class="form-label">Description</label>
          <input name="description" value="{{ old('description', $group->description ?? '') }}" class="form-control" placeholder="Optional">
          @error('description')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
        </div>
      </div>
    </div>
  </div>

  {{-- Members --}}
  <div x-data="pgMembers()" class="card mb-3">
    <div class="card-header d-flex justify-content-between align-items-center">
      <div class="fw-semibold">Members</div>
      <button type="button" @click="add()" class="btn btn-outline-secondary btn-sm">Add Member</button>
    </div>
    <div class="card-body">
      <template x-for="(m, idx) in list" :key="idx">
        <div class="d-flex align-items-center gap-2 mb-2">
          <select
            class="form-select form-select-sm"
            style="max-width: 240px;"
            :name="`members[${idx}]`"
            x-model="list[idx]"
          >
            <option value="">Choose extension</option>
            @foreach($extensions as $ext)
              <option value="{{ $ext }}">{{ $ext }}</option>
            @endforeach
          </select>
          <button type="button" @click="remove(idx)" class="btn btn-outline-danger btn-sm">Delete</button>
        </div>
      </template>

      <div class="text-secondary small mt-2">Members of the same pickup group can pick up each other’s ringing calls.</div>
    </div>
  </div>

  <div class="d-flex gap-2">
    <button type="submit" class="btn btn-primary">
      {{ $isEdit ? 'Save Changes' : 'Create Pickup Group' }}
    </button>
    <a href="{{ route('apps.pickup-groups.index') }}" class="btn btn-outline-secondary">Cancel</a>
  </div>
</form>

<script>
function pgMembers(){
  return {
    list: @json(old('members', $members)),
    add(){ this.list.push(''); },
    remove(i){ this.list.splice(i,1); },
  };
}
</script>
@endsection