@extends('Frontend.Master.authMaster')
@section('content')
<style>
  .progress-bar {
    background-color: #28a745 !important; /* Green color */
}
</style>
<section class="upload-form-sec">
    <div class="upload-form-sec-wrap">
        <div class="container">
            <div class="row">
                <div class="col-lg-3">
                    @include('Frontend.Layouts.leftbar')
                </div>

                <div class="col-lg-9 mt-4">
                    <div class="upload-form-div">
                        <div class="upload-form-head">
                            <h3>Edit Document</h3>
                            <p>Modify your document details below</p>
                        </div>

                        <form method="POST" enctype="multipart/form-data" id='formUpdate'>
                            @csrf

                            <!-- 
                            <input type="hidden" name="filePath" value="{{ $file->file_path }}">
                            <input type="hidden" name="id" value="{{ $file->id }}"> -->

                            <div class="upload-form">
                                <div class="upload-icon">
                                    <img src="{{ asset('assets/images/Upload-icon.png') }}" alt="">
                                </div>
                                <div class="file-select">
                                    <label for="videoInput">Choose File (optional)</label>
                                    <input type="file" name="files[]" id="videoInput" multiple>
                                    <small id="fileNameDisplay" style="display: none; margin-top: 5px;"></small>
                                </div>

                                @if(!empty($file->file_path))
                                <div class="text-center file-item">
                                    <small>Current File: <strong>{{ basename($file->file_path) }}</strong></small>
                                </div>
                                @endif

                                <div class="progress" id="progressBar" style="display: none; width: 100%; height: 20px; margin-top: 10px;">
                                    <div class="progress-bar progress-bar-striped progress-bar-animated bg-success"
                                        role="progressbar" style="width: 0%;" aria-valuenow="0"
                                        aria-valuemin="0" aria-valuemax="100">
                                    </div>
                                </div>
                            </div>

                            <!-- Progress Bar
                            <div class="progress" style="display: none; margin-top: 15px; height: 25px;">
                                <div class="progress-bar progress-bar-striped progress-bar-animated bg-primary"
                                    role="progressbar" style="width: 0%;" aria-valuenow="0"
                                    aria-valuemin="0" aria-valuemax="100">
                                    0%
                                </div>
                            </div> -->


                            <!-- <div class="upload-form">
                                <div class="upload-icon">
                                    <img src="{{ asset('assets/images/Upload-icon.png') }}" alt="">
                                </div>
                                <div class="file-select">
                                    <label>Choose File (optional)
                                        <input type="file" name="video">
                                    </label>
                                </div>
                                <div class="text-center">
                                    <small>Current File: <strong>{{ basename($file->file_path) }}</strong></small>
                                </div>
                            </div> -->
                            <div class="mt-3">
                                <label class="form-label">Thumbnail Image </label>
                                <input type="file" class="form-control" name="thumb_image">
                                @if($file->thumb_image)
                                <p class="mt-2">Current Thumbnail:</p>
                                <img src="{{ asset('storage/' . $file->thumb_image) }}" alt="Thumbnail" style="width: 100px; height: 100px; object-fit: cover;">
                                @endif
                            </div>
                            {{-- <pre>{{ print_r($file->thumb_image, true) }}</pre> --}}
                            <!-- @if ($file->thumb_image && file_exists(storage_path('app/public/' . $file->thumb_image)))
                            <img src="{{ asset('storage/' . $file->thumb_image) }}" alt="Thumbnail" style="width: 100px; height: 100px; object-fit: cover;">
                            @else
                            <p>No image available</p>
                            @endif -->



                            <div class="mt-3">
                                <label class="form-label">Title <span class="star">*</span></label>
                                <input type="text" class="form-control" name="title" value="{{ $file->title }}">
                            </div>

                            <div class="mt-3">
                                <label class="form-label">Description <span class="star">*</span></label>
                                <textarea class="form-control" name="description" rows="5">{{ $file->description }}</textarea>
                            </div>

                            <div class="mt-3">
                                <label class="form-label">Purpose</label>
                                <input type="text" class="form-control" name="purpose" value="{{ $file->purpose }}">
                            </div>

                            <div class="mt-3">
                                <label class="form-label">Tags</label>
                                <input type="text" class="form-control" id="tags" name="tags" value="{{ $tags }}"
                                    placeholder="Add tag">

                                <p class="small">Enter tags separated by commas</p>
                            </div>

                            <div class="text-center mt-4">
                                <button type="submit" class="btn btn-primary">Update</button>
                            </div>
                        </form>

                    </div>
                </div>

            </div>
        </div>
    </div>
