@extends('layouts.app')

@section('content')
    <div id="page-container" class="fade page-sidebar-fixed page-header-fixed page-with-wide-sidebar">
        <!-- begin #header -->
        @include('partials.header')
        <!-- end #header -->

        <!-- begin #sidebar -->
        @include('partials.sidebar')
        <!-- end #sidebar -->

        <!-- begin #content -->
        <div id="content" class="content">
            <!-- begin breadcrumb -->
            <ol class="breadcrumb float-xl-right">
                <li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('hotel_videos.index') }}">Hotel Videos</a></li>
                <li class="breadcrumb-item active">View Video</li>
            </ol>
            <!-- end breadcrumb -->

            <!-- begin page-header -->
            <h1 class="page-header">{{ $hotelVideo->title }}</h1>
            <!-- end page-header -->

            <!-- begin panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <div class="panel-heading-btn">
                        <h4 class="panel-title">Show Video: {{ $hotelVideo->title }}</h4>
                    </div>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <!-- Video Player -->
                        <div class="col-lg-8">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">
                                        <i class="fa fa-play-circle"></i> Video Preview
                                    </h5>
                                </div>
                                <div class="card-body text-center">
                                    @if ($hotelVideo->fileExists())
                                        <video width="100%" height="auto" controls class="rounded shadow">
                                            <source
                                                src="{{ \App\Helpers\UrlHelper::getStorageUrl($hotelVideo->video_path, request()) }}"
                                                type="{{ $hotelVideo->mime_type }}">
                                            Your browser does not support the video tag.
                                        </video>
                                    @else
                                        <div class="alert alert-danger">
                                            <i class="fa fa-exclamation-triangle fa-3x mb-3"></i>
                                            <h5>Video File Not Found</h5>
                                            <p class="mb-0">The video file could not be located on the server.</p>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <!-- Video Information -->
                        <div class="col-lg-4">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">
                                        <i class="fa fa-info-circle"></i> Video Information
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <table class="table table-borderless table-sm">
                                        <tr>
                                            <td class="font-weight-bold">Title:</td>
                                            <td>{{ $hotelVideo->title }}</td>
                                        </tr>
                                        <tr>
                                            <td class="font-weight-bold">Status:</td>
                                            <td>
                                                @if ($hotelVideo->status === 'active')
                                                    <span class="badge badge-success">Active</span>
                                                @else
                                                    <span class="badge badge-secondary">Inactive</span>
                                                @endif
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="font-weight-bold">Original Filename:</td>
                                            <td><code>{{ $hotelVideo->original_filename }}</code></td>
                                        </tr>
                                        <tr>
                                            <td class="font-weight-bold">File Size:</td>
                                            <td>{{ $hotelVideo->formatted_file_size }}</td>
                                        </tr>
                                        <tr>
                                            <td class="font-weight-bold">MIME Type:</td>
                                            <td><code>{{ $hotelVideo->mime_type }}</code></td>
                                        </tr>
                                        <tr>
                                            <td class="font-weight-bold">Uploaded By:</td>
                                            <td>{{ $hotelVideo->uploader->name ?? 'Unknown' }}</td>
                                        </tr>
                                        <tr>
                                            <td class="font-weight-bold">Upload Date:</td>
                                            <td>{{ $hotelVideo->created_at->format('M d, Y g:i A') }}</td>
                                        </tr>
                                        <tr>
                                            <td class="font-weight-bold">Last Modified:</td>
                                            <td>{{ $hotelVideo->updated_at->format('M d, Y g:i A') }}</td>
                                        </tr>
                                    </table>

                                    <hr>

                                    <!-- Action Buttons -->
                                    <div class="d-grid gap-2">
                                        <button type="button"
                                            class="btn btn-custom btn-{{ $hotelVideo->status === 'active' ? 'warning' : 'success' }} btn-block status-toggle-btn"
                                            data-video-id="{{ $hotelVideo->id }}"
                                            data-current-status="{{ $hotelVideo->status }}">
                                            <i class="fa fa-{{ $hotelVideo->status === 'active' ? 'pause' : 'play' }}"></i>
                                            {{ $hotelVideo->status === 'active' ? 'Deactivate' : 'Activate' }} Video
                                        </button>

                                        @if ($hotelVideo->fileExists())
                                            <a href="{{ \App\Helpers\UrlHelper::getStorageUrl($hotelVideo->video_path, request()) }}"
                                                class="btn btn-custom btn-custom"
                                                download="{{ $hotelVideo->original_filename }}">
                                                <i class="fa fa-download"></i> Download Video
                                            </a>
                                        @endif

                                        <a href="{{ route('hotel_videos.edit', $hotelVideo->id) }}" class="btn btn-custom">
                                            <i class="fa fa-edit"></i> Edit Video
                                        </a>

                                        <button type="button" class="btn btn-custom btn-danger btn-block delete-btn"
                                            data-video-id="{{ $hotelVideo->id }}"
                                            data-video-title="{{ $hotelVideo->title }}">
                                            <i class="fa fa-trash"></i> Delete Video
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- File Information -->
                            <div class="card mt-3">
                                <div class="card-header">
                                    <h6 class="card-title mb-0">
                                        <i class="fa fa-file-video-o"></i> Technical Details
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <table class="table table-borderless table-sm">
                                        <tr>
                                            <td class="font-weight-bold">File Hash:</td>
                                            <td>
                                                <small class="text-muted font-monospace">
                                                    {{ substr($hotelVideo->file_hash, 0, 16) }}...
                                                </small>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="font-weight-bold">File Exists:</td>
                                            <td>
                                                @if ($hotelVideo->fileExists())
                                                    <span class="badge badge-success">
                                                        <i class="fa fa-check"></i> Yes
                                                    </span>
                                                @else
                                                    <span class="badge badge-danger">
                                                        <i class="fa fa-times"></i> No
                                                    </span>
                                                @endif
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="font-weight-bold">Storage Path:</td>
                                            <td>
                                                <small class="text-muted">
                                                    <code>{{ $hotelVideo->video_path }}</code>
                                                </small>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="font-weight-bold">Video URL:</td>
                                            <td>
                                                <small class="text-muted">
                                                    <a href="{{ \App\Helpers\UrlHelper::getStorageUrl($hotelVideo->video_path, request()) }}"
                                                        target="_blank" class="text-info">
                                                        View URL <i class="fa fa-external-link"></i>
                                                    </a>
                                                </small>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end panel -->
        </div>
        <!-- end #content -->

        <!-- begin scroll to top btn -->
        <a href="javascript:;" class="btn btn-icon btn-circle btn-custom btn-scroll-to-top fade" data-click="scroll-top">
            <i class="fa fa-angle-up"></i>
        </a>
        <!-- end scroll to top btn -->
    </div>

    <!-- Delete Confirmation Modal -->
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Confirm Delete</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete the video "<span id="video-title-to-delete"></span>"?</p>
                    <p class="text-danger"><small>This action cannot be undone and will permanently delete the video
                            file.</small></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-custom" data-dismiss="modal">Cancel</button>
                    <form id="delete-form" method="POST" style="display: inline;">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-custom btn-danger">Delete Video</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const statusToggleBtn = document.querySelector('.status-toggle-btn');
            const deleteBtn = document.querySelector('.delete-btn');

            // Status toggle functionality
            if (statusToggleBtn) {
                statusToggleBtn.addEventListener('click', function() {
                    const videoId = this.dataset.videoId;
                    const currentStatus = this.dataset.currentStatus;

                    // Disable button during request
                    this.disabled = true;
                    const originalContent = this.innerHTML;
                    this.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Updating...';

                    fetch(`{{ url('hotel_videos') }}/${videoId}/toggle-status`, {
                            method: 'PATCH',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')
                                    .getAttribute('content')
                            },
                            body: JSON.stringify({})
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                // Redirect to index page with success message
                                const message = encodeURIComponent(data.message ||
                                    'Video status updated successfully');
                                window.location.href = '{{ route('hotel_videos.index') }}?success=' +
                                    message;
                            } else {
                                showAlert('danger', data.message || 'Failed to update status');
                                this.innerHTML = originalContent;
                                this.disabled = false;
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            showAlert('danger', 'An error occurred while updating status');
                            this.innerHTML = originalContent;
                            this.disabled = false;
                        });
                });
            }

            // Delete functionality
            if (deleteBtn) {
                deleteBtn.addEventListener('click', function() {
                    const videoId = this.dataset.videoId;
                    const videoTitle = this.dataset.videoTitle;

                    document.getElementById('video-title-to-delete').textContent = videoTitle;
                    document.getElementById('delete-form').action = `{{ url('hotel_videos') }}/${videoId}`;

                    $('#deleteModal').modal('show');
                });
            }
        });

        function showAlert(type, message) {
            const alertHtml = `
                <div class="alert alert-${type} alert-dismissible" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                    ${message}
                </div>
            `;

            // Remove existing alerts
            const existingAlerts = document.querySelectorAll('.alert');
            existingAlerts.forEach(alert => {
                if (!alert.classList.contains('alert-danger')) {
                    alert.remove();
                }
            });

            // Add new alert at the top of panel body
            const panelBody = document.querySelector('.panel-body');
            panelBody.insertAdjacentHTML('afterbegin', alertHtml);

            // Auto-dismiss after 5 seconds
            setTimeout(() => {
                const alert = document.querySelector('.alert');
                if (alert && !alert.classList.contains('alert-danger')) {
                    $(alert).alert('close');
                }
            }, 5000);
        }
    </script>

    <style>
        video {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
        }

        .card {
            border: 1px solid #dee2e6;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        }

        .font-monospace {
            font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        }

        .d-grid {
            display: grid;
        }

        .gap-2 {
            gap: 0.5rem;
        }

        .btn-block {
            display: block;
            width: 100%;
        }

        .btn-block+.btn-block {
            margin-top: 0.25rem;
        }

        /* Ensure panel title is black */
        .panel-title {
            color: #000000 !important;
        }

        /* Card title styling */
        .card-title {
            color: #000000 !important;
        }

        /* Custom button variants */
        .btn-custom.btn-success {
            background-color: #28a745 !important;
            border-color: #28a745 !important;
        }

        .btn-custom.btn-success:hover {
            background-color: #218838 !important;
            border-color: #1e7e34 !important;
        }

        .btn-custom.btn-warning {
            background-color: #ffc107 !important;
            border-color: #ffc107 !important;
            color: #212529 !important;
        }

        .btn-custom.btn-warning:hover {
            background-color: #e0a800 !important;
            border-color: #d39e00 !important;
            color: #212529 !important;
        }

        .btn-custom.btn-info {
            background-color: #17a2b8 !important;
            border-color: #17a2b8 !important;
        }

        .btn-custom.btn-info:hover {
            background-color: #138496 !important;
            border-color: #117a8b !important;
        }

        .btn-custom.btn-danger {
            background-color: #dc3545 !important;
            border-color: #dc3545 !important;
        }

        .btn-custom.btn-danger:hover {
            background-color: #c82333 !important;
            border-color: #bd2130 !important;
        }
    </style>
@endsection