@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">Create Inbound Route</h4>
    <div class="text-secondary small mt-1">Adds rows in realtime context <code>trunks-in</code>.</div>
  </div>
  <div class="mt-2 mt-md-0">
    <a href="{{ route('trunks.inbound.index') }}" class="btn btn-outline-secondary btn-sm">Back</a>
  </div>
</div>

@if ($errors->any())
  <div class="alert alert-danger">
    <div class="fw-semibold mb-1">Please fix the following:</div>
    <ul class="mb-0">
      @foreach ($errors->all() as $error)
        <li>{{ $error }}</li>
      @endforeach
    </ul>
  </div>
@endif

<form action="{{ route('trunks.inbound.store') }}" method="POST">
  @csrf

  <div class="card">
    <div class="card-body">
      <div class="row g-3">
        <div class="col-12 col-md-6">
          <label class="form-label">Description</label>
          <input type="text" name="description" value="{{ old('description', $seed['description']) }}" class="form-control" placeholder="Sales DID, IVR main, etc.">
        </div>

        <div class="col-12 col-md-6">
          <label class="form-label">DID / Pattern</label>
          <input type="text" name="did" value="{{ old('did', $seed['did']) }}" class="form-control" placeholder="e.g. 0871234567 or _0XXXXXXXXX">
          <div class="text-secondary small mt-1">ZA helper: +27XXXXXXXXX → 0XXXXXXXXX</div>
        </div>

        <div class="col-12 col-md-6">
          <label class="form-label">CID Pattern <span class="text-secondary small">(optional)</span></label>
          <input type="text" name="cid_pattern" value="{{ old('cid_pattern', $seed['cid_pattern']) }}" class="form-control" placeholder="e.g. _027XXXXXXX or leave blank for any">
          <div class="text-secondary small mt-1">Match on caller ID — only route if incoming CID matches this pattern.</div>
        </div>
      </div>
    </div>
  </div>

  <div class="card mt-3">
    <div class="card-header fw-semibold">Caller ID &amp; Features</div>
    <div class="card-body">
      <div class="row g-3">
        <div class="col-12 col-md-4">
          <label class="form-label">Caller ID Modifier</label>
          <select name="cid_modifier" class="form-select" id="cidModSelect">
            @php $cidMod = old('cid_modifier', $seed['cid_modifier']); @endphp
            <option value="none"    @selected($cidMod === 'none')>None</option>
            <option value="prepend" @selected($cidMod === 'prepend')>Prepend</option>
            <option value="strip"   @selected($cidMod === 'strip')>Strip Name</option>
            <option value="replace" @selected($cidMod === 'replace')>Replace</option>
          </select>
        </div>
        <div class="col-12 col-md-8" id="cidModValueWrap">
          <label class="form-label">Modifier Value</label>
          <input type="text" name="cid_modifier_value" value="{{ old('cid_modifier_value', $seed['cid_modifier_value']) }}" class="form-control" placeholder="e.g. [SALES] ">
          <div class="text-secondary small mt-1">For <b>Prepend</b>: text added before caller name. For <b>Replace</b>: overrides name entirely.</div>
        </div>

        <div class="col-12">
          <div class="d-flex flex-wrap gap-4 mb-3">
            <div class="form-check form-switch">
              <input class="form-check-input" type="checkbox" name="cnam_lookup" value="1" id="irCnam" @checked(old('cnam_lookup', $seed['cnam_lookup']))>
              <label class="form-check-label" for="irCnam">CID Lookup (CNAM)</label>
              <div class="text-secondary small">Look up caller name from phonebook before routing.</div>
            </div>
            <div class="form-check form-switch">
              <input class="form-check-input" type="checkbox" name="enable_recording" value="1" id="irRecording" @checked(old('enable_recording', $seed['enable_recording']))>
              <label class="form-check-label" for="irRecording">Enable Recording</label>
              <div class="text-secondary small">Record all calls arriving on this DID.</div>
            </div>
            <div class="form-check form-switch">
              <input class="form-check-input" type="checkbox" name="drop_anonymous" value="1" id="irAnon" @checked(old('drop_anonymous', $seed['drop_anonymous']))>
              <label class="form-check-label" for="irAnon">Drop Anonymous Calls</label>
              <div class="text-secondary small">Reject calls with no/blocked caller ID.</div>
            </div>
          </div>
        </div>

        <div class="col-12" id="cnamPhonebooksWrap">
          <label class="form-label">CNAM Phonebook Sources</label>
          <div class="text-secondary small mb-2">Select which phonebooks to search for caller name. Leave all unchecked to search <b>all enabled</b> phonebooks.</div>
          @php
            $savedPbIds = old('cnam_phonebook_ids', []);
            $seedPb = $seed['cnam_phonebook_ids'] ?? 'all';
            $isAll = ($seedPb === 'all' && empty($savedPbIds));
            if (!is_array($savedPbIds) && $seedPb !== 'all') {
                $savedPbIds = array_map('intval', explode(',', $seedPb));
            }
          @endphp
          <div class="d-flex flex-wrap gap-2">
            @foreach($phonebooks as $pb)
              <label class="btn btn-sm {{ ($isAll || in_array($pb->id, (array)$savedPbIds)) ? '' : 'btn-outline-secondary' }}"
                     style="{{ ($isAll || in_array($pb->id, (array)$savedPbIds)) ? 'background:' . $pb->color . '22;color:' . $pb->color . ';border:1px solid ' . $pb->color . '88;' : '' }}">
                <input type="checkbox" name="cnam_phonebook_ids[]" value="{{ $pb->id }}" class="d-none cnam-pb-check"
                       @checked($isAll || in_array($pb->id, (array)$savedPbIds))>
                <span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:{{ $pb->color }};margin-right:4px;"></span>
                {{ $pb->name }}
                <span class="text-secondary small ms-1">({{ $pb->contacts()->count() }})</span>
              </label>
            @endforeach
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="card mt-3">
    <div class="card-header fw-semibold">Routing Destination</div>
    <div class="card-body">
      <div class="row g-3">
        <div class="col-12">
          <label class="form-label fw-semibold">Routing Method</label>
          <div class="d-flex flex-wrap gap-3">
            @php $routingMethod = old('routing_method', $seed['routing_method'] ?? 'specific'); @endphp
            <div class="form-check">
              <input class="form-check-input" type="radio" name="routing_method" value="specific" id="rmSpecific" @checked($routingMethod === 'specific')>
              <label class="form-check-label" for="rmSpecific">
                <strong>Specific Destination</strong>
                <div class="text-secondary small">Route to a chosen extension, IVR, queue, etc.</div>
              </label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="routing_method" value="direct_did" id="rmDirectDid" @checked($routingMethod === 'direct_did')>
              <label class="form-check-label" for="rmDirectDid">
                <strong>Direct to Extension (DID Range)</strong>
                <div class="text-secondary small">Automatically routes to the matching extension number. Use with DID patterns like <code>_13XX</code>.</div>
              </label>
            </div>
          </div>
        </div>

        {{-- Specific destination fields --}}
        <div class="col-12 col-md-6" id="destTypeWrap">
          <label class="form-label">Destination Type</label>
          <select name="destination_type" class="form-select">
            @php
            $types = ['extension','ivr','queue','ring_group','hangup','time_condition','trunk','custom'];
            $currentType = str_replace('-', '_', (string) old('destination_type', $seed['destination_type']));
          @endphp
          @foreach($types as $t)
            <option value="{{ $t }}" @selected($currentType === $t)>{{ ucfirst(str_replace('_',' ', $t)) }}</option>
          @endforeach
          </select>
        </div>

        <div class="col-12 col-md-6" id="destValueWrap">
          <label class="form-label">Destination Value</label>
          {{-- Plain text fallback used for hangup/custom and as the default --}}
          <input type="text" name="destination_value" id="ir_dest_value_text" value="{{ old('destination_value', $seed['destination_value']) }}" class="form-control" placeholder="e.g. context,exten,1">

          {{-- Extension picker --}}
          <select name="destination_value" id="ir_dest_value_extension" class="form-select" style="display:none">
            <option value="">-- Select Extension --</option>
            @foreach ($extensions ?? [] as $extId => $extLabel)
              <option value="{{ $extId }}" @selected(old('destination_value', $seed['destination_value']) == $extId)>{{ $extLabel }}</option>
            @endforeach
          </select>

          {{-- Queue picker --}}
          <select name="destination_value" id="ir_dest_value_queue" class="form-select" style="display:none">
            <option value="">-- Select Queue --</option>
            @foreach ($queues ?? [] as $qNum => $qLabel)
              <option value="{{ $qNum }}" @selected(old('destination_value', $seed['destination_value']) == $qNum)>{{ $qLabel }}</option>
            @endforeach
          </select>

          {{-- Ring Group picker --}}
          <select name="destination_value" id="ir_dest_value_ring_group" class="form-select" style="display:none">
            <option value="">-- Select Ring Group --</option>
            @foreach ($ringGroups ?? [] as $rgNum => $rgLabel)
              <option value="{{ $rgNum }}" @selected(old('destination_value', $seed['destination_value']) == $rgNum)>{{ $rgLabel }}</option>
            @endforeach
          </select>

          {{-- IVR picker --}}
          <select name="destination_value" id="ir_dest_value_ivr" class="form-select" style="display:none">
            <option value="">-- Select IVR --</option>
            @foreach ($ivrs ?? [] as $ivr)
              <option value="{{ $ivr->id }}" @selected(old('destination_value', $seed['destination_value']) == $ivr->id)>{{ $ivr->name }} @if($ivr->description) — {{ $ivr->description }} @endif</option>
            @endforeach
          </select>

          {{-- Time Condition picker --}}
          <select name="destination_value" id="ir_dest_value_tc" class="form-select" style="display:none">
            <option value="">-- Select Time Condition --</option>
            @foreach ($timeConds ?? [] as $tc)
              <option value="{{ $tc->id }}" @selected(old('destination_value', $seed['destination_value']) == $tc->id)>{{ $tc->name }}</option>
            @endforeach
          </select>

          {{-- Trunk picker --}}
          <select name="destination_value" id="ir_dest_value_trunk" class="form-select" style="display:none">
            <option value="">-- Select Trunk --</option>
            @foreach ($trunks ?? [] as $trunkId => $trunkLabel)
              <option value="{{ $trunkId }}" @selected(old('destination_value', $seed['destination_value']) == $trunkId)>{{ $trunkLabel }}</option>
            @endforeach
          </select>

          <div class="text-secondary small mt-1" id="ir_dest_value_help"></div>
        </div>

        {{-- Info box for Direct DID mode --}}
        <div class="col-12" id="directDidInfo" style="display:none;">
          <div class="alert alert-info mb-0 d-flex align-items-start gap-2">
            <i data-lucide="info" style="width:18px;height:18px;flex-shrink:0;margin-top:2px;"></i>
            <div>
              <strong>Direct to Extension mode:</strong> The DID pattern above will be matched and calls will be routed directly to the extension matching the dialed number.
              For example, if the DID is <code>_13XX</code>, calling 1350 routes to extension 1350, calling 1359 routes to extension 1359, etc.
              <br><span class="text-muted small">No destination value needed — the system uses the matched DID as the extension number.</span>
            </div>
          </div>
        </div>

        <div class="col-12">
          <div class="form-check">
            <input class="form-check-input" type="checkbox" name="enabled" value="1" id="irEnabled" @checked(old('enabled', $seed['enabled']))>
            <label class="form-check-label" for="irEnabled">Route Enabled</label>
          </div>
        </div>
      </div>
    </div>
    <div class="card-footer d-flex justify-content-end gap-2">
      <a href="{{ route('trunks.inbound.index') }}" class="btn btn-outline-secondary btn-sm">Cancel</a>
      <button type="submit" class="btn btn-success btn-sm">Save Route</button>
    </div>
  </div>

  <div class="card mt-3">
    <div class="card-header">Preview: dialplan rows to (up)insert into context="<code>trunks-in</code>"</div>
    <div class="card-body">
      <div class="vstack gap-2">
        @foreach($previewRows as $row)
          <div class="d-flex gap-3">
            <div class="text-secondary" style="width: 160px;">{{ $row['label'] }}</div>
            <div class="fw-semibold">{{ $row['value'] }}</div>
          </div>
        @endforeach
      </div>
    </div>
  </div>
