$apiKey = "563492ad6f9170000100000126812b0346b14a9f971dede5062a460b"; // Sostituisci con la tua chiave API Pexels
$videoDir = __DIR__ . "/videos"; // Cartella dei file JSON dei video
$vbgFile = "$videoDir/VBG.json"; // File per il video VBG

function fetchAndSavePexelsVideoFiles($videoId, $apiKey, $savePath) {
    $url = "https://api.pexels.com/videos/videos/$videoId";

    // Inizializza cURL
    $ch = curl_init($url);

    // Imposta le opzioni di cURL
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_HTTPHEADER, [
        "Authorization: $apiKey"
    ]);

    // Esegui la richiesta e ottieni la risposta
    $response = curl_exec($ch);

    // Controlla se ci sono errori
    if (curl_errno($ch)) {
        echo 'Errore nella richiesta: ' . curl_error($ch);
        return false;
    }

    // Chiudi la sessione cURL
    curl_close($ch);

    // Decodifica la risposta JSON
    $data = json_decode($response, true);

    // Estrarre solo la variabile video_files
    if (isset($data['video_files'])) {
        $videoFiles = $data['video_files'];
    } else {
        echo 'La risposta non contiene la variabile video_files.';
        return false;
    }

    // Salva il JSON contenente solo video_files in un file
    $jsonData = json_encode($videoFiles, JSON_PRETTY_PRINT);
    file_put_contents($savePath, $jsonData);

    return true;
}

function getVideoUrl($videoFiles) {
    // Restituisce l'URL del video con la migliore qualità disponibile
    if (is_array($videoFiles) && count($videoFiles) > 0) {
        usort($videoFiles, function($a, $b) {
            return $b['height'] - $a['height'];
        });
        return $videoFiles[0]['link'];
    }
    return null;
}

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $action = $_POST['action'];

    if ($action === 'addVideo') {
        $videoId = $_POST['videoId'];
        $savePath = "$videoDir/video_$videoId.json";

        if (file_exists($savePath)) {
            echo json_encode(["status" => "error", "message" => "Il file per il video $videoId esiste già."]);
        } else {
            if (fetchAndSavePexelsVideoFiles($videoId, $apiKey, $savePath)) {
                echo json_encode(["status" => "success", "message" => "Video $videoId salvato con successo in $savePath."]);
            } else {
                echo json_encode(["status" => "error", "message" => "Impossibile salvare il video $videoId."]);
            }
        }
    } elseif ($action === 'selectVideo') {
        $videoId = $_POST['selectedVideo'];
        $savePath = "$videoDir/video_$videoId.json";

        if (file_exists($savePath)) {
            $videoDetails = json_decode(file_get_contents($savePath), true);
            $videoUrl = getVideoUrl($videoDetails);
            echo json_encode(["status" => "success", "videoId" => $videoId, "videoUrl" => $videoUrl]);
        } else {
            echo json_encode(["status" => "error", "message" => "File JSON per il video $videoId non trovato."]);
        }
    } elseif ($action === 'setAsVBG') {
        $videoId = $_POST['videoIdToSetAsVBG'];
        $savePath = "$videoDir/video_$videoId.json";

        if (file_exists($savePath)) {
            copy($savePath, $vbgFile);
            echo json_encode(["status" => "success", "message" => "Video $videoId impostato come VBG."]);
        } else {
            if (fetchAndSavePexelsVideoFiles($videoId, $apiKey, $savePath)) {
                copy($savePath, $vbgFile);
                echo json_encode(["status" => "success", "message" => "Video $videoId impostato come VBG e salvato con successo in $savePath."]);
            } else {
                echo json_encode(["status" => "error", "message" => "Impossibile salvare il video $videoId. File JSON per il video $videoId non trovato."]);
            }
        }
    }

    exit;
}

// Ottieni la lista dei video dalla cartella, escludendo il file VBG.json
$videoList = [];
if (is_dir($videoDir)) {
    $files = scandir($videoDir);
    foreach ($files as $file) {
        if (pathinfo($file, PATHINFO_EXTENSION) === 'json' && $file !== 'VBG.json') {
            $videoId = pathinfo($file, PATHINFO_FILENAME);
            $videoId = str_replace('video_', '', $videoId); // Rimuovi il prefisso 'video_'
            $videoList[] = $videoId;
        }
    }
}

// Ottieni l'attuale video VBG se esiste
$currentVBGVideoId = null;
$currentVBGUrl = null;
if (file_exists($vbgFile)) {
    $currentVBGDetails = json_decode(file_get_contents($vbgFile), true);
    $currentVBGUrl = getVideoUrl($currentVBGDetails);
    $currentVBGVideoId = str_replace(['video_', '.json'], '', basename($vbgFile));
}

