@extends('layouts.main')

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

@section('title', 'Редактировать акцию: ' . $promotion->name)

@section('content')
    <div class="container mt-3 ms-2">
        <form action="{{ route('promotions.update', $promotion->id) }}" method="post" enctype="multipart/form-data">
            @csrf
            @method('PATCH')
            <div class="row d-flex">
                <div class="col-md-6">
                    <div class="mb-3">
                        <select class="form-select @error('promotion_type') is-invalid @enderror" name="promotion_type" id="promotionTypeSelect">
                            @foreach($promotionType as $value => $label)
                                <option value="{{ $value }}" {{ old('promotion_type', $promotion->promotion_type) == $value ? 'selected' : '' }}>
                                    {{ $label }}
                                </option>
                            @endforeach
                        </select>
                        @error('promotion_type')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="mb-3">
                        <input type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name', $promotion->name) }}" placeholder="Название акции">
                        @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="mb-3">
                        <textarea type="text" id="titleInput" class="form-control @error('title') is-invalid @enderror" name="title" placeholder="Заголовок или подзаголовок">{{ old('title', $promotion->title) }}</textarea>
                        @error('title')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="mb-3">
                        <textarea id="descriptionInput" class="form-control @error('description') is-invalid @enderror" name="description" rows="5" placeholder="Текст акции">{{ old('description', $promotion->description) }}</textarea>
                        @error('description')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="mb-3 position-relative" style="max-width: 300px;">
                        <label for="img" class="form-label">Картинка акции</label>
                        <input accept="image/*" type="file" class="form-control @error('img') is-invalid @enderror" name="img" id="imgUpload" data-saved-image="{{ $promotion->img_url }}">
                        <button type="button" id="clearBtn" class="btn btn-outline-secondary" style="position: absolute; right: -45px; top: 50%; transform: translateY(-10%); z-index: 5;">
                            <span class="bi bi-x-lg"></span>
                        @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', $promotion->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" id="sitePreviewContainer" style="display: none;">
                    <div class="stock">
                        <div class="stock__wrapper">
                            <div class="stock__top">
                                <p class="stock__title">{!! $promotion->title !!}</p>
                                <p class="stock__text">{!! $promotion->description !!}</p>
                            </div>
                            <img src="{{ $promotion->img_url }}" alt="Изображение не выбранно" />
                        </div>
                    </div>
                </div>
                <div class="col-md-6" id="mobilePreviewContainer" style="display: none;">
                    <div class="border rounded p-3 bg-light">
                        <div id="preview" class="text-center mt-3">
                            <img src="{{ $promotion->img_url ?? '' }}" alt="Изображение не выбранно" style="max-height: 300px;" id="mobileImagePreview">
                        </div>
                    </div>
                </div>

            </div>
        </form>
    </div>
@endsection
@section('scripts')
    @parent
    <script>
        const siteTypeValue = '{{ \App\Enums\PromotionType::SITE->value }}';
        const mobileTypeValue = '{{ \App\Enums\PromotionType::MOBILE->value }}';
        const mobilePlugImg = '{{ asset('/adminLTE/images/no-image-text.png') }}';
        const sitePlugImg = '{{ asset('/adminLTE/images/site-promotion-plug.svg') }}';
    </script>
    <script src="{{ asset('adminLTE/dist/js/promotion.js') }}"></script>
@endsection