@csrf

<div class="card mb-3">
    <div class="card-body">
        <h6 class="card-title mb-3">General</h6>
        <div class="row g-3">
            <div class="col-md-6">
                <label class="form-label">Name <span class="text-danger">*</span></label>
                <input type="text" name="name" class="form-control" value="{{ old('name', $ivr->name) }}" required pattern="[A-Za-z0-9_\-]+">
                <div class="text-secondary small mt-1">Letters, digits, underscore, dash. Used as dialplan context.</div>
            </div>
            <div class="col-md-6">
                <label class="form-label">Description</label>
                <input type="text" name="description" class="form-control" value="{{ old('description', $ivr->description) }}">
            </div>

            <div class="col-md-6">
                <label class="form-label">Greeting Sound</label>
                <select name="greeting" class="form-select">
                    <option value="">-- None --</option>
                    @foreach ($availableSounds as $key => $label)
                        <option value="{{ $key }}" @selected(old('greeting', $ivr->greeting) === $key)>{{ $label }}</option>
                    @endforeach
                </select>
                <div class="mt-2">
                    <label class="form-label small text-secondary">Or upload a new greeting (.wav, .mp3, .gsm, .ogg)</label>
                    <input type="file" name="greeting_upload" class="form-control" accept=".wav,.mp3,.gsm,.ogg">
                </div>
            </div>
            <div class="col-md-6">
                <label class="form-label">Invalid Sound</label>
                <input type="text" name="invalid_sound" class="form-control" value="{{ old('invalid_sound', $ivr->invalid_sound ?: 'invalid') }}">
                <div class="text-secondary small mt-1">Asterisk sound file played when invalid key is pressed.</div>
            </div>

            <div class="col-md-3">
                <label class="form-label">Timeout (sec)</label>
                <input type="number" name="timeout" class="form-control" value="{{ old('timeout', $ivr->timeout ?: 5) }}" min="1" max="60" required>
            </div>
            <div class="col-md-3">
                <label class="form-label">Max Retries</label>
                <input type="number" name="max_retries" class="form-control" value="{{ old('max_retries', $ivr->max_retries ?: 3) }}" min="1" max="10" required>
            </div>
            <div class="col-md-6 d-flex align-items-end gap-4">
                <div class="form-check">
                    <input type="hidden" name="direct_dial" value="0">
                    <input type="checkbox" name="direct_dial" value="1" id="direct_dial" class="form-check-input" @checked(old('direct_dial', $ivr->direct_dial))>
                    <label for="direct_dial" class="form-check-label">Allow direct extension dial</label>
                </div>
                <div class="form-check">
                    <input type="hidden" name="enabled" value="0">
                    <input type="checkbox" name="enabled" value="1" id="enabled" class="form-check-input" @checked(old('enabled', $ivr->enabled ?? true))>
                    <label for="enabled" class="form-check-label">Enabled</label>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card mb-3">
    <div class="card-body">
        <h6 class="card-title mb-3">Menu Options</h6>
        <div class="text-secondary small mb-3">Map each digit (0-9, *, #) to a destination.</div>

        <div id="ivr-options">
            @php
                $optRows = old('options', $options->map(fn($o) => [
                    'digit' => $o->digit,
                    'destination_type' => $o->destination_type,
                    'destination_value' => $o->destination_value,
                    'description' => $o->description,
                ])->toArray());
                if (empty($optRows)) $optRows = [];
            @endphp

            @foreach ($optRows as $idx => $opt)
                <div class="row g-2 align-items-end mb-2 ivr-option-row">
                    <div class="col-md-1">
                        <label class="form-label small">Digit</label>
                        <input type="text" name="options[{{ $idx }}][digit]" class="form-control" value="{{ $opt['digit'] ?? '' }}" maxlength="2" required>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label small">Destination Type</label>
                        <select name="options[{{ $idx }}][destination_type]" class="form-select">
                            @foreach ($destTypes as $k => $v)
                                <option value="{{ $k }}" @selected(($opt['destination_type'] ?? '') === $k)>{{ $v }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label small">Destination</label>
                        <select name="options[{{ $idx }}][destination_value]" class="form-select form-select-sm ivr-dest-select">
                            <option value="">-- select --</option>
                            @foreach ($destOptions ?? [] as $dtype => $dopts)
                                @foreach ($dopts as $o)
                                    <option value="{{ $o['id'] }}" data-type="{{ $dtype }}" @selected(($opt['destination_type'] ?? '') === $dtype && (string)($opt['destination_value'] ?? '') === (string)$o['id'])>{{ $o['label'] }}</option>
                                @endforeach
                            @endforeach
                        </select>
                        <input type="text" class="form-control form-control-sm ivr-dest-text" placeholder="Enter number" value="{{ in_array($opt['destination_type'] ?? '', ['external','voicemail','hangup']) ? ($opt['destination_value'] ?? '') : '' }}" style="{{ in_array($opt['destination_type'] ?? '', ['external','voicemail','hangup']) ? '' : 'display:none' }}">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label small">Description</label>
                        <input type="text" name="options[{{ $idx }}][description]" class="form-control" value="{{ $opt['description'] ?? '' }}">
                    </div>
                    <div class="col-md-1">
                        <button type="button" class="btn btn-outline-danger btn-sm w-100" onclick="this.closest('.ivr-option-row').remove()">×</button>
                    </div>
                </div>
            @endforeach
        </div>

        <button type="button" class="btn btn-outline-primary btn-sm mt-2" id="add-option-btn">+ Add Option</button>
    </div>
</div>

<div class="card mb-3">
    <div class="card-body">
        <h6 class="card-title mb-3">Fallback Destinations</h6>
        <div class="row g-3">
            <div class="col-md-6">
                <label class="form-label">Timeout Destination (after max retries)</label>
                <div class="row g-2">
                    <div class="col-5">
                        <select name="timeout_destination_type" class="form-select">
                            @foreach ($destTypes as $k => $v)
                                <option value="{{ $k }}" @selected(old('timeout_destination_type', $ivr->timeout_destination_type) === $k)>{{ $v }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-7">
                        <input type="text" name="timeout_destination_value" class="form-control" value="{{ old('timeout_destination_value', $ivr->timeout_destination_value) }}" placeholder="e.g. 2000">
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <label class="form-label">Invalid Destination (after max retries)</label>
                <div class="row g-2">
                    <div class="col-5">
                        <select name="invalid_destination_type" class="form-select">
                            @foreach ($destTypes as $k => $v)
                                <option value="{{ $k }}" @selected(old('invalid_destination_type', $ivr->invalid_destination_type) === $k)>{{ $v }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-7">
                        <input type="text" name="invalid_destination_value" class="form-control" value="{{ old('invalid_destination_value', $ivr->invalid_destination_value) }}" placeholder="e.g. 2000">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="d-flex gap-2">
    <button type="submit" class="btn btn-primary">Save IVR</button>
    <a href="{{ route('ivrs.index') }}" class="btn btn-outline-secondary">Cancel</a>
</div>

<script>
(function(){
    const destTypes = @json($destTypes);
    const destOptions = @json($destOptions ?? []);
    const freeTextTypes = ['external', 'voicemail', 'hangup'];

    function buildValueField(name, selectedType, selectedValue) {
        selectedType = selectedType || 'extension';
        selectedValue = selectedValue || '';
        const isFreeText = freeTextTypes.includes(selectedType);
        const options = destOptions[selectedType] || [];

        let selectHtml = `<select name="${name}" class="form-select form-select-sm ivr-dest-select" ${isFreeText ? 'style="display:none"' : ''}>
            <option value="">-- select --</option>`;
        for (const [type, opts] of Object.entries(destOptions)) {
            for (const o of opts) {
                const sel = (!isFreeText && String(o.id) === String(selectedValue) && type === selectedType) ? 'selected' : '';
                selectHtml += `<option value="${o.id}" data-type="${type}" ${sel} ${type !== selectedType ? 'style="display:none"' : ''}>${o.label}</option>`;
            }
        }
        selectHtml += '</select>';

        const inputHtml = `<input type="text" name="${name}" class="form-control form-control-sm ivr-dest-text" placeholder="Enter number" value="${isFreeText ? selectedValue : ''}" ${isFreeText ? '' : 'style="display:none"'}>`;

        return selectHtml + inputHtml;
    }

    function syncValueField(row) {
        const typeSel = row.querySelector('select[name*="destination_type"]');
        const valSelect = row.querySelector('.ivr-dest-select');
        const valInput = row.querySelector('.ivr-dest-text');
        if (!typeSel || !valSelect || !valInput) return;

        const type = typeSel.value;
        const isFreeText = freeTextTypes.includes(type);
        const baseName = valSelect.name || valInput.name;

        if (isFreeText) {
            valSelect.style.display = 'none';
            valSelect.removeAttribute('name');
            valInput.style.display = '';
            valInput.name = baseName || valSelect.getAttribute('name');
            if (type === 'hangup') valInput.value = 'hangup';
        } else {
            valSelect.style.display = '';
            valSelect.name = baseName || valInput.getAttribute('name');
            valInput.style.display = 'none';
            valInput.removeAttribute('name');
            // Show only options for selected type
            valSelect.querySelectorAll('option[data-type]').forEach(o => {
                o.style.display = (o.dataset.type === type) ? '' : 'none';
            });
            // Reset if current selection doesn't match type
            const cur = valSelect.options[valSelect.selectedIndex];
            if (cur && cur.dataset && cur.dataset.type && cur.dataset.type !== type) valSelect.value = '';
        }
    }

    // Initialize existing rows
    document.querySelectorAll('.ivr-option-row').forEach(row => {
        const typeSel = row.querySelector('select[name*="destination_type"]');
        if (typeSel) {
            typeSel.addEventListener('change', () => syncValueField(row));
            syncValueField(row);
        }
    });

    // Add new option button
    const btn = document.getElementById('add-option-btn');
    const container = document.getElementById('ivr-options');

    btn?.addEventListener('click', () => {
        const idx = container.querySelectorAll('.ivr-option-row').length + Math.floor(Math.random()*10000);
        const opts = Object.entries(destTypes).map(([k,v]) => `<option value="${k}">${v}</option>`).join('');
        const valueField = buildValueField(`options[${idx}][destination_value]`, 'extension', '');

        const html = `
            <div class="row g-2 align-items-end mb-2 ivr-option-row">
                <div class="col-md-1">
                    <label class="form-label small">Digit</label>
                    <input type="text" name="options[${idx}][digit]" class="form-control" maxlength="2" required>
                </div>
                <div class="col-md-3">
                    <label class="form-label small">Destination Type</label>
                    <select name="options[${idx}][destination_type]" class="form-select">${opts}</select>
                </div>
                <div class="col-md-3">
                    <label class="form-label small">Destination</label>
                    ${valueField}
                </div>
                <div class="col-md-4">
                    <label class="form-label small">Description</label>
                    <input type="text" name="options[${idx}][description]" class="form-control">
                </div>
                <div class="col-md-1">
                    <button type="button" class="btn btn-outline-danger btn-sm w-100" onclick="this.closest('.ivr-option-row').remove()">×</button>
                </div>
            </div>`;
        container.insertAdjacentHTML('beforeend', html);

        // Attach event listener to new row
        const newRow = container.lastElementChild;
        const newTypeSel = newRow.querySelector('select[name*="destination_type"]');
        if (newTypeSel) {
            newTypeSel.addEventListener('change', () => syncValueField(newRow));
            syncValueField(newRow);
        }
    });
})();
</script>