@extends('admin.layouts.app')

@section('title', isset($slider) ? 'Slaydı redaktə et' : 'Yeni slayd')

@php
    $locales = ['az' => 'AZ', 'en' => 'EN', 'ru' => 'RU'];
    $selectedType = old('type', $slider->type ?? 'image');
@endphp

@section('content')
<div class="admin-header-row">
    <div>
        <h1 class="admin-title">{{ isset($slider) ? 'Slaydı redaktə et' : 'Yeni slayd' }}</h1>
        <p class="admin-page-description">Şəkil və ya video seçin, mətnləri yazın və yadda saxlayın.</p>
    </div>
    <a href="{{ route('admin.sliders.index') }}" class="admin-btn admin-btn-secondary">Siyahıya qayıt</a>
</div>

<form method="POST"
      action="{{ isset($slider) ? route('admin.sliders.update', $slider) : route('admin.sliders.store') }}"
      enctype="multipart/form-data"
      class="slider-editor">
    @csrf
    @if(isset($slider)) @method('PUT') @endif

    <section class="admin-card slider-editor__section">
        <div class="slider-editor__section-heading">
            <span>1</span>
            <div>
                <h2>Slayd növü</h2>
                <p>Saytda şəkil, yoxsa video göstəriləcəyini seçin.</p>
            </div>
        </div>

        <div class="slider-type-picker">
            <label class="slider-type-option">
                <input type="radio" name="type" value="image" {{ $selectedType === 'image' ? 'checked' : '' }}>
                <span class="slider-type-option__icon">▧</span>
                <strong>Şəkil</strong>
                <small>JPG, PNG və ya WEBP</small>
            </label>
            <label class="slider-type-option">
                <input type="radio" name="type" value="video" {{ $selectedType === 'video' ? 'checked' : '' }}>
                <span class="slider-type-option__icon">▶</span>
                <strong>Video</strong>
                <small>MP4, WEBM və ya OGG</small>
            </label>
        </div>
    </section>

    <section class="admin-card slider-editor__section">
        <div class="slider-editor__section-heading">
            <span>2</span>
            <div>
                <h2>Media faylı</h2>
                <p>Desktop faylı əsasdır. Mobil fayl əlavə etməsəniz desktop faylı istifadə olunacaq.</p>
            </div>
        </div>

        <div data-media-panel="image" class="slider-media-panel">
            <div class="admin-form-grid">
                <div class="admin-form-group">
                    <label for="desktop_image_file">Desktop şəkli <b>*</b></label>
                    <input type="file" id="desktop_image_file" name="desktop_image_file"
                           accept=".jpg,.jpeg,.png,.webp,image/*" class="admin-form-control"
                           onchange="previewMedia(this, 'desktop-image-preview', 'image')">
                    <p class="admin-help-text">Tövsiyə: 1920×1080, maksimum 10 MB.</p>
                    <div id="desktop-image-preview" class="slider-media-preview">
                        @if(isset($slider) && $slider->desktop_image)
                            <img src="{{ asset('images/' . $slider->desktop_image) }}" alt="">
                        @endif
                    </div>
                </div>
                <div class="admin-form-group">
                    <label for="mobile_image_file">Mobil şəkil <span>(istəyə bağlı)</span></label>
                    <input type="file" id="mobile_image_file" name="mobile_image_file"
                           accept=".jpg,.jpeg,.png,.webp,image/*" class="admin-form-control"
                           onchange="previewMedia(this, 'mobile-image-preview', 'image')">
                    <p class="admin-help-text">Tövsiyə: 1080×1350.</p>
                    <div id="mobile-image-preview" class="slider-media-preview">
                        @if(isset($slider) && $slider->mobile_image)
                            <img src="{{ asset('images/' . $slider->mobile_image) }}" alt="">
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <div data-media-panel="video" class="slider-media-panel">
            <div class="admin-form-grid">
                <div class="admin-form-group">
                    <label for="desktop_video_file">Desktop video <b>*</b></label>
                    <input type="file" id="desktop_video_file" name="desktop_video_file"
                           accept=".mp4,.webm,.ogg,video/mp4,video/webm,video/ogg"
                           class="admin-form-control"
                           onchange="previewMedia(this, 'desktop-video-preview', 'video')">
                    <p class="admin-help-text">Maksimum 100 MB. Ən stabil format MP4 (H.264)-dür.</p>
                    <div id="desktop-video-preview" class="slider-media-preview">
                        @if(isset($slider) && $slider->desktop_video)
                            <video src="{{ asset('videos/' . $slider->desktop_video) }}" muted controls></video>
                        @endif
                    </div>
                </div>
                <div class="admin-form-group">
                    <label for="mobile_video_file">Mobil video <span>(istəyə bağlı)</span></label>
                    <input type="file" id="mobile_video_file" name="mobile_video_file"
                           accept=".mp4,.webm,.ogg,video/mp4,video/webm,video/ogg"
                           class="admin-form-control"
                           onchange="previewMedia(this, 'mobile-video-preview', 'video')">
                    <p class="admin-help-text">Mobil üçün daha yüngül və şaquli video istifadə edə bilərsiniz.</p>
                    <div id="mobile-video-preview" class="slider-media-preview">
                        @if(isset($slider) && $slider->mobile_video)
                            <video src="{{ asset('videos/' . $slider->mobile_video) }}" muted controls></video>
                        @endif
                    </div>
                </div>
                <div class="admin-form-group">
                    <label for="poster_image_file">Video poster şəkli <span>(istəyə bağlı)</span></label>
                    <input type="file" id="poster_image_file" name="poster_image_file"
                           accept="image/*" class="admin-form-control"
                           onchange="previewMedia(this, 'poster-preview', 'image')">
                    <p class="admin-help-text">Video açılana qədər bu şəkil görünür.</p>
                    <div id="poster-preview" class="slider-media-preview">
                        @if(isset($slider) && $slider->poster_image)
                            <img src="{{ asset('images/' . $slider->poster_image) }}" alt="">
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <details class="admin-details">
            <summary>Fayl əvəzinə YouTube, Vimeo və ya birbaşa media linki istifadə et</summary>
            <div class="admin-details__content">
                <div class="admin-form-group">
                    <label for="media_url">Media linki</label>
                    <input type="url" id="media_url" name="media_url" class="admin-form-control"
                           value="{{ old('media_url', $slider->media_url ?? '') }}"
                           placeholder="https://youtube.com/... və ya https://site.com/video.mp4">
                    <input type="hidden" id="media_url_type" name="media_url_type"
                           value="{{ old('media_url_type', $slider->media_url_type ?? $selectedType) }}">
                    <p class="admin-help-text">Link yazsanız fayl yükləmək məcburi deyil.</p>
                </div>
            </div>
        </details>
    </section>

    <section class="admin-card slider-editor__section">
        <div class="slider-editor__section-heading">
            <span>3</span>
            <div>
                <h2>Mətn və keçid</h2>
                <p>Əvvəl Azərbaycan dilini doldurun. Digər dillər istəyə bağlıdır.</p>
            </div>
        </div>

        <div class="admin-tabs">
            @foreach($locales as $code => $label)
                <button type="button" class="admin-tab {{ $loop->first ? 'active' : '' }}" data-locale="{{ $code }}">{{ $label }}</button>
            @endforeach
        </div>

        @foreach($locales as $code => $label)
            @php $suffix = $code === 'az' ? '' : '_' . $code; @endphp
            <div class="admin-tab-panel {{ $loop->first ? 'active' : '' }}" data-locale="{{ $code }}">
                <div class="admin-form-grid">
                    <div class="admin-form-group">
                        <label for="title{{ $suffix }}">Başlıq {{ $code === 'az' ? '*' : '' }}</label>
                        <input type="text" id="title{{ $suffix }}" name="title{{ $suffix }}"
                               class="admin-form-control"
                               value="{{ old('title' . $suffix, $slider->{'title' . $suffix} ?? '') }}"
                               {{ $code === 'az' ? 'required' : '' }}>
                    </div>
                    <div class="admin-form-group">
                        <label for="subtitle{{ $suffix }}">Kiçik başlıq</label>
                        <input type="text" id="subtitle{{ $suffix }}" name="subtitle{{ $suffix }}"
                               class="admin-form-control"
                               value="{{ old('subtitle' . $suffix, $slider->{'subtitle' . $suffix} ?? '') }}">
                    </div>
                    <div class="admin-form-group">
                        <label for="button_text{{ $suffix }}">Düymə mətni</label>
                        <input type="text" id="button_text{{ $suffix }}" name="button_text{{ $suffix }}"
                               class="admin-form-control"
                               value="{{ old('button_text' . $suffix, $slider->{'button_text' . $suffix} ?? '') }}">
                    </div>
                </div>
            </div>
        @endforeach

        <div class="admin-form-group">
            <label for="button_link">Düymə / slayd linki</label>
            <input type="text" id="button_link" name="button_link" class="admin-form-control"
                   value="{{ old('button_link', $slider->button_link ?? '') }}"
                   placeholder="/az/products və ya https://...">
        </div>
    </section>

    <section class="admin-card slider-editor__section">
        <div class="slider-editor__section-heading">
            <span>4</span>
            <div>
                <h2>Yayımlama</h2>
                <p>Slaydın sırasını və aktivliyini seçin.</p>
            </div>
        </div>

        <div class="admin-form-grid">
            <div class="admin-form-group">
                <label for="sort_order">Sıra</label>
                <input type="number" id="sort_order" name="sort_order" class="admin-form-control"
                       value="{{ old('sort_order', $slider->sort_order ?? 0) }}">
            </div>
            <div class="admin-form-group slider-editor__checks">
                <label class="admin-form-check">
                    <input type="checkbox" name="is_active" value="1" {{ old('is_active', $slider->is_active ?? true) ? 'checked' : '' }}>
                    <span>Slayd aktivdir</span>
                </label>
            </div>
        </div>

        <details class="admin-details">
            <summary>Əlavə ayarlar</summary>
            <div class="admin-details__content">
                <div class="admin-form-grid">
                    <div class="admin-form-group">
                        <label for="start_at">Başlama tarixi</label>
                        <input type="datetime-local" id="start_at" name="start_at" class="admin-form-control"
                               value="{{ old('start_at', isset($slider) && $slider->start_at ? $slider->start_at->format('Y-m-d\TH:i') : '') }}">
                    </div>
                    <div class="admin-form-group">
                        <label for="end_at">Bitmə tarixi</label>
                        <input type="datetime-local" id="end_at" name="end_at" class="admin-form-control"
                               value="{{ old('end_at', isset($slider) && $slider->end_at ? $slider->end_at->format('Y-m-d\TH:i') : '') }}">
                    </div>
                    <div class="admin-form-group">
                        <label for="overlay_opacity">Tünd örtük (%)</label>
                        <input type="number" min="0" max="100" id="overlay_opacity" name="overlay_opacity"
                               class="admin-form-control" value="{{ old('overlay_opacity', $slider->overlay_opacity ?? 50) }}">
                    </div>
                    <div class="admin-form-group">
                        <label for="seo_alt">SEO alt mətni</label>
                        <input type="text" id="seo_alt" name="seo_alt" class="admin-form-control"
                               value="{{ old('seo_alt', $slider->seo_alt ?? '') }}">
                    </div>
                </div>
                <input type="hidden" name="slide_color" value="{{ old('slide_color', $slider->slide_color ?? '') }}">
                <input type="hidden" name="text_color" value="{{ old('text_color', $slider->text_color ?? '') }}">
                <input type="hidden" name="tracking_name" value="{{ old('tracking_name', $slider->tracking_name ?? '') }}">
                <label class="admin-form-check">
                    <input type="checkbox" name="overlay_active" value="1" {{ old('overlay_active', $slider->overlay_active ?? true) ? 'checked' : '' }}>
                    <span>Tünd örtük aktivdir</span>
                </label>
                <label class="admin-form-check">
                    <input type="checkbox" name="scroll_push" value="1" {{ old('scroll_push', $slider->scroll_push ?? false) ? 'checked' : '' }}>
                    <span>Scroll keçid effekti</span>
                </label>
            </div>
        </details>
    </section>

    <div class="slider-editor__actions">
        <button type="submit" class="admin-btn admin-btn-primary">Yadda saxla</button>
        <a href="{{ route('admin.sliders.index') }}" class="admin-btn admin-btn-secondary">Ləğv et</a>
    </div>
