@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.update', $image->id) }}" method="post" enctype="multipart/form-data">
            @csrf
            @method('PATCH')
            <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', $image->is_active ? 'on' : '') == '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="{{ $image->img_url }}" alt="Предпросмотр картинки" class="img-fluid rounded" style="max-height: 300px;" id="imagePreview">
                        </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');

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