@extends('layouts.dashboard')

@section('title', __('Nuevo recinto'))

@section('content')
    <div class="d-sm-flex align-items-start justify-content-between rt-flex-gap-3 mb-4">
        <div>
            <nav aria-label="breadcrumb" class="mb-1">
                <ol class="breadcrumb bg-transparent p-0 mb-0" style="font-size:.82rem">
                    <li class="breadcrumb-item"><a href="{{ route('dashboard.venues.index') }}">{{ __('Recintos') }}</a></li>
                    <li class="breadcrumb-item active">{{ __('Nuevo') }}</li>
                </ol>
            </nav>
            <h1 class="h3 mb-0 text-gray-800 font-weight-bold">{{ __('Nuevo recinto') }}</h1>
            <p class="small text-muted mb-0">{{ __('Alta completa con dirección y mapa.') }}</p>
        </div>
        <a href="{{ route('dashboard.venues.index') }}" class="btn btn-sm btn-outline-secondary flex-shrink-0">{{ __('Volver') }}</a>
    </div>

    <div class="card shadow-sm border-0">
        <div class="card-body">
            <form id="rt-venue-form" method="post" action="{{ route('dashboard.venues.store') }}" data-google-maps-key="{{ e($googleMapsKey) }}" data-google-maps-map-id="{{ e($googleMapsMapId ?? '') }}">
                @csrf
                @include('dashboard.venues._form', ['venue' => $venue, 'timezones' => $timezones, 'googleMapsKey' => $googleMapsKey])
                <button type="submit" class="btn rt-btn-cherry">{{ __('Guardar recinto') }}</button>
            </form>
        </div>
    </div>
@endsection

@push('head')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.bootstrap4.min.css">
@endpush

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script>
    <script src="{{ asset('js/dashboard-venue-page-map.js') }}?v=4"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var tz = document.getElementById('timezone');
            if (tz && window.TomSelect) {
                new TomSelect(tz, { maxOptions: null, allowEmptyOption: false });
            }
            var country = document.getElementById('country');
            if (country && window.TomSelect) {
                new TomSelect(country, {
                    allowEmptyOption: true,
                    maxOptions: null,
                    placeholder: @json(__('Buscar país o código ISO…')),
                });
            }
            var form = document.getElementById('rt-venue-form');
            var key = form && form.getAttribute('data-google-maps-key');
            if (key && window.rtVenuePageMapInit) {
                window.rtVenuePageMapInit({
                    apiKey: key,
                    mapId: form.getAttribute('data-google-maps-map-id') || '',
                });
            }
        });
    </script>
@endpush
