@extends('layouts.app')

@section('content')
@php
    $translationLanguages = ($appLanguages ?? collect())->filter(fn ($language) => filled($language->code))->values();
@endphp
<div class="page-wrapper">
    <div class="page-content">
        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
            <div class="ps-3">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 p-0">
                        <li class="breadcrumb-item"><a href="javascript:;"><i class="bx bx-home-alt"></i></a></li>
                        <li class="breadcrumb-item"><a href="{{ route('requireDocuments.index') }}">Required Documents</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Create</li>
                    </ol>
                </nav>
            </div>
        </div>

        <hr />

        <div class="card">
            <div class="card-body">
                <h6 class="mb-3">Add Required Document</h6>

                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                @php
                    $oldDocuments = old('documents');
                    if (!is_array($oldDocuments)) {
                        $oldDocuments = [];
                    }
                    $oldCountryId = old('country_id');
                    $isDefaultDocuments = old('is_default_documents', '0') === '1';

                    $numericKeys = array_map('intval', array_keys($oldDocuments ?: [0]));
                    $nextIndex = empty($numericKeys) ? 1 : (max($numericKeys) + 1);
                @endphp

                <form action="{{ route('userKycDoc.store') }}" method="POST" id="required-documents-create-form">
                    @csrf
                    <input type="hidden" name="is_default_documents" value="0">

                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label d-block">Default Documents</label>
                            <div class="form-check form-switch">
                                <input
                                    class="form-check-input"
                                    type="checkbox"
                                    id="default-doc-toggle"
                                    name="is_default_documents"
                                    value="1"
                                    {{ $isDefaultDocuments ? 'checked' : '' }}
                                >
                                <label class="form-check-label" for="default-doc-toggle">Enable Default (No Country)</label>
                            </div>
                        </div>
                    </div>

                    <div class="row g-3 mt-1">
                        <div class="col-md-4" id="country-field-wrapper" style="{{ $isDefaultDocuments ? 'display:none;' : '' }}">
                            <label for="single-select-field" class="form-label">Country</label>
                            <select
                                name="country_id"
                                id="single-select-field"
                                class="form-select"
                                data-placeholder="Choose country"
                                {{ $isDefaultDocuments ? '' : 'required' }}
                            >
                                <option></option>
                                @foreach ($countries as $country)
                                    <option value="{{ $country->id }}" {{ (string) $oldCountryId === (string) $country->id ? 'selected' : '' }}>
                                        {{ $country->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="mt-4 mb-4">
                        <h6 class="mb-3">Add New Document For This Country (Optional)</h6>
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label for="add_document_type" class="form-label">Document Name</label>
                                <input
                                    type="text"
                                    id="add_document_type"
                                    class="form-control"
                                    placeholder="Passport / Aadhar / PAN"
                                >
                            </div>
                            <div class="col-md-4">
    <label class="form-label">Document Key</label>
    <input
        type="text"
        id="add_document_key"
        class="form-control"
        readonly
        placeholder="Auto Generated"
    >
</div>
                            <div class="col-md-4">
                                <label for="add_description" class="form-label">Description</label>
                                <input
                                    type="text"
                                    id="add_description"
                                    class="form-control"
                                    placeholder="Optional description"
                                >
                            </div>
                            <div class="col-md-2">
                                <label for="add_is_required" class="form-label">Required</label>
                                <select class="form-select" id="add_is_required">
                                    <option value="1" selected>True</option>
                                    <option value="0">False</option>
                                </select>
                            </div>
                            
                            <div class="col-md-2">
                                <label class="form-label d-block">Status</label>
                                <div class="status-toggle-wrapper">
                                    <input type="hidden" id="add_status" class="status-value-input" value="active">
                                    <button
                                        type="button"
                                        class="btn btn-sm w-100 status-toggle-local btn-success"
                                    >
                                        Active
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <button type="button" class="btn btn-success" id="add-document-row">Add</button>
                            </div>
                        </div>
                    </div>

                    <div class="table-responsive mt-3">
                        <table class="table table-bordered align-middle">
                            <thead>
                                <tr>
                                    <th style="width: 45%;">Document Name</th>
                                    <th style="width: 45%;">Description</th>
                                    <th style="width: 10%;">Action</th>
                                </tr>
                            </thead>
                            <tbody id="documents-create-body" data-next-index="{{ $nextIndex }}">
                                @foreach ($oldDocuments as $index => $document)
                                    @php
                                        $rowStatus = ($document['status'] ?? 'active') === 'deactivated' ? 'deactivated' : 'active';
                                        $rowRequired = (string) ($document['is_required'] ?? '1');
                                    @endphp
                                    <tr>
                                        <td>
                                            <input
                                                type="text"
                                                class="form-control"
                                                name="documents[{{ $index }}][document_type]"
                                                value="{{ $document['document_type'] ?? '' }}"
                                                placeholder="Passport / Aadhar / PAN"
                                                required
                                            >
                                        </td>
                                        <td>
                                            <input
                                                type="text"
                                                class="form-control"
                                                name="documents[{{ $index }}][description]"
                                                value="{{ $document['description'] ?? '' }}"
                                                placeholder="Optional description"
                                            >
                                            <input type="hidden" name="documents[{{ $index }}][is_required]" value="{{ $rowRequired === '0' ? '0' : '1' }}">
                                            <input type="hidden" name="documents[{{ $index }}][status]" value="{{ $rowStatus }}">
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-sm btn-danger w-100 remove-document-row">Remove</button>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <div class="mt-4 mb-3 border rounded p-3">
                        <h6 class="mb-1 text-primary">Global Translate Option</h6>
                        <p class="text-muted mb-2 small">Automatically translate using Google Translate API if checked.</p>
                        @include('includes.partial.auto_translate.create_toggle')
                    </div>

                    <div class="mt-4 d-flex align-items-center gap-2">
                        <button type="submit" class="btn btn-primary">Store</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    function applyDefaultDocumentsToggleState() {
        const toggle = document.getElementById('default-doc-toggle');
        const countryWrapper = document.getElementById('country-field-wrapper');
        const countrySelect = document.getElementById('single-select-field');

        if (!toggle || !countryWrapper || !countrySelect) {
            return;
        }

        if (toggle.checked) {
            countryWrapper.style.display = 'none';
            countrySelect.removeAttribute('required');
            countrySelect.value = '';

            if (window.jQuery) {
                window.jQuery(countrySelect).val('').trigger('change');
            }
        } else {
            countryWrapper.style.display = '';
            countrySelect.setAttribute('required', 'required');
        }
    }

    function setStatusButtonState(button, statusValue) {
        if (statusValue === 'active') {
            button.classList.remove('btn-danger');
            button.classList.add('btn-success');
            button.textContent = 'Active';
        } else {
            button.classList.remove('btn-success');
            button.classList.add('btn-danger');
            button.textContent = 'Deactivated';
        }
    }

    function escapeHtml(value) {
        return String(value || '')
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#039;');
    }

    function createDocumentRow(index, data) {
        const documentType = escapeHtml(data.documentType || '');
        const description = escapeHtml(data.description || '');
        const isRequired = data.isRequired === '0' ? '0' : '1';
        const status = data.status === 'deactivated' ? 'deactivated' : 'active';

        const tr = document.createElement('tr');
        tr.innerHTML = `
            <td>
                <input
                    type="text"
                    class="form-control"
                    name="documents[${index}][document_type]"
                    value="${documentType}"
                    placeholder="Passport / Aadhar / PAN"
                    required
                >
            </td>
            <td>
                <input
                    type="text"
                    class="form-control"
                    name="documents[${index}][description]"
                    value="${description}"
                    placeholder="Optional description"
                >
                <input type="hidden" name="documents[${index}][is_required]" value="${isRequired}">
                <input type="hidden" name="documents[${index}][status]" value="${status}">
            </td>
            <td>
                <button type="button" class="btn btn-sm btn-danger w-100 remove-document-row">Remove</button>
            </td>
        `;

        return tr;
    }

    function appendPendingDocumentRow() {
        const tbody = document.getElementById('documents-create-body');
        const documentTypeInput = document.getElementById('add_document_type');
        const descriptionInput = document.getElementById('add_description');
        const requiredInput = document.getElementById('add_is_required');
        const statusInput = document.getElementById('add_status');

        if (!tbody || !documentTypeInput || !requiredInput || !statusInput) {
            return false;
        }

        const documentType = documentTypeInput.value.trim();
        if (!documentType) {
            return false;
        }

        let nextIndex = parseInt(tbody.dataset.nextIndex || '1', 10);
        if (Number.isNaN(nextIndex) || nextIndex < 1) {
            nextIndex = tbody.querySelectorAll('tr').length + 1;
        }

        const row = createDocumentRow(nextIndex, {
            documentType: documentType,
            description: descriptionInput ? descriptionInput.value : '',
            isRequired: requiredInput.value,
            status: statusInput.value
        });
        tbody.appendChild(row);
        tbody.dataset.nextIndex = String(nextIndex + 1);

        documentTypeInput.value = '';
        if (descriptionInput) {
            descriptionInput.value = '';
        }
        requiredInput.value = '1';
        statusInput.value = 'active';
        const documentKeyInput = document.getElementById('add_document_key');
        if (documentKeyInput) {
            documentKeyInput.value = '';
        }

        const addStatusWrapper = statusInput.closest('.status-toggle-wrapper');
        const addStatusButton = addStatusWrapper ? addStatusWrapper.querySelector('.status-toggle-local') : null;
        if (addStatusButton) {
            setStatusButtonState(addStatusButton, 'active');
        }

        return true;
    }

    document.addEventListener('click', function (event) {

        const addBtn = event.target.closest('#add-document-row');
        if (addBtn) {
            const added = appendPendingDocumentRow();
            if (!added) {
                const documentTypeInput = document.getElementById('add_document_type');
                if (documentTypeInput) {
                    documentTypeInput.focus();
                }
            }
            return;
        }

        const removeBtn = event.target.closest('.remove-document-row');
        if (removeBtn) {
            const tbody = document.getElementById('documents-create-body');
            const row = removeBtn.closest('tr');
            if (!tbody || !row) {
                return;
            }

            row.remove();
            return;
        }

        const statusBtn = event.target.closest('.status-toggle-local');
        if (!statusBtn) {
            return;
        }

        const wrapper = statusBtn.closest('.status-toggle-wrapper');
        if (!wrapper) {
            return;
        }

        const hiddenInput = wrapper.querySelector('.status-value-input');
        if (!hiddenInput) {
            return;
        }

        const nextStatus = hiddenInput.value === 'active' ? 'deactivated' : 'active';
        hiddenInput.value = nextStatus;
        setStatusButtonState(statusBtn, nextStatus);
    });

    document.addEventListener('submit', function (event) {
        const form = event.target.closest('#required-documents-create-form');
        if (!form) {
            return;
        }

        appendPendingDocumentRow();
    });

    document.addEventListener('change', function (event) {
        const toggle = event.target.closest('#default-doc-toggle');
        if (!toggle) {
            return;
        }

        applyDefaultDocumentsToggleState();
    });

    applyDefaultDocumentsToggleState();


    function generateDocumentKey(name) {
    return name
        .trim()
        .toLowerCase()
        .replace(/[^a-z0-9]+/g, '_')
        .replace(/^_+|_+$/g, '');
}

document.getElementById('add_document_type').addEventListener('input', function () {
    document.getElementById('add_document_key').value = generateDocumentKey(this.value);
});
</script>
@endsection