@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' }} Ring Group</h4>
    <div class="text-secondary small mt-1">Configure ringing strategy, members, and failover behavior.</div>
  </div>
  <div class="mt-2 mt-md-0">
    <a href="{{ route('apps.ring-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.ring-groups.update', $group->id) : route('apps.ring-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">Number (extension)</label>
          <input name="number" value="{{ old('number', $group->number ?? '') }}" class="form-control" required>
          @error('number')<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 col-md-6">
          <label class="form-label">Strategy</label>
          @php $strategy = old('strategy', $group->strategy ?? 'ringall'); @endphp
          <select name="strategy" class="form-select">
            @foreach(['ringall'=>'Ring All','hunt'=>'Hunt','memoryhunt'=>'Memory Hunt','random'=>'Random'] as $k=>$v)
              <option value="{{ $k }}" @selected($strategy===$k)>{{ $v }}</option>
            @endforeach
          </select>
          @error('strategy')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
        </div>

        <div class="col-12 col-md-6">
          <label class="form-label">Ring Timeout (sec)</label>
          <input type="number" min="5" max="120" name="ring_timeout" value="{{ old('ring_timeout', $group->ring_timeout ?? 30) }}" class="form-control">
          @error('ring_timeout')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
        </div>

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

        <div class="col-12 col-md-6">
          <label class="form-label">Prepend to Caller ID</label>
          <input name="prepend_cid" value="{{ old('prepend_cid', $group->prepend_cid ?? '') }}" class="form-control" placeholder="[Sales]">
          @error('prepend_cid')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
        </div>

        <div class="col-12 col-md-6">
          <div class="form-check mt-2">
            <input class="form-check-input" type="checkbox" name="confirm_calls" value="1" id="confirm_calls" @checked(old('confirm_calls', $group->confirm_calls ?? false))>
            <label class="form-check-label" for="confirm_calls">Require callee to press 1 to accept</label>
          </div>
        </div>

        <div class="col-12 col-md-6">
          <div class="form-check mt-2">
            <input class="form-check-input" type="checkbox" name="record_calls" value="1" id="record_calls" @checked(old('record_calls', $group->record_calls ?? true))>
            <label class="form-check-label" for="record_calls">Record calls</label>
            <div class="form-text small">Recommended. Recordings are stored in /var/spool/asterisk/monitor and visible under Recordings.</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="card mb-3">
    <div class="card-header">
      <div class="fw-semibold">Failover</div>
    </div>
    <div class="card-body">
      <div class="row g-3">
        <div class="col-12 col-md-6">
          <label class="form-label">Failover Type</label>
          @php $ft = old('failover_type', $group->failover_type ?? 'none'); @endphp
          <select name="failover_type" class="form-select">
            @foreach(['none'=>'None','extension'=>'Extension','voicemail'=>'Voicemail','external'=>'External Number'] as $k=>$v)
              <option value="{{ $k }}" @selected($ft===$k)>{{ $v }}</option>
            @endforeach
          </select>
          @error('failover_type')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
        </div>

        <div class="col-12 col-md-6">
          <label class="form-label">Failover Value</label>
          <input name="failover_value" value="{{ old('failover_value', $group->failover_value ?? '') }}" class="form-control" placeholder="e.g. 1000 or 1000@default or 0831234567">
          @error('failover_value')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
        </div>
      </div>
    </div>
  </div>

  {{-- Members --}}
  <div x-data="ringMembers()" 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="up(idx)" class="btn btn-outline-secondary btn-sm" title="Move up">Up</button>
          <button type="button" @click="down(idx)" class="btn btn-outline-secondary btn-sm" title="Move down">Down</button>
          <button type="button" @click="remove(idx)" class="btn btn-outline-danger btn-sm">Delete</button>
        </div>
      </template>

      <div class="text-secondary small mt-2">Order matters for Hunt and Memory Hunt.</div>
    </div>
  </div>

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

<script>
function ringMembers(){
  return {
    list: @json(old('members', $members)),
    add(){ this.list.push(''); },
    remove(i){ this.list.splice(i,1); },
    up(i){ if(i>0){ const t=this.list[i-1]; this.list[i-1]=this.list[i]; this.list[i]=t; } },
    down(i){ if(i<this.list.length-1){ const t=this.list[i+1]; this.list[i+1]=this.list[i]; this.list[i]=t; } },
  };
}
</script>
@endsection