@extends('layouts.panel')
@section('content')
    <link rel="stylesheet" href="{{ url('css/rifas.css') }}">

    <div class="alerta-importante">
        <h3>¡IMPORTANTE LEER!</h3>
        <p>"ANTES DE JUGAR OTRA RIFA, PRIMERO DEBES LIMPIAR LAS BOLETAS"</p>
        <p class="rifa-actual">RIFA ACTUAL: {{ $dataRifa->nombre }}</p>
        <a href="{{ route('limpiarBoletas', $dataRifa->id) }}"
           class="btn btn-limpiar-boletas"
           onclick="return confirm('¿Estás seguro de que quieres limpiar los números de boletas?')">
            <i class="material-icons" style="font-size: 18px;">delete_sweep</i>
            Limpiar Números de Boletas
        </a>

        <div id="msj" style="margin-top: 20px;">
            @if (\Session::has('mensaje'))
                <div class="alert alert-primary">
                    {!! \Session::get('mensaje') !!}
                </div>
            @endif

            @if (\Session::has('error'))
                <div class="alert alert-danger">
                    {!! \Session::get('error') !!}
                </div>
            @endif
        </div>
    </div>

    <div class="rifas-container">
        <div class="rifas-header">
            <div class="rifas-title">
                <h2>Módulo Rifas</h2>
            </div>
            <div>
                <a class="btn btn-registrar-rifa" href="{{ url('rifas/create') }}">
                    <i class="material-icons">add_circle</i> Registrar Rifa
                </a>
            </div>
        </div>

        <div class="filtro-busqueda">
            <h3 class="filtro-titulo">Filtro de búsqueda</h3>
            <input type="text" class="form-control" placeholder="Buscar por nombre..." id="searchInput">
        </div>

        <div class="tabla-rifas">
            <table class="table mb-0">
                <thead>
                    <tr>
                        <th style="width: 40px;">#</th>
                        <th>Nombre Completo</th>
                        <th style="width: 150px;">Cantidad Boletas</th>
                        <th style="width: 120px;">Valor</th>
                        <th style="width: 100px;">Estado</th>
                        <th style="width: 130px;">Foto</th>
                        <th style="width: 110px;">Activar</th>
                        <th style="width: 90px;">Editar</th>
                        <th style="width: 100px;">Eliminar</th>
                    </tr>
                </thead>
                <tbody class="list" id="staff02">
                    @forelse ($rifas as $rifa)
                        <tr>
                            <td><b>{{ $loop->iteration }}</b></td>
                            <td style="text-align: left;">{{ $rifa->nombre }}</td>
                            <td>{{ $rifa->boleta_id }}</td>
                            <td>${{ number_format($rifa->valor) }}</td>
                            <td>
                                @if ($rifa->estado == 'activo')
                                    <span class="estado-activo">Activo</span>
                                @else
                                    <span class="estado-inactivo">Inactivo</span>
                                @endif
                            </td>
                            <td>
                                <img src="{{ url('assets/images/imagesRifas/' . $rifa->foto) }}"
                                     class="rifa-foto" alt="Foto de rifa">
                            </td>
                            <td>
                                @if ($rifa->estado == 'activo')
                                    <button class="btn btn-accion btn-inactivar" disabled>
                                        Inactivar
                                    </button>
                                @else
                                    <a href="{{ url('rifas/' . $rifa->id) }}" class="btn btn-accion btn-activar">
                                        Activar
                                    </a>
                                @endif
                            </td>
                            <td>
                                <a href="{{ url('rifas/' . $rifa->id . '/edit') }}" class="btn btn-accion btn-editar">
                                    Editar
                                </a>
                            </td>
                            <td>
                                <a href="#" class="btn btn-accion btn-eliminar"
                                   onclick="if(confirm('¿Estás seguro de que deseas eliminar esta rifa?')){document.getElementById('delete-form-{{ $rifa->id }}').submit();}">
                                    Eliminar
                                </a>
                                <form id="delete-form-{{ $rifa->id }}"
                                      action="{{ route('rifas.destroy', $rifa->id) }}"
                                      method="POST"
                                      style="display: none;">
                                    @csrf
                                    @method('DELETE')
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9" class="text-center">
                                <i class="material-icons" style="font-size: 48px; color: #cbd5e0;">inbox</i>
                                <p style="color: #a0aec0; margin: 10px 0;">Sin resultados</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <script src="{{ url('js/rifas.js') }}"></script>
@endsection