@extends('adminlte::page')

@section('title', 'Añadir Localización')

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

@section('content_header')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            @include('components.breadcrumbs', ['items' => ['Eventos' => '#', 'Localizaciones' => 'event-locations.index', 'Crear' => 'active']])
        </div>
    </div>
    <div class="row align-items-center justify-content-between mt-2">
        <div class="col-auto">
            <h1><i class="fas fa-map-marker-alt mr-2"></i>Nueva Localización</h1>
        </div>
    </div>
</div>
@stop

@section('content')
<div class="container-fluid">
    @include('components.alerts')

    <form action="{{ route('event-locations.store') }}" method="POST" id="locationForm">
        @csrf
        
        <input type="hidden" name="wp_id" value="{{ old('wp_id') }}">

        <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="locTab" 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="locTabContent">
                    
                    {{-- 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 de la Localización *</label>
                                <input type="text" 
                                       name="name" 
                                       id="name" 
                                       class="form-control @error('name') is-invalid @enderror" 
                                       value="{{ old('name') }}" 
                                       required 
                                       autofocus>
                                @error('name')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <div class="card-footer">
                <button type="submit" class="btn btn-primary float-right">
                    <i class="fas fa-save mr-1"></i> Guardar Localización
                </button>
                <a href="{{ route('event-locations.index') }}" class="btn btn-default">Cancelar</a>
                <input type="hidden" name="panel_info" value="Nueva localización creada desde panel.">
            </div>
        </div>
    </form>
</div>
@stop