@include('admin.layouts.header')
@include('admin.layouts.sidebar')


<style>
*, *::before, *::after {
    box-sizing: border-box;
}

/* --- BUTTON STYLES --- */
.btn {
    border-radius: 8px;
    font-weight: 500;
    padding: 10px 20px;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap; 
}

.btn-primary { background-color: #007bff; color: white; }
.btn-primary:hover { background-color: #0056b3; box-shadow: 0 4px 10px rgba(0, 123, 255, 0.25); }
.btn-success { background-color: #28a745; color: white; }
.btn-success:hover { background-color: #218838; }
.btn-secondary { background-color: #6c757d; color: white; }
.btn-secondary:hover { background-color: #5a6268; }

.main-container {
    margin-left: 280px;               /* keep sidebar space */
    width: calc(100% - 280px);        /* remaining width */
    max-width: 800px;                  /* optional: limit container width */
    display: flex;
    flex-direction: column;
    align-items: center;              /* center inner content */
    text-align: center;
    min-height: calc(100vh - 100px);
    padding: 40px 20px;
    margin-right: auto;               /* pushes container slightly left into center */
}

.controls-container {
    display: flex;
    justify-content: center;       /* center buttons & select */
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 20px;
    width: 100%;
    max-width: 600px;              /* prevent select stretching too much */
}

.controls-container .form-group {
    margin-bottom: 0;
    flex: 1;
    display: flex;
    justify-content: center;
}

/* --- MODAL --- */
.custom-modal {
    display: none;
    position: fixed;
    z-index: 1050;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    overflow: auto;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.custom-modal.show { display: flex; opacity: 1; }

.custom-modal-content {
    background-color: #fff;
    padding: 30px 35px;
    border-radius: 12px;
    width: 90%; 
    max-width: 600px;              /* increased modal width */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    position: relative;
    transform: translateY(-30px);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.custom-modal.show .custom-modal-content { transform: translateY(0); }

.modal-close-btn {
    position: absolute;
    top: 10px; right: 15px;
    font-size: 28px;
    font-weight: bold;
    color: #555;
    border: none;
    background: transparent;
    cursor: pointer;
    line-height: 1;
}
.modal-close-btn:hover { color: #000; }

/* --- FORM ELEMENTS --- */
.form-group { margin-bottom: 20px; }
.form-group label { font-weight: 600; margin-bottom: 8px; display: block; }
.form-control {
    width: 100%;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 16px;
    border: 1px solid #ced4da;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
    outline: none;
}

/* --- RADIO GROUP --- */
.radio-group {
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    margin: 25px 0;
}
.radio-group label {
    flex: 1;
    text-align: center;
    margin: 0 10px;
    font-weight: 500;
    cursor: pointer;
}

/* --- UTILITY CLASSES --- */
.text-center { text-align: center; }
.font-weight-bold { font-weight: bold; }
.mb-4 { margin-bottom: 1.5rem; }
.mt-4 { margin-top: 1.5rem; }
.pt-2 { padding-top: 0.5rem; }
.px-5 { padding-left: 3rem; padding-right: 3rem; }
.px-4 { padding-left: 1.5rem; padding-right: 1.5rem; }
.mr-2 { margin-right: 0.5rem; }

/* --- SELECT STYLES --- */
.custom-select-style {
    appearance: none;
    background-color: #fff;
    border: 1px solid #ced4da;
    padding: 10px 36px 10px 16px;
    font-size: 16px;
    border-radius: 8px;
    width: 100%; 
    min-width: 220px;
    max-width: 100%;
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.custom-select-style:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
    outline: none;
}

/* --- PAGE TITLE --- */
.page-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: rgb(99, 137, 168);
    margin-bottom: 20px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    letter-spacing: 1px;
}

/* --- RESPONSIVE --- */
@media (max-width: 576px) {
    .controls-container { flex-direction: column; }
    .custom-select-style { min-width: unset; width: 100%; }
    .btn { width: 100%; }
}

</style>




<div class="main-container">
    <div class="page-title">Add Document</div>  
    <div class="controls-container">
        <button class="btn btn-primary add_addtional_documents_in_the_list">
            Add in the list Documents <span style="margin-left: 8px; font-size: 20px;">+</span>
        </button>
        <div class="form-group">
            <select class="custom-select-style" id="documents" name="documents[]">
                <option value="">See the Existing Document List</option>
            </select>
        </div>
    </div>

    <div id="addDocumentModal" class="custom-modal">
        <div class="custom-modal-content">
            <button type="button" class="modal-close-btn" aria-label="Close">&times;</button>
            <h5 class="text-center mb-4 font-weight-bold" style="color: #007bff;">Add New Document</h5>
            <div class="radio-group">
                <label><input type="radio" name="role" value="applicant" checked> Applicant</label>
                <label><input type="radio" name="role" value="co_applicant"> Co-Applicant</label>
                <label><input type="radio" name="role" value="merchant"> Merchant</label>
            </div>
            <div class="form-group">
                <label for="documentName">Document Name</label>
                <input type="text" id="documentName" class="form-control" placeholder="Enter document name">
            </div>
            <div class="text-center mt-4 pt-2">
                <button id="saveDocument" class="btn btn-success px-5 mr-2">Save</button>
                <button type="button" class="btn btn-secondary px-4" id="cancelModal">Cancel</button>
            </div>
        </div>
    </div>
</div>

<script>
    var _token = '{{ csrf_token() }}';

    async function makeRequest(url, method = 'GET', data = null) {
        const options = {
            method,
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': _token }
        };
        if (data && method !== 'GET') options.body = JSON.stringify(data);
        const response = await fetch(url, options);
        if (!response.ok) {
            const errorData = await response.json().catch(() => null);
            throw { status: response.status, data: errorData };
        }
        return response.json();
    }

    function loadAllDocumentTypes() {
        const roles = ['applicant', 'co_applicant', 'merchant'];
        const selectEl = document.getElementById('documents');
        selectEl.innerHTML = '<option value="">See the Existing Document List</option>';
        roles.forEach(role => {
            makeRequest(`/admin/document-types/${role}`)
                .then(data => {
                    if (Array.isArray(data) && data.length) {
                        const roleName = role.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase());
                        const group = document.createElement('optgroup');
                        group.label = `${roleName} Documents`;
                        data.forEach(doc => {
                            const option = document.createElement('option');
                            option.value = doc.id;
                            option.textContent = doc.document_type_name;
                            option.dataset.isPassword = doc.is_password_protected ? 1 : 0;
                            option.dataset.isBank = doc.is_bank_statement ? 1 : 0;
                            group.appendChild(option);
                        });
                        selectEl.appendChild(group);
                    }
                })
                .catch(error => console.error(`Error fetching document types for ${role}`, error));
        });
    }

    document.addEventListener('DOMContentLoaded', function () {
        loadAllDocumentTypes();

        const modal = document.getElementById('addDocumentModal');
        const openModalBtn = document.querySelector('.add_addtional_documents_in_the_list');
        const closeModalBtns = document.querySelectorAll('.modal-close-btn, #cancelModal');

        const showModal = () => modal.classList.add('show');
        const hideModal = () => modal.classList.remove('show');

        openModalBtn.addEventListener('click', showModal);
        closeModalBtns.forEach(btn => btn.addEventListener('click', hideModal));
        modal.addEventListener('click', e => { if (e.target === modal) hideModal(); });

        document.getElementById('saveDocument').addEventListener('click', function () {
            const role = document.querySelector('input[name="role"]:checked').value;
            const documentNameInput = document.getElementById('documentName');
            const documentName = documentNameInput.value.trim();
            if (!documentName) return alert('Please enter a document name');

            const validNameRegex = /^[a-zA-Z0-9 _-]+$/;
            if (!validNameRegex.test(documentName)) {
                return alert('Document name should not contain special characters.');
            }

            const existingDocuments = document.querySelectorAll('#documents option');
            console.log(existingDocuments);
            for (let i = 0; i < existingDocuments.length; i++) {
                if (existingDocuments[i].textContent.toLowerCase() === documentName.toLowerCase()) {
                    alert('Document with this name already exists.');
                    return; 
                }
            }

            const postData = { role, document_type_name: documentName };
            makeRequest('/admin/document-types', 'POST', postData)
                .then(response => {
                    alert(response.message || 'Document saved successfully!');
                    loadAllDocumentTypes();
                    documentNameInput.value = '';
                    hideModal();
                })
                .catch(error => {
                    let errorMessage = 'Unexpected error while saving document.';
                    if (error.status === 409 && error.data) errorMessage = 'Error: ' + error.data.message;
                    else if (error.status === 422 && error.data) {
                        let errors = error.data.errors;
                        errorMessage = 'Please fix the following errors:\n';
                        for (let key in errors) errorMessage += '- ' + errors[key][0] + '\n';
                    }
                    alert(errorMessage);
                });
        });
    });
</script>

@include("admin.layouts.footer")