@extends('layouts.dashboardnew')

@section('content')

{{--
  Vista admin: gestión de podcasts.

  Estilo Bootstrap 5 neutro. Pietro: ajusta clases para igualar al estilo
  del resto del panel admin de Sinergia Red MLM (blog/academia).
--}}

<div class="container-fluid py-4">

    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-1">📻 Podcasts</h4>
            <p class="text-muted mb-0">Gestiona la biblioteca de podcasts de Networker Pro.</p>
        </div>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalAddPodcast">
            <i class="fa-solid fa-plus"></i> Agregar podcast
        </button>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show">
            {{ session('success') }}
            <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">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="card">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th style="width:60px">#</th>
                            <th>Título</th>
                            <th>Categorías</th>
                            <th>Duración</th>
                            <th>Estado</th>
                            <th style="width:160px">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($podcasts as $p)
                            <tr>
                                <td class="text-muted">{{ $p->orden }}</td>
                                <td>
                                    <strong>{{ $p->titulo }}</strong>
                                    <br>
                                    <small class="text-muted">ID: <code>{{ $p->spotify_id }}</code></small>
                                </td>
                                <td>
                                    @foreach((array)$p->categorias as $cat)
                                        <span class="badge bg-light text-dark border me-1">{{ $cat }}</span>
                                    @endforeach
                                </td>
                                <td>{{ $p->duracion ?? '—' }}</td>
                                <td>
                                    @if($p->activo)
                                        <span class="badge bg-success">Activo</span>
                                    @else
                                        <span class="badge bg-secondary">Inactivo</span>
                                    @endif
                                </td>
                                <td>
                                    <button type="button" class="btn btn-sm btn-outline-primary"
                                        data-bs-toggle="modal"
                                        data-bs-target="#modalEditPodcast"
                                        data-id="{{ $p->id }}"
                                        data-titulo="{{ $p->titulo }}"
                                        data-categorias="{{ json_encode($p->categorias) }}"
                                        data-duracion="{{ $p->duracion }}"
                                        data-activo="{{ $p->activo ? 1 : 0 }}">
                                        <i class="fa-solid fa-pen"></i>
                                    </button>

                                    <form action="{{ route('networker-pro.admin.podcasts.toggle', $p->id) }}" method="POST" class="d-inline">
                                        @csrf
                                        <button type="submit" class="btn btn-sm btn-outline-secondary" title="Activar/Desactivar">
                                            <i class="fa-solid {{ $p->activo ? 'fa-eye-slash' : 'fa-eye' }}"></i>
                                        </button>
                                    </form>

                                    <form action="{{ route('networker-pro.admin.podcasts.destroy', $p->id) }}" method="POST" class="d-inline"
                                        onsubmit="return confirm('¿Eliminar este podcast permanentemente?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-outline-danger">
                                            <i class="fa-solid fa-trash"></i>
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="text-center text-muted py-5">
                                    No hay podcasts. Agrega el primero con el botón de arriba.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

{{-- Modal agregar --}}
<div class="modal fade" id="modalAddPodcast" tabindex="-1">
    <div class="modal-dialog">
        <form action="{{ route('networker-pro.admin.podcasts.store') }}" method="POST" class="modal-content">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title">Agregar podcast</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label">URL o ID de Spotify *</label>
                    <input type="text" name="spotify_input" class="form-control"
                        placeholder="https://open.spotify.com/episode/..." required>
                    <small class="text-muted">Pega la URL completa del episodio o solo el ID.</small>
                </div>
                <div class="mb-3">
                    <label class="form-label">Título *</label>
                    <input type="text" name="titulo" class="form-control" maxlength="200" required>
                </div>
                <div class="mb-3">
                    <label class="form-label">Categorías * <small class="text-muted">(selecciona 1 o más)</small></label>
                    <div>
                        @foreach(['red'=>'Red y Afiliados','ventas'=>'Ventas','contenido'=>'Contenido','lectura'=>'Crecimiento Personal','bienestar'=>'Bienestar'] as $val=>$label)
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" name="categorias[]" value="{{ $val }}" id="cat_add_{{ $val }}">
                                <label class="form-check-label" for="cat_add_{{ $val }}">{{ $label }}</label>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="mb-3">
                    <label class="form-label">Duración <small class="text-muted">(opcional)</small></label>
                    <input type="text" name="duracion" class="form-control" placeholder="Ej: 25 min" maxlength="20">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="submit" class="btn btn-primary">Guardar</button>
            </div>
        </form>
    </div>
</div>

{{-- Modal editar --}}
<div class="modal fade" id="modalEditPodcast" tabindex="-1">
    <div class="modal-dialog">
        <form id="formEditPodcast" method="POST" class="modal-content">
            @csrf
            @method('PUT')
            <div class="modal-header">
                <h5 class="modal-title">Editar podcast</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label">Título *</label>
                    <input type="text" name="titulo" id="edit_titulo" class="form-control" maxlength="200" required>
                </div>
                <div class="mb-3">
                    <label class="form-label">Categorías *</label>
                    <div id="edit_cats_wrap">
                        @foreach(['red'=>'Red y Afiliados','ventas'=>'Ventas','contenido'=>'Contenido','lectura'=>'Crecimiento Personal','bienestar'=>'Bienestar'] as $val=>$label)
                            <div class="form-check form-check-inline">
                                <input class="form-check-input edit-cat" type="checkbox" name="categorias[]" value="{{ $val }}" id="cat_edit_{{ $val }}">
                                <label class="form-check-label" for="cat_edit_{{ $val }}">{{ $label }}</label>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="mb-3">
                    <label class="form-label">Duración</label>
                    <input type="text" name="duracion" id="edit_duracion" class="form-control" maxlength="20">
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" name="activo" value="1" id="edit_activo">
                    <label class="form-check-label" for="edit_activo">Activo</label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="submit" class="btn btn-primary">Guardar cambios</button>
            </div>
        </form>
    </div>
</div>

@endsection

@push('script')
<script>
// Modal editar: cargar datos del podcast clickeado
const modalEdit = document.getElementById('modalEditPodcast');
modalEdit.addEventListener('show.bs.modal', function(event) {
    const btn = event.relatedTarget;
    const id = btn.dataset.id;
    const titulo = btn.dataset.titulo;
    const cats = JSON.parse(btn.dataset.categorias || '[]');
    const dur = btn.dataset.duracion || '';
    const activo = btn.dataset.activo === '1';

    document.getElementById('formEditPodcast').action = '/admin/networker-pro/podcasts/' + id;
    document.getElementById('edit_titulo').value = titulo;
    document.getElementById('edit_duracion').value = dur;
    document.getElementById('edit_activo').checked = activo;

    // Marcar las categorías
    document.querySelectorAll('.edit-cat').forEach(cb => {
        cb.checked = cats.includes(cb.value);
    });
});
</script>
@endpush