@extends('layouts.simple.master')

@section('main_content')
<div class="container">
    <div class="row mb-3">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-9">
                            <form method="GET" action="{{ route('operations.comercial.competidores.index') }}">
                                <div class="input-group mb-3">
                                    <select name="search" id="search" class="form-control select2">
                                        <option value="">Buscar competidor</option>
                                        @foreach($competitors as $competitor)
                                            <option value="{{ $competitor->nombre }}" {{ $search == $competitor->nombre ? 'selected' : '' }}>
                                                {{ $competitor->nombre }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <button type="submit" class="btn btn-primary">Buscar</button>
                                </div>
                            </form>
                        </div>
                        <div class="col-md-3 text-end">
                            <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addCompetitorModal">Añadir Competidor</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Marco con letras del abecedario y números -->
    <div class="row mb-3">
        <div class="col-12">
            <div class="card">
                <div class="card-body text-center">
                    @foreach(range('A', 'Z') as $letter)
                        <a href="{{ route('operations.comercial.competidores.index', ['initial' => $letter]) }}" class="btn btn-outline-secondary btn-sm">{{ $letter }}</a>
                    @endforeach
                    @foreach(range(0, 9) as $number)
                        <a href="{{ route('operations.comercial.competidores.index', ['initial' => $number]) }}" class="btn btn-outline-secondary btn-sm">{{ $number }}</a>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif

    <table class="table table-striped">
        <thead>
            <tr>
                <th>Nombre</th>
                <th class="text-end">Acciones</th>
            </tr>
        </thead>
        <tbody>
            @forelse($competitors as $competitor)
                <tr>
                    <td>{{ $competitor->nombre }}</td>
                    <td class="text-end">
                        <form action="{{ route('operations.comercial.competidores.destroy', $competitor->id) }}" method="POST" style="display:inline;">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-danger btn-sm">Eliminar</button>
                        </form>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="2" class="text-center">No hay competidores disponibles.</td>
                </tr>
            @endforelse
        </tbody>
    </table>

    <!-- Modal para añadir competidor -->
    <div class="modal fade" id="addCompetitorModal" tabindex="-1" aria-labelledby="addCompetitorModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addCompetitorModalLabel">Añadir Competidor</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ route('operations.comercial.competidores.store') }}" method="POST">
                    @csrf
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="nombre" class="form-label">Nombre</label>
                            <input type="text" class="form-control" id="nombre" name="nombre" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                        <button type="submit" class="btn btn-primary">Guardar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Incluir Select2 -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    $(document).ready(function() {
        $('#search').select2({
            placeholder: 'Buscar competidor',
            allowClear: true,
            width: '100%' // Asegúrate de que el ancho sea del 100%
        });
    });
</script>
@endsection