@extends('backend.layouts.app')

@section('title', 'Galleries')

@push('style')
    <style>
        .media-card {
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            background: #fff;
            overflow: hidden;
            transition: 0.2s;
            position: relative;
        }

        .media-card:hover {
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
            transform: translateY(-3px);
        }

        .media-preview {
            height: 180px;
            background: #f3f4f6;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            position: relative;
        }

        .media-thumb {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .media-overlay {
            position: absolute;
            top: 8px;
            left: 8px;
            right: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 20;
        }

        .status-dot {
            width: 14px;
            height: 14px;
            border-radius: 50%;
        }

        .icon-btn {
            background: white !important;
            border: none;
            border-radius: 50%;
            width: 32px;
            height: 32px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
            cursor: pointer;
        }
    </style>
@endpush

@section('content')
    <div class="card">
        <div class="card-body">

            <h5 class="card-header">Galleries</h5>

            <div class="row mb-3">
                <div class="col-sm-12 d-flex justify-content-between align-items-center">

                    <a href="{{ route('admin.folders.show', $folder->slug) }}" class="btn btn-secondary">
                        <i class="bx bx-arrow-back me-1"></i> Back
                    </a>

                    <div class="d-flex gap-2">
                        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#uploadImageModal">
                            <i class="bx bx-upload me-1"></i> Upload Images
                        </button>

                        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addLinkModal">
                            <i class="bx bx-link-alt me-1"></i> Add Link
                        </button>
                    </div>

                </div>
            </div>

            <div class="row g-3">
                @forelse ($galleries as $item)
                    <div class="col-md-4 col-lg-3 col-sm-6">
                        <div class="media-card">

                            <!-- Overlay -->
                            <div class="media-overlay">
                                <span id="status-dot-{{ $item->id }}"
                                    class="status-dot {{ $item->is_active ? 'bg-success' : 'bg-danger' }}"></span>

                                <div class="dropdown">
                                    <button class="icon-btn" data-bs-toggle="dropdown">
                                        <i class='bx bx-dots-vertical-rounded'></i>
                                    </button>

                                    <ul class="dropdown-menu dropdown-menu-end shadow">
                                        <li>
                                            <a href="javascript:void(0)" class="dropdown-item statusToggle"
                                                data-id="{{ $item->id }}" id="status-text-{{ $item->id }}">
                                                <i class="bx bx-check-circle me-2"></i>
                                                {{ $item->is_active ? 'Deactivate' : 'Activate' }}
                                            </a>
                                        </li>

                                        <li>
                                            <form action="{{ route('admin.galleries.destroy', $item->id) }}" method="POST"
                                                class="show_confirm">
                                                @csrf
                                                @method('DELETE')
                                                <button class="dropdown-item text-danger" type="submit">
                                                    <i class="bx bx-trash me-1"></i> Delete
                                                </button>
                                            </form>
                                        </li>

                                    </ul>
                                </div>

                            </div>

                            <div class="media-preview">

                                @if ($item->type === 'image')
                                    <img src="{{ asset($item->image) }}" class="media-thumb">
                                @elseif ($item->type === 'video_link')
                                    <iframe class="media-thumb" src="https://www.youtube.com/embed/{{ $item->video_link }}"
                                        frameborder="0" allowfullscreen></iframe>
                                @endif

                            </div>

                        </div>
                    </div>
                @empty
                    <h6 class="text-center">No media found.</h6>
                @endforelse

                <div class="mt-4">
                    {{ $galleries->links() }}
                </div>

            </div>

            <!-- UPLOAD IMAGE MODAL -->
            <div class="modal fade" id="uploadImageModal">
                <div class="modal-dialog">
                    <form class="modal-content" method="POST" action="{{ route('admin.galleries.store') }}"
                        enctype="multipart/form-data">
                        @csrf
                        <div class="modal-header">
                            <h5 class="modal-title">Upload Images</h5>
                            <button class="btn-close" data-bs-dismiss="modal"></button>
                        </div>

                        <input type="hidden" name="type" value="image">
                        <input type="hidden" name="subfolder_id" value="{{ $subfolder->id }}">

                        <div class="modal-body">
                            <label class="fw-bold mb-1">Select Images <span class="text-danger">*</span></label>
                            <input type="file" name="images[]" class="form-control" required multiple accept="image/*">
                        </div>

                        <div class="modal-footer">
                            <button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                            <button class="btn btn-primary">Save</button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- ADD VIDEO LINK -->
            <div class="modal fade" id="addLinkModal">
                <div class="modal-dialog">
                    <form class="modal-content" method="POST" action="{{ route('admin.galleries.store') }}">
                        @csrf
                        <div class="modal-header">
                            <h5 class="modal-title">Add Video Link</h5>
                            <button class="btn-close" data-bs-dismiss="modal"></button>
                        </div>

                        <input type="hidden" name="type" value="video_link">
                        <input type="hidden" name="subfolder_id" value="{{ $subfolder->id }}">

                        <div class="modal-body">
                            <label class="fw-bold mb-1">Video URL <span class="text-danger">*</span></label>
                            <input type="text" name="link" placeholder="Enter video url" class="form-control"
                                required>
                        </div>

                        <div class="modal-footer">
                            <button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                            <button class="btn btn-primary">Save</button>
                        </div>

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

        </div>
    </div>
@endsection

@push('script')
    <script>
        $(document).on('click', '.show_confirm', function(event) {
            event.preventDefault();
            var form = $(this).closest('form');

            Swal.fire({
                title: 'Are you sure?',
                text: "This action cannot be undone!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) form.submit();
            });
        });

        $(document).on("click", ".statusToggle", function(e) {
            e.preventDefault();
            e.stopPropagation();

            let id = $(this).data("id");
            let dot = $("#status-dot-" + id);
            let text = $("#status-text-" + id);
            text.html('<i class="bx bx-loader-alt bx-spin me-1"></i> Processing...');

            $.ajax({
                type: "GET",
                url: "/admin/galleries/status/" + id,
                dataType: "json",

                success: function(res) {
                    if (res.data.is_active == 1) {
                        dot.removeClass("bg-danger").addClass("bg-success");
                        text.html('<i class="bx bx-check-circle me-2"></i> Deactivate');
                    } else {
                        dot.removeClass("bg-success").addClass("bg-danger");
                        text.html('<i class="bx bx-check-circle me-2"></i> Activate');
                    }

                    Swal.fire("Status Updated!", "", "success");
                },
                error: function() {
                    Swal.fire("Error!", "Something went wrong", "error");
                }
            });
        });
    </script>
@endpush