@extends('admin.layouts.master')

@section('title', 'Memorial Video')

@push('styles')
    <style>
        .mv-player {
            position: relative;
            background: #0f0d0b;
            border-radius: 14px;
            overflow: hidden;
            aspect-ratio: 16 / 9;
            box-shadow: 0 12px 32px rgba(40, 28, 20, .18);
        }
        .mv-player video {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: contain;
            background: #000;
        }
        .mv-player-missing {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #d9cfc7;
            text-align: center;
            padding: 24px;
        }
        .mv-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 12px;
            border-radius: 999px;
            font-size: 12.5px;
            font-weight: 500;
            background: rgba(var(--bs-primary-rgb), .08);
            color: var(--bs-primary);
        }
        .mv-memorial-photo {
            width: 76px;
            height: 76px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid #fff;
            box-shadow: 0 4px 14px rgba(40, 28, 20, .15);
            flex-shrink: 0;
        }
        .mv-memorial-photo-lg {
            width: 112px;
            height: 112px;
        }
        .mv-memorial-placeholder {
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(var(--bs-primary-rgb), .1);
            color: var(--bs-primary);
            font-size: 32px;
        }
        .mv-card-footer {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 16px;
            padding: 18px 24px;
            border-top: 1px solid var(--bs-border-color);
            background: rgba(var(--bs-primary-rgb), .03);
            border-radius: 0 0 var(--bs-card-border-radius, 8px) var(--bs-card-border-radius, 8px);
        }
        .mv-stat {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
            min-width: 0;
        }
        @media (max-width: 767.98px) {
            .mv-card-footer {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            .mv-stat {
                flex-direction: row;
                align-items: center;
                gap: 10px;
            }
            .mv-stat:last-child {
                grid-column: span 2;
            }
        }
        .mv-stat-icon {
            width: 38px;
            height: 38px;
            border-radius: 10px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(var(--bs-primary-rgb), .1);
            color: var(--bs-primary);
            font-size: 18px;
        }
        .mv-stat-label {
            display: block;
            font-size: 11.5px;
            text-transform: uppercase;
            letter-spacing: .04em;
            color: var(--bs-secondary-color);
        }
        .mv-stat-value {
            display: block;
            font-weight: 600;
            font-size: 13.5px;
            line-height: 1.3;
            word-break: break-word;
        }
        .mv-switch {
            width: 2.6em !important;
            height: 1.4em;
            cursor: pointer;
        }
        .mv-btn-soft {
            background: rgba(var(--bs-primary-rgb), .1);
            color: var(--bs-primary);
            border: 0;
        }
        .mv-btn-soft:hover,
        .mv-btn-soft:focus {
            background: rgba(var(--bs-primary-rgb), .18);
            color: var(--bs-primary);
        }
        .mv-empty {
            max-width: 520px;
            margin: 0 auto;
            text-align: center;
            padding: 56px 16px;
        }
        .mv-empty-icon {
            width: 96px;
            height: 96px;
            border-radius: 50%;
            margin: 0 auto 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(var(--bs-primary-rgb), .1);
            color: var(--bs-primary);
            font-size: 44px;
        }
    </style>
@endpush

@section('content')
    @include('admin.partials.page-header', [
        'title' => 'Memorial Video',
        'crumbs' => [
            ['label' => 'Memorials', 'url' => route('admin.funeral.index')],
            ['label' => $funeral->f_name, 'url' => route('admin.funeral.show', $funeral->f_id)],
            ['label' => 'Video'],
        ],
    ])

    @if (! $video)
        <div class="card border-0 shadow-sm">
            <div class="card-body">
                <div class="mv-empty">
                    @if ($memorialImage)
                        <img src="{{ $memorialImage }}" alt="" class="mv-memorial-photo mv-memorial-photo-lg mb-4"
                             onerror="this.outerHTML='<div class=&quot;mv-empty-icon&quot;><i class=&quot;ti ti-movie&quot;></i></div>'">
                    @else
                        <div class="mv-empty-icon"><i class="ti ti-movie"></i></div>
                    @endif
                    <h4 class="fw-bold mb-2">No video yet for {{ $funeral->f_name }}</h4>
                    <p class="text-muted mb-4">
                        Create a memorial video from a theme, photos and music. It takes about a minute to render.
                    </p>
                    <a href="{{ route('admin.funeral.video-create', $funeral->f_id) }}" class="btn btn-primary px-4">
                        <i class="ti ti-sparkles me-1"></i>Create Memorial Video
                    </a>
                </div>
            </div>
        </div>
    @else
        @php
            $isActive = (string) $video->fv_status === '1';
        @endphp

        <div class="row g-4">
            <div class="col-xl-8">
                <div class="card border-0 shadow-sm">
                    <div class="card-body p-3 p-md-4">
                        <div class="mv-player mb-4">
                            @if ($videoMeta && $videoMeta['exists'])
                                <video id="memorialVideo" controls preload="metadata" playsinline>
                                    <source src="{{ $videoMeta['url'] }}" type="video/mp4">
                                </video>
                            @else
                                <div class="mv-player-missing">
                                    <i class="ti ti-video-off fs-1 mb-2"></i>
                                    <h5 class="text-white mb-1">Video file not found</h5>
                                    <p class="mb-3 small">The file is missing on the server. Regenerate the video to fix it.</p>
                                   
                                </div>
                            @endif
                        </div>

                        <div class="d-flex flex-wrap align-items-start justify-content-between gap-3">
                            <div>
                                <h3 class="fw-bold mb-1">{{ $video->fv_title ?: $funeral->f_name }}</h3>
                                @if ($video->fv_subtitle)
                                    <p class="text-muted mb-2">{{ $video->fv_subtitle }}</p>
                                @endif
                                <div class="d-flex flex-wrap gap-2 mt-2">
                                    <span class="mv-chip"><i class="ti ti-heart"></i>{{ $video->fv_intro_text ?: 'In Loving Memory' }}</span>
                                    @if ($videoMeta && $videoMeta['track'])
                                        <span class="mv-chip"><i class="ti ti-music"></i>{{ $videoMeta['track'] }}</span>
                                    @endif
                                </div>
                            </div>
                            <span class="badge fs-xs px-3 py-2 {{ $isActive ? 'bg-success-subtle text-success' : 'bg-secondary-subtle text-secondary' }}" id="videoStatusBadge">
                                <i class="ti ti-point-filled me-1"></i>{{ $isActive ? 'Active' : 'Inactive' }}
                            </span>
                        </div>
                    </div>

                    <div class="mv-card-footer">
                        <div class="mv-stat">
                            <span class="mv-stat-icon"><i class="ti ti-calendar"></i></span>
                            <div>
                                <span class="mv-stat-label">Created</span>
                                <span class="mv-stat-value" title="{{ $videoMeta['created_full'] ?? '' }}">{{ $videoMeta['created'] ?? '-' }}</span>
                            </div>
                        </div>
                        <div class="mv-stat">
                            <span class="mv-stat-icon"><i class="ti ti-clock"></i></span>
                            <div>
                                <span class="mv-stat-label">Duration</span>
                                <span class="mv-stat-value" id="videoDuration">-</span>
                            </div>
                        </div>
                        <div class="mv-stat">
                            <span class="mv-stat-icon"><i class="ti ti-aspect-ratio"></i></span>
                            <div>
                                <span class="mv-stat-label">Resolution</span>
                                <span class="mv-stat-value" id="videoResolution">-</span>
                            </div>
                        </div>
                        <div class="mv-stat">
                            <span class="mv-stat-icon"><i class="ti ti-file"></i></span>
                            <div>
                                <span class="mv-stat-label">File size</span>
                                <span class="mv-stat-value">{{ $videoMeta['size'] ?? '-' }}</span>
                            </div>
                        </div>
                        <div class="mv-stat">
                            <span class="mv-stat-icon"><i class="ti ti-music"></i></span>
                            <div>
                                <span class="mv-stat-label">Music</span>
                                <span class="mv-stat-value">{{ $videoMeta['track'] ?? 'Theme audio' }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-4">
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-body">
                        <div class="d-flex align-items-center gap-3">
                            @if ($memorialImage)
                                <img src="{{ $memorialImage }}" alt="" class="mv-memorial-photo"
                                     onerror="this.outerHTML='<div class=&quot;mv-memorial-photo mv-memorial-placeholder&quot;><i class=&quot;ti ti-user&quot;></i></div>'">
                            @else
                                <div class="mv-memorial-photo mv-memorial-placeholder"><i class="ti ti-user"></i></div>
                            @endif
                            <div class="min-w-0">
                                <p class="text-uppercase text-muted fs-xxs fw-semibold mb-1">In memory of</p>
                                <h5 class="fw-bold mb-1 text-truncate">{{ $funeral->f_name }}</h5>
                                @if ($lifeDates)
                                    <p class="text-muted small mb-0">{{ $lifeDates }}</p>
                                @endif
                            </div>
                        </div>
                        @if ($funeralHomeName)
                            <p class="small text-muted mt-3 mb-0">
                                <i class="ti ti-building-church me-1"></i>{{ $funeralHomeName }}
                            </p>
                        @endif
                        <a href="{{ route('admin.funeral.show', $funeral->f_id) }}" class="btn btn-light border btn-sm w-100 mt-3">
                            <i class="ti ti-eye me-1"></i>View Memorial
                        </a>
                    </div>
                </div>

                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between gap-3">
                            <div>
                                <h6 class="fw-bold mb-1"><i class="ti ti-eye-check text-primary me-1"></i>Visible to visitors</h6>
                                <p class="text-muted small mb-0">Turn off to hide this video from the memorial page.</p>
                            </div>
                            <div class="form-check form-switch m-0">
                                <input class="form-check-input mv-switch" type="checkbox" role="switch" id="videoStatusSwitch"
                                       data-id="{{ $video->fv_id }}" @checked($isActive)>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card border-0 shadow-sm">
                    <div class="card-body d-grid gap-2">
                        @if ($videoMeta && $videoMeta['exists'])
                            <a href="{{ $videoMeta['url'] }}" class="btn btn-primary" download="{{ \Illuminate\Support\Str::slug($funeral->f_name) ?: 'memorial' }}-video.mp4">
                                <i class="ti ti-download me-1"></i>Download Video
                            </a>
                            <button type="button" class="btn mv-btn-soft" id="copyVideoLink" data-url="{{ url($videoMeta['url']) }}">
                                <i class="ti ti-link me-1"></i>Copy Video Link
                            </button>
                        @endif
                       
                        <a href="{{ route('admin.funeral.video-delete', $video->fv_id) }}"
                           class="btn btn-soft-danger js-confirm-delete"
                           data-href="{{ route('admin.funeral.video-delete', $video->fv_id) }}">
                            <i class="ti ti-trash me-1"></i>Delete Video
                        </a>
                    </div>
                </div>
            </div>
        </div>
    @endif
@endsection

@push('scripts')
    <script>
        $(function () {
            var toast = Swal.mixin({ toast: true, position: 'top-end', showConfirmButton: false, timer: 2200 });

            var video = document.getElementById('memorialVideo');
            if (video) {
                video.addEventListener('loadedmetadata', function () {
                    var total = Math.round(video.duration || 0);
                    if (total > 0) {
                        var m = Math.floor(total / 60);
                        var s = total % 60;
                        $('#videoDuration').text(m + ':' + (s < 10 ? '0' : '') + s + ' min');
                    }
                    if (video.videoWidth) {
                        $('#videoResolution').text(video.videoWidth + ' × ' + video.videoHeight);
                    }
                });
            }

            $('#videoStatusSwitch').on('change', function () {
                var $switch = $(this);
                var active = $switch.is(':checked');

                $.ajax({
                    url: '{{ route('admin.funeral.video-status-update') }}',
                    type: 'POST',
                    data: { id: $switch.data('id'), status: active ? 1 : 0 },
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    },
                    success: function () {
                        $('#videoStatusBadge')
                            .toggleClass('bg-success-subtle text-success', active)
                            .toggleClass('bg-secondary-subtle text-secondary', ! active)
                            .html('<i class="ti ti-point-filled me-1"></i>' + (active ? 'Active' : 'Inactive'));
                        toast.fire({ icon: 'success', title: active ? 'Video is now visible' : 'Video hidden from visitors' });
                    },
                    error: function () {
                        $switch.prop('checked', ! active);
                        toast.fire({ icon: 'error', title: 'Could not update status' });
                    }
                });
            });

            $('#copyVideoLink').on('click', function () {
                var url = $(this).data('url');
                var done = function () { toast.fire({ icon: 'success', title: 'Video link copied' }); };

                if (navigator.clipboard && window.isSecureContext) {
                    navigator.clipboard.writeText(url).then(done);
                    return;
                }
                var $tmp = $('<input>').val(url).appendTo('body').select();
                document.execCommand('copy');
                $tmp.remove();
                done();
            });
        });
    </script>
@endpush