@extends('layouts.main')

@section('return_btn_url') @include('layouts.return-btn', ['routeName' => 'site.photo-gallery.index']) @endsection

@section('title', 'Добавить фото')

@section('content')
    <div class="container mt-3 ms-2">
        <form action="{{ route('site.photo-gallery.store') }}" method="post" enctype="multipart/form-data">
            @csrf

            <div class="row d-flex">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="img" class="form-label">Выберите изображение</label>
                        <input accept="image/*" type="file" class="form-control @error('img') is-invalid @enderror" name="img" id="img">
                        @error('img')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="mb-3 mt-2 switch-wrapper">
                        <label class="switch-label">
                            <input type="checkbox" name="is_active"
                                   {{ old('is_active') == 'on' ? 'checked' : '' }}
                                   class="switch-checkbox @error('is_active') is-invalid @enderror">
                            <span class="switch-slider"></span>
                            <span class="switch-text">Активно</span>
                        </label>

                        @error('is_active')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <button type="submit" class="btn btn-danger w-25">Добавить</button>
                </div>
                <div class="col-md-6">
                    <div class="border rounded p-3 bg-light">
                        <div id="preview" class="text-center d-flex flex-column align-items-center justify-content-center">
                            <img src="" alt="Предпросмотр картинки" class="img-fluid rounded" style="max-height: 300px; display: none;" id="imagePreview">
                            <p class="text-muted" id="noImageText">Изображение не выбрано</p>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection
@section('scripts')
    @parent
    <script>
        document.getElementById('img').addEventListener('change', function () {
            const file = this.files[0];
            const preview = document.getElementById('imagePreview');
            const noImageText = document.getElementById('noImageText');

            if (file) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    preview.src = e.target.result;
                    preview.style.display = 'block';
                    noImageText.style.display = 'none';
                };
                reader.readAsDataURL(file);
            } else {
                preview.src = '';
                preview.style.display = 'none';
                noImageText.style.display = 'block';
            }
        });
    </script>
@endsection