@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <!-- Кнопка назад -->
                <div class="mb-3">
                    <a href="{{ route('places.index') }}" class="text-decoration-none text-dark fw-bold">
                        ← Назад к списку
                    </a>
                </div>

                <div class="card shadow-none">
                    <div class="card-header fw-bold">
                        Добавить новую локацию
                    </div>

                    <div class="card-body p-4">
                        <form method="POST" action="{{ route('places.store') }}">
                            @csrf

                            <!-- Название -->
                            <div class="mb-4">
                                <label for="name" class="form-label fw-bold">Название места</label>
                                <input type="text" name="name" id="name"
                                       class="form-control @error('name') is-invalid @enderror"
                                       value="{{ old('name') }}" required placeholder="Например: Главный офис">
                                @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Адрес -->
                            <div class="mb-4">
                                <label for="address" class="form-label fw-bold">Полный адрес</label>
                                <input type="text" name="address" id="address"
                                       class="form-control @error('address') is-invalid @enderror"
                                       value="{{ old('address') }}" placeholder="Улица, дом, город">
                                @error('address')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-4">
                                <label for="phone" class="form-label fw-bold">Телефон</label>
                                <input type="text" name="phone" id="phone"
                                       class="form-control @error('phone') is-invalid @enderror"
                                       value="{{ old('phone') }}" placeholder="Телефон">
                                @error('phone')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-4">
                                <label for="url" class="form-label fw-bold">URL</label>
                                <input type="text" name="url" id="url"
                                       class="form-control @error('url') is-invalid @enderror"
                                       value="{{ old('url') }}" placeholder="Адрес сайта">
                                @error('url')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- GPS Координаты -->
                            <div class="col-md-6 mb-4">
                                <label for="coordinates" class="form-label fw-bold">GPS Координаты</label>
                                <div class="input-group">
                                    <span class="input-group-text">
                                        <svg xmlns="http://w3.org" width="16" height="16" fill="currentColor" class="bi bi-pin-map" viewBox="0 0 16 16">
                                            <path fill-rule="evenodd" d="M3.1 11.2a.5.5 0 0 1 .4-.2H6a.5.5 0 0 1 0 1H3.75L1.5 15h13l-2.25-3H10a.5.5 0 0 1 0-1h2.5a.5.5 0 0 1 .4.2l3 4a.5.5 0 0 1-.4.8H.5a.5.5 0 0 1-.4-.8z"/>
                                            <path fill-rule="evenodd" d="M8 1a3 3 0 1 0 0 6 3 3 0 0 0 0-6M4 4a4 4 0 1 1 4.5 3.969V13.5a.5.5 0 0 1-1 0V7.97A4 4 0 0 1 4 4"/>
                                        </svg>
                                    </span>
                                    <input type="text" name="gps" id="gps"
                                           class="form-control @error('gps') is-invalid @enderror"
                                           value="{{ old('gps') }}" placeholder="55.7558, 37.6173">
                                </div>
                                @error('gps')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Описание (необязательно) -->
                            <div class="mb-4">
                                <label for="description" class="form-label fw-bold">Описание</label>
                                <textarea name="description" id="description" rows="3"
                                          class="form-control @error('description') is-invalid @enderror"
                                          placeholder="Дополнительная информация">{{ old('description') }}</textarea>
                            </div>

                            @if ($errors->any())
                                <div class="alert alert-danger border-2 shadow-none mb-4">
                                    <div class="fw-bold mb-2">При заполнении формы возникли ошибки:</div>
                                    <ul class="mb-0">
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

                            <div class="d-grid">
                                <button type="submit" class="btn btn-secondary">
                                    Сохранить локацию
                                </button>
                            </div>


                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const phoneInput = document.getElementById('phone');

            phoneInput.addEventListener('input', function (e) {
                let input = e.target.value.replace(/\D/g, ''); // Удаляем всё, кроме цифр

                // Если первая цифра 8 или 7, убираем её для единообразия
                if (input.startsWith('7') || input.startsWith('8')) {
                    input = input.substring(1);
                }

                let result = '+7';

                if (input.length > 0) {
                    result += ' (' + input.substring(0, 3);
                }
                if (input.length >= 4) {
                    result += ') ' + input.substring(3, 6);
                }
                if (input.length >= 7) {
                    result += '-' + input.substring(6, 8);
                }
                if (input.length >= 9) {
                    result += '-' + input.substring(8, 10);
                }

                e.target.value = result;
            });

            // Блокируем удаление префикса +7
            phoneInput.addEventListener('keydown', function(e) {
                if (e.target.selectionStart < 3 && (e.key === 'Backspace' || e.key === 'Delete')) {
                    e.preventDefault();
                }
            });
        });

        const coordsInput = document.getElementById('gps');
        coordsInput.addEventListener('input', function(e) {
            // Разрешаем только цифры, точку, запятую, минус и пробел
            e.target.value = e.target.value.replace(/[^0-9.,\- ]/g, '');
        });
    </script>
@endpush