?>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gestione Video Pexels</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
    <style>/* Basic reset */

* {
  margin: 0;
  padding: 0;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  font-weight: normal;
  font-family: sans-serif;
}

body,
html {
  height: 100%;
}

body {
  /* Centering content for demo purposes */
  //display: flex;
    gap: 1em;
    flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--space-4);
  /* Global styles */
  background-color: var(--color-blue-100);
}
.vcard {
    margin: 1em;
}
/* Design system with CSS custom properties */

/*
  - Colors
  - Spacings
  - Font sizes
  - Radii
  - Borders
  - Shadows
  - Utilities
  (- Transitions)
*/

:root {
  /* Blues */
  --color-blue-100: #f5faff;
  --color-blue-200: #b8dcff;
  --color-blue-300: #7ab8ff;
  --color-blue-400: #3d90ff;
  --color-blue-500: #0064fe;
  --color-blue-600: #0046d1;
  --color-blue-700: #002ba3;
  --color-blue-800: #001575;
  --color-blue-900: #000647;

  /* Greens */
  --color-green-100: #f0fcf5;
  --color-green-200: #b4eece;
  --color-green-300: #78e0a7;
  --color-green-400: #3cd180;
  --color-green-500: #00c159;
  --color-green-600: #009645;
  --color-green-700: #006a31;
  --color-green-800: #003f1d;
  --color-green-900: #001309;

  /* Grays */
  --color-gray-100: #f3f5f6;
  --color-gray-200: #d0d8dd;
  --color-gray-300: #aebac2;
  --color-gray-400: #8d9ca7;
  --color-gray-500: #6c7d8b;
  --color-gray-600: #576674;
  --color-gray-700: #424e5c;
  --color-gray-800: #2e3843;
  --color-gray-900: #1c212a;

  /* Neutrals */
  --color-white: white;
  --color-black: black;

  /* Misc */
  --color-border: var(--color-gray-200);

  /* Spacing */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Font sizes */
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;

  /* Border radius */
  --radius: 6px;
  --round: 1000px;

  /* Borders */
  --border: 1px solid var(--color-border);

  /* Shadows */
  --shadow: 0px 2px 8px rgba(0, 0, 0, 0.06), 0px 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-large: 0px 5px 18px rgba(0, 0, 0, 0.1),
    0px 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-focus: 0 0 0 var(--space-1) var(--color-blue-200);

  /* Transition curves */
  --transition-curve: cubic-bezier(0.2, 0.7, 0.3, 1);
  --transition-curve-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* Transition speeds */
  --transition-speed: 0.25s;
  --transition-speed-slow: 1s;

  /* Transition */
  --transition: all var(--transition-speed) var(--transition-curve);
  --transition-bounce: all var(--transition-speed)
    var(--transition-curve-bounce);

  /* Opacities */
  --opacity-25: 0.25;
  --opacity-50: 0.5;
  --opacity-75: 0.75;
  --opacity-100: 1;
}

body {
  padding:0;
  margin:0;
	background-color:hsla(180,1%,97%,1);
background-image:
radial-gradient(at 81% 65%, hsla(218,98%,94%,1) 0px, transparent 50%),
radial-gradient(at 95% 99%, hsla(39,95%,94%,1) 0px, transparent 50%),
radial-gradient(at 48% 26%, hsla(271,77%,94%,1) 0px, transparent 50%),
radial-gradient(at 75% 26%, hsla(197,87%,94%,1) 0px, transparent 50%);

	background-size: 500% 500%;
	animation: gradient 9s ease infinite;
	height: 100vh;
}
div#currentVBGVideo, .flex {
    display: flex;
    justify-content: center;
    margin: 3em;
    flex-direction: column;
    align-items: center;
}
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

        video,img {
            background-color: #feff0005;
            border-radius: 1em;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    pointer-events: none;
    max-width: 400px;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
        }
        label img + video {
    position: absolute;
    left: 0;
    top: 0;
}
        
        
        label {
    display: block;position:relative;
}input[type="radio"] {
    display: none;
}form#selectVideoForm {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-direction: row;
}
input[type="radio"] + label {
    background-color: #fff0;
    border:3px solid #fff0;
    border-radius:1em;
}
input[type="radio"]:checked + label {
    background-color: #3d90ff;
    border:3px solid #3d90ff;
    
}.btn {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
    position: fixed;
    bottom: 1em;
    right: 1em;
    box-shadow: 0 0 15px 10px #000;
}
    </style>
    
    
