@extends('layouts.dashboard')

@section('title', __('Editar 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">{{ __('Editar') }}</li>
                </ol>
            </nav>
            <h1 class="h3 mb-0 text-gray-800 font-weight-bold">{{ $venue->name }}</h1>
            <p class="small text-muted mb-0">
                {{ __('Slug:') }} <code>{{ $venue->slug }}</code>
                @if ($venue->catalog_review_status === \App\Enums\CatalogReviewStatus::PendingReview)
                    <span class="badge badge-warning ml-2">{{ __('En revisión') }}</span>
                @else
                    <span class="badge badge-success ml-2">{{ __('Aprobada') }}</span>
                @endif
            </p>
        </div>
        <div class="d-flex rt-flex-gap-2 flex-shrink-0">
            @can('delete', $venue)
                @if ($venue->events_count === 0)
                    <form action="{{ route('dashboard.venues.destroy', $venue) }}" method="post" class="d-inline"
                          onsubmit="return confirm(@json(__('¿Eliminar este recinto?')));">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-sm btn-outline-danger">{{ __('Eliminar') }}</button>
                    </form>
                @endif
            @endcan
            <a href="{{ route('dashboard.venues.index') }}" class="btn btn-sm btn-outline-secondary">{{ __('Listado') }}</a>
        </div>
    </div>

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