@extends('layouts.app')

@section('content')
<div class="d-flex justify-content-between align-items-center flex-wrap mb-3">
    <div>
        <h4 class="mb-0">Voice Prompts</h4>
        <div class="text-secondary small mt-1">Upload and manage custom audio recordings for IVRs, announcements, and greetings.</div>
    </div>
</div>

@if (session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">{{ session('success') }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
@endif
@if (session('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">{{ session('error') }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
@endif
@if ($errors->any())
    <div class="alert alert-danger"><ul class="mb-0 ps-3">@foreach ($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul></div>
@endif

<div class="row g-3">
    {{-- Upload form --}}
    <div class="col-12 col-lg-4">
        <div class="card">
            <div class="card-header"><span class="fw-semibold">Upload New Prompt</span></div>
            <div class="card-body">
                <form method="POST" action="{{ route('apps.voice-prompts.store') }}" enctype="multipart/form-data">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Audio File <span class="text-danger">*</span></label>
                        <input type="file" name="file" class="form-control form-control-sm" accept=".wav,.mp3,.gsm,.ogg" required>
                        <div class="form-text">WAV (recommended), MP3, GSM, OGG. Max 10MB. MP3/OGG auto-converts to WAV.</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Label (optional)</label>
                        <input type="text" name="label" class="form-control form-control-sm" placeholder="e.g. welcome-greeting" value="{{ old('label') }}">
                        <div class="form-text">Used as filename. Leave blank to keep original name.</div>
                    </div>
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" name="overwrite" value="1" id="overwrite">
                        <label class="form-check-label" for="overwrite">Overwrite if exists</label>
                    </div>
                    <button type="submit" class="btn btn-primary btn-sm w-100">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align:-2px;margin-right:4px;"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></svg>
                        Upload
                    </button>
                </form>
            </div>
        </div>

        <div class="card mt-3">
            <div class="card-header"><span class="fw-semibold">Tips</span></div>
            <div class="card-body" style="font-size:.82rem;color:#64748b;">
                <p class="mb-2"><strong>Best format:</strong> WAV, 8kHz, 16-bit, Mono</p>
                <p class="mb-2"><strong>Usage:</strong> Reference prompts by filename (without extension) in IVRs and announcements.</p>
                <p class="mb-0"><strong>Path:</strong> <code>/var/lib/asterisk/sounds/custom/</code></p>
            </div>
        </div>
    </div>

    {{-- File list --}}
    <div class="col-12 col-lg-8">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span class="fw-semibold">Uploaded Prompts</span>
                <span class="badge bg-secondary">{{ count($files) }}</span>
            </div>
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead>
                        <tr>
                            <th>Filename</th>
                            <th>Format</th>
                            <th>Size</th>
                            <th>Modified</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($files as $f)
                            <tr>
                                <td>
                                    <code style="font-size:.82rem;">{{ $f['basename'] }}</code>
                                    <span class="text-muted">.{{ $f['extension'] }}</span>
                                </td>
                                <td><span class="badge bg-light text-dark">{{ strtoupper($f['extension']) }}</span></td>
                                <td class="text-muted small">{{ number_format($f['size'] / 1024, 1) }} KB</td>
                                <td class="text-muted small">{{ $f['modified'] }}</td>
                                <td class="text-end">
                                    <div class="d-inline-flex gap-1">
                                        <button class="btn btn-outline-secondary btn-sm" onclick="playPrompt('{{ route('apps.voice-prompts.play', $f['name']) }}')" title="Play">
                                            <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
                                        </button>
                                        <form method="POST" action="{{ route('apps.voice-prompts.destroy', $f['name']) }}" class="d-inline" onsubmit="return confirm('Delete {{ $f['name'] }}?')">
                                            @csrf @method('DELETE')
                                            <button class="btn btn-outline-danger btn-sm" title="Delete">
                                                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-center text-secondary py-4">No custom voice prompts uploaded yet.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

{{-- Audio player --}}
<audio id="promptPlayer" style="display:none;"></audio>

<script>
function playPrompt(url) {
    const player = document.getElementById('promptPlayer');
    if (player.src === url && !player.paused) {
        player.pause();
        return;
    }
    player.src = url;
    player.play();
}
</script>
@endsection