@extends('layouts.admin')

@section('title')
    @lang('translation.Gestión de Canchas')
@endsection

@section('css')
    <!-- DataTables -->
    <link href="{{ URL::asset('build/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ URL::asset('build/libs/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ URL::asset('build/libs/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('content')
    @component('components.breadcrumb')
        @slot('li_1')
            Gestión
        @endslot
        @slot('title')
            Canchas
        @endslot
    @endcomponent

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <div class="row align-items-center">
                        <div class="col">
                            <h4 class="card-title mb-0">Lista de Canchas</h4>
                        </div>
                        <div class="col-auto">
                            <a href="{{ route('admin.canchas.create') }}" class="btn btn-primary">
                                <i class="bx bx-plus me-1"></i> Nueva Cancha
                            </a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <!-- Filtros -->
                    <div class="row mb-3">
                        <div class="col-md-3">
                            <select class="form-select" id="filtro-categoria" name="categoria_id">
                                <option value="">Todas las categorías</option>
                                @foreach($categorias as $categoria)
                                    <option value="{{ $categoria->id }}" {{ request('categoria_id') == $categoria->id ? 'selected' : '' }}>
                                        {{ $categoria->nombre }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <select class="form-select" id="filtro-estado" name="estado">
                                <option value="">Todos los estados</option>
                                <option value="activa" {{ request('estado') == 'activa' ? 'selected' : '' }}>Activa</option>
                                <option value="inactiva" {{ request('estado') == 'inactiva' ? 'selected' : '' }}>Inactiva</option>
                                <option value="mantenimiento" {{ request('estado') == 'mantenimiento' ? 'selected' : '' }}>Mantenimiento</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <select class="form-select" id="filtro-propietario" name="propietario_id">
                                <option value="">Todos los propietarios</option>
                                @foreach($propietarios as $propietario)
                                    <option value="{{ $propietario->id }}" {{ request('propietario_id') == $propietario->id ? 'selected' : '' }}>
                                        {{ $propietario->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <div class="input-group">
                                <input type="text" class="form-control" id="filtro-buscar" placeholder="Buscar canchas..." value="{{ request('search') }}">
                                <button class="btn btn-outline-secondary" type="button" id="btn-buscar">
                                    <i class="bx bx-search"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Tabla de canchas -->
                    <div class="table-responsive">
                        <table class="table table-bordered dt-responsive nowrap w-100" id="tabla-canchas">
                            <thead class="table-light">
                                <tr>
                                    <th>Imagen</th>
                                    <th>Nombre</th>
                                    <th>Categoría</th>
                                    <th>Propietario</th>
                                    <th>Capacidad</th>
                                    <th>Precio/Hora</th>
                                    <th>Estado</th>
                                    <th>Acciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($canchas as $cancha)
                                    <tr>
                                        <td>
                                            @if($cancha->imagen_principal)
                                                <img src="{{ Storage::url($cancha->imagen_principal) }}" 
                                                     alt="{{ $cancha->nombre }}" 
                                                     class="rounded" 
                                                     style="width: 60px; height: 60px; object-fit: cover;">
                                            @else
                                                <div class="bg-light rounded d-flex align-items-center justify-content-center" 
                                                     style="width: 60px; height: 60px;">
                                                    <i class="bx bx-image text-muted"></i>
                                                </div>
                                            @endif
                                        </td>
                                        <td>
                                            <div>
                                                <h6 class="mb-1">{{ $cancha->nombre }}</h6>
                                                <p class="text-muted mb-0 small">{{ Str::limit($cancha->direccion, 30) }}</p>
                                            </div>
                                        </td>
                                        <td>
                                            @if($cancha->categoria)
                                                <span class="badge" style="background-color: {{ $cancha->categoria->color ?? '#6c757d' }}">
                                                    {{ $cancha->categoria->nombre }}
                                                </span>
                                            @else
                                                <span class="badge bg-secondary">Sin categoría</span>
                                            @endif
                                        </td>
                                        <td>
                                            <div>
                                                <span class="fw-medium">{{ $cancha->propietario->name }}</span>
                                                <br>
                                                <small class="text-muted">{{ $cancha->propietario->email }}</small>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="badge bg-secondary">{{ $cancha->capacidad }} personas</span>
                                        </td>
                                        <td>
                                            <span class="fw-bold text-success">{{ format_currency($cancha->precio_por_hora, 0) }}</span>
                                        </td>
                                        <td>
                                            @switch($cancha->estado)
                                                @case('activa')
                                                    <span class="badge bg-success">Activa</span>
                                                    @break
                                                @case('inactiva')
                                                    <span class="badge bg-danger">Inactiva</span>
                                                    @break
                                                @case('mantenimiento')
                                                    <span class="badge bg-warning">Mantenimiento</span>
                                                    @break
                                            @endswitch
                                        </td>
                                        <td>
                                            <div class="btn-group" role="group" aria-label="Acciones">
                                                <a href="{{ route('admin.canchas.show', $cancha) }}" 
                                                   class="btn btn-outline-info btn-sm" 
                                                   title="Ver Detalles">
                                                    <i class="bx bx-show"></i>
                                                </a>
                                                <a href="{{ route('admin.canchas.edit', $cancha) }}" 
                                                   class="btn btn-outline-primary btn-sm" 
                                                   title="Editar">
                                                    <i class="bx bx-edit"></i>
                                                </a>
                                                <a href="{{ route('admin.canchas.horarios', $cancha) }}" 
                                                   class="btn btn-outline-warning btn-sm" 
                                                   title="Horarios">
                                                    <i class="bx bx-time"></i>
                                                </a>
                                                <button class="btn btn-outline-danger btn-sm" 
                                                        onclick="confirmarEliminacion({{ $cancha->id }}, '{{ $cancha->nombre }}')"
                                                        title="Eliminar">
                                                    <i class="bx bx-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <!-- Paginación -->
                    <div class="row">
                        <div class="col-sm-12 col-md-5">
                            <div class="dataTables_info">
                                Mostrando {{ $canchas->firstItem() }} a {{ $canchas->lastItem() }} de {{ $canchas->total() }} registros
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-7">
                            <div class="dataTables_paginate">
                                {{ $canchas->appends(request()->query())->links('pagination.custom') }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal de confirmación de eliminación -->
    <div class="modal fade" id="modalEliminar" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Confirmar Eliminación</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>¿Está seguro que desea eliminar la cancha <strong id="nombre-cancha"></strong>?</p>
                    <p class="text-muted small">Esta acción no se puede deshacer.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <form id="form-eliminar" method="POST" style="display: inline;">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger">Eliminar</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <!-- DataTables -->
    <script src="{{ URL::asset('build/libs/datatables.net/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ URL::asset('build/libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ URL::asset('build/libs/datatables.net-buttons/js/dataTables.buttons.min.js') }}"></script>
    <script src="{{ URL::asset('build/libs/datatables.net-responsive/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ URL::asset('build/libs/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js') }}"></script>

    <script>
        $(document).ready(function() {
            // Aplicar filtros
            $('#filtro-tipo, #filtro-estado, #filtro-propietario').change(function() {
                aplicarFiltros();
            });

            $('#btn-buscar').click(function() {
                aplicarFiltros();
            });

            $('#filtro-buscar').keypress(function(e) {
                if (e.which == 13) {
                    aplicarFiltros();
                }
            });

            function aplicarFiltros() {
                const params = new URLSearchParams();
                
                const tipo = $('#filtro-tipo').val();
                const estado = $('#filtro-estado').val();
                const propietario = $('#filtro-propietario').val();
                const buscar = $('#filtro-buscar').val();

                if (tipo) params.append('categoria_id', tipo);
                if (estado) params.append('estado', estado);
                if (propietario) params.append('propietario_id', propietario);
                if (buscar) params.append('search', buscar);

                window.location.href = '{{ route("admin.canchas.index") }}?' + params.toString();
            }
        });

        function confirmarEliminacion(id, nombre) {
            $('#nombre-cancha').text(nombre);
            $('#form-eliminar').attr('action', '{{ route("admin.canchas.destroy", "") }}/' + id);
            $('#modalEliminar').modal('show');
        }

        // Mostrar mensajes de éxito/error
        @if(session('success'))
            Swal.fire({
                icon: 'success',
                title: '¡Éxito!',
                text: '{{ session('success') }}',
                timer: 3000,
                showConfirmButton: false
            });
        @endif

        @if(session('error'))
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: '{{ session('error') }}'
            });
        @endif
    </script>
@endsection