@extends('superadmin::layouts.master')
@section('title', __('superadmin::internal_tools.maintenance_banner.title'))
@section('extra-styles')
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/custom/forms/custom-form.css') }}">
    <link href="{{ asset('assets/css/style-svgFont.css') }}" rel="stylesheet">
    <style>
        .maintenance-update-row {
            display: flex;
            gap: 0.75rem;
            align-items: flex-start;
            margin-bottom: 0.75rem;
        }
        .maintenance-update-row .form-control.update-text-ar,
        .maintenance-update-row .form-control.update-text-en {
            flex: 1 1 0;
            min-width: 0;
        }
        .maintenance-update-row .update-type {
            flex: 0 0 140px;
        }
        .maintenance-update-row .btn-remove-update {
            flex: 0 0 auto;
            white-space: nowrap;
        }
    </style>
@endsection
@section('breadcrumb')
<div class="row breadcrumbs-top">
    <div class="breadcrumb-wrapper col-xs-12">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('internal-tools.index') }}">@lang('superadmin::internal_tools.internal_tools')</a></li>
            <li class="breadcrumb-item active"><a href="#">@lang('superadmin::internal_tools.maintenance_banner.title')</a></li>
        </ol>
    </div>
</div>
@endsection
@section('content')
<section class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <div class="card p-2">
                <div class="card-header">
                    <h2>@lang('superadmin::internal_tools.maintenance_banner.title')</h2>
                    <p style="font-size: 14px;">
                        @lang('superadmin::internal_tools.maintenance_banner.description')
                    </p>
                </div>
                <div class="card-body">
                    <div class="card-block">
                        @include('superadmin::errors.lists')
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                        <form action="{{ route('internal-tools.maintenance-banner.store') }}" method="POST" id="maintenance-banner-form">
                            @csrf
                            <div class="form-group">
                                <label class="d-block" for="is_active">
                                    @lang('superadmin::internal_tools.maintenance_banner.form.is_active')
                                </label>
                                <div class="form-check">
                                    <input
                                        type="checkbox"
                                        class="form-check-input"
                                        name="is_active"
                                        id="is_active"
                                        value="1"
                                        {{ old('is_active', $maintenanceBanner->is_active ?? false) ? 'checked' : '' }}
                                    >
                                    <label class="form-check-label" for="is_active">
                                        @lang('superadmin::internal_tools.maintenance_banner.form.is_active_help')
                                    </label>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="message_ar">@lang('superadmin::internal_tools.maintenance_banner.form.message_ar')</label>
                                <textarea
                                    name="message_ar"
                                    id="message_ar"
                                    class="form-control"
                                    rows="3"
                                    maxlength="{{ \Modules\SuperAdmin\Models\MaintenanceBanner::MESSAGE_MAX_LENGTH }}"
                                    placeholder="@lang('superadmin::internal_tools.maintenance_banner.form.message_ar_placeholder')"
                                >{{ old('message_ar', $maintenanceBanner->message_ar ?? '') }}</textarea>
                                <div class="d-flex justify-content-between">
                                    <small class="text-muted">@lang('superadmin::internal_tools.maintenance_banner.form.message_ar_help', ['max' => \Modules\SuperAdmin\Models\MaintenanceBanner::MESSAGE_MAX_LENGTH])</small>
                                    <small class="text-muted" id="message_ar_counter">
                                        <span id="message_ar_count">0</span>/{{ \Modules\SuperAdmin\Models\MaintenanceBanner::MESSAGE_MAX_LENGTH }}
                                    </small>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="message_en">@lang('superadmin::internal_tools.maintenance_banner.form.message_en')</label>
                                <textarea
                                    name="message_en"
                                    id="message_en"
                                    class="form-control"
                                    rows="3"
                                    maxlength="{{ \Modules\SuperAdmin\Models\MaintenanceBanner::MESSAGE_MAX_LENGTH }}"
                                    placeholder="@lang('superadmin::internal_tools.maintenance_banner.form.message_en_placeholder')"
                                >{{ old('message_en', $maintenanceBanner->message_en ?? '') }}</textarea>
                                <div class="d-flex justify-content-between">
                                    <small class="text-muted">@lang('superadmin::internal_tools.maintenance_banner.form.message_en_help', ['max' => \Modules\SuperAdmin\Models\MaintenanceBanner::MESSAGE_MAX_LENGTH])</small>
                                    <small class="text-muted" id="message_en_counter">
                                        <span id="message_en_count">0</span>/{{ \Modules\SuperAdmin\Models\MaintenanceBanner::MESSAGE_MAX_LENGTH }}
                                    </small>
                                </div>
                            </div>

                            <hr />

                            <div class="form-group">
                                <label>@lang('superadmin::internal_tools.maintenance_banner.form.updates_title')</label>
                                <p class="text-muted" style="font-size: 13px; margin-bottom: 0.75rem;">
                                    @lang('superadmin::internal_tools.maintenance_banner.form.updates_help')
                                </p>
                                <div id="maintenance-updates-list">
                                    @php
                                        $updateRows = old('updates');
                                        if (!is_array($updateRows) || count($updateRows) === 0) {
                                            $updateRows = $maintenanceBanner
                                                ? $maintenanceBanner->update_rows_for_form
                                                : [['text_ar' => '', 'text_en' => '', 'type' => 'new']];
                                        } else {
                                            $updateRows = array_map(static function ($row) {
                                                return [
                                                    'text_ar' => is_array($row) ? (string) ($row['text_ar'] ?? '') : '',
                                                    'text_en' => is_array($row) ? (string) ($row['text_en'] ?? '') : '',
                                                    'type' => is_array($row)
                                                        ? \Modules\SuperAdmin\Models\MaintenanceBanner::normalizeType($row['type'] ?? null)
                                                        : 'new',
                                                ];
                                            }, $updateRows);
                                        }
                                    @endphp
                                    @foreach ($updateRows as $index => $update)
                                        <div class="maintenance-update-row">
                                            <input
                                                type="text"
                                                name="updates[{{ $index }}][text_ar]"
                                                class="form-control update-text-ar"
                                                value="{{ $update['text_ar'] ?? '' }}"
                                                placeholder="@lang('superadmin::internal_tools.maintenance_banner.form.update_placeholder')"
                                            >
                                            <input
                                                type="text"
                                                name="updates[{{ $index }}][text_en]"
                                                class="form-control update-text-en"
                                                value="{{ $update['text_en'] ?? '' }}"
                                                placeholder="@lang('superadmin::internal_tools.maintenance_banner.form.update_placeholder_en')"
                                            >
                                            <select name="updates[{{ $index }}][type]" class="form-control update-type">
                                                <option value="new" {{ ($update['type'] ?? '') === 'new' ? 'selected' : '' }}>
                                                    @lang('superadmin::internal_tools.maintenance_banner.form.type_new')
                                                </option>
                                                <option value="improvement" {{ ($update['type'] ?? '') === 'improvement' ? 'selected' : '' }}>
                                                    @lang('superadmin::internal_tools.maintenance_banner.form.type_improvement')
                                                </option>
                                            </select>
                                            <button type="button" class="btn btn-danger btn-remove-update">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        </div>
                                    @endforeach
                                </div>
                                <button type="button" class="btn btn-secondary mt-1" id="add-maintenance-update">
                                    <i class="fa fa-plus"></i> @lang('superadmin::internal_tools.maintenance_banner.form.add_update')
                                </button>
                            </div>

                            <div class="form-actions text-xs-center">
                                <button type="submit" class="btnWidth btn btn-primary saveDraftBtn-color mb-1">
                                    <i class="fa fa-check-square-o"></i> @lang('superadmin::internal_tools.maintenance_banner.form.update')
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection
@section('extra_scripts')
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const messageMax = {{ \Modules\SuperAdmin\Models\MaintenanceBanner::MESSAGE_MAX_LENGTH }};

        const bindCounter = (inputId, countId) => {
            const input = document.getElementById(inputId);
            const count = document.getElementById(countId);

            const sync = () => {
                if (!input || !count) {
                    return;
                }
                if (input.value.length > messageMax) {
                    input.value = input.value.slice(0, messageMax);
                }
                count.textContent = String(input.value.length);
            };

            if (input) {
                sync();
                input.addEventListener('input', sync);
            }
        };

        bindCounter('message_ar', 'message_ar_count');
        bindCounter('message_en', 'message_en_count');

        const list = document.getElementById('maintenance-updates-list');
        const addButton = document.getElementById('add-maintenance-update');
        const placeholderAr = @json(__('superadmin::internal_tools.maintenance_banner.form.update_placeholder'));
        const placeholderEn = @json(__('superadmin::internal_tools.maintenance_banner.form.update_placeholder_en'));
        const typeNewLabel = @json(__('superadmin::internal_tools.maintenance_banner.form.type_new'));
        const typeImprovementLabel = @json(__('superadmin::internal_tools.maintenance_banner.form.type_improvement'));

        if (!list || !addButton) {
            return;
        }

        const escapeHtml = (value) => {
            const div = document.createElement('div');
            div.textContent = value;
            return div.innerHTML;
        };

        const nextIndex = () => list.querySelectorAll('.maintenance-update-row').length;

        const buildRow = (textAr = '', textEn = '', type = 'new') => {
            const index = nextIndex();
            const row = document.createElement('div');
            row.className = 'maintenance-update-row';
            row.innerHTML = `
                <input type="text" name="updates[${index}][text_ar]" class="form-control update-text-ar" value="${escapeHtml(textAr)}" placeholder="${escapeHtml(placeholderAr)}">
                <input type="text" name="updates[${index}][text_en]" class="form-control update-text-en" value="${escapeHtml(textEn)}" placeholder="${escapeHtml(placeholderEn)}">
                <select name="updates[${index}][type]" class="form-control update-type">
                    <option value="new" ${type === 'new' ? 'selected' : ''}>${escapeHtml(typeNewLabel)}</option>
                    <option value="improvement" ${type === 'improvement' ? 'selected' : ''}>${escapeHtml(typeImprovementLabel)}</option>
                </select>
                <button type="button" class="btn btn-danger btn-remove-update">
                    <i class="fa fa-trash"></i>
                </button>
            `;
            return row;
        };

        const reindexRows = () => {
            list.querySelectorAll('.maintenance-update-row').forEach((row, index) => {
                const textArInput = row.querySelector('.update-text-ar');
                const textEnInput = row.querySelector('.update-text-en');
                const typeSelect = row.querySelector('.update-type');
                if (textArInput) {
                    textArInput.name = `updates[${index}][text_ar]`;
                }
                if (textEnInput) {
                    textEnInput.name = `updates[${index}][text_en]`;
                }
                if (typeSelect) {
                    typeSelect.name = `updates[${index}][type]`;
                }
            });
        };

        addButton.addEventListener('click', (event) => {
            event.preventDefault();
            list.appendChild(buildRow());
        });

        list.addEventListener('click', (event) => {
            const removeButton = event.target.closest('.btn-remove-update');
            if (!removeButton) {
                return;
            }

            event.preventDefault();
            const rows = list.querySelectorAll('.maintenance-update-row');
            const row = removeButton.closest('.maintenance-update-row');

            if (rows.length <= 1) {
                const textArInput = row ? row.querySelector('.update-text-ar') : null;
                const textEnInput = row ? row.querySelector('.update-text-en') : null;
                const typeSelect = row ? row.querySelector('.update-type') : null;
                if (textArInput) {
                    textArInput.value = '';
                }
                if (textEnInput) {
                    textEnInput.value = '';
                }
                if (typeSelect) {
                    typeSelect.value = 'new';
                }
                return;
            }

            if (row) {
                row.remove();
                reindexRows();
            }
        });
    });
</script>
@endsection