</form>

<script>
    const MAX_VIDEO_SIZE = 100 * 1024 * 1024;

    function selectedSliderType() {
        return document.querySelector('input[name="type"]:checked').value;
    }

    function updateMediaPanels() {
        const type = selectedSliderType();
        document.querySelectorAll('[data-media-panel]').forEach(function (panel) {
            panel.hidden = panel.dataset.mediaPanel !== type;
        });
        document.getElementById('media_url_type').value = type;
        document.querySelectorAll('.slider-type-option').forEach(function (option) {
            option.classList.toggle('active', option.querySelector('input').checked);
        });
    }

    document.querySelectorAll('input[name="type"]').forEach(function (input) {
        input.addEventListener('change', updateMediaPanels);
    });

    document.querySelectorAll('.admin-tab').forEach(function (tab) {
        tab.addEventListener('click', function () {
            const locale = this.dataset.locale;
            document.querySelectorAll('.admin-tab').forEach(t => t.classList.remove('active'));
            document.querySelectorAll('.admin-tab-panel').forEach(p => p.classList.remove('active'));
            this.classList.add('active');
            document.querySelector('.admin-tab-panel[data-locale="' + locale + '"]').classList.add('active');
        });
    });

    function previewMedia(input, previewId, mediaType) {
        const preview = document.getElementById(previewId);
        const file = input.files && input.files[0];
        if (!file) return;

        if (mediaType === 'video' && file.size > MAX_VIDEO_SIZE) {
            input.value = '';
            preview.innerHTML = '<p class="slider-file-error">Video 100 MB-dan böyük ola bilməz.</p>';
            return;
        }

        const url = URL.createObjectURL(file);
        preview.innerHTML = mediaType === 'video'
            ? '<video src="' + url + '" muted controls></video>'
            : '<img src="' + url + '" alt="">';
    }

    updateMediaPanels();
</script>
@endsection