@extends('AdminMaster.authMaster')

@section('content')

<style>
    #uploadForm .form-group {
        margin-bottom: 0px;
    }

    #submitBtn {
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }

    .upload-form .file-select label {
        padding: 10px 10px;
        background: #669cec;
        color: #fff;
        border-radius: 6px;
        cursor: pointer;
    }

    .upload-form .file-select input[type="file"] {
        display: none;
    }

    .upload-icon {
        width: 120px;
        height: 100px;
        margin: 0 auto;
    }

    .upload-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .upload-form {
        text-align: center;
        border: 1px solid rgb(0 0 0 / 17%);
        border-radius: 6px;
        padding: 15px 0px;
    }

    form .form-label {
        font-size: 14px;
        line-height: 18px;
    }

    form .form-control {
        padding: 5px 10px;
        border-radius: 0px;
    }

    .upload-form .file-select label {
        background: #1928d2 !important;
    }

    .form-sub-btn {
        background: #1928d2 !important;
        color: #fff !important;
        padding: 0.875rem 2.5rem !important;
        border-radius: 3px !important;
        font-size: 0.875rem !important;
        line-height: 1 !important;
        font-family: "ubuntu-bold", sans-serif !important;
    }

    .form-sub-btn:hover {
        background-color: #434ef096 !important;
        border-color: #434ef096 !important;
    }

    .current-files {
        margin-bottom: 15px;
        padding: 10px;
        border: 1px dashed #ccc;
        border-radius: 5px;
    }

    .current-file {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 5px;
        background: #f8f9fa;
        margin-bottom: 5px;
        border-radius: 3px;
    }

    .remove-file, .remove-thumbnail {
        margin-left: 10px;
    }

    .current-thumbnail {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }
    .input-addon {
        display: flex;
    }

    .input-addon > .form-element {
        margin-top: 0;
    }

    .input-field {
        flex: 1;
    }

    .input-addon-item {
        padding: 5px;
        width: 35px;
        border: 1px solid #d2d6de;
        border-left: 0;
        background: #fff;
        color: #6a6b6d;
    }
    .tagify__input{
        margin: 0px !important;
    }
    .progress{
        height: 15px !important;
    }
</style>

<div class="row">
    <div class="col-12 grid-margin stretch-card">
        <div class="card file-up-form">
            <div class="card-body">
                <h4 class="card-title">Edit Media File</h4>

                <form id="uploadForm" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')

                    <div id="validation-errors" class="alert alert-danger d-none">
                        <ul id="error-list" class="mb-0"></ul>
                    </div>
                    <div class="row justify-content-center">
                        <div class="col-6">
                            <div class="form-group mb-3">
                                <label for="title" class="form-label">Name</label>
                                <div class="input-addon">
                                    <input type="text" class="form-control" id="name" name="name"  placeholder="Enter Name">
                                    <button class="input-addon-item">
                                        <span class="fa fa-user"></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group mb-3">
                                <label for="title" class="form-label">Title</label>
                                <div class="input-addon">
                                    <input type="text" class="form-control" id="title" name="title"  placeholder="Add Titile">
                                    <button class="input-addon-item">
                                        <span class="fa-solid fa-t"></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group mb-3">
                                <label for="title" class="form-label">Purpose</label>
                                <input type="text" class="form-control" id="purpose" name="purpose"  placeholder="Enter Purpose">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group mb-3">
                                <label for="tags" class="form-label">Tags</label>
                                <div class="input-addon">
                                    <input type="text" class="form-control" id="tags" name="tags" placeholder="Add tags">
                                    <button class="input-addon-item">
                                        <span class="fa-solid fa-tag"></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group mb-3">
                                <label for="description" class="form-label">Description</label>
                                <div class="input-addon">
                                    <textarea class="form-control" id="description" name="description" rows="14"  placeholder="Write Description here"></textarea>
                                    <!-- <button class="input-addon-item">
                                        <span class="fa-solid fa-comment"></span>
                                    </button> -->
                                </div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group mb-3">
                                <div class="upload-form mt-3">
                                    <div class="upload-icon">
                                        <img src="{{ asset('assets/images/Upload-icon.png')}}" />
                                    </div>
                                    <div class="upload-icon-text">
                                        <p>Drag and drop your file</p>
                                    </div>
                                    <div class="file-select">
                                        <label> Select File
                                            <input id="browseFile" type="file" name="video[]" multiple>
                                            <p id="fileList" class="mb-0"></p>
                                        </label>
                                    </div>
                                </div>
                                <!-- Progress Bar -->
                                <div class="progress" style="display: none; margin-top: 15px;">
                                    <div class="progress-bar progress-bar-striped progress-bar-animated"
                                        role="progressbar" style="width: 0%;" aria-valuenow="0"
                                        aria-valuemin="0" aria-valuemax="100">
                                        0%
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-6">
                            <!-- Current Files Display -->
                            <div class="current-files mt-3">
                                <h5>Current Files:</h5>
                                @php
                                    $filePaths = is_array($media->file_path) 
                                        ? $media->file_path 
                                        : explode('|', $media->file_path);
                                @endphp

                                @foreach($filePaths as $path)
                                    @if($path)
                                        <div class="current-file">
                                            <a href="{{ asset($path) }}" target="_blank">{{ basename($path) }}</a>
                                            <button type="button" class="btn btn-sm btn-danger remove-file" data-path="{{ $path }}">
                                                <i class="mdi mdi-delete"></i>
                                            </button>
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                        <div class="col-6">
                            <div class=" mt-3 mb-3">
                                <label>Thumbnail Image</label>
                                {{-- <input type="file" name="thumb_image" class="form-control"> --}}
                                <input type="file" name="thumb_image" class="form-control" id="thumbInput" accept="image/*">
                                <img id="thumbPreview" src="" alt="Thumbnail Preview" style="display: none; margin-top: 10px; max-width: 200px; height: auto; border: 1px solid #ddd; padding: 5px; border-radius: 5px;">
                            </div>
                        </div>
                        
                    </div>
                    <button type="submit" id="submitBtn" class="btn form-sub-btn mt-3">Update</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Resumable js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/resumable.js/1.0.3/resumable.min.js"
    integrity="sha512-OmtdY/NUD+0FF4ebU+B5sszC7gAomj26TfyUUq6191kbbtBZx0RJNqcpGg5mouTvUh7NI0cbU9PStfRl8uE/rw=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<!-- Include Tagify CSS & JS -->
