@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>
                        <form action="/upload" class="dropzone" id="my-awesome-dropzone">
                            <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">Title</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>
                            </div>
                            <div class="form-group row">
                                <label for="description" class="col-md-4 col-form-label text-md-right">Description</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>
                                    @error('description')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="capture_datetime" class="col-md-4 col-form-label text-md-right">Date/Time of
                                    Video Capture</label>
                                <div class="col-md-6">
                                    <input id="capture_datetime" type="datetime-local"
                                        class="form-control @error('capture_datetime') is-invalid @enderror"
                                        name="capture_datetime" value="{{ old('capture_datetime') }}" required
                                        autocomplete="capture_datetime" autofocus>
                                    @error('capture_datetime')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>


                            <div class="form-group row">
                                <label for="tags" class="col-md-4 col-form-label text-md-right">Tags</label>
                                <div class="col-md-6">
                                    <input type="text" class="form-control" id="tags"
                                        placeholder="Add tags by separating with a comma">
                                    <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>
                                <input type="hidden" name="tagList" id="tagList" value="">
                            </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>
        Dropzone.options.myAwesomeDropzone = {
            url: '/get-presigned-url-for-files',
            method: 'PUT',
            autoProcessQueue: false,
            maxFilesize: 50000,
            timeout: 0,
            acceptedFiles: 'application/pdf, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-powerpoint, application/vnd.openxmlformats-officedocument.presentationml.presentation, text/plain',


            init: function() {
                var myDropzone = this;
                var fullFilePath;

                $("#uploadButton").on('click', function(e) {
                    e.preventDefault();
                    if (myDropzone.files.length > 0) {
                        myDropzone.processQueue(); // Start the upload process
                    } else {
                        alert("Please add a file to upload.");
                    }
                });


                this.on('addedfile', function(file) {
                    var csrfToken = document.getElementById('csrf_token').value;

                    $.ajax({
                        url: '/get-presigned-url-for-files',
                        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
                            };

                            // 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);
                    }
                });

                this.on('success', function(file, response) {
                    console.log("Successfully uploaded to S3:", response);


                    var title = $('#title').val();
                    var description = $('#description').val();
                    var capture_datetime = $('#capture_datetime').val();
                    var tagList = $('#tagList').val();
                    var folder_id = $('#folder_id').val();
                    var contentType = file.type;


                    var csrfToken = document.getElementById('csrf_token').value;
                    //var myDropzone = Dropzone.forElement("#my-awesome-dropzone");

                    $.ajax({
                        url: '/upload',
                        type: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': csrfToken
                        },
                        data: {
                            title: title,
                            description: description,
                            capture_datetime: capture_datetime,
                            tagList: tagList,
                            fullFilePath: fullFilePath,
                            folder_id: folder_id,
                            contentType: contentType
                        },
                        success: function(data) {
                            console.log("Video info saved:", data);
                            $("#success").text("Video uploaded successfully!").show();
                            document.getElementById("my-awesome-dropzone").reset();
                            tagsArray = [];
                            document.getElementById("tagContainer").innerHTML = "";
                            document.getElementById("tagList").value = "";
                            myDropzone.removeAllFiles();
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            console.error("Error saving video info:", textStatus, errorThrown);
                        }
                    });
                });

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

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // start datetime validation
            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;

            document.getElementById("capture_datetime").setAttribute("max", formattedDate);


            // end datetime validation


            var tagsArray = [];

            function addTag(tag) {
                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(',');
                inputTags.forEach(function(tag) {
                    tag = tag.trim();
                    if (tag !== "") {
                        addTag(tag);
                    }
                });
            });
        });
    </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> --}}