@extends('adminlte::page')

@section('title', 'Editar Organizador')

@section('css')
    <style>
        .tab-pane { padding-top: 20px; }
    </style>
@stop

@section('content_header')
<div class="container-fluid">
    @include('components.alerts')
    <div class="row">
        <div class="col-12">
            @include('components.breadcrumbs', ['items' => ['Eventos' => '#', 'Organizadores' => 'event-organizers.index', 'Editar' => 'active']])
        </div>
    </div>
    <div class="row align-items-center justify-content-between mt-2">
        <div class="col-auto">
            <h1><i class="fas fa-user-tie mr-2 text-primary"></i>Editar Organizador: {{ $eventOrganizer->name }}</h1>
        </div>
    </div>
</div>
@stop

@section('content')
<div class="container-fluid">
    <form action="{{ route('event-organizers.update', $eventOrganizer->id) }}" method="POST">
        @csrf
        @method('PUT')
        
        <div class="card card-primary card-outline card-tabs">
            <div class="card-header p-0 pt-1 border-bottom-0">
                <ul class="nav nav-tabs" id="orgTab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="pill" href="#general" role="tab">Información Principal</a>
                    </li>
                </ul>
            </div>
            
            <div class="card-body">
                <div class="tab-content" id="orgTabContent">
                    
                    {{-- TAB 1: INFORMACIÓN PRINCIPAL --}}
                    <div class="tab-pane fade show active" id="general" role="tabpanel">
                        <div class="row">
                            <div class="col-md-12 form-group">
                                <label for="name">Nombre / Entidad *</label>
                                <input type="text" 
                                       name="name" 
                                       id="name" 
                                       class="form-control @error('name') is-invalid @enderror" 
                                       value="{!! old('name', $eventOrganizer->name) !!}" 
                                       required 
                                       autofocus>
                                @error('name')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-6 form-group">
                                <label for="email">Email de Contacto</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="fas fa-envelope"></i></span>
                                    </div>
                                    <input type="email" name="email" id="email" class="form-control" value="{{ old('email', $eventOrganizer->email) }}">
                                </div>
                            </div>

                            <div class="col-md-6 form-group">
                                <label for="phone">Teléfono</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="fas fa-phone"></i></span>
                                    </div>
                                    <input type="text" name="phone" id="phone" class="form-control" value="{{ old('phone', $eventOrganizer->phone) }}">
                                </div>
                            </div>

                            <div class="col-md-12 form-group">
                                <label for="url">Sitio Web (URL)</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="fas fa-globe"></i></span>
                                    </div>
                                    <input type="url" name="url" id="url" class="form-control" placeholder="https://..." value="{{ old('url', $eventOrganizer->url) }}">
                                </div>
                            </div>
                        </div>

                        @if($eventOrganizer->wp_id)
                        <div class="row mt-2">
                            <div class="col-12">
                                <div class="alert alert-light border shadow-sm">
                                    <i class="fab fa-wordpress text-secondary mr-2"></i>
                                    <strong>ID de WordPress vinculado:</strong> 
                                    <span class="badge badge-secondary p-2 ml-1">{{ $eventOrganizer->wp_id }}</span>
                                </div>
                            </div>
                        </div>
                        @endif
                    </div>

                </div>
            </div>

            <div class="card-footer row">
                <div class="col-md-3 form-group">
                    <a href="{{ route('event-organizers.index') }}" class="btn btn-default shadow-sm">Cancelar</a>
                </div>
                <div class="col-md-9 form-group">
                    <div class="input-group">
                        <input type="text" name="panel_info" required class="form-control" placeholder="Indica los cambios que has efectuado para facilitar su verificación">
                        <div class="input-group-append">
                            <button type="submit" class="btn btn-primary shadow-sm">
                                <i class="fas fa-sync mr-1"></i> Actualizar Organizador
                            </button>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
    </form>
</div>
@stop

@section('js')
<script>
    $(document).ready(function () {
        // Estructura lista
    });
</script>
@stop