@extends('layouts.admin.app')
@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-8">

                    <div class="container">
                        <h2>Upload Video</h2>
                        <form method="POST" enctype="multipart/form-data">
                            @csrf
                            <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="file-loading">
                                <input type="file" name="file" id="file-input" multiple>
                            </div>


                            <div class="text-center">
                                <button type="button" class="btn btn-lg btn-success btn-upload-3"><i
                                        class="fa fa-upload"></i> Upload</button>
                                <button type="button" class="btn btn-lg btn-secondary btn-reset-3"><i
                                        class="fa fa-ban"></i> Clear</button>
                            </div>


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

@section('script')
    <!-- default icons used in the plugin are from Bootstrap 5.x icon library (which can be enabled by loading CSS below) -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.min.css"
        crossorigin="anonymous">

    <!-- alternatively you can use the font awesome icon library if using with `fas` theme (or Bootstrap 4.x) by uncommenting below. -->
    <!-- link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" crossorigin="anonymous" -->

    <!-- the fileinput plugin styling CSS file -->
    <link href="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.2/css/fileinput.min.css" media="all"
        rel="stylesheet" type="text/css" />

    <!-- if using RTL (Right-To-Left) orientation, load the RTL CSS file after fileinput.css by uncommenting below -->
    <!-- link href="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.2/css/fileinput-rtl.min.css" media="all" rel="stylesheet" type="text/css" /-->

    <!-- the jQuery Library -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>

    <!-- buffer.min.js and filetype.min.js are necessary in the order listed for advanced mime type parsing and more correct
                             preview. This is a feature available since v5.5.0 and is needed if you want to ensure file mime type is parsed
                             correctly even if the local file's extension is named incorrectly. This will ensure more correct preview of the
                             selected file (note: this will involve a small processing overhead in scanning of file contents locally). If you
                             do not load these scripts then the mime type parsing will largely be derived using the extension in the filename
                             and some basic file content parsing signatures. -->
    <script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.2/js/plugins/buffer.min.js"
        type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.2/js/plugins/filetype.min.js"
        type="text/javascript"></script>

    <!-- piexif.min.js is needed for auto orienting image files OR when restoring exif data in resized images and when you
                            wish to resize images before upload. This must be loaded before fileinput.min.js -->
    <script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.2/js/plugins/piexif.min.js"
        type="text/javascript"></script>

    <!-- sortable.min.js is only needed if you wish to sort / rearrange files in initial preview.
                            This must be loaded before fileinput.min.js -->
    <script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.2/js/plugins/sortable.min.js"
        type="text/javascript"></script>

    <!-- bootstrap.bundle.min.js below is needed if you wish to zoom and preview file content in a detail modal
                            dialog. bootstrap 5.x or 4.x is supported. You can also use the bootstrap js 3.3.x versions. -->

    <!-- the main fileinput plugin script JS file -->
    <script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.2/js/fileinput.min.js"></script>

    <!-- following theme script is needed to use the Font Awesome 5.x theme (`fas`). Uncomment if needed. -->
    <!-- script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.2/themes/fas/theme.min.js"></script -->

    <!-- optionally if you need translation for your language then include the locale file as mentioned below (replace LANG.js with your language locale) -->
    <script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.2/js/locales/LANG.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/axios@1.4.0/dist/axios.min.js"></script>

    <script>
        document.getElementById("capture_datetime").addEventListener("change", function() {
            // Validate that the selected time is not in the future
            var selectedTime = new Date(this.value).getTime();
            var currentTime = new Date().getTime();

            if (selectedTime > currentTime) {
                alert("Please select a time that is not in the future.");
                this.value = "";
            }
        });

        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>

    <script>
        $(document).ready(function() {
            /* $('form').on('submit', function(e) {
                e.preventDefault(); 
            });
            $.ajaxSetup({
                headers: {
                    "X-CSRF-TOKEN": "{{ csrf_token() }}",
                }
            });
            $("#file-input").fileinput({
                uploadUrl: "#", 
                uploadAsync: true,
                showUpload: false,
                showRemove: false,
                maxFileCount: 5,
                required: true,
                allowedFileExtensions: ["mov", "mp4", "m4v"],
                uploadExtraData: function() {
                    var titleValue = $("#title").val();
                    var tagListValue = $("#tagList").val();
                    var descriptionValue = $("#description").val();
                    var captureDatetimeValue = $("#capture_datetime").val();
                    var folder_id = $("#folder_id").val();
                    if (!captureDatetimeValue || !descriptionValue) {
                        alert(
                            "Please fill out the Date/Time of Video Capture and Description fields before uploading.");
                        return;
                    }
                    return {
                        title: titleValue,
                        tagList: tagListValue,
                        description: descriptionValue,
                        capture_datetime: captureDatetimeValue,
                        folder_id: folder_id
                    };
                }
            }).on('filebatchpreupload', function(event, data) {
           
                var form = $('form')[0];
                console.log(form)
                $.ajax({
                    method: "POST",
                    url: "/get-presigned-url", 
                    async: false,
                    success: function(response) {
                        $("#file-input").fileinput('refresh', {
                            uploadUrl: response.url
                        });
                        form.append('filename', response.filename);
                    }
                });
            }).on('filebatchuploadsuccess', function(event, data) {
                console.log("second")
                var formData = data.form;
                $.ajax({
                    method: "POST",
                    url: "{{ route('upload.upload') }}",
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(response) {
                        alert('Video uploaded and data saved successfully.');
                    }
                });
            });

            $(".btn-upload-3").on("click", function() {
                $("#file-input").fileinput('upload');
            });

            $(".btn-reset-3").on("click", function() {
                $("#file-input").fileinput('clear');
            }); */
            $.ajaxSetup({
                headers: {
                    "X-CSRF-TOKEN": "{{ csrf_token() }}",
                }
            });
            $("#file-input").fileinput({
                uploadUrl: "{{ route('upload.upload') }}",
                uploadAsync: true,
                showUpload: false,
                showRemove: false,
                maxFileCount: 5,
                required: true,
                allowedFileExtensions: ["mov", "mp4", "m4v"],
                uploadExtraData: function() {
                    var titleValue = $("#title").val();
                    var tagListValue = $("#tagList").val();
                    var descriptionValue = $("#description").val();
                    var captureDatetimeValue = $("#capture_datetime").val();
                    var folder_id = $("#folder_id").val();
                    if (!captureDatetimeValue || !descriptionValue) {
                        alert(
                            "Please fill out the Date/Time of Video Capture and Description fields before uploading.");
                        return; 
                    }
                    return {
                        title: titleValue,
                        tagList: tagListValue,
                        description: descriptionValue,
                        capture_datetime: captureDatetimeValue,
                        folder_id: folder_id

                    };
                }
            }).on('filebatchuploadcomplete', function(event, files, extra) {
                var segments = window.location.pathname.split('/');
                var folderId = segments[2]; 

                //window.location.href = "/folders/" + folderId;
            });
            $(".btn-upload-3").on("click", function() {
                $("#file-input").fileinput('upload');
            });
            $(".btn-reset-3").on("click", function() {
                $("#file-input").fileinput('clear');
            });
        });
    </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">

    <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> --}}