@extends('layouts.app')

@section('content')
@php
    $canCreateRequiredDocument = auth()->check() && auth()->user()->hasPermission('KYC_required_document', 'create');
    $canDeleteRequiredDocument = auth()->check() && auth()->user()->hasPermission('KYC_required_document', 'delete');
    $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">Edit</li>
                    </ol>
                </nav>
            </div>
        </div>

        <hr />

        <div class="card">
            <div class="card-body">
                @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
                    $resolvedCountryName = $countryName ?? ($country->name ?? 'Default Documents');
                    $resolvedCountryRouteKey = $countryRouteKey ?? ($country->id ?? 'default');
                @endphp

                <h6 class="mb-3">Edit Required Documents ({{ $resolvedCountryName }})</h6>

                <form action="{{ route('requireDocuments.update', $resolvedCountryRouteKey) }}" method="POST">
                    @csrf
                    @method('PUT')

                    @if ($canCreateRequiredDocument)
                        <div class="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="new_document_type" class="form-label">Document Name</label>
                                    <input
                                        type="text"
                                        id="new_document_type"
                                        name="new_document_type"
                                        class="form-control"
                                        value="{{ old('new_document_type') }}"
                                        placeholder="Passport / Aadhar / PAN"
                                    >
                                </div>
                                <div class="col-md-4">
                                    <label for="new_description" class="form-label">Description</label>
                                    <input
                                        type="text"
                                        id="new_description"
                                        name="new_description"
                                        class="form-control"
                                        value="{{ old('new_description') }}"
                                        placeholder="Optional description"
                                    >
                                </div>
                                <div class="col-md-2">
                                    <label for="new_is_required" class="form-label">Required</label>
                                    <select class="form-select" id="new_is_required" name="new_is_required">
                                        <option value="1" {{ (string) old('new_is_required', '1') === '1' ? 'selected' : '' }}>True</option>
                                        <option value="0" {{ (string) old('new_is_required') === '0' ? 'selected' : '' }}>False</option>
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label d-block">Status</label>
                                    @php
                                        $newStatus = old('new_status', 'active') === 'deactivated' ? 'deactivated' : 'active';
                                    @endphp
                                    <div class="status-toggle-wrapper">
                                        <input type="hidden" class="status-value-input" name="new_status" value="{{ $newStatus }}">
                                        <button
                                            type="button"
                                            class="btn btn-sm w-100 status-toggle-local {{ $newStatus === 'active' ? 'btn-success' : 'btn-danger' }}"
                                        >
                                            {{ $newStatus === 'active' ? 'Active' : 'Deactivated' }}
                                        </button>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <button type="submit" name="submit_action" value="add" class="btn btn-success" formnovalidate>Add</button>
                                </div>
                            </div>
                        </div>
                    @endif

                    <div class="table-responsive">
                        <table class="table table-bordered align-middle">
                            <thead>
                                <tr>
                                    <th style="width: 25%;">Document Name</th>
                                    <th style="width: 23%;">Description</th>
                                    <th style="width: 15%;">Document Key</th>
                                    <th style="width: 10%;">Required</th>
                                    <th style="width: 15%;">Status</th>
                                    <th style="width: 12%;">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($documents as $index => $document)
                                    <tr id="required-document-row-{{ $document->id }}">
                                        <td>
                                            <input type="hidden" name="documents[{{ $index }}][id]" value="{{ $document->id }}">
                                            <input
                                                type="text"
                                                class="form-control"
                                                name="documents[{{ $index }}][document_type]"
                                                value="{{ old('documents.' . $index . '.document_type', $document->{$documentColumn}) }}"
                                                required
                                            >
                                        </td>
                                        <td>
                                            <input
                                                type="text"
                                                class="form-control"
                                                name="documents[{{ $index }}][description]"
                                                value="{{ old('documents.' . $index . '.description', $document->description) }}"
                                                placeholder="Optional description"
                                            >
                                        </td>
                                        <td>{{ $document->require_document_key }}</td>
                                        <td>
                                            <select class="form-select" name="documents[{{ $index }}][is_required]" required>
                                                <option value="1" {{ (string) old('documents.' . $index . '.is_required', (int) $document->is_required) === '1' ? 'selected' : '' }}>True</option>
                                                <option value="0" {{ (string) old('documents.' . $index . '.is_required', (int) $document->is_required) === '0' ? 'selected' : '' }}>False</option>
                                            </select>
                                        </td>
                                        <td>
                                            @php
                                                $rowStatus = old('documents.' . $index . '.status', $document->status) === 'deactivated' ? 'deactivated' : 'active';
                                            @endphp
                                            <div class="status-toggle-wrapper">
                                                <input type="hidden" class="status-value-input" name="documents[{{ $index }}][status]" value="{{ $rowStatus }}">
                                                <button
                                                    type="button"
                                                    class="btn btn-sm w-100 status-toggle-live {{ $rowStatus === 'active' ? 'btn-success' : 'btn-danger' }}"
                                                    data-url="{{ route('requireDocuments.documentToggleStatus', $document->id) }}"
                                                >
                                                    {{ $rowStatus === 'active' ? 'Active' : 'Deactivated' }}
                                                </button>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="d-flex flex-column gap-1">
                                                @if ($canDeleteRequiredDocument)
                                                    <button
                                                        type="button"
                                                        class="btn btn-sm btn-danger w-100 delete-document-live"
                                                        data-url="{{ route('requireDocuments.documentDestroy', $document->id) }}"
                                                        data-row="#required-document-row-{{ $document->id }}"
                                                    >
                                                        Delete
                                                    </button>
                                                @endif
                                                <button
                                                    type="button"
                                                    class="btn btn-sm btn-info w-100 toggle-translations text-white"
                                                    data-target="#translations-{{ $document->id }}"
                                                >
                                                    Translate
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr id="translations-{{ $document->id }}" class="translation-row bg-light" style="display: none;">
                                        <td colspan="6" class="p-3">
                                            <div class="card card-body border shadow-none mb-0">
                                                <h6 class="mb-2 text-primary">Translations for "{{ $document->{$documentColumn} }}"</h6>
                                                <p class="text-muted mb-3 small">Manual translation fields. Default locale: <strong>{{ strtoupper($defaultTranslationLocale) }}</strong>.</p>
                                                
                                                @php
                                                    $documentTranslations = $document->translations->keyBy(fn ($t) => strtolower($t->locale));
                                                @endphp

                                                <ul class="nav nav-tabs nav-primary flex-nowrap overflow-auto mb-3" role="tablist">
                                                    @foreach($translationLanguages as $language)
                                                        <li class="nav-item" role="presentation">
                                                            <button
                                                                class="nav-link {{ $loop->first ? 'active' : '' }}"
                                                                data-bs-toggle="tab"
                                                                data-bs-target="#edit-doc-trans-tab-{{ $document->id }}-{{ $language->code }}"
                                                                type="button"
                                                                role="tab">
                                                                {{ strtoupper($language->code) }}
                                                            </button>
                                                        </li>
                                                    @endforeach
                                                </ul>

                                                <div class="tab-content">
                                                    @foreach($translationLanguages as $language)
                                                        @php
                                                            $locale = strtolower($language->code);
                                                            $translation = $documentTranslations->get($locale);
                                                            $translationLanguageName = $language->language->name ?? ($language->data['name'] ?? strtoupper($language->code));
                                                        @endphp
                                                        <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}" id="edit-doc-trans-tab-{{ $document->id }}-{{ $language->code }}" role="tabpanel">
                                                            <div class="row g-3">
                                                                <div class="col-md-6">
                                                                    <label class="form-label small mb-1">
                                                                        Document Name ({{ $translationLanguageName }})
                                                                        @if($language->code === $defaultTranslationLocale)
                                                                            <span class="badge bg-light text-dark border ms-1">Default</span>
                                                                        @endif
                                                                    </label>
                                                                    <input
                                                                        type="text"
                                                                        class="form-control form-control-sm"
                                                                        name="documents[{{ $index }}][translations][{{ $language->code }}][name]"
                                                                        value="{{ old('documents.' . $index . '.translations.' . $language->code . '.name', $translation->name ?? '') }}"
                                                                        placeholder="Translated name"
                                                                    >
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <label class="form-label small mb-1">Description ({{ $translationLanguageName }})</label>
                                                                    <textarea
                                                                        class="form-control form-control-sm"
                                                                        name="documents[{{ $index }}][translations][{{ $language->code }}][description]"
                                                                        rows="2"
                                                                        placeholder="Translated description"
                                                                    >{{ old('documents.' . $index . '.translations.' . $language->code . '.description', $translation->description ?? '') }}</textarea>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <div class="mt-4 mb-3 border rounded p-3">
                        <h6 class="mb-1">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.edit_toggle')
                    </div>

                    <div class="mt-4 d-flex align-items-center gap-2">
                        <button type="submit" class="btn btn-primary">Update</button>
                        <a href="{{ route('requireDocuments.index') }}" class="btn btn-light">Back</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    const csrfToken = "{{ csrf_token() }}";

    function updateStatusButtonState(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';
        }
    }

    document.addEventListener('click', function (event) {
        const toggleBtn = event.target.closest('.toggle-translations');
        if (toggleBtn) {
            const targetSelector = toggleBtn.dataset.target;
            const targetEl = document.querySelector(targetSelector);
            if (targetEl) {
                if (targetEl.style.display === 'none') {
                    targetEl.style.display = '';
                } else {
                    targetEl.style.display = 'none';
                }
            }
            return;
        }

        const liveStatusButton = event.target.closest('.status-toggle-live');
        if (liveStatusButton) {
            const url = liveStatusButton.dataset.url;
            if (!url || liveStatusButton.dataset.busy === '1') {
                return;
            }

            liveStatusButton.dataset.busy = '1';

            $.ajax({
                url: url,
                type: 'PATCH',
                data: {
                    _token: csrfToken
                },
                success: function (res) {
                    const nextStatus = res.status === 'deactivated' ? 'deactivated' : 'active';
                    const wrapper = liveStatusButton.closest('.status-toggle-wrapper');
                    const input = wrapper ? wrapper.querySelector('.status-value-input') : null;
                    if (input) {
                        input.value = nextStatus;
                    }
                    updateStatusButtonState(liveStatusButton, nextStatus);
                },
                error: function (xhr) {
                    const message = xhr.responseJSON?.message || 'Unable to update status.';
                    if (typeof toastr !== 'undefined') {
                        toastr.error(message);
                    }
                },
                complete: function () {
                    liveStatusButton.dataset.busy = '0';
                }
            });

            return;
        }

        const deleteButton = event.target.closest('.delete-document-live');
        if (deleteButton) {
            const url = deleteButton.dataset.url;
            const rowSelector = deleteButton.dataset.row;
            if (!url || !rowSelector) {
                return;
            }

            if (deleteButton.dataset.busy === '1') {
                return;
            }

            deleteButton.dataset.busy = '1';

            $.ajax({
                url: url,
                type: 'DELETE',
                data: {
                    _token: csrfToken
                },
                success: function () {
                    const row = document.querySelector(rowSelector);
                    if (row) {
                        row.remove();
                    }
                },
                error: function (xhr) {
                    const message = xhr.responseJSON?.message || 'Unable to delete document.';
                    if (typeof toastr !== 'undefined') {
                        toastr.error(message);
                    }
                },
                complete: function () {
                    deleteButton.dataset.busy = '0';
                }
            });

            return;
        }

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

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

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

        const nextStatus = input.value === 'active' ? 'deactivated' : 'active';
        input.value = nextStatus;

        updateStatusButtonState(button, nextStatus);
    });
</script>
@endsection