@extends('backend.template.layouts.template-base')
@section('title', 'Notifications - Template List')

@section('content')
    <section>
        <div class="page-head-title mb-3">
            <div class=" template-list d-flex align-items-center justify-content-between">
                <div class="d-inline-block">
                    <h2 class="text-title fw-semibold mb-0">Template List</h2>
                </div>
                <div class="d-flex align-items-center gap-3">
                    <a href="{{ route('backend.template.notification.CreateTemplate') }}"
                        class="button-green d-flex flex-row gap-2 align-items-center px-3">
                        <span>
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <g clip-path="url(#clip0_nt_add)">
                                    <mask id="mask0_nt_add" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0"
                                        y="0" width="20" height="20">
                                        <path d="M20 0H0V20H20V0Z" fill="white" />
                                    </mask>
                                    <g mask="url(#mask0_nt_add)">
                                        <path d="M5 10H15" stroke="white" stroke-width="1.5" stroke-linecap="round"
                                            stroke-linejoin="round" />
                                        <path d="M10 15V5" stroke="white" stroke-width="1.5" stroke-linecap="round"
                                            stroke-linejoin="round" />
                                    </g>
                                </g>
                                <defs>
                                    <clipPath id="clip0_nt_add">
                                        <rect width="20" height="20" fill="white" />
                                    </clipPath>
                                </defs>
                            </svg>
                        </span>
                        New Template
                    </a>
                </div>
            </div>
        </div>

        <div class="Card-border">
            <div class="p-3">
                {{-- Filter row --}}
                <div class="row g-0 align-items-center justify-content-between mb-3">
                    <div class="col-md-10 d-flex align-items-center cz-filter-row gap-2 flex-wrap">
                        <div class="table-search-box cz-search">
                            <img class="table-search-icon" src="{{ asset('backend/template/svg-icon/search.svg') }}"
                                alt="search">
                            <input type="text" id="searchName" placeholder="Search by template name"
                                class="table-search-input" value="">
                        </div>

                        <div class="table-header-drops">
                            <select id="filterStatus" class="js-example-basic-single">
                                <option value="all">All Status</option>
                                <option value="active">Active</option>
                                <option value="inactive">Inactive</option>
                                <option value="draft">Draft</option>
                            </select>
                        </div>
                        <div class="cz-select">
                            <select id="filterChannel" class="js-example-basic-single">
                                <option value="all">All Channels</option>
                                <option value="push">Push Notification</option>
                                <option value="sms">SMS</option>
                                <option value="email">Email</option>
                            </select>

                        </div>
                    </div>
                    <div class="col-md-2 d-flex justify-content-end align-items-center gap-2">
                        <span class="table-sort-content">Show</span>
                        <select id="dtLength" class="form-select form-select-sm" style="width:70px;">
                            <option value="10">10</option>
                            <option value="20">20</option>
                            <option value="30">30</option>
                            <option value="50">50</option>
                        </select>
                        <span class="table-sort-content">entries</span>
                    </div>
                </div>

                {{-- DataTable --}}
                <div class="notif-table-wrapper">

                    <table id="notifTable" class="w-100" style="border-collapse:separate; border-spacing:0 8px;">
                        <thead class="d-none">
                            <tr>
                                <th style="width:50%">Template</th>
                                <th style="width:25%">Channels</th>
                                <th style="width:25%">Actions</th>
                            </tr>
                        </thead>
                    </table>
                </div>


            </div>
        </div>


        {{-- View / Duplicate Step-1 Modal --}}
        <div class="modal fade" id="viewTemplateModal" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content custom-modal">
                    <div class="modal-header custom-header1">
                        <h5 class="modal-title" id="viewModalTitle">Template Details</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body" id="viewModalBody">
                        <div class="text-center py-4">
                            <div class="spinner-border text-success" role="status"></div>
                        </div>
                    </div>
                    <div class="modal-footer justify-content-end">
                        <button class="btn duplicate-btn" id="openDuplicateConfirmBtn">
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <g clip-path="url(#clip0_dup)">
                                    <mask id="mask0_dup" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0"
                                        y="0" width="20" height="20">
                                        <path d="M20 0H0V20H20V0Z" fill="white" />
                                    </mask>
                                    <g mask="url(#mask0_dup)">
                                        <path
                                            d="M13.3337 10.7513V14.2513C13.3337 17.168 12.167 18.3346 9.25033 18.3346H5.75033C2.83366 18.3346 1.66699 17.168 1.66699 14.2513V10.7513C1.66699 7.83464 2.83366 6.66797 5.75033 6.66797H9.25033C12.167 6.66797 13.3337 7.83464 13.3337 10.7513Z"
                                            stroke="white" stroke-width="1.2" stroke-linecap="round"
                                            stroke-linejoin="round" />
                                        <path
                                            d="M18.3337 5.7513V9.2513C18.3337 12.168 17.167 13.3346 14.2503 13.3346H13.3337V10.7513C13.3337 7.83464 12.167 6.66797 9.25033 6.66797H6.66699V5.7513C6.66699 2.83464 7.83366 1.66797 10.7503 1.66797H14.2503C17.167 1.66797 18.3337 2.83464 18.3337 5.7513Z"
                                            stroke="white" stroke-width="1.2" stroke-linecap="round"
                                            stroke-linejoin="round" />
                                    </g>
                                </g>
                                <defs>
                                    <clipPath id="clip0_dup">
                                        <rect width="20" height="20" fill="white" />
                                    </clipPath>
                                </defs>
                            </svg>
                            <span class="ms-1">Duplicate Template</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        {{-- Duplicate Step-2 Confirm Modal --}}
        <div class="modal fade duplicate-modal" id="duplicateConfirmModal" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Duplicate Template</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <p>You are about to create a copy of <b id="dupTemplateName"></b>.</p>
                        <h4>Please review and update the details to avoid conflicts or incorrect notifications.</h4>
                        <ul class="mb-0 ps-3">
                            <li>Update the template name to keep it unique and identifiable.</li>
                            <li>Verify dynamic variables (e.g., [name], [order_id]) are correctly used.</li>
                            <li>Check message content to ensure it applies to the intended use case.</li>
                        </ul>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                        <button class="btn btn-success" id="confirmDuplicateBtn">Duplicate &amp; Edit</button>
                    </div>
                </div>
            </div>
        </div>
    @endsection

    @section('scripts')
        <script>
            var CSRF = '{{ csrf_token() }}';
            var BASE = '{{ url('admin/notification/templates') }}';
            var notifTable;

            $(function() {
                notifTable = $('#notifTable').DataTable({
                    serverSide: true,
                    processing: true,
                    searching: false,
                    lengthChange: false,
                    dom: 'rt<"d-flex justify-content-between align-items-center px-3 py-3 border-top"ip>',
                    pageLength: 10,
                    ajax: {
                        url: '{{ route('backend.template.notification.TemplateList') }}',
                        data: function(d) {
                            d.search_name = $('#searchName').val();
                            d.filter_status = $('#filterStatus').val();
                            d.filter_channel = $('#filterChannel').val();
                        },
                    },
                    columns: [{
                            data: 'template_info',
                            orderable: false
                        },
                        {
                            data: 'channels_html',
                            orderable: false
                        },
                        {
                            data: 'action',
                            orderable: false,
                            className: 'text-end'
                        },
                    ],
                    createdRow: function(row) {
                        $(row).addClass('align-items-center p-2 border rounded bg-light mb-2');
                        $('td', row).addClass('border-0 py-2');
                    },
                    language: {
                        processing: '<div class="text-center py-3">Loading…</div>'
                    },
                });

                // Filters
                var delay;
                $('#searchName').on('keyup', function() {
                    clearTimeout(delay);
                    delay = setTimeout(function() {
                        notifTable.ajax.reload(null, false);
                    }, 400);
                });
                $('#filterStatus, #filterChannel').on('change', function() {
                    notifTable.ajax.reload(null, false);
                });
                $('#dtLength').on('change', function() {
                    notifTable.page.len(parseInt(this.value)).draw();
                });

                // Status toggle (delegated)
                $('#notifTable').on('click', '.status-toggle', function() {
                    var id = $(this).data('id');
                    var status = $(this).data('status');
                    var name = $(this).data('name');
                    ConfirmStatus({
                        name: name,
                        current: status,
                        url: BASE + '/' + id + '/status',
                        csrf: CSRF,
                        onSuccess: function() {
                            notifTable.ajax.reload(null, false);
                        },
                    });
                });
            });

            // View modal
            function openViewModal(id) {
                var modal = new bootstrap.Modal(document.getElementById('viewTemplateModal'));
                $('#viewModalTitle').text('Loading…');
                $('#viewModalBody').html(
                    '<div class="text-center py-4"><div class="spinner-border text-success" role="status"></div></div>');
                $('#openDuplicateConfirmBtn').data('id', id).data('name', '');
                modal.show();

                $.get(BASE + '/' + id)
                    .done(function(t) {
                        $('#viewModalTitle').text(t.name + ' Details');
                        $('#openDuplicateConfirmBtn').data('name', t.name);

                        var channelSvgs = {
                            push: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#cv1)"><mask id="mv1" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path d="M24 0H0V24H24V0Z" fill="white"/></mask><g mask="url(#mv1)"><path d="M17 20.5H7C4 20.5 2 19 2 15.5V8.5C2 5 4 3.5 7 3.5H17C20 3.5 22 5 22 8.5V15.5C22 19 20 20.5 17 20.5Z" stroke="#111827" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M17 9L13.87 11.5C12.84 12.32 11.15 12.32 10.12 11.5L7 9" stroke="#111827" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></g></g><defs><clipPath id="cv1"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>',
                            sms: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#cv2)"><mask id="mv2" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path d="M24 0H0V24H24V0Z" fill="white"/></mask><g mask="url(#mv2)"><path d="M15 22.75H9C4.59 22.75 3.25 21.41 3.25 17V7C3.25 2.59 4.59 1.25 9 1.25H15C19.41 1.25 20.75 2.59 20.75 7V17C20.75 21.41 19.41 22.75 15 22.75ZM9 2.75C5.42 2.75 4.75 3.43 4.75 7V17C4.75 20.57 5.42 21.25 9 21.25H15C18.58 21.25 19.25 20.57 19.25 17V7C19.25 3.43 18.58 2.75 15 2.75H9Z" fill="black"/></g></g><defs><clipPath id="cv2"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>',
                            email: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mv3" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path d="M24 0H0V24H24V0Z" fill="white"/></mask><g mask="url(#mv3)"><path d="M3.13 8.20859L10.13 2.64859C11.23 1.77859 12.78 1.77859 13.88 2.64859L20.88 8.20859C21.59 8.77859 22 9.62859 22 10.5286V19.0186C22 20.6686 20.66 21.9986 19 21.9986H5C3.34 21.9986 2 20.6686 2 19.0186V10.5286C2 9.62859 2.41 8.76859 3.13 8.20859Z" stroke="#111827" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M3.82666 13.168L10.4598 17.1089C11.4098 17.6789 12.5998 17.6789 13.5498 17.1089L20 13.168" stroke="#111827" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>',
                        };
                        var channelNames = {
                            push: 'Push Notification',
                            sms: 'SMS',
                            email: 'Email'
                        };
                        var channelSubtitles = {
                            push: 'In-app and device push',
                            sms: 'Text message to phone',
                            email: 'Full email message'
                        };

                        var channelsHtml = '';
                        ['push', 'sms', 'email'].forEach(function(ch) {
                            var active = (t.channels || []).includes(ch) ? ' active' : '';
                            channelsHtml += '<div class="channel-card-sm' + active + '">' +
                                (channelSvgs[ch] || '') +
                                '<div class="not1 mt-2">' + channelNames[ch] + '</div>' +
                                '<small class="not2">' + channelSubtitles[ch] + '</small></div>';
                        });

                        var html = '<h6 class="section-title">Message Content</h6>' +
                            '<div class="message-box"><strong>' + (t.title || '—') + '</strong>' +
                            '<p class="mt-2">' + (t.message || '—') + '</p></div>' +
                            '<h6 class="section-title mt-3">Delivering Channels</h6>' +
                            '<div class="d-flex gap-3">' + channelsHtml + '</div>' +
                            '<h6 class="section-title mt-3">Trigger Rules</h6>' +
                            '<div class="trigger-box">' +
                            '<div class="d-flex justify-content-between"><span>Event</span><strong>' + (t.trigger_label ||
                                '—') + '</strong></div>' +
                            '<div class="d-flex justify-content-between mt-2"><span>Audience</span><strong>' + (t
                                .audience_label || '—') + '</strong></div>' +
                            '</div>';

                        $('#viewModalBody').html(html);
                    })
                    .fail(function() {
                        $('#viewModalBody').html('<p class="text-danger">Failed to load template.</p>');
                    });
            }

            // Duplicate flow
            var _dupId = null;

            function openDuplicateFlow(id, name) {
                _dupId = id;
                $('#dupTemplateName').text('"' + name + '"');
                var modal = new bootstrap.Modal(document.getElementById('duplicateConfirmModal'));
                modal.show();
            }

            $('#openDuplicateConfirmBtn').on('click', function() {
                var id = $(this).data('id');
                var name = $(this).data('name');

                // close view modal first
                bootstrap.Modal.getInstance(document.getElementById('viewTemplateModal')).hide();
                setTimeout(function() {
                    openDuplicateFlow(id, name);
                }, 300);
            });

            $('#confirmDuplicateBtn').on('click', function() {
                var btn = this;
                btn.disabled = true;
                $.post(BASE + '/' + _dupId + '/duplicate', {
                        _token: CSRF
                    })
                    .done(function(res) {
                        if (res.redirect) {
                            window.location.href = res.redirect;
                        }
                    })
                    .fail(function() {
                        toastr.error('Duplicate failed.');
                        btn.disabled = false;
                    });
            });

            // Delete
            function openDeleteModal(id, name) {
                ConfirmDelete({
                    name: name,
                    url: BASE + '/' + id + '/destroy',
                    csrf: CSRF,
                    onSuccess: function() {
                        notifTable.ajax.reload(null, false);
                    },
                });
            }
        </script>
    @endsection