@extends($layout)
@section('content')
    <div class="container text-center mb-5 mt-5">
        <div class="row">

        </div>
    </div>

    <section class="bg-diffrent">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-12">
                    <div class="container">
                        <h2>Upload File</h2>
                        {{-- <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ route('folders.show') }}">Home</a></li>
                                @if (isset($breadcrumbs))
                                    @foreach ($breadcrumbs as $breadcrumb)
                                        @if ($loop->last)
                                            <li class="breadcrumb-item active" aria-current="page">{{ $breadcrumb['name'] }}
                                            </li>
                                        @else
                                            <li class="breadcrumb-item"><a
                                                    href="{{ route('folders.show', $breadcrumb['id']) }}">{{ $breadcrumb['name'] }}</a>
                                            </li>
                                        @endif
                                    @endforeach
                                @endif
                            </ol>
                        </nav> --}}

                        <div id="success" class="alert alert-success alert-dismissible fade show" role="alert"
                            style="display:none">
                            {{ session('success') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                                <p style="color:black !important;">X</p>
                            </button>

                        </div>

                        <div id="successToast"
                            class="toast align-items-center text-dark bg-success border-0 position-fixed top-0 end-0 m-3"
                            role="alert" aria-live="assertive" aria-atomic="true">
                            <div class="d-flex">
                                <div class="toast-body" id="successToastBody">
                                    <!-- This element will contain the success message -->
                                </div>
                                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
                                    aria-label="Close"></button>
                            </div>
                        </div>
                        <input type="hidden" id="csrf_token" value="{{ csrf_token() }}">
                        <input name="folder_id" id="folder_id" type="hidden" value="{{ Request::segment(2) }}">
                        <div class="form-group row">
                            <label for="title" class="col-md-4 col-form-label text-md-right">Event<sup>*</sup>
                                <p style="font-weight: normal"> (Minimum 3 characters)</p>

                            </label>

                            <div class="col-md-6">
                                <input id="title" type="text"
                                    class="form-control @error('title') is-invalid @enderror" name="title"
                                    value="{{ old('title') }}" required autocomplete="title" autofocus>

                                @error('title')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                                <div id="titleError" class="text-danger" style="display: none;"></div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="description" class="col-md-4 col-form-label text-md-right">Description<sup>*</sup>
                                <p style="font-weight: normal"> {{-- (Minimum 10 words) --}}</p>
                            </label>
                            <div class="col-md-6">
                                <textarea id="description" class="form-control @error('description') is-invalid @enderror" name="description" required
                                    autocomplete="description" autofocus>{{ old('description') }}</textarea>
                                {{-- <div style="margin-top: 5px;">(Minimum 10 words)</div> --}}
                                @error('description')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                                <div id="descriptionError" class="text-danger" style="display: none;"></div>

                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="category" class="col-md-4 col-form-label text-md-right">Category<sup>*</sup>
                                <p style="font-weight: normal"></p>
                            </label>
                            <div class="col-md-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="flexRadioDefault" id="news"
                                        value="news" checked>
                                    <label class="custom-control-label" for="news">News</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="flexRadioDefault" id="info"
                                        value="info">
                                    <label class="custom-control-label" for="info">Info</label>
                                </div>
                                <div id="categoryError" class="text-danger" style="display: none;">Select atleast one
                                    category</div>

                            </div>
                        </div>



                        <div class="form-group row">
                            <label for="department" class="col-md-4 col-form-label text-md-right">Department<sup>*</sup>
                                <p style="font-weight: normal"></p>

                            </label>

                            <div class="col-md-6">
                                <input id="department" type="text"
                                    class="form-control @error('department') is-invalid @enderror" name="department"
                                    value="{{ old('department') }}" required autocomplete="department" autofocus>

                                @error('department')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                                <div id="departmentError" class="text-danger" style="display: none;"></div>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="place" class="col-md-4 col-form-label text-md-right">Place<sup>*</sup>
                                <p style="font-weight: normal"></p>

                            </label>

                            <div class="col-md-6">
                                <input id="place" type="text"
                                    class="form-control @error('place') is-invalid @enderror" name="place"
                                    value="{{ old('place') }}" required autocomplete="place" autofocus>

                                @error('place')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                                <div id="placeError" class="text-danger" style="display: none;"></div>
                            </div>
                        </div>


                        <div class="form-group row">
                            <label for="drag" class="col-md-4 col-form-label text-md-right">Images<sup></sup>
                                <p style="font-weight: normal">Type: jpeg under 2MB</p>

                            </label>
                            <form action="/stringer/upload-image" class="dropzone" id="image-dropzone">
                                @csrf
                                <div class="dz-message">
                                    Drag and drop images here or click to upload.
                                </div>
                            </form>

                        </div>


                        <div class="form-group row">
                            <label for="participants" class="col-md-4 col-form-label text-md-right">
                                Participants* <p style="font-weight: normal">(Minimum 5 participants)</p>
                            </label>
                            <div class="col-md-6">
                                <input type="text" class="form-control" id="participants"
                                    placeholder="Add participants separated by a comma">
                                <button type="button" class="btn btn-primary mt-2" id="addParticipant">Add</button>
                                <div id="participantContainer" class="mt-1"></div>
                                @error('participantList')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                                <div id="participantsError" class="text-danger" style="display: none;"></div>
                            </div>
                            <input type="hidden" name="participantList" id="participantList" value="">
                        </div>




                        <div class="form-group row">
                            <label for="tags" class="col-md-4 col-form-label text-md-right">
                                Tags* <p style="font-weight: normal"> (Minimum 5 tags)</p>

                            </label>
                            <div class="col-md-6">


                                <input type="text" class="form-control" id="tags"
                                    placeholder="Add indexes separated by a comma">

                                {{--  <div style="margin-top: 5px;">(Minimum 5 tags)</div> --}}

                                <button type="button" class="btn btn-primary mt-2" id="addTag">Add</button>
                                <div id="tagContainer" class="mt-1"></div>
                                @error('tagList')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                                <div id="tagsError" class="text-danger" style="display: none;"></div>


                            </div>
                            <input type="hidden" name="tagList" id="tagList" value="">
                        </div>
                        <form action="/upload" class="dropzone mb-4" id="my-awesome-dropzone">

                            <div class="dz-message">
                                Drag and drop files here or click to upload.
                            </div>
                            <div class="form-group row">
                                <div class="col-md-12 text-center">
                                    <button type="button" id="uploadButton" class="btn btn-success mt-3">Submit</button>
                                </div>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/min/dropzone.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>
        var allowedVideoTypes = 'video/mp4,';
        var allowedImageTypes = 'image/jpeg,image/png,';
        var fullFilePath = '';
        var uploadedImageUrls = [];
        var videoUploadComplete = false
        var videoFileSelected = false;


        Dropzone.options.myAwesomeDropzone = {
            url: '/stringer/get-presigned-url',
            method: 'PUT',
            autoProcessQueue: false,
            maxFilesize: 7000,
            timeout: 0,
            maxFiles: 1,
            acceptedFiles: allowedVideoTypes,


            init: function() {
                var myDropzone = this;
                var isValid = true;


                $("#uploadButton").on('click', function(e) {

                    var title = $('#title').val();
                    var department = $('#department').val();
                    var place = $('#place').val();


                    var description = $('#description').val();
                    var tags = $("#tagList").val().split(',');


                    if (title.trim() === "") {
                        $("#titleError").text("Title is required.").show();
                    } else {
                        $("#titleError").hide();
                    }
                    if (department.trim() === "") {
                        $("#departmentError").text("Department is required.").show();
                    } else {
                        $("#departmentError").hide();
                    }

                    if (place.trim() === "") {
                        $("#placeError").text("Place is required.").show();
                    } else {
                        $("#placeError").hide();
                    }

                    if (description.trim() === "") {
                        $("#descriptionError").text("Description is required.").show();
                    } else {
                        $("#descriptionError").hide();
                    }

                    /* if (!$('input[name=flexRadioDefault]:checked').length) {
                        e.preventDefault();

                        $('#categoryError').show();

                    } */


                    if (title.length < 3) {
                        $("#titleError").text("Title must be at least 3 characters long.").show();
                        isValid = false;
                    } else {
                        $("#titleError").hide();
                    }

                    if (title.trim() === "" || description.trim() === "") {
                        return;
                    }



                    var participants = $("#participantList").val().split(',');
                    participants = participants.filter(function(participant) {
                        return participant.trim().length > 0;
                    });
                    if (participants.length < 5) {
                        $("#participantsError").text("Enter at least 5 participants.").show();
                        isValid = false;
                    } else {
                        isValid = true;
                        $("#participantsError").hide();
                    }




                    tags = tags.filter(function(tag) {
                        return tag.trim().length > 0;
                    });
                    if (tags.length < 5) {
                        $("#tagsError").text("Enter atleast 5 tags.").show();
                        isValid = false;
                    } else {
                        isValid = true;
                        $("#tagsError").hide();
                    }

                    e.preventDefault();
                    if (myDropzone.files.length > 0) {
                        var videoFileSelected = false;
                        if (isValid) {

                            /* myDropzone.files.forEach(function(file, index) { */

                            myDropzone.processQueue();

                            /* }); */
                        }
                    } else {
                        videoFileSelected = false;
                        alert("Please add a file to upload.");
                    }
                });






                this.on('addedfile', function(file) {

                    videoFileSelected = true;

                    var removeButton = Dropzone.createElement(
                        "<button class='btn btn-danger btn-sm dz-remove'>Remove</button>");

                    file.previewElement.appendChild(removeButton);

                    removeButton.addEventListener('click', function(e) {
                        e.preventDefault();
                        e.stopPropagation();

                        myDropzone.removeFile(file);

                        $('#uploadedVideoUrl').val('');
                        fullFilePath = '';
                        videoUploadComplete = false;
                        videoFileSelected = false;

                    });


                    var allowedVideoTypes = [
                        'video/mp4'
                    ];
                    var csrfToken = document.getElementById('csrf_token').value;
                    var urlToUse = '/stringer/get-presigned-url';


                    $.ajax({
                        url: urlToUse,
                        type: 'POST',
                        data: {
                            filename: file.name,
                            filesize: file.size,
                            contentType: file.type
                        },
                        headers: {
                            'X-CSRF-TOKEN': csrfToken
                        },
                        success: function(data) {

                            myDropzone.options.url = data.url;
                            fullFilePath = data.fullFilePath;
                            myDropzone.options.headers = {
                                'Content-Type': file.type
                            };
                            $('#uploadedVideoUrl').val(data.fullFilePath);

                            // Process the queue
                            //myDropzone.processQueue();
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            console.error("Error fetching pre-signed URL:", textStatus,
                                errorThrown);
                        }
                    })



                })

                this.on('sending', function(file, xhr, formData) {
                    /* var _send = xhr.send;

                    xhr.send = function() {
                        _send.call(xhr, file);
                    } */

                    var _send = xhr.send;

                    xhr.send = function() {
                        _send.call(xhr, file);
                    }

                });

                this.on('success', function(file, response) {
                    $('#uploadedVideoUrl').val(response
                        .fullFilePath);
                    videoUploadComplete = true


                    $('#image-dropzone').addClass('dz-started');
                    //handleUploadComplete();



                });


                this.on('error', function(file, response) {
                    console.error("Error uploading:", response);
                });
            }
        };

        Dropzone.options.imageDropzone = {
            url: '/stringer/upload-image',
            autoProcessQueue: false,
            maxFilesize: 2,
            timeout: 0,
            acceptedFiles: allowedImageTypes,
            uploadMultiple: true,
            parallelUploads: 10,
            maxFiles: 2,



            init: function() {
                var imageDropzone = this;
                var isValid = true;
                this.on("error", function(file, response) {
                    if (file.size > 2 * 1024 * 1024) {
                        this.removeFile(file);
                        alert("File size exceeds the 2 MB limit.");
                    }
                });

                this.on('addedfile', function(file) {
                    var removeButtonImage = Dropzone.createElement(
                        "<button class='btn btn-danger btn-sm dz-remove'>Remove</button>");
                    file.previewElement.appendChild(removeButtonImage);

                    removeButtonImage.addEventListener('click', function(e) {
                        e.preventDefault();
                        e.stopPropagation();

                        imageDropzone.removeFile(file);
                    });
                });

                this.on("maxfilesexceeded", function(file) {
                    this.removeFile(file); 
                    alert("Only 2 images are allowed.");
                });

                $("#uploadButton").on('click', function(e) {
                    var title = $('#title').val();
                    var department = $('#department').val();
                    var place = $('#place').val();

                    var description = $('#description').val();
                    var tags = $("#tagList").val().split(',').map(tag => tag.trim()).filter(tag => tag
                        .length > 0);


                    if (title.trim() === "") {
                        $("#titleError").text("Title is required.").show();
                    } else {
                        $("#titleError").hide();
                    }

                    if (department.trim() === "") {
                        $("#departmentError").text("Department is required.").show();
                    } else {
                        $("#departmentError").hide();
                    }

                    if (place.trim() === "") {
                        $("#placeError").text("Place is required.").show();
                    } else {
                        $("#placeError").hide();
                    }

                    if (description.trim() === "") {
                        $("#descriptionError").text("Description is required.").show();
                    } else {
                        $("#descriptionError").hide();
                    }


                    if (title.length < 3) {
                        $("#titleError").text("Title must be at least 3 characters long.").show();
                        isValid = false;
                    } else {
                        $("#titleError").hide();
                    }

                    if (title.trim() === "" || description.trim() === "") {
                        return;
                    }

                    /* if (!$('input[name=flexRadioDefault]:checked').length) {
                        e.preventDefault();

                        $('#categoryError').show();

                    } */






                    /*  tags = tags.filter(function(tag) {
                         return tag.trim().length > 0;
                     }); */
                    if (tags.length < 5) {
                        $("#tagsError").text("Enter atleast 5 tags.").show();
                        isValid = false;
                    } else {
                        isValid = true;
                        $("#tagsError").hide();
                    }

                    var participants = $("#participantList").val().split(',').map(participant => participant
                        .trim()).filter(participant => participant.length > 0);
                    if (participants.length < 5) {
                        $("#participantsError").text("Enter at least 5 participants.").show();
                        isValid = false;
                    } else {
                        isValid = true;
                        $("#participantsError").hide();
                    }


                    e.preventDefault();

                    if (isValid && videoFileSelected) {


                        if (imageDropzone.files.length > 0) {
                            imageDropzone.processQueue();
                        } else {
                            console.log("complete")
                            videoUploadComplete = true

                            handleUploadComplete();
                        }
                    } else {
                        alert("Please add a video file");
                    }

                });

                this.on('success', function(file, response) {
                    if (response && response.imageUrls) {
                        response.imageUrls.forEach(function(url) {
                            if (!uploadedImageUrls.includes(url)) {
                                console.log('Processing URL:', url);
                                uploadedImageUrls.push(url);
                            }
                        });
                    }
                });


                this.on('queuecomplete', function() {
                    handleUploadComplete();

                });



                this.on('error', function(file, response) {
                    console.error("Error uploading image:", response);
                });
            }
        };

        function handleUploadComplete() {
            var uploadedVideoUrl = fullFilePath;

            if (uploadedVideoUrl === '') {
                console.log("No video uploaded. Skipping save.");
                return;
            }
            var title = $('#title').val();
            var description = $('#description').val();
            var department = $('#department').val();
            var place = $('#place').val();
            var category = $('input[name=flexRadioDefault]:checked').val();
            console.log(category)

            var tags = $("#tagList").val().split(',').map(tag => tag.trim()).filter(tag => tag.length > 0);
            var folder_id = $('#folder_id').val();
            var uploadedVideoUrl = fullFilePath
            tags = tags.filter(function(tag) {
                return tag.trim().length > 0;
            });
            var participants = $("#participantList").val().split(',').map(participant => participant.trim())
                .filter(participant => participant.length > 0);

            console.log("URLs: " + uploadedImageUrls)

            var csrfToken = document.getElementById('csrf_token').value;

            $.ajax({
                url: '/stringer/upload',
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                },
                data: {
                    title: title,
                    description: description,
                    videoUrl: uploadedVideoUrl,
                    tagsList: tags,
                    participants: participants,
                    department: department,
                    place: place,
                    imageUrls: uploadedImageUrls,
                    //folder_id: folder_id,
                    category: category
                },
                success: function(data) {
                    if (data.message === "success") {
                        console.log("firstSuccess")
                        if (videoUploadComplete) {
                            console.log("seconfdSuccess")

                            setTimeout(function() {
                                var successfulUploadMessage = 'Upload Successful.';
                                sessionStorage.setItem('successfulUploadMessage',
                                    successfulUploadMessage);

                                var redirectUrl = '/stringer/upload';
                                window.location.href = redirectUrl;
                            }, 500);
                        }


                    } else {
                        console.log("Upload failed. Please try again.");
                    }


                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.error("Error saving video and image info:", textStatus,
                        errorThrown);
                }
            });
        }
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var successfulUploadMessage = sessionStorage.getItem('successfulUploadMessage');

            if (successfulUploadMessage) {
                var successToastBody = document.getElementById('successToastBody');
                successToastBody.textContent = successfulUploadMessage;

                var successToast = new bootstrap.Toast(document.getElementById('successToast'));
                successToast.show();

                sessionStorage.removeItem('successfulUploadMessage');
            }
        });
        document.addEventListener("DOMContentLoaded", function() {
            var currentDate = new Date();
            var currentYear = currentDate.getFullYear();
            var currentMonth = String(currentDate.getMonth() + 1).padStart(2, '0');
            var currentDay = String(currentDate.getDate()).padStart(2, '0');
            var currentHour = String(currentDate.getHours()).padStart(2, '0');
            var currentMinute = String(currentDate.getMinutes()).padStart(2, '0');

            var formattedDate = currentYear + '-' + currentMonth + '-' + currentDay + 'T' + currentHour + ':' +
                currentMinute;





            var tagsArray = [];

            function addTag(tag) {
                console.log("test")
                tagsArray.push(tag);

                var tagElement = document.createElement("span");
                tagElement.className = "badge badge-custom me-2";
                tagElement.innerHTML = tag +
                    ' <button type="button" class="btn-close" style="background-color:black;" aria-label="Close"></button>';

                tagElement.querySelector(".btn-close").addEventListener("click", function() {
                    removeTag(tag);
                });

                document.getElementById("tagContainer").appendChild(tagElement);

                document.getElementById("tags").value = "";

                document.getElementById("tagList").value = tagsArray.join(',');
            }

            function removeTag(tag) {
                tagsArray = tagsArray.filter(function(t) {
                    return t !== tag;
                });

                var tagElements = document.querySelectorAll(".badge-custom");
                tagElements.forEach(function(element) {
                    if (element.textContent.trim() === tag) {
                        element.remove();
                    }
                });

                document.getElementById("tagList").value = tagsArray.join(',');
            }

            document.getElementById("addTag").addEventListener("click", function() {
                var inputTags = document.getElementById("tags").value.split(',');
                console.log("he")
                inputTags.forEach(function(tag) {
                    tag = tag.trim();
                    if (tag !== "") {
                        addTag(tag);
                    }
                });
            });

            var participantsArray = [];

            function addParticipant(participant) {
                participantsArray.push(participant);

                var participantElement = document.createElement("span");
                participantElement.className = "badge badge-custom me-2";
                participantElement.innerHTML = participant +
                    ' <button type="button" class="btn-close" style="background-color:black;" aria-label="Close"></button>';

                participantElement.querySelector(".btn-close").addEventListener("click", function() {
                    removeParticipant(participant);
                });

                document.getElementById("participantContainer").appendChild(participantElement);

                document.getElementById("participants").value = "";

                document.getElementById("participantList").value = participantsArray.join(',');
            }

            function removeParticipant(participant) {
                participantsArray = participantsArray.filter(function(p) {
                    return p !== participant;
                });

                var participantElements = document.querySelectorAll(".badge-custom");
                participantElements.forEach(function(element) {
                    if (element.textContent.trim() === participant) {
                        element.remove();
                    }
                });

                document.getElementById("participantList").value = participantsArray.join(',');
            }

            document.getElementById("addParticipant").addEventListener("click", function() {
                var inputParticipants = document.getElementById("participants").value.split(',');
                inputParticipants.forEach(function(participant) {
                    participant = participant.trim();
                    if (participant !== "") {
                        addParticipant(participant);
                    }
                });
            });

        });
    </script>
@endsection

@section('styles')
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/min/dropzone.min.css" rel="stylesheet">

    <style>
        .badge-custom {
            color: black !important;
        }
    </style>
@endsection

{{-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js"
    integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js"
    integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous">
</script> --}}