</head>
<body>


    <div id="currentVBGVideo">
    <h1>Video BackGround</h1>
            </div>

<div class="flex">
    <h2>Aggiungi Video</h2>
    <form id="addVideoForm">
        <label for="videoId">ID Video:</label>
        <input type="text" id="videoId" name="videoId" required>
        <input type="submit" value="Aggiungi Video">
    </form>
</div>

    <form id="selectVideoForm">
        <!--<label for="selectedVideo">Seleziona Video:</label>
        <select id="selectedVideo" name="selectedVideo" required>
            <option value="">-- Seleziona un Video --</option>
                    </select>!-->
        
                
    </form>
<button class="btn" id="salvaButton">SALVA</button>


    <div id="videoPreview" style="display:none;">
        <h2 id="videoDetailsTitle"></h2>
        <video id="videoPlayer" width="600" controls  loop=''  autoplay=''  muted='' playsinline=''>
            <source id="videoSource" src="" type="video/mp4">
            Il tuo browser non supporta il tag video.
        </video>
        <form id="setAsVBGForm">
            <input type="hidden" id="videoIdToSetAsVBG" name="videoIdToSetAsVBG">
            <input type="submit" value="Imposta come VBG">
        </form>
    </div>

    <script>
        $(document).ready(function() {
            // Aggiungi Video
            $('#addVideoForm').on('submit', function(e) {
            e.preventDefault();
            fetchVideos($('#videoId').val());
               /* 
                $.ajax({
                    type: 'POST',
                    url: '',
                    data: {
                        action: 'addVideo',
                        videoId: 
                    },
                    success: function(response) {
                        const result = JSON.parse(response);
                        alert(result.message);
                        if (result.status === 'success') {
                            location.reload();
                        }
                    }
                });*/
            });

            // Seleziona Video
            $('#selectedVideo').on('change', function() {
                const selectedVideoId = $(this).val();
                if (selectedVideoId) {
                    $.ajax({
                        type: 'POST',
                        url: '',
                        data: {
                            action: 'selectVideo',
                            selectedVideo: selectedVideoId
                        },
                        success: function(response) {
                            const result = JSON.parse(response);
                            if (result.status === 'success') {
                                $('#videoDetailsTitle').text('Dettagli del Video ' + result.videoId);
                                $('#videoSource').attr('src', result.videoUrl);
                                $('#videoPlayer')[0].load();
                                $('#videoIdToSetAsVBG').val(result.videoId);
                                $('#videoPreview').show();
                            } else {
                                alert(result.message);
                            }
                        }
                    });
                } else {
                    $('#videoPreview').hide();
                }
            });

$('label video').each(function() {
    const videoElement = $(this);
    const videoId = videoElement.attr('data-id');

    // Effettua una chiamata AJAX per ottenere i dettagli del video
    $.ajax({
        type: 'POST',
        url: '',
        data: {
            action: 'selectVideo',
            selectedVideo: videoId
        },
        success: function(response) {
            const result = JSON.parse(response);
            if (result.status === 'success') {
                // Aggiorna il titolo del video
                videoElement.siblings('span').text('Dettagli del Video ' + result.videoId);

                // Imposta l'URL del video nel tag video
                videoElement.attr('src', result.videoUrl);
                
                // Carica il video (se necessario)
                videoElement[0].load();
                
                // Opzionale: impostare l'id del video selezionato in un input nascosto o altrove
                // $('#videoIdToSetAsVBG').val(result.videoId);
            } else {
                alert(result.message);
            }
        },
        error: function(xhr, status, error) {
            console.error('Errore nella chiamata AJAX:', error);
        }
    });
});

            // Imposta come VBG
            $('#setAsVBGForm').on('submit', function(e) {
                e.preventDefault();
                $.ajax({
                    type: 'POST',
                    url: '',
                    data:                    {
                        action: 'setAsVBG',
                        videoIdToSetAsVBG: $('#videoIdToSetAsVBG').val()
                    },
                    success: function(response) {
                        const result = JSON.parse(response);
                        alert(result.message);
                        if (result.status === 'success') {
                            location.reload();
                        }
                    }
                });
            });
            
            $('#salvaButton').on('click', function() {
    // Trova l'ID del video selezionato
    const selectedVideoId = $('input[name="VBGvideo"]:checked').attr('id');

    // Verifica se è stato selezionato un video
    if (selectedVideoId) {
        // Esegue la richiesta AJAX
        $.ajax({
            type: 'POST',
            url: '',
            data: {
                action: 'setAsVBG',
                videoIdToSetAsVBG: selectedVideoId
            },
            success: function(response) {
                const result = JSON.parse(response);
                alert(result.message);
                if (result.status === 'success') {
                    location.reload(); // Ricarica la pagina se l'operazione ha avuto successo
                }
            },
            error: function(xhr, status, error) {
                console.error('Errore nella chiamata AJAX:', error);
            }
        });
    } else {
        alert('Seleziona un video prima di continuare.');
    }
});

$('input[name="VBGvideo"]').on('change', function() {   

        const isChecked = $(this).is(':checked');
        const videoId = $(this).attr('id');
        const videoElement = $('video[data-id="' + videoId + '"]')[0];
        var videos = document.querySelectorAll('video');
        for(var i=0; i<videos.length; i++){
            videos[i].pause();
            videos[i].currentTime = 0;
        };

    if (isChecked && videoElement) {
        // Controlla se il video è stato caricato
        if (videoElement.readyState >= 2) {
            videoElement.play();
        } else {
            // Aspetta che il video sia pronto per la riproduzione
            videoElement.oncanplaythrough = function() {
                videoElement.play();
                videoElement.oncanplaythrough = null; // Pulisci il gestore dell'evento dopo l'avvio
            };
        }
    } else {
        // Se il video non è selezionato o non è stato trovato, ferma la riproduzione
        if (videoElement) {
            videoElement.pause();
            videoElement.currentTime = 0; // Riporta il video all'inizio
        }
    }
});



            // On page load, check if a video is selected
            const selectedVideoId = $('#selectedVideo').val();
            if (selectedVideoId) {
                // Trigger change event to load selected video details
                $('#selectedVideo').trigger('change');
            }
        });
        
    function selectBestVideoSource(element, videoFiles) {
        const videoWidth = element.clientWidth;
        const videoHeight = element.clientHeight;

        videoFiles.sort((a, b) => a.width * a.height - b.width * b.height);

        let selectedSource = null;
        for (let file of videoFiles) {
            if (file.width >= videoWidth && file.height >= videoHeight) {
                selectedSource = file;
                break;
            }
        }

        if (!selectedSource) {
            selectedSource = videoFiles[videoFiles.length - 1];
        }

        return selectedSource.link;
    }
        
        async function fetchVideos(query) {
            try {
                const response = await fetch(`search_videos.php?query=${query}`);
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                const videos = await response.json();
                displayThumbnails(videos);
            } catch (error) {
                console.error('Failed to fetch videos:', error);
            }
        }

        function displayThumbnails(videos) {
            const container = document.getElementById('selectVideoForm');
            container.innerHTML = '';
            
           // <div class="vcard">
           //     <input type="radio" name="VBGvideo" id="16478029">
           //     <label for="16478029">
           //         <video loop="" muted="" playsinline="" data-id="16478029" src="https://videos.pexels.com/video-files/16478029/16478029-uhd_3840_2160_24fps.mp4"></video>
           //     </label>
           // </div>
            
            videos.forEach(video => {
                
            
                const label = document.createElement('label');
                const img = document.createElement('img');
                const Vdiv = document.createElement('div');
                const checkbox = document.createElement('input');
                
                Vdiv.className = 'vcard';
                label.htmlFor = video.id;
                img.src = video.image;
                img.alt = video.id;
                img.className = 'video-thumbnail';

                checkbox.type = 'radio';
                checkbox.name = 'VBGvideo';
                checkbox.id = video.id;
                checkbox.onchange = () => playVideo(video, checkbox, label);

                Vdiv.appendChild(checkbox);
                Vdiv.appendChild(label);
                label.appendChild(img);
                container.appendChild(Vdiv);
            });
        }

        function playVideo(video, checkbox, label) {
            if (checkbox.checked) {
                var videos = document.querySelectorAll('#selectVideoForm video');
                for(var i=0; i<videos.length; i++){
            		// Then pause it now
            		  videos[i].parentNode.removeChild(videos[i]);
            		  
	            }
	            var videos2 = document.querySelectorAll('video');
                    for(var i=0; i<videos2.length; i++){
                        videos2[i].pause();
                        videos2[i].currentTime = 0;
                    };
                const videoElement = document.createElement('video');
                videoElement.src = selectBestVideoSource(label, video.video_files);
                videoElement.controls = false;
                videoElement.autoplay = true;
                videoElement.muted = true;
                videoElement.loop = true;
                label.appendChild(videoElement);
                
            } else {
                // Remove the video element if the checkbox is unchecked
                const videoElement = label.querySelector('video');
                if (videoElement) {
                    videoElement.remove();
                }
            }
        }

    </script>
</body>
</html>