<link href="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify"></script>

<!-- Jquery  -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>

<script>
    let resumable = new Resumable({
        target: "{{ route('media.submit') }}",
        query: {
            _token: '{{ csrf_token() }}'
        },
        chunkSize: 1 * 1024 * 1024, // 1MB chunks
        testChunks: false,
        throttleProgressCallbacks: 1,
    });

    let fileListContainer = $('#fileList');
    let progress = $('.progress');

    resumable.assignBrowse(document.getElementById('browseFile'));

    resumable.on('filesAdded', function(files) {
        fileListContainer.empty();
        files.forEach(file => {
            fileListContainer.append(`<div>${file.fileName}</div>`);
        });
        showProgress();
        resumable.upload();
    });

    resumable.on('fileSuccess', function(file, response) {
        updateProgress(100);
        progress.find('.progress-bar').addClass('bg-success').html('Files added, ready to update.');
    });

    resumable.on('fileProgress', function(file) {
        updateProgress(Math.floor(file.progress() * 100));
    });

    resumable.on('fileError', function(file, response) {
        hideProgress();
        alert('File uploading error.');
    });

    function showProgress() {
        progress.find('.progress-bar').css('width', '0%');
        progress.find('.progress-bar').html('0%');
        progress.find('.progress-bar').removeClass('bg-success');
        progress.show();
    }

    function updateProgress(value) {
        progress.find('.progress-bar').css('width', `${value}%`);
        progress.find('.progress-bar').html(`${value}%`);
    }

    function hideProgress() {
        progress.hide();
    }

    // Initialize Tagify
    var input = document.querySelector("#tags");
    new Tagify(input, {
        whitelist: ['php', 'image', 'laravel'],
        maxTags: 10,
        dropdown: {
            maxItems: 20,
            enabled: 0,
        }
    });

    // Thumbnail preview
    document.getElementById('thumbInput').addEventListener('change', function(event) {
        let file = event.target.files[0];
        if (file) {
            let reader = new FileReader();
            reader.onload = function(e) {
                let preview = document.getElementById('thumbPreview');
                preview.src = e.target.result;
                preview.style.display = 'block';
            }
            reader.readAsDataURL(file);
        }
    });

    // Remove file handler
    $(document).on('click', '.remove-file', function() {
        let path = $(this).data('path');
        $(this).closest('.current-file').remove();
        $('#uploadForm').append(`<input type="hidden" name="remove_files[]" value="${path}">`);
    });

    // Remove thumbnail handler
    $(document).on('click', '.remove-thumbnail', function() {
        let path = $(this).data('path');
        $(this).closest('.current-thumbnail').remove();
        $('#uploadForm').append(`<input type="hidden" name="remove_thumbnail" value="1">`);
    });

    // Form submission
    $('#uploadForm').on('submit', function(e) {
        e.preventDefault();
        let formData = new FormData(this);

      resumable.files.forEach((file) => {
    formData.append('filePath[]', '/storage/uploads/' + file.fileName);
});


        $.ajax({
            url: "{{ isset($media) ? route('media.update', $media->id) : '' }}",
            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: 'Success!',
                    text: 'Media updated successfully!',
                    confirmButtonColor: '#3085d6',
                    confirmButtonText: 'OK'
                }).then(() => {
                    window.location.href = "";
                });
            },
            error: function(response) {
                $('#validation-errors').removeClass('d-none');
                $('#error-list').empty();

                if (response.responseJSON && response.responseJSON.errors) {
                    let errors = response.responseJSON.errors;
                    $.each(errors, function(key, value) {
                        $('#error-list').append(`<li>${value[0]}</li>`);
                    });
                } else {
                    $('#error-list').append(`<li>Something went wrong, please try again.</li>`);
                }
            }
        });
    });
</script>
@endsection