@extends('layouts.app')

@section('content')
@php
    $canEditLanguage = auth()->check() && auth()->user()->hasPermission('languages', 'edit');
@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('appLanguages.index') }}">App Language Management</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">JSON Data</li>
                    </ol>
                </nav>
            </div>
            <div class="ms-auto">
                <div class="d-flex align-items-center gap-2">
                    <button type="button"
                        class="btn btn-outline-primary"
                        data-bs-toggle="modal"
                        data-bs-target="#exportCsvModal">
                        Export CSV
                    </button>

                    @if($canEditLanguage)
                        <button type="button"
                            class="btn btn-outline-success"
                            data-bs-toggle="modal"
                            data-bs-target="#importCsvModal">
                            Import CSV
                        </button>

                        <button type="button" id="open-add-json-modal" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addJsonKeyValueModal">
                            Add Data
                        </button>
                    @endif
                </div>
            </div>
        </div>

        <hr />

        <div class="card mb-4">
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label">Language Name</label>
                        <input type="text" class="form-control" value="{{ $appLanguage->name ?? optional($appLanguage->language)->name ?? '-' }}" disabled>
                    </div>
                </div> 
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <h6 class="mb-3">JSON Key / Value List</h6>

                <div class="table-responsive">
                    <table id="json-key-value-table" class="table table-striped table-bordered" style="width:100%">
                        <thead>
                            <tr>
                                <th style="width: 35%;">Key</th>
                                <th>Value</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="exportCsvModal" tabindex="-1" aria-labelledby="exportCsvModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exportCsvModalLabel">Export Language (CSV)</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="GET" action="{{ route('appLanguages.json.export', $appLanguage->id) }}">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="export_start_from" class="form-label">Start From Row</label>
                        <input
                            type="number"
                            min="1"
                            value="1"
                            name="start_from"
                            id="export_start_from"
                            class="form-control"
                        >
                    </div>

                    <div class="mb-3">
                        <label for="export_total_rows" class="form-label">Total Rows to Export</label>
                        <input
                            type="number"
                            min="1"
                            value="1000"
                            name="total_rows"
                            id="export_total_rows"
                            class="form-control"
                        >
                    </div>

                    <div class="form-check mb-3">
                        <input
                            class="form-check-input"
                            type="checkbox"
                            value="1"
                            id="export_all_rows"
                            name="export_all"
                        >
                        <label class="form-check-label" for="export_all_rows">
                            Export ALL records
                        </label>
                    </div>

                    <div class="alert alert-warning mb-0 py-2">
                        If <strong>Export ALL</strong> is checked, start & limit will be ignored.
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success">Start Export</button>
                </div>
            </form>
        </div>
    </div> 
</div>

<div class="modal fade" id="importCsvModal" tabindex="-1" aria-labelledby="importCsvModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="importCsvModalLabel">Import Language (CSV)</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST"
                action="{{ route('appLanguages.json.import', $appLanguage->id) }}"
                enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="import_csv_file" class="form-label">CSV File</label>
                        <input
                            type="file"
                            name="csv_file"
                            id="import_csv_file"
                            accept=".csv,text/csv"
                            class="form-control @error('csv_file') is-invalid @enderror"
                            required
                        >
                        @error('csv_file')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Auto Translate Toggle Switch -->
                    <div class="form-check form-switch mb-3 p-2 bg-light rounded border ps-5">
                        <input 
                            class="form-check-input ms-n4" 
                            type="checkbox" 
                            name="is_auto_translate" 
                            id="import_auto_translate" 
                            value="1"
                            checked
                        >
                        <label class="form-check-label fw-semibold" for="import_auto_translate">
                            Auto translate to all languages
                        </label>
                        <small class="text-muted d-block">
                            ON: Imported data will automatically translate into all other active languages.<br>
                            OFF: Imported data will only be added to this language.
                        </small>
                    </div>

                    <div class="alert alert-info mb-3">
                        <strong>CSV format should be:</strong><br>
                        1. File type: <strong>.csv</strong> (UTF-8 recommended)<br>
                        2. First row can be header: <strong>key,value</strong><br>
                        3. Every row must have both key and value<br>
                        {{-- 4. Maximum file size: <strong>5 MB</strong> --}}
                    </div>

                    <div class="table-responsive">
                        <table class="table table-sm table-bordered mb-0">
                            <thead>
                                <tr>
                                    <th>key</th>
                                    <th>value</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>welcome_title</td>
                                    <td>Welcome</td>
                                </tr>
                              
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success">Start Import</button>
                </div>
            </form>
        </div>
    </div>
</div>

@php
    $oldKeys = old('key', ['']);
    $oldValues = old('value', ['']);

    if (!is_array($oldKeys) || count($oldKeys) === 0) {
        $oldKeys = [''];
    }

    if (!is_array($oldValues) || count($oldValues) === 0) {
        $oldValues = [''];
    }

    $rowCount = max(count($oldKeys), count($oldValues), 1);
@endphp

