@extends('layout.app')
@section('_style')
    <style>
        /* Màn danh sách mẫu tin ZNS - dùng bộ .crm-list-* chung, phần riêng đặt tiền tố .zns-* */
        .zns-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px 24px 0; }
        .zns-kpi { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--crm-border-soft); border-radius: 12px; background: var(--crm-surface); }
        .zns-kpi__icon { display: inline-flex; flex: 0 0 38px; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: #F3E8FF; color: #7C3AED; font-size: 15px; }
        .zns-kpi__icon--on { background: var(--crm-success-soft); color: #047857; }
        .zns-kpi__icon--off { background: #f1f5f9; color: #64748b; }
        .zns-kpi__value { display: block; color: var(--crm-text-strong); font-size: 20px; font-weight: 700; line-height: 1.1; }
        .zns-kpi__label { display: block; color: var(--crm-text-muted); font-size: 12px; }

        .zns-alert { display: flex; align-items: center; gap: 10px; margin: 16px 24px 0; padding: 10px 14px; border: 1px solid #a7f3d0; border-radius: 10px; background: var(--crm-success-soft); color: #047857; font-size: 13px; font-weight: 600; }

        /* Tên mẫu tin + ghi chú */
        .zns-name__note { display: block; margin-top: 2px; color: var(--crm-text-muted); font-size: 12px; }

        /* Nhãn sự kiện */
        .zns-event { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #e0f2fe; color: #0369a1; font-size: 12px; font-weight: 600; white-space: nowrap; }
        .zns-event--order_payment { background: #fef3c7; color: #b45309; }

        /* Danh sách tham số: param → nguồn dữ liệu */
        .zns-params { display: flex; flex-direction: column; gap: 4px; min-width: 260px; }
        .zns-param { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; line-height: 1.4; }
        .zns-param code { padding: 2px 6px; border-radius: 6px; background: #F3E8FF; color: #6d28d9; font-size: 12px; font-weight: 600; }
        .zns-param__arrow { color: #94a3b8; }
        .zns-param__source { color: var(--crm-text-strong); }
        .zns-param__source--empty { color: var(--crm-text-muted); font-style: italic; }
        .zns-param__meta { color: var(--crm-text-muted); }
        .zns-param__req { color: var(--crm-danger); font-weight: 700; }
        .zns-params__empty { color: var(--crm-text-muted); font-size: 12px; font-style: italic; }

        /* Công tắc bật / tắt mẫu tin (giữ class .toggle-status cho JS) */
        .crm-2026 label.zns-switch { display: inline-flex !important; align-items: center; gap: 8px; margin: 0 !important; font-weight: 500 !important; cursor: pointer; }
        .zns-switch input { position: absolute; opacity: 0; pointer-events: none; }
        .crm-2026 .zns-switch__track { position: relative; display: inline-block !important; flex: 0 0 38px; width: 38px; height: 22px; border-radius: 999px; background: #cbd5e1; transition: background-color .15s ease; }
        .zns-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.25); transition: transform .15s ease; }
        .zns-switch input:checked + .zns-switch__track { background: #10b981; }
        .zns-switch input:checked + .zns-switch__track::after { transform: translateX(16px); }
        .zns-switch input:focus-visible + .zns-switch__track { box-shadow: 0 0 0 3px rgba(16, 185, 129, .25); }
        .zns-switch input:disabled + .zns-switch__track { opacity: .6; }
        .zns-switch__text { color: var(--crm-text-muted); font-size: 12px; }
        .zns-switch input:checked ~ .zns-switch__text { color: #047857; }

        .zns-row-hidden { display: none; }

        @media (max-width: 767.98px) {
            .zns-kpis { grid-template-columns: minmax(0, 1fr); padding: 12px 12px 0; }
            .zns-alert { margin: 12px 12px 0; }
        }
    </style>
@endsection
@section('content')
    @php
        // Nhãn nguồn dữ liệu theo từng sự kiện: [event => [key => label]] để hiển thị tên dễ đọc thay cho key kỹ thuật
        $sourceLabels = [];
        foreach ($events as $eventKey => $eventName) {
            foreach (\App\Services\Zns\ZnsVariableRegistry::options($eventKey) as $items) {
                foreach ($items as $key => $label) {
                    $sourceLabels[$eventKey][$key] = $label;
                }
            }
        }
        $activeCount = $templates->where('status', \App\Constants\StatusCode::ON)->count();
    @endphp
    <div class="col-md-12 col-lg-12">
        <div class="card crm-list-card">
            <div class="card-header crm-list-header">
                <h3 class="card-title"><i class="fas fa-comment-dots"></i> {{ $title }}</h3>
                <div class="crm-list-header__actions">
                    <a class="btn" href="{{ route('settings.indexAdmin') }}" data-toggle="tooltip" title="Chọn nhà cung cấp ZNS và cấu hình kết nối">
                        <i class="fas fa-cog"></i> Nhà cung cấp ZNS
                    </a>
                    <a class="btn" href="{{ route('zns-templates.test') }}" data-toggle="tooltip" title="Xem trước dữ liệu và gửi thử một mẫu tin">
                        <i class="fas fa-paper-plane"></i> Gửi thử
                    </a>
                    <a class="btn btn-primary" href="{{ route('zns-templates.create') }}">
                        <i class="fas fa-plus-circle"></i> Tạo mới
                    </a>
                </div>
            </div>

            @if(session('success'))
                <div class="zns-alert" role="status"><i class="fas fa-check-circle"></i> {{ session('success') }}</div>
            @endif

            {{-- Tổng quan nhanh số mẫu tin --}}
            <div class="zns-kpis">
                <div class="zns-kpi">
                    <span class="zns-kpi__icon"><i class="fas fa-layer-group"></i></span>
                    <div><span class="zns-kpi__value">{{ $templates->count() }}</span><span class="zns-kpi__label">Tổng mẫu tin</span></div>
                </div>
                <div class="zns-kpi">
                    <span class="zns-kpi__icon zns-kpi__icon--on"><i class="fas fa-toggle-on"></i></span>
                    <div><span class="zns-kpi__value js-zns-on">{{ $activeCount }}</span><span class="zns-kpi__label">Đang bật</span></div>
                </div>
                <div class="zns-kpi">
                    <span class="zns-kpi__icon zns-kpi__icon--off"><i class="fas fa-toggle-off"></i></span>
                    <div><span class="zns-kpi__value js-zns-off">{{ $templates->count() - $activeCount }}</span><span class="zns-kpi__label">Đang tắt</span></div>
                </div>
            </div>

            {{-- Lọc phía trình duyệt (danh sách không phân trang) --}}
            <div class="crm-list-toolbar">
                <div class="crm-list-toolbar__search">
                    <i class="fas fa-search"></i>
                    <input class="form-control" id="zns-search" type="search" placeholder="Tìm theo tên, template ID, tham số">
                </div>
                <div class="crm-list-toolbar__filter">
                    <select class="form-control" id="zns-filter-event">
                        <option value="">Tất cả sự kiện</option>
                        @foreach($events as $eventKey => $eventName)
                            <option value="{{ $eventKey }}">{{ $eventName }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="crm-list-toolbar__filter">
                    <select class="form-control" id="zns-filter-status">
                        <option value="">Tất cả trạng thái</option>
                        <option value="1">Đang bật</option>
                        <option value="0">Đang tắt</option>
                    </select>
                </div>
            </div>

            <div class="crm-list">
                <div class="table-responsive">
                    <table class="table crm-list-table" id="zns-table">
                        <thead>
                        <tr>
                            <th class="crm-list-table__no">#</th>
                            <th>Mẫu tin</th>
                            <th>Sự kiện</th>
                            <th>Template ID</th>
                            <th>Tham số (param → nguồn dữ liệu)</th>
                            <th>Trạng thái</th>
                            <th class="crm-list-table__actions">Thao tác</th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse($templates as $key => $template)
                            @php $isOn = $template->status == \App\Constants\StatusCode::ON; @endphp
                            <tr data-id="{{ $template->id }}" data-event="{{ $template->event }}" data-status="{{ $isOn ? 1 : 0 }}"
                                data-search="{{ mb_strtolower($template->name . ' ' . $template->note . ' ' . $template->template_id . ' ' . $template->params->pluck('param')->implode(' ')) }}">
                                <td class="crm-list-table__no">{{ $key + 1 }}</td>
                                <td>
                                    <a class="crm-list-table__title" href="{{ route('zns-templates.edit', $template->id) }}">{{ $template->name }}</a>
                                    @if($template->note)
                                        <span class="zns-name__note">{{ $template->note }}</span>
                                    @endif
                                </td>
                                <td>
                                    <span class="zns-event zns-event--{{ $template->event }}">
                                        <i class="fas {{ $template->event == \App\Services\Zns\ZnsVariableRegistry::EVENT_ORDER_PAYMENT ? 'fa-receipt' : 'fa-calendar-check' }}"></i>
                                        {{ $template->event_label }}
                                    </span>
                                </td>
                                <td><span class="crm-code-chip">{{ $template->template_id }}</span></td>
                                <td>
                                    <div class="zns-params">
                                        @forelse($template->params as $param)
                                            <div class="zns-param">
                                                <code>{{ $param->param }}</code>
                                                <span class="zns-param__arrow"><i class="fas fa-long-arrow-alt-right"></i></span>
                                                @if($param->source)
                                                    <span class="zns-param__source" title="{{ $param->source }}">{{ $sourceLabels[$template->event][$param->source] ?? $param->source }}</span>
                                                @else
                                                    <span class="zns-param__source zns-param__source--empty">để trống</span>
                                                @endif
                                                @if($param->max_length)
                                                    <span class="zns-param__meta">· tối đa {{ $param->max_length }} ký tự</span>
                                                @endif
                                                @if($param->is_required)
                                                    <span class="zns-param__req" title="Bắt buộc">*</span>
                                                @endif
                                            </div>
                                        @empty
                                            <span class="zns-params__empty">Chưa định nghĩa tham số</span>
                                        @endforelse
                                    </div>
                                </td>
                                <td>
                                    <label class="zns-switch">
                                        <input type="checkbox" class="toggle-status" data-id="{{ $template->id }}" {{ $isOn ? 'checked' : '' }}
                                               aria-label="Bật / tắt mẫu tin {{ $template->name }}">
                                        <span class="zns-switch__track"></span>
                                        <span class="zns-switch__text">{{ $isOn ? 'Đang bật' : 'Đang tắt' }}</span>
                                    </label>
                                </td>
                                <td class="crm-list-table__actions">
                                    <a class="crm-action-btn crm-action-btn--edit" href="{{ route('zns-templates.edit', $template->id) }}"
                                       data-toggle="tooltip" title="Sửa" aria-label="Sửa {{ $template->name }}">
                                        <i class="fas fa-pen"></i>
                                    </a>
                                    <a class="crm-action-btn crm-action-btn--delete delete-zns" href="javascript:void(0)" data-id="{{ $template->id }}"
                                       data-toggle="tooltip" title="Xoá" aria-label="Xoá {{ $template->name }}">
                                        <i class="fas fa-trash-alt"></i>
                                    </a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7">
                                    <div class="crm-list-empty">
                                        <i class="fas fa-comment-slash"></i>
                                        <span>Chưa có mẫu tin ZNS nào</span>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                        @if($templates->count())
                            {{-- Hiện khi bộ lọc không khớp dòng nào --}}
                            <tr class="zns-row-hidden" id="zns-no-match">
                                <td colspan="7">
                                    <div class="crm-list-empty">
                                        <i class="fas fa-search"></i>
                                        <span>Không có mẫu tin phù hợp bộ lọc</span>
                                    </div>
                                </td>
                            </tr>
                        @endif
                        </tbody>
                    </table>
                </div>
                <div class="crm-list-footer">
                    <span class="crm-list-footer__total">Tổng số <b class="js-zns-visible">{{ $templates->count() }}</b> mẫu tin</span>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('_script')
    <script>
        if ($.fn.tooltip) {
            $('.crm-list-card [data-toggle="tooltip"]').tooltip({trigger: 'hover', placement: 'top'});
        }

        // Cập nhật số mẫu tin đang bật / tắt ở khối tổng quan
        function znsRefreshCounters() {
            var total = $('#zns-table tbody tr[data-id]').length;
            var on = $('#zns-table .toggle-status:checked').length;
            $('.js-zns-on').text(on);
            $('.js-zns-off').text(total - on);
        }

        // Lọc danh sách theo từ khoá / sự kiện / trạng thái
        function znsFilter() {
            var keyword = $.trim($('#zns-search').val()).toLowerCase();
            var event = $('#zns-filter-event').val();
            var status = $('#zns-filter-status').val();
            var visible = 0;
            $('#zns-table tbody tr[data-id]').each(function () {
                var $row = $(this);
                var match = (!keyword || String($row.data('search')).indexOf(keyword) !== -1)
                    && (!event || $row.data('event') === event)
                    && (status === '' || String($row.attr('data-status')) === status);
                $row.toggleClass('zns-row-hidden', !match);
                if (match) {
                    visible++;
                }
            });
            $('#zns-no-match').toggleClass('zns-row-hidden', visible > 0);
            $('.js-zns-visible').text(visible);
        }

        $('#zns-search').on('input', znsFilter);
        $('#zns-filter-event, #zns-filter-status').on('change', znsFilter);

        $(document).on('change', '.toggle-status', function () {
            var $input = $(this);
            var checked = $input.is(':checked');
            var $row = $input.closest('tr');
            $input.prop('disabled', true);
            $.ajax({
                url: '{{ url('zns-templates') }}/' + $input.data('id') + '/status',
                method: 'post',
                data: {
                    _token: '{{ csrf_token() }}',
                    status: checked ? 1 : 0
                }
            }).done(function () {
                $row.attr('data-status', checked ? 1 : 0);
                $input.siblings('.zns-switch__text').text(checked ? 'Đang bật' : 'Đang tắt');
                znsRefreshCounters();
            }).fail(function () {
                // Lưu thất bại thì trả công tắc về trạng thái cũ
                $input.prop('checked', !checked);
                alert('Không cập nhật được trạng thái, vui lòng thử lại');
            }).always(function () {
                $input.prop('disabled', false);
            });
        });

        $(document).on('click', '.delete-zns', function () {
            if (!confirm('Bạn có chắc muốn xóa mẫu tin này?')) {
                return;
            }
            var id = $(this).data('id');
            $.ajax({
                url: '{{ url('zns-templates') }}/' + id,
                method: 'post',
                data: {_token: '{{ csrf_token() }}', _method: 'DELETE'}
            }).done(function () {
                location.reload();
            });
        });
    </script>
@endsection