@extends('layouts.backend.master')
@section('admin')
    <div class="content">

        <div class="content-header">
            <div class="leftside-content-header">
                <ul class="breadcrumbs">
                    <li><i class="fa fa-table" aria-hidden="true"></i><a href="#">{{ $dashboard }}</a></li>
                    <li><a>{{ $subTitle }}</a></li>
                </ul>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12">

                {{-- Add Modal (empty $data object) --}}
                @include('backend.modal.factory.gallery', ['data' => new \App\Models\FactoryGallery()])

                <div class="panel">
                    <div class="panel b-primary bt-md">
                        <div class="panel-content p-none">
                            <div class="widget-list list-to-do">
                                <h4 class="list-title">{{ $subTitle }}</h4>
                                <button class="add-item btn btn-o btn-primary btn-xs"
                                        data-toggle="modal" data-target="#addRowModal">
                                    {{ $title }}<i class="fa fa-plus" style="padding-left:10px"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="panel-content">
                        <div class="table-responsive">
                            <table id="basic-table"
                                   class="data-table table table-striped nowrap table-hover"
                                   cellspacing="0" width="100%">
                                <thead>
                                <tr>
                                    <th>Sl:</th>
                                    <th>Media</th>

                                    <th>Type</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach ($dataList as $data)
                                    <tr>
                                        <td>{{ $loop->index + 1 }}</td>

                                        {{-- Media preview — use accessor (already decoded object) --}}
                                        <td>
                                            @php $file = $data->image; @endphp
                                            @if($data->type === 'youtube' && isset($file->video_id))
                                                <img src="https://img.youtube.com/vi/{{ $file->video_id }}/0.jpg"
                                                     width="70" style="border-radius:4px;object-fit:cover;">
                                            @elseif($file && isset($file->original))
                                                @if($data->type === 'video')
                                                    <video width="100" controls>
                                                        <source src="{{ asset($file->original) }}">
                                                    </video>
                                                @else
                                                    <img src="{{ asset($file->original) }}" width="70"
                                                         style="border-radius:4px;object-fit:cover;">
                                                @endif
                                            @else
                                                <span class="text-muted">—</span>
                                            @endif
                                        </td>


                                        <td>
                                        <td>
                                            @if($data->type === 'youtube')
                                                <span class="label label-danger">YouTube</span>
                                            @elseif($data->type === 'video')
                                                <span class="label label-info">Video</span>
                                            @else
                                                <span class="label label-success">Photo</span>
                                            @endif
                                        </td>
                                        </td>
                                        <td>
                                            @if($data->status === 'active')
                                                <span class="label label-primary">Active</span>
                                            @else
                                                <span class="label label-default">Inactive</span>
                                            @endif
                                        </td>

                                        <td style="display:flex;gap:10px;">
                                            <a href="#"
                                               data-toggle="modal"
                                               data-target="#editRowModal{{ $data->id }}"
                                               class="btn btn-warning btn-sm">Edit</a>

                                            <form action="{{ route('admin.factory.gallery.delete', $data->id) }}"
                                                  method="POST" class="d-inline">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-danger btn-sm"
                                                        onclick="return confirm('Are you sure you want to delete this item?')">
                                                    Delete
                                                </button>
                                            </form>
                                        </td>
                                    </tr>

                                    {{-- Edit Modal for this row --}}
                                    @include('backend.modal.factory.gallery', ['data' => $data])
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

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

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            // File input preview (unchanged)
            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 iframe 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 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);
                // Trigger on page load if editing
                updateYouTubePreview();
            });
        });
    </script>

@endsection