@extends('adminlte::page')

@section('title', 'Nuevo equipo')

@section('content_header')
    <h1>Nuevo equipo</h1>
@stop

@section('content')
    @if($errors->any())
        <div class="alert alert-danger">
            <strong>Corrige los siguientes errores:</strong>
            <ul class="mb-0 mt-2">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('equipos.store') }}" method="POST" class="card card-primary">
        @csrf

        <div class="card-body">
            <div class="form-group">
                <label>Proyecto</label>
                <select name="proyecto_id" class="form-control" required>
                    <option value="">Seleccione</option>
                    @foreach($proyectos as $proyecto)
                        <option value="{{ $proyecto->id }}" {{ old('proyecto_id') == $proyecto->id ? 'selected' : '' }}>
                            {{ $proyecto->nombre }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="form-group">
                <label>Nombre del equipo</label>
                <input
                    type="text"
                    name="nombre"
                    value="{{ old('nombre') }}"
                    class="form-control"
                    required
                >
            </div>

            <div class="form-group">
                <label>Color</label>

                @php
                    $colorActual = old('color', '#ffffff');

                    if (empty($colorActual)) {
                        $colorActual = '#ffffff';
                    }

                    if (!str_starts_with($colorActual, '#')) {
                        $colorActual = '#' . $colorActual;
                    }
                @endphp

                <div class="d-flex align-items-center" style="gap: 10px;">
                    <div
                        id="preview_color"
                        title="Vista previa del color"
                        style="
                            width: 45px;
                            height: 38px;
                            border: 1px solid #ced4da;
                            border-radius: 4px;
                            background-color: {{ $colorActual }};
                        ">
                    </div>

                    <input
                        type="color"
                        id="selector_color"
                        value="{{ $colorActual }}"
                        class="form-control"
                        style="
                            width: 70px;
                            height: 38px;
                            padding: 3px;
                            cursor: pointer;
                        "
                    >

                    <input
                        type="text"
                        name="color"
                        id="color"
                        value="{{ $colorActual }}"
                        class="form-control"
                        readonly
                        style="
                            background-color: #ffffff;
                            color: #000000;
                            max-width: 180px;
                        "
                    >
                </div>

                <small class="text-muted">
                    Selecciona el color del equipo. El valor se guardará automáticamente.
                </small>
            </div>

            <div class="form-group">
                <label>Tipo</label>
                <select name="tipo" class="form-control">
                    <option value="amigo" {{ old('tipo') == 'amigo' ? 'selected' : '' }}>
                        Amigo
                    </option>
                    <option value="enemigo" {{ old('tipo') == 'enemigo' ? 'selected' : '' }}>
                        Enemigo
                    </option>
                    <option value="neutral" {{ old('tipo') == 'neutral' ? 'selected' : '' }}>
                        Neutral
                    </option>
                </select>
            </div>
        </div>

        <div class="card-footer">
            <button class="btn btn-primary">
                <i class="fas fa-save"></i> Guardar
            </button>

            <a href="{{ route('equipos.index') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> Volver
            </a>
        </div>
    </form>
@stop

@section('js')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const selectorColor = document.getElementById('selector_color');
        const inputColor = document.getElementById('color');
        const previewColor = document.getElementById('preview_color');

        if (selectorColor && inputColor && previewColor) {
            selectorColor.addEventListener('input', function () {
                inputColor.value = selectorColor.value;
                previewColor.style.backgroundColor = selectorColor.value;
            });
        }
    });
</script>
@stop