{{--
    This partial is included twice per row:
      1) Once BEFORE the table (add modal)  — $data = new Gallery()  → no id
      2) Once INSIDE @foreach (edit modal)  — $data = the row model  → has id

    All preview element IDs are suffixed with the record id (or "new") so
    multiple modals on the same page never share an id.
--}}

@php
    $isEdit    = !empty($data->id);
    $suffix    = $isEdit ? $data->id : 'new';
    $modalId   = $isEdit ? 'editRowModal' . $data->id : 'addRowModal';

    // $data->image is an object (stdClass) because of the custom accessor
    $imageObj  = $isEdit ? ($data->image ?? null) : null;
    $hasImg    = $isEdit && $imageObj && (isset($imageObj->original) || isset($imageObj->video_id));
@endphp

<div class="modal fade" id="{{ $modalId }}"
     tabindex="-1" aria-labelledby="modalLabel_{{ $suffix }}" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">

            <div class="modal-header state modal-primary">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="modalLabel_{{ $suffix }}">
                    {{ $isEdit ? $editTitle : $addTitle }}
                </h4>
            </div>

            <div class="modal-body">
                <div class="panel">
                    <div class="panel-content">
                        <div class="row">
                            <div class="col-md-12">

                                <form method="POST"
                                      action="{{ $isEdit
                                          ? route('admin.concern.gallery.add.update.info', $data->id)
                                          : route('admin.concern.gallery.add.update.info') }}"
                                      enctype="multipart/form-data">
                                    @csrf

                                    {{-- YouTube URL field --}}
                                    <div class="form-group">
                                        <label>YouTube URL (optional)</label>
                                        <input type="url"
                                               name="youtube_url"
                                               id="youtubeUrl_{{ $suffix }}"
                                               class="form-control"
                                               placeholder="https://www.youtube.com/watch?v=..."
                                               value="{{ $isEdit && $data->type === 'youtube' && isset($imageObj->embed_url) ? $imageObj->embed_url : '' }}">
                                        <small class="text-muted">Provide a YouTube link instead of uploading a file.</small>
                                        @error('youtube_url')
                                        <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    {{-- File upload field --}}
                                    <div class="form-group">
                                        <label>Upload Image / Video
                                            @if($isEdit)
                                                <small class="text-muted">(leave blank to keep current)</small>
                                            @endif
                                        </label>
                                        <input type="file"
                                               name="file"
                                               id="fileInput_{{ $suffix }}"
                                               class="form-control"
                                               accept="image/*,video/*">
                                        @error('file')
                                        <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    {{-- Preview box (supports YouTube, image, video) --}}
                                    <div id="previewBox_{{ $suffix }}"
                                         style="margin-bottom:12px; display:{{ $hasImg ? 'block' : 'none' }};">

                                        @if($isEdit && $data->type !== 'youtube' && isset($imageObj->original))
                                            {{-- Uploaded file preview --}}
                                            @if($data->type === 'video')
                                                <video id="videoPreview_{{ $suffix }}" controls style="max-width:300px;display:block;">
                                                    <source src="{{ asset($imageObj->original) }}">
                                                </video>
                                                <img id="imgPreview_{{ $suffix }}" style="max-width:300px;display:none;">
                                            @elseif($data->type === 'photo')
                                                <img id="imgPreview_{{ $suffix }}" src="{{ asset($imageObj->original) }}"
                                                     style="max-width:300px;display:block;">
                                                <video id="videoPreview_{{ $suffix }}" controls style="max-width:300px;display:none;"></video>
                                            @endif
                                            <iframe id="youtubePreview_{{ $suffix }}" style="display:none;"></iframe>

                                        @elseif($isEdit && $data->type === 'youtube' && isset($imageObj->video_id))
                                            {{-- YouTube preview --}}
                                            <iframe id="youtubePreview_{{ $suffix }}"
                                                    width="300" height="200"
                                                    src="https://www.youtube.com/embed/{{ $imageObj->video_id }}"
                                                    frameborder="0" allowfullscreen
                                                    style="display:block;"></iframe>
                                            <img id="imgPreview_{{ $suffix }}" style="display:none;">
                                            <video id="videoPreview_{{ $suffix }}" style="display:none;"></video>

                                        @else
                                            {{-- Empty containers for dynamic JS --}}
                                            <img id="imgPreview_{{ $suffix }}" style="max-width:300px;display:none;">
                                            <video id="videoPreview_{{ $suffix }}" controls style="max-width:300px;display:none;"></video>
                                            <iframe id="youtubePreview_{{ $suffix }}" style="display:none;"></iframe>
                                        @endif
                                    </div>

                                    <div class="form-group">
                                        <label>Concern</label>
                                        <select class="form-control select2" name="concern_id">
                                            @foreach($concerns as $concern)
                                                <option value="{{$concern->id}}"
                                                    @selected(old('concern_id', $data->concern_id ?? $data->concern_id) == $concern->id)>
                                                    {{$concern->title}}
                                                </option>
                                            @endforeach

                                        </select>
                                        @error('status')
                                        <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>


                                    {{-- Status --}}
                                    <div class="form-group">
                                        <label>Status</label>
                                        <select class="form-control select2" name="status">
                                            <option value="active"
                                                @selected(old('status', $data->status ?? 'active') === 'active')>
                                                Active
                                            </option>
                                            <option value="inactive"
                                                @selected(old('status', $data->status ?? '') === 'inactive')>
                                                Inactive
                                            </option>
                                        </select>
                                        @error('status')
                                        <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    <div class="form-group" style="padding-top:10px">
                                        <button type="submit" class="btn btn-primary">Submit</button>
                                    </div>

                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        // File input preview for each modal
        document.querySelectorAll('[id^="fileInput_"]').forEach(function (input) {
            const suffix    = input.id.replace('fileInput_', '');
            const imgEl     = document.getElementById('imgPreview_'   + suffix);
            const videoEl   = document.getElementById('videoPreview_' + suffix);
            const boxEl     = document.getElementById('previewBox_'   + suffix);
            const youtubeIframe = document.getElementById('youtubePreview_' + suffix);

            if (!imgEl || !videoEl || !boxEl) return;

            input.addEventListener('change', function (event) {
                const file = event.target.files[0];
                if (!file) return;

                // Hide YouTube preview if visible
                if (youtubeIframe) youtubeIframe.style.display = 'none';

                const url = URL.createObjectURL(file);
                boxEl.style.display = 'block';

                if (file.type.startsWith('image/')) {
                    imgEl.src = url;
                    imgEl.style.display = 'block';
                    videoEl.style.display = 'none';
                    videoEl.src = '';
                } else if (file.type.startsWith('video/')) {
                    videoEl.src = url;
                    videoEl.style.display = 'block';
                    videoEl.load();
                    imgEl.style.display = 'none';
                    imgEl.src = '';
                }
            });
        });

        // YouTube URL preview
        document.querySelectorAll('[id^="youtubeUrl_"]').forEach(function (input) {
            const suffix = input.id.replace('youtubeUrl_', '');
            const imgEl = document.getElementById('imgPreview_' + suffix);
            const videoEl = document.getElementById('videoPreview_' + suffix);
            const youtubeIframe = document.getElementById('youtubePreview_' + suffix);
            const boxEl = document.getElementById('previewBox_' + suffix);

            if (!youtubeIframe) return;

            function updateYouTubePreview() {
                let url = input.value.trim();
                if (!url) {
                    boxEl.style.display = 'none';
                    return;
                }
                // Extract YouTube video ID
                const pattern = /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/i;
                const match = url.match(pattern);
                if (match && match[1]) {
                    const embedUrl = 'https://www.youtube.com/embed/' + match[1];
                    youtubeIframe.src = embedUrl;
                    youtubeIframe.style.display = 'block';
                    if (imgEl) imgEl.style.display = 'none';
                    if (videoEl) videoEl.style.display = 'none';
                    boxEl.style.display = 'block';
                } else {
                    youtubeIframe.style.display = 'none';
                    boxEl.style.display = 'none';
                }
            }

            input.addEventListener('input', updateYouTubePreview);
            updateYouTubePreview(); // initial load for edit modals
        });
    });
</script>