</section>
<script>
    document.getElementById('videoInput').addEventListener('change', function(event) {
        let fileList = event.target.files;
        let fileNameDisplay = document.getElementById('fileNameDisplay');
        let progressBar = document.getElementById('progressBar');
        let progressBarInner = progressBar.querySelector('.progress-bar');

        fileNameDisplay.innerHTML = ""; // Clear previous list

        if (fileList.length > 0) {
            fileNameDisplay.style.display = 'block';
            progressBar.style.display = 'block'; // Keep progress bar visible
            progressBarInner.style.width = '0%';
            progressBarInner.textContent = '0%';

            let percent = 0;
            let interval = setInterval(() => {
                if (percent >= 100) {
                    clearInterval(interval);
                    progressBarInner.style.width = '100%';
                    progressBarInner.textContent = 'Files added , Please submit the form details.';
                } else {
                    percent += 20;
                    progressBarInner.style.width = percent + '%';
                    progressBarInner.textContent = percent + '%';
                }
            }, 300); // Simulating progress over time

            Array.from(fileList).forEach(file => {
                let listItem = document.createElement('li');
                listItem.textContent = file.name;
                fileNameDisplay.appendChild(listItem);
            });
        } else {
            fileNameDisplay.style.display = 'none';
            progressBar.style.display = 'none';
        }
    });
    $('#formUpdate').on('submit', function(e) {
        e.preventDefault();
        document.getElementById('progressBar').style.display = 'none';
        let formData = new FormData(this);
        let fileId = "{{ $file->id }}";
        var files = $('#videoInput')[0].files;

        $.ajax({
            url: "{{ route('media.update', ['id' => '__id__']) }}".replace('__id__', fileId),
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },

            success: function(response) {
                Swal.fire({
                    icon: 'success',
                    // title: 'Oops...',
                    text: response.success,
                    confirmButtonColor: 'blue',
                    confirmButtonText: ' ok'
                }).then(() => {
                    // location.reload();
                    window.location.href = "{{ route('manageFile.view') }}";
                });

            },
            error: function(response) {
                // console.log(response);
                var allErrors = '';
                for (datos in response.responseJSON.errors) {
                    allErrors += response.responseJSON.errors[datos] + '\n';
                }
                Swal.fire({
                    icon: 'error',
                    // title: 'Oops...',
                    text: allErrors,
                    confirmButtonColor: '#d33',
                    confirmButtonText: 'Try Again'
                });
            }
        });
    });
</script>
<!-- Tagify JS + CSS -->
<link href="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify"></script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const input = document.querySelector("#tags");

        if (input) {
            new Tagify(input, {
                whitelist: @json($allTags), // Tag suggestions from DB
                maxTags: 10,
                dropdown: {
                    maxItems: 20,
                    enabled: 0,
                    closeOnSelect: false
                }
            });
        }
    });
</script>
<!-- <script>
    $('#formUpdate').on('submit', function(e) {
        e.preventDefault();

        let formData = new FormData(this);
        let fileId = "{{ $file->id }}";
        var files = $('#videoInput')[0].files;

        $.ajax({
            url: "{{ route('media.update', ['id' => '__id__']) }}".replace('__id__', fileId),
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },

            success: function(response) {
                Swal.fire({
                    icon: 'success',
                    // title: 'Oops...',
                    text: response.success,
                    confirmButtonColor: 'blue',
                    confirmButtonText: ' ok'
                }).then(() => {
                    // location.reload();
                    window.location.href = "{{ route('manageFile.view') }}";
                });

            },
            error: function(response) {
                // console.log(response);
                var allErrors = '';
                for (datos in response.responseJSON.errors) {
                    allErrors += response.responseJSON.errors[datos] + '\n';
                }
                Swal.fire({
                    icon: 'error',
                    // title: 'Oops...',
                    text: allErrors,
                    confirmButtonColor: '#d33',
                    confirmButtonText: 'Try Again'
                });
            }
        });
    });

    document.getElementById('videoInput').addEventListener('change', function(event) {
        let fileList = event.target.files;
        let fileNameDisplay = document.getElementById('fileNameDisplay');
    
        if (fileList.length > 0) {
            fileNameDisplay.style.display = 'block';

            Array.from(fileList).forEach(file => {
                let listItem = document.createElement('li');
                listItem.textContent = file.name;
                fileNameDisplay.appendChild(listItem);
            });
        } else {
            fileNameDisplay.style.display = 'none';
        }
    });
    // var input = document.querySelector("#tags");
    // new Tagify(input, {
    //     whitelist: ['php', 'image', 'laravel'],
    //     maxTags: 10,
    //     dropdown: {
    //         maxItems: 20,
    //         enabled: 0,
    //     }
    // });
</script> -->
@endsection