<div class="modal fade" id="addJsonKeyValueModal" tabindex="-1" aria-labelledby="addJsonKeyValueModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addJsonKeyValueModalLabel">Add New Key Value Pair</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('appLanguages.json.store', $appLanguage->id) }}" method="POST">
                @csrf
                <input type="hidden" name="original_key" id="json-original-key" value="{{ old('original_key') }}">
                <div class="modal-body">
                    <div id="json-repeater-rows">
                        @for($i = 0; $i < $rowCount; $i++)
                            <div class="row g-3 json-repeater-row mb-2">
                                <div class="col-md-4">
                                    <label class="form-label">Key</label>
                                    <input type="text"
                                        name="key[]"
                                        class="form-control json-key-input"
                                        value="{{ $oldKeys[$i] ?? '' }}"
                                        placeholder="Key">
                                </div>
                                <div class="col-md-5">
                                    <label class="form-label">Value</label>
                                    <input type="text"
                                        name="value[]"
                                        class="form-control json-value-input"
                                        value="{{ $oldValues[$i] ?? '' }}"
                                        placeholder="Value">
                                </div>
                                <div class="col-md-3 d-flex align-items-end">
                                    <button type="button" class="btn btn-outline-danger btn-sm w-100 text-nowrap remove-json-row">Remove</button>
                                </div>
                            </div>
                        @endfor
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary" id="json-submit-btn">Submit</button>
                </div>
            </form>
        </div>
    </div> 
</div>

<script>
$(function () {
    const $table = $('#json-key-value-table');
    if (!$table.length) {
        return;
    }

    $table.DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('appLanguages.json.list', $appLanguage->id) }}",
        order: [[1, 'desc']],
        columns: [
            { data: 'key', name: 'key' },
            { data: 'value', name: 'value' },
            { data: 'actions', name: 'actions', orderable: false, searchable: false }
        ],
     
    });

    const $modalTitle = $('#addJsonKeyValueModalLabel');
    const $submitBtn = $('#json-submit-btn');
    const $originalKey = $('#json-original-key');
    const $rowsContainer = $('#json-repeater-rows');

    function escapeHtml(value) {
        return $('<div>').text(value ?? '').html();
    }

    function createRowHtml(key = '', value = '') {
        return `
            <div class="row g-3 json-repeater-row mb-2">
                <div class="col-md-4">
                    <label class="form-label">Key</label>
                    <input type="text" name="key[]" class="form-control json-key-input" value="${escapeHtml(key)}" placeholder="Key">
                </div>
                <div class="col-md-5">
                    <label class="form-label">Value</label>
                    <input type="text" name="value[]" class="form-control json-value-input" value="${escapeHtml(value)}" placeholder="Value">
                </div>
                <div class="col-md-3 d-flex align-items-end">
                    <button type="button" class="btn btn-outline-danger btn-sm w-100 text-nowrap remove-json-row">Remove</button>
                </div>
            </div>
        `;
    }

    function setAddMode() {
        $modalTitle.text('Add New Key Value Pair');
        $submitBtn.text('Submit');
        $originalKey.val('');
        $rowsContainer.html(createRowHtml('', ''));
    }

    function setEditMode(key, value) {
        $modalTitle.text('Edit Key Value Pair');
        $submitBtn.text('Update');
        $originalKey.val(key);
        $rowsContainer.html(createRowHtml(key, value));
        $rowsContainer.find('.remove-json-row').addClass('d-none');
    }

    $('#open-add-json-modal').on('click', function () {
        setAddMode();
    });

    $(document).on('click', '.remove-json-row', function () {
        const rowCount = $rowsContainer.find('.json-repeater-row').length;

        if (rowCount > 1) {
            $(this).closest('.json-repeater-row').remove();
        } else {
            $(this).closest('.json-repeater-row').find('input').val('');
        }
    });

    $(document).on('input', '.json-key-input, .json-value-input', function () {
        if ($originalKey.val() !== '') {
            return;
        }

        const $currentRow = $(this).closest('.json-repeater-row');
        const isLastRow = $currentRow.is($rowsContainer.find('.json-repeater-row').last());
        const hasKey = $currentRow.find('.json-key-input').val().trim() !== '';
        const hasValue = $currentRow.find('.json-value-input').val().trim() !== '';

        if (isLastRow && hasKey && hasValue) {
            $rowsContainer.append(createRowHtml('', ''));
        }
    });

    $(document).on('click', '.edit-json-btn', function () {
        const key = $(this).data('key') || '';
        const value = $(this).data('value') || '';
        const modalEl = document.getElementById('addJsonKeyValueModal');

        setEditMode(key, value);

        if (modalEl && typeof bootstrap !== 'undefined') {
            bootstrap.Modal.getOrCreateInstance(modalEl).show();
        }
    });

    $('#export_all_rows').on('change', function () {
        const checked = $(this).is(':checked');
        $('#export_start_from, #export_total_rows').prop('disabled', checked);
    });
});
</script>

@if($errors->has('key') || $errors->has('value') || old('key') || old('value') || old('original_key'))
<script>
document.addEventListener('DOMContentLoaded', function () {
    const modalEl = document.getElementById('addJsonKeyValueModal');
    if (!modalEl || typeof bootstrap === 'undefined') {
        return;
    }

    const originalKey = @json(old('original_key', ''));
    const titleEl = document.getElementById('addJsonKeyValueModalLabel');
    const submitEl = document.getElementById('json-submit-btn');

    if (originalKey) {
        if (titleEl) titleEl.textContent = 'Edit Key Value Pair';
        if (submitEl) submitEl.textContent = 'Update';
    }

    bootstrap.Modal.getOrCreateInstance(modalEl).show();
});
</script>
@endif

@if($errors->has('csv_file'))
<script>
document.addEventListener('DOMContentLoaded', function () {
    const modalEl = document.getElementById('importCsvModal');
    if (!modalEl || typeof bootstrap === 'undefined') {
        return;
    }

    bootstrap.Modal.getOrCreateInstance(modalEl).show();
});
</script>
@endif

@endsection