@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="uploadContainer" data-can-upload-videos="{{ $canUploadVideos }}"
                            data-can-upload-documents="{{ $canUploadDocuments }}"
                            data-can-upload-images="{{ $canUploadImages }}">
                        </div>
                        <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">
                            <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<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="capture_datetime" class="col-md-4 col-form-label text-md-right">Release date<sup>*</sup></label>
                                <div class="col-md-6">
                                    <input id="capture_datetime" type="date"
                                        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 id="captureDatetimeError" class="text-danger" style="display: none;"></div>

                                </div>
                            </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 tags 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>

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

                                </div>
                            </div>
                            {{-- <div id="dropzoneDiv" class="dropzone dz-clickable"> --}}

                            {{--  </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://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>
        $(document).ready(function() {
            var today = new Date().toISOString().split('T')[0];
            $('#capture_datetime').attr('max', today);
        });



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

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



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

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

            if (textContent.trim() === "") {
                $("#textContentError").text("Text Content is required.").show();
            } else {
                $("#textContentError").hide();
            }

            if (capture_datetime.trim() === "") {
                $("#captureDatetimeError").text("Release Date is required.").show();
            } else {
                $("#captureDatetimeError").hide();
            }
            var isValid = false;
            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() === "" || capture_datetime.trim() ===
                "") {
                return;
            }


            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 csrfToken = document.getElementById('csrf_token').value;
            var title = $('#title').val();
            var description = $('#description').val();
            var textContent = $('#textContent').val();
            var capture_datetime = $('#capture_datetime').val();
            var tagList = $('#tagList').val();
            var folder_id = $('#folder_id').val();

            var formData = new FormData();

            formData.append('_token', csrfToken);
            formData.append('title', title);
            formData.append('description', description);
            formData.append('textContent', textContent);
            formData.append('capture_datetime', capture_datetime);
            formData.append('tagList', tagList);
            formData.append('folder_id', folder_id);
            if (isValid) {


            fetch('/upload-text-content', {
                    method: 'POST',
                    body: formData
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json();
                    
                })
                .then(data => {
                    if (data.success) {
                                var currentUrl = window.location.href;
                                var match = currentUrl.match(/\/folders\/(\d+)/);
                                var successfulUploadMessage = 'Upload Successful.';
                                sessionStorage.setItem('successfulUploadMessage',
                                    successfulUploadMessage);
                                if (match && match[1]) {
                                    var dynamicValue = match[1];
                                    var redirectUrl = '/folders/' + dynamicValue;
                                    window.location.href = redirectUrl;
                                }
                            }
                })
                .catch(error => {
                    console.error('There was a problem with your fetch operation:', error);
                });

            }


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