</form>

<script>
(function(){
    const typeSel = document.querySelector('select[name="destination_type"]');
    const help = document.getElementById('ir_dest_value_help');
    const destTypeWrap = document.getElementById('destTypeWrap');
    const destValueWrap = document.getElementById('destValueWrap');
    const directDidInfo = document.getElementById('directDidInfo');
    const rmRadios = document.querySelectorAll('input[name="routing_method"]');

    // Map destination_type → input element id of the picker that should be active.
    const pickerByType = {
        'extension':      'ir_dest_value_extension',
        'queue':          'ir_dest_value_queue',
        'ring_group':     'ir_dest_value_ring_group',
        'ivr':            'ir_dest_value_ivr',
        'time_condition': 'ir_dest_value_tc',
        'trunk':          'ir_dest_value_trunk',
        'hangup':         'ir_dest_value_text',
        'custom':         'ir_dest_value_text',
    };

    const helpByType = {
        'extension':      'Pick the extension this DID should route to.',
        'queue':          'Pick the call-center queue.',
        'ivr':            'Pick the IVR menu.',
        'ring_group':     'Pick the ring group.',
        'time_condition': 'Pick the time condition.',
        'trunk':          'Pick the trunk to forward this DID through.',
        'custom':         'Asterisk Goto target: context,exten,priority',
        'hangup':         'No value needed — caller will be hung up.',
    };

    if (!typeSel) return;

    const allPickerIds = [...new Set(Object.values(pickerByType))];
    const allPickers   = allPickerIds.map(id => document.getElementById(id)).filter(Boolean);

    function syncRoutingMethod() {
        const method = document.querySelector('input[name="routing_method"]:checked')?.value || 'specific';
        if (method === 'direct_did') {
            destTypeWrap.style.display = 'none';
            destValueWrap.style.display = 'none';
            directDidInfo.style.display = '';
        } else {
            destTypeWrap.style.display = '';
            destValueWrap.style.display = '';
            directDidInfo.style.display = 'none';
            syncDestType();
        }
    }

    function syncDestType() {
        const t = typeSel.value;
        const activeId = pickerByType[t] || 'ir_dest_value_text';

        allPickers.forEach(el => {
            el.style.display = 'none';
            el.disabled = true;
            el.name = '';
        });

        const active = document.getElementById(activeId);
        if (active) {
            active.style.display = '';
            active.disabled = false;
            active.name = 'destination_value';
            if (t === 'hangup' && active.tagName === 'INPUT') {
                active.value = 'hangup';
            }
        }

        if (help) help.textContent = helpByType[t] || '';
    }

    rmRadios.forEach(r => r.addEventListener('change', syncRoutingMethod));
    typeSel.addEventListener('change', syncDestType);
    syncRoutingMethod();

    // CID modifier toggle
    const cidModSel  = document.getElementById('cidModSelect');
    const cidModWrap = document.getElementById('cidModValueWrap');
    if (cidModSel && cidModWrap) {
        function syncCidMod() {
            cidModWrap.style.display = (cidModSel.value === 'none' || cidModSel.value === 'strip') ? 'none' : '';
        }
        cidModSel.addEventListener('change', syncCidMod);
        syncCidMod();
    }

    // CNAM toggle: show/hide phonebook selector
    const cnamCheck = document.getElementById('irCnam');
    const pbWrap = document.getElementById('cnamPhonebooksWrap');
    if (cnamCheck && pbWrap) {
        function syncCnamPb() {
            pbWrap.style.display = cnamCheck.checked ? '' : 'none';
        }
        cnamCheck.addEventListener('change', syncCnamPb);
        syncCnamPb();
    }

    // Phonebook pill toggle styling
    document.querySelectorAll('.cnam-pb-check').forEach(function(cb) {
        cb.addEventListener('change', function() {
            const lbl = cb.closest('label');
            const color = lbl.querySelector('span').style.background;
            if (cb.checked) {
                lbl.className = 'btn btn-sm';
                lbl.style.background = color + '22';
                lbl.style.color = color;
                lbl.style.border = '1px solid ' + color + '88';
            } else {
                lbl.className = 'btn btn-sm btn-outline-secondary';
                lbl.style.background = '';
                lbl.style.color = '';
                lbl.style.border = '';
            }
        });
    });
})();
</script>
@endsection