@extends('layouts.app')
@push('styles')
    <link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css">

    <style>
        .dropzone {
            border: 2px dashed #4b5563;
            padding: 40px;
            cursor: pointer;
            background: #f9fafb;
        }

        .dropzone * {
            pointer-events: auto;
        }
    </style>
@endpush
@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h2 id="form-title">Upload Images</h2>
                </div>
                <div class="card-body" id="createForm">


                    <div class="form-group row">
                        <label class="col-md-3 col-form-label">Image Path<span class="text-danger asterisk">*</span></label>
                        <div class="col-md-9">
                            <select id="pathType" name="pathType" class="form-control">
                                <option value=""></option>
                                <option value="articles">articles</option>
                                <option value="on-boarding">on-boarding</option>
                                <option value="website">website</option>
                                <option value="submodules">submodules</option>
                            </select>
                        </div>
                    </div>

                    <div id="languageBox" class="d-none form-group row">
                        <label class="col-md-3 col-form-label">Select Language<span
                                class="text-danger asterisk">*</span></label>
                        <div class="col-md-9">
                            <select id="vCode" name="vCode" class="form-control">
                                <option value=""></option>
                                @foreach ($languages as $language)
                                    <option value="{{ $language->vCode }}" @selected(strtolower($language->vCode) == 'eng')>
                                        {{ strtolower($language->vCode) }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div id="customPathBox" class="d-none form-group row">
                        <label class="col-md-3 col-form-label">Custom Path<span
                                class="text-danger asterisk">*</span></label>
                        <div class="col-md-9">
                            <input type="text" id="customPath" maxlength="20" placeholder="custom-path"
                                class="form-control" />
                        </div>
                    </div>

                    <div id="programBox" class="d-none form-group row">
                        <label class="col-md-3 col-form-label">Program<span class="text-danger asterisk">*</span></label>
                        <div class="col-md-9">
                            <select id="program" name="program" class="form-control">
                                @foreach ($programs as $p)
                                    <option value="{{ $p->iProgramID }}" {{ $p->iProgramID == 3 ? 'selected' : '' }}>
                                        p{{ $p->iProgramID }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <form id="imageDropzone" class="dropzone">
                        <div class="dz-message" data-dz-message>
                            <span>
                                Drag & drop images here<br>
                                <small>or click to select (jpg / png only)</small>
                            </span>
                        </div>
                    </form>

                    <div id="uploadError" style="display:none;color:red;font-weight:bold;margin-top:10px">
                    </div>
                    <div class="mt-3">
                        <button id="uploadBtn" type="button" class="btn btn-success">
                            <span class="btn-text">Upload</span>
                            <i class="fa fa-spinner fa-spin d-none" id="uploadSpinner"></i>
                        </button>
                    </div>
                    <p id="saveMessage" style="display:none;color:red;font-weight:bold">
                        Save these urls now as you will not be able to see them again if you try to upload more images or
                        leave this page.
                    </p>

                    <ul id="uploadedUrls"></ul>
                    <ul id="existingFiles" style="color:#b45309;font-weight:bold;margin-top:10px">
                    </ul>

                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
    <script type="module">
        Dropzone.autoDiscover = false;
        $(document).ready(function() {

            const type = document.getElementById('pathType');

            type.addEventListener('change', () => {
                languageBox.classList.toggle('d-none', type.value !== 'on-boarding');
                customPathBox.classList.toggle('d-none', type.value !== 'website');
                programBox.classList.toggle('d-none', type.value !== 'submodules');
            });

            const dz = new Dropzone("#imageDropzone", {
                clickable: true,
                url: "/upload-images",
                autoProcessQueue: false,
                uploadMultiple: true,
                parallelUploads: 10,
                paramName: "files",
                acceptedFiles: ".jpg,.png",
                addRemoveLinks: true,
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },

                init() {
                    document.getElementById('uploadBtn').addEventListener('click', () => {

                        document.getElementById('uploadError').style.display = 'none';
                        document.getElementById('uploadError').innerText = '';

                        document.getElementById('uploadedUrls').innerHTML = '';
                        document.getElementById('existingFiles').innerHTML = '';
                        document.getElementById('saveMessage').style.display = 'none';

                        if (!this.files.length) {
                            const errorBox = document.getElementById('uploadError');
                            errorBox.innerText = 'Please add images';
                            errorBox.style.display = 'block';
                            return;
                        }

                        setUploadLoading(true);
                        this.processQueue();
                    });
                },

                sending(file, xhr, formData) {
                    const type = pathType.value;
                    formData.append('path_type', type);

                    if (type === 'on-boarding') {
                        formData.append('language', document.getElementById('vCode').value);
                    }

                    if (type === 'website') {
                        if (!/^[a-z0-9-]{1,20}$/.test(document.getElementById('customPath').value)) {
                            alert('Invalid website path');
                            this.removeAllFiles(true);
                            return false;
                        }
                        formData.append('custom_path', document.getElementById('customPath').value);
                    }

                    if (type === 'submodules') {
                        formData.append('program', document.getElementById('program').value);
                    }
                },

                success(files, response) {
                    const uploadedList = document.getElementById('uploadedUrls');
                    const existingList = document.getElementById('existingFiles');

                    uploadedList.innerHTML = '';
                    existingList.innerHTML = '';

                    if (response.uploaded && response.uploaded.length) {
                        response.uploaded.forEach(url => {
                            uploadedList.innerHTML += `
                                    <li>
                                        <button class="copy-btn btn btn-outline-primary" data-url="${url}"><i class="fa fa-copy"></i></button>
                                        <a href="${url}" target="_blank">${url}</a>
                                    </li>
                                `;
                        });
                    }
                    if (response.existing && response.existing.length) {
                        response.existing.forEach(filename => {
                            existingList.innerHTML += `
                                    <li style="color:#b45309;font-weight:bold;">
                                        ${filename} already exists
                                    </li>
                                `;
                        });
                    }

                    this.removeAllFiles(true);

                    document.getElementById('uploadError').style.display = 'none';
                    document.getElementById('saveMessage').style.display = 'block';
                    setUploadLoading(false);
                },

                error(file, errorMessage, xhr) {
                    let finalMessage = 'Upload failed';

                    // Laravel JSON response
                    if (xhr && xhr.responseText) {
                        try {
                            const response = JSON.parse(xhr.responseText);

                            if (response.message) {
                                finalMessage = response.message;
                            } else if (response.errors) {
                                finalMessage = Object.values(response.errors)[0][0];
                            }
                        } catch (e) {
                            finalMessage = errorMessage;
                        }
                    } else if (typeof errorMessage === 'string') {
                        finalMessage = errorMessage;
                    }

                    const errorBox = document.getElementById('uploadError');
                    errorBox.innerText = finalMessage;
                    errorBox.style.display = 'block';

                    this.removeFile(file);
                    setUploadLoading(false);

                }

            });

            dz.on("addedfile", file => {
                if (file.name.includes(' ')) {
                    const errorBox = document.getElementById('uploadError');
                    errorBox.innerText = 'Filenames must not contain spaces';
                    errorBox.style.display = 'block';
                    dz.removeFile(file);
                }
            });


            document.addEventListener('click', function(e) {
                const button = e.target.closest('.copy-btn');
                if (!button) return;

                const text = button.getAttribute('data-url');

                // Modern clipboard (HTTPS)
                if (navigator.clipboard && window.isSecureContext) {
                    navigator.clipboard.writeText(text).then(() => {
                        button.innerHTML = '<i class="fa fa-check"></i>';
                        setTimeout(() => {
                            button.innerHTML = '<i class="fa fa-copy"></i>';
                        }, 1000);
                    });
                    return;
                }

                // 🔁 Fallback (HTTP / IP)
                const textarea = document.createElement('textarea');
                textarea.value = text;
                textarea.style.position = 'fixed';
                textarea.style.opacity = '0';
                document.body.appendChild(textarea);
                textarea.focus();
                textarea.select();

                try {
                    document.execCommand('copy');
                    button.innerHTML = '<i class="fa fa-check"></i>';
                    setTimeout(() => {
                        button.innerHTML = '<i class="fa fa-copy"></i>';
                    }, 1000);
                } catch (err) {
                    button.innerHTML = '<i class="fa fa-times"></i>';
                    setTimeout(() => {
                        button.innerHTML = '<i class="fa fa-copy"></i>';
                    }, 1000);
                }

                document.body.removeChild(textarea);
            });

            function setUploadLoading(isLoading) {
                const btn = document.getElementById('uploadBtn');
                const spinner = document.getElementById('uploadSpinner');
                const text = btn.querySelector('.btn-text');

                if (isLoading) {
                    btn.disabled = true;
                    spinner.classList.remove('d-none');
                    text.classList.add('d-none');
                } else {
                    btn.disabled = false;
                    spinner.classList.add('d-none');
                    text.classList.remove('d-none');
                }
            }

        });
    </script>
@endpush