@extends('layouts.admin.master')

@section('title')
    {{ $viewTitle ?? 'View Gallery' }}
@endsection

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col">
                <div class="card dashboard-custom-card">
                    <div class="card-body">
                        <div class="card-header custom-card-header p-0 border-0 d-flex justify-content-between align-items-center">
                            <h4>{{ $viewTitle ?? 'View Gallery' }}</h4>
                            <div class="d-flex gap-2">
                                @if ($gallery->type == 'featured')
                                    <a href="{{ route('admin.gallery.edit', $gallery->id) }}" class="btn btn-primary">
                                        <i class="fas fa-edit"></i> Edit
                                    </a>
                                    <a href="{{ route('admin.gallery.index', ['type' => $gallery->type]) }}" class="btn btn-info">
                                        <i class="fas fa-backward"></i> Back
                                    </a>
                                @else
                                    <a href="{{ route('admin.gallery.sponsored.index') }}" class="btn btn-info">
                                        <i class="fas fa-backward"></i> Back
                                    </a>
                                @endif
                            </div>
                        </div>

                        <div class="row mt-4">
                            <div class="col-md-8">
                                {{-- Media Display --}}
                                <div class="card">
                                    <div class="card-body">
                                        <div class="gallery-media text-center">
                                            @if($gallery->resource_type === 'image' && $gallery->file_path)
                                                <img src="{{ asset('storage/' . $gallery->file_path) }}"
                                                    alt="{{ $gallery->title }}"
                                                    class="img-fluid rounded shadow-sm"
                                                    style="max-height: 500px; object-fit: contain;">
                                            @elseif($gallery->resource_type === 'video')
                                                @if($gallery->youtube_link)
                                                    @php
                                                        // Extract YouTube video ID
                                                        preg_match('/[?&]v=([^&]+)/', $gallery->youtube_link, $matches);
                                                        $videoId = $matches[1] ?? null;
                                                        
                                                        if (!$videoId) {
                                                            preg_match('/youtu\.be\/([^?]+)/', $gallery->youtube_link, $matches);
                                                            $videoId = $matches[1] ?? null;
                                                        }
                                                    @endphp
                                                    @if($videoId)
                                                        <div class="embed-responsive embed-responsive-16by9">
                                                            <iframe class="embed-responsive-item rounded shadow-sm" 
                                                                src="https://www.youtube.com/embed/{{ $videoId }}" 
                                                                allowfullscreen></iframe>
                                                        </div>
                                                        <p class="mt-2">
                                                            <a href="{{ $gallery->youtube_link }}" target="_blank" class="btn btn-sm btn-info">
                                                                <i class="fab fa-youtube"></i> Open in YouTube
                                                            </a>
                                                        </p>
                                                    @else
                                                        <p class="text-muted">Invalid YouTube link</p>
                                                    @endif
                                                @elseif($gallery->file_path)
                                                    <video controls class="w-100 rounded shadow-sm" style="max-height: 500px;">
                                                        <source src="{{ asset('storage/' . $gallery->file_path) }}">
                                                        Your browser does not support the video tag.
                                                    </video>
                                                @else
                                                    <p class="text-muted">No video available</p>
                                                @endif
                                            @else
                                                <p class="text-muted">No media available</p>
                                            @endif
                                        </div>
                                    </div>
                                </div>

                                {{-- Description --}}
                                @if($gallery->description)
                                    <div class="card mt-3">
                                        <div class="card-body">
                                            <h5 class="card-title">Description</h5>
                                            <p class="mb-0">{{ $gallery->description }}</p>
                                        </div>
                                    </div>
                                @endif
                            </div>

                            <div class="col-md-4">
                                {{-- Gallery Details --}}
                                <div class="card">
                                    <div class="card-body">
                                        <h5 class="card-title">Details</h5>
                                        
                                        <div class="detail-item mb-3">
                                            <label class="font-weight-bold">Title:</label>
                                            <p class="mb-0">{{ $gallery->title }}</p>
                                        </div>

                                        <div class="detail-item mb-3">
                                            <label class="font-weight-bold">Type:</label>
                                            <p class="mb-0">
                                                @if($gallery->type === 'featured')
                                                    <span class="badge badge-primary">Featured</span>
                                                @else
                                                    <span class="badge badge-success">Sponsored</span>
                                                @endif
                                            </p>
                                        </div>

                                        <div class="detail-item mb-3">
                                            <label class="font-weight-bold">Resource Type:</label>
                                            <p class="mb-0">
                                                @if($gallery->resource_type === 'image')
                                                    <span class="badge badge-info"><i class="fas fa-image"></i> Image</span>
                                                @else
                                                    <span class="badge badge-primary"><i class="fas fa-video"></i> Video</span>
                                                @endif
                                            </p>
                                        </div>

                                        @if($gallery->sponsor)
                                            <div class="detail-item mb-3">
                                                <label class="font-weight-bold">Sponsor:</label>
                                                <p class="mb-0">{{ $gallery->sponsor->company_name }}</p>
                                            </div>
                                        @endif

                                        @if($gallery->redirect_url)
                                            <div class="detail-item mb-3">
                                                <label class="font-weight-bold">Advertisement Link:</label>
                                                <p class="mb-0">
                                                    <a href="{{ $gallery->redirect_url }}" target="_blank" class="btn btn-sm btn-outline-primary">
                                                        <i class="fas fa-external-link-alt"></i> {{ Str::limit($gallery->redirect_url, 40) }}
                                                    </a>
                                                </p>
                                            </div>
                                        @endif

                                        <div class="detail-item mb-3">
                                            <label class="font-weight-bold">Display Order:</label>
                                            <p class="mb-0">{{ $gallery->order }}</p>
                                        </div>

                                        <div class="detail-item mb-3">
                                            <label class="font-weight-bold">Active Status:</label>
                                            <p class="mb-0">
                                                @if($gallery->is_active)
                                                    <span class="badge badge-success">Active</span>
                                                @else
                                                    <span class="badge badge-danger">Inactive</span>
                                                @endif
                                            </p>
                                        </div>

                                        <div class="detail-item mb-3">
                                            <label class="font-weight-bold">Approval Status:</label>
                                            <p class="mb-0">
                                                @if($gallery->is_approved)
                                                    <span class="badge badge-success">Approved</span>
                                                @else
                                                    <span class="badge badge-warning">Pending</span>
                                                @endif
                                            </p>
                                        </div>

                                        @if($gallery->valid_till)
                                            <div class="detail-item mb-3">
                                                <label class="font-weight-bold">Valid Till:</label>
                                                <p class="mb-0">
                                                    @if($gallery->isExpired())
                                                        <span class="badge badge-danger">
                                                            Expired: {{ $gallery->valid_till->format('M d, Y') }}
                                                        </span>
                                                    @else
                                                        <span class="badge badge-info">
                                                            {{ $gallery->valid_till->format('M d, Y') }}
                                                        </span>
                                                    @endif
                                                </p>
                                            </div>
                                        @endif

                                        <hr>

                                        <div class="detail-item mb-3">
                                            <label class="font-weight-bold">Created By:</label>
                                            <p class="mb-0">{{ $gallery->creator ? $gallery->creator->name : 'N/A' }}</p>
                                        </div>

                                        <div class="detail-item mb-3">
                                            <label class="font-weight-bold">Created At:</label>
                                            <p class="mb-0">{{ $gallery->created_at->format('M d, Y H:i:s') }}</p>
                                        </div>

                                        <div class="detail-item mb-3">
                                            <label class="font-weight-bold">Updated At:</label>
                                            <p class="mb-0">{{ $gallery->updated_at->format('M d, Y H:i:s') }}</p>
                                        </div>
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('css')
    <style>
        .gallery-media {
            padding: 20px;
            background: #f8f9fa;
            border-radius: 8px;
        }
        
        .detail-item label {
            color: #6c757d;
            font-size: 0.875rem;
            margin-bottom: 0.25rem;
        }
        
        .detail-item p {
            color: #212529;
            font-size: 1rem;
        }

        .embed-responsive {
            position: relative;
            display: block;
            width: 100%;
            padding: 0;
            overflow: hidden;
        }

        .embed-responsive-16by9::before {
            padding-top: 56.25%;
        }

        .embed-responsive::before {
            display: block;
            content: "";
        }

        .embed-responsive-item {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }
    </style>
@endpush

@push('js')
    <script>
        $(document).ready(function() {
            $('#approveBtn').on('click', function() {
                if (confirm('Are you sure you want to approve this gallery item?')) {
                    $.ajax({
                        url: "{{ route('admin.gallery.approve', $gallery->id) }}",
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(response) {
                            if (response.success) {
                                toastr.success(response.message);
                                setTimeout(() => {
                                    location.reload();
                                }, 1000);
                            } else {
                                toastr.error(response.message);
                            }
                        },
                        error: function(xhr) {
                            toastr.error('Failed to approve gallery item');
                        }
                    });
                }
            });
        });
    </script>
@endpush