@extends('backend.template.layouts.template-base')
@section('title', 'Notification - Create Template')

@section('content')
<section>
    <div class="page-head-title mb-4">
        <div class="d-flex align-items-center justify-content-between">
            <a href="{{ route('backend.template.notification.TemplateList') }}" class="d-inline-block">
                <h2 class="text-title fw-semibold mb-0 d-flex align-items-center">
                    <i class="ri-arrow-left-s-line fs-1 me-2"></i>New Template
                </h2>
            </a>
        </div>
    </div>

    <form id="createTemplateForm" enctype="multipart/form-data" novalidate>
        @csrf
        <div class="row">
            <div class="col-lg-12">
                {{-- Template Details Card --}}
                <div class="card mb-3">
                    <div class="card-header align-items-center d-flex">
                        <h4 class="card-title mb-0 flex-grow-1">Template Details</h4>
                    </div>
                    <div class="card-body">
                        <div class="row gy-4">

                            {{-- Name --}}
                            <div class="col-xxl-4 col-md-6">
                                <label class="form-label">Template Name <span class="text-danger">*</span></label>
                                <input type="text" name="name" id="templateName" class="form-control"
                                    placeholder="Enter template name">
                                <div class="invalid-feedback" id="nameError"></div>
                            </div>

                            {{-- Image + Description --}}
                            <div class="gi-row">
                                <div class="gi-col">
                                    <label>Business Image</label>
                                    <div class="dropzone dz-clickable upload-box1" id="uploadTrigger">
                                        <input type="file" name="image" id="productImageInput"
                                            accept="image/png, image/jpeg, image/jpg" hidden>
                                        <div class="dz-message needsclick" id="uploadPlaceholder">
                                            <div class="mb-2">
                                                <img src="{{ asset('backend/template/svg-icon/product-img.svg') }}"
                                                    alt="Upload" width="35px">
                                            </div>
                                            <h5>Click to Upload or drag and drop</h5>
                                            <p class="upload-description">PNG, JPG or JPEG. Max 5MB.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="gi-col">
                                    <label>Short Description <small class="text-muted">(internal notes)</small></label>
                                    <textarea name="description" class="form-control" rows="5"
                                        placeholder="Type here..."></textarea>
                                </div>
                            </div>

                            {{-- Message Content --}}
                            <div class="container-fluid">
                                <label><b style="font-size:16px;font-weight:600;color:#374151">Message Content</b>
                                    <span class="text-danger">*</span></label>
                                <div class="card custom-card">
                                    <div class="card-body">
                                        <div class="row g-3">
                                            <div class="col-md-7">
                                                <div class="form-group title-group">
                                                    <label class="form-label">Title <span class="text-danger">*</span></label>
                                                    <input type="text" name="title" id="msgTitle"
                                                        class="form-control custom-input" placeholder="Type here....">
                                                    <div class="invalid-feedback d-block" id="titleError"></div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="form-label">Message <span class="text-danger">*</span></label>
                                                    <textarea name="message" id="msgBody"
                                                        class="form-control custom-textarea" rows="6"
                                                        placeholder="Type here...."></textarea>
                                                    <div class="invalid-feedback d-block" id="msgError"></div>
                                                </div>
                                            </div>
                                            <div class="col-md-5">
                                                <div class="variable-box">
                                                    <div class="variable-header">Available variables — click to insert</div>
                                                    <div class="variable-list">
                                                        <span class="variable-chip">customer_name</span>
                                                        <span class="variable-chip">order_id</span>
                                                        <span class="variable-chip">order_total</span>
                                                        <span class="variable-chip">product_name</span>
                                                        <span class="variable-chip">total_quantity</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {{-- Channels --}}
                                <div class="m-2 p-1">
                                    <label class="form-label mb-2">
                                        <b style="font-size:16px;font-weight:600;color:#374151">Select channels</b>
                                        <span class="text-danger">*</span>
                                    </label>
                                    <div class="d-flex gap-3 flex-wrap" id="channelCards">
                                        <div class="channel-card-sm" data-channel="push">
                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#cc1)"><mask id="cm1" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path d="M24 0H0V24H24V0Z" fill="white"/></mask><g mask="url(#cm1)"><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="cc1"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
                                            <div class="title-sm">Push Notification</div>
                                            <div class="sub-sm">In-app and device push</div>
                                        </div>
                                        <div class="channel-card-sm" data-channel="sms">
                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#cc2)"><mask id="cm2" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path d="M24 0H0V24H24V0Z" fill="white"/></mask><g mask="url(#cm2)"><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"/><path d="M14 6.25H10C9.59 6.25 9.25 5.91 9.25 5.5C9.25 5.09 9.59 4.75 10 4.75H14C14.41 4.75 14.75 5.09 14.75 5.5C14.75 5.91 14.41 6.25 14 6.25Z" fill="black"/><path d="M11.9998 19.8617C10.7298 19.8617 9.69971 18.8317 9.69971 17.5617C9.69971 16.2917 10.7298 15.2617 11.9998 15.2617C13.2698 15.2617 14.2998 16.2917 14.2998 17.5617C14.2998 18.8317 13.2698 19.8617 11.9998 19.8617ZM11.9998 16.7517C11.5598 16.7517 11.1998 17.1117 11.1998 17.5517C11.1998 17.9917 11.5598 18.3517 11.9998 18.3517C12.4398 18.3517 12.7998 17.9917 12.7998 17.5517C12.7998 17.1117 12.4398 16.7517 11.9998 16.7517Z" fill="black"/></g></g><defs><clipPath id="cc2"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
                                            <div class="title-sm">SMS</div>
                                            <div class="sub-sm">Text message to phone</div>
                                        </div>
                                        <div class="channel-card-sm" data-channel="email">
                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="cm3" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path d="M24 0H0V24H24V0Z" fill="white"/></mask><g mask="url(#cm3)"><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>
                                            <div class="title-sm">Email</div>
                                            <div class="sub-sm">Full email message</div>
                                        </div>
                                    </div>
                                    <div class="invalid-feedback d-block mt-1" id="channelError"></div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

                {{-- Trigger Rules Card --}}
                <div class="card trigger-card mt-3">
                    <div class="card-header trigger-header">Trigger Rules</div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Event Triggers <span class="text-danger">*</span></label>
                                <select name="trigger_event" id="triggerEvent" class="trigger-select js-example-basic-single">
                                    <option value="">Select</option>
                                    <option value="order_placed">Order Placed</option>
                                    <option value="order_confirmed">Order Confirmed</option>
                                    <option value="order_cancelled">Order Cancelled</option>
                                    <option value="out_for_delivery">Out For Delivery</option>
                                    <option value="order_delivered">Order Delivered</option>
                                    <option value="new_customer_registered">New Customer Registered</option>
                                    <option value="subscription_activated">Subscription Activated</option>
                                    <option value="subscription_expired">Subscription Expired</option>
                                    <option value="subscription_expiry_reminder">Subscription Expiry Reminder</option>
                                    <option value="others">Others</option>
                                </select>
                                <div class="invalid-feedback d-block" id="triggerError"></div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Select Audience <span class="text-danger">*</span></label>
                                <select name="audience" id="audience" class="trigger-select js-example-basic-single">
                                    <option value="">Select</option>
                                    <option value="all_customers">All Customers</option>
                                    <option value="custom_range">Custom Range</option>
                                    <option value="subscribed_customers">Subscribed Customers</option>
                                    <option value="new_logged_in">New Logged In Customers</option>
                                    <option value="delivery_team">Delivery Team</option>
                                </select>
                                <div class="invalid-feedback d-block" id="audienceError"></div>
                            </div>
                        </div>
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label mt-3">Date Range</label>
                                <div class="cz-date-input1">
                                    <input type="text" id="dateRangePicker" placeholder="Date Range"
                                        data-provider="flatpickr" data-date-format="d M, Y"
                                        data-range-date="true" class="cz-date-field">
                                    <input type="hidden" name="date_from" id="dateFrom">
                                    <input type="hidden" name="date_to" id="dateTo">
                                    <span class="cz-date-icon">
                                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                                            <rect x="3" y="5" width="18" height="16" rx="3" stroke="#6b7280" stroke-width="1.5"/>
                                            <path d="M3 9H21" stroke="#6b7280" stroke-width="1.5"/>
                                            <path d="M8 3V7" stroke="#6b7280" stroke-width="1.5" stroke-linecap="round"/>
                                            <path d="M16 3V7" stroke="#6b7280" stroke-width="1.5" stroke-linecap="round"/>
                                        </svg>
                                    </span>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label mt-3">Customer From</label>
                                <input type="number" name="customer_from" class="form-control custom-input" value="0" min="0">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label mt-3">Customer To</label>
                                <input type="number" name="customer_to" class="form-control custom-input" value="0" min="0">
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Action Buttons --}}
                <div class="d-flex gap-3 align-items-center btn-list mb-3 mt-3">
                    <button type="button" class="shadow-button-green" onclick="saveDraft()">Save as Draft</button>
                    <a href="{{ route('backend.template.notification.TemplateList') }}" class="outline-button-green">Cancel</a>
                    <button type="button" class="button-green" onclick="openCreateModal()">
                        Create Template
                    </button>
                </div>
            </div>
        </div>
    </form>
</section>

{{-- Create Confirm Modal --}}
<div id="createConfirmModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content custom-modal">
            <div class="modal-header custom-header">
                <h5 class="modal-title1 mt-2">Create New Template?</h5>
            </div>
            <div class="modal-body">
                <p class="text-muted">You are about to create
                    <strong id="confirmTemplateName">[Template Name]</strong>.
                    Once created, it will be available for notifications.
                </p>
                <label class="form-label status mt-3">Template Status</label>
                <div class="d-flex gap-4 mt-2">
                    <div class="form-check custom-radio">
                        <input class="form-check-input" type="radio" name="confirmStatus" id="statusActive" value="active" checked>
                        <label class="form-check-label" for="statusActive">Active</label>
                    </div>
                    <div class="form-check custom-radio">
                        <input class="form-check-input" type="radio" name="confirmStatus" id="statusInactive" value="inactive">
                        <label class="form-check-label" for="statusInactive">Inactive</label>
                    </div>
                </div>
            </div>
            <div class="modal-footer custom-footer">
                <button class="btn-cancel" data-bs-dismiss="modal">Cancel</button>
                <button class="btn-create" id="confirmCreateBtn">Create Template</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
// ── Validation ────────────────────────────────────────────────────────────────
function setError(id, msg) {
    var el = document.getElementById(id);
    if (el) el.textContent = msg;
}
function clearError(id) { setError(id, ''); }
function markInvalid(fieldId) {
    var el = document.getElementById(fieldId);
    if (el) el.classList.add('is-invalid');
}
function markValid(fieldId) {
    var el = document.getElementById(fieldId);
    if (el) el.classList.remove('is-invalid');
}

function validateForm() {
    var valid = true;

    var name = $('#templateName').val().trim();
    if (!name) {
        setError('nameError', 'Template name is required.');
        markInvalid('templateName');
        valid = false;
    } else {
        clearError('nameError'); markValid('templateName');
    }

    var title = $('#msgTitle').val().trim();
    if (!title) {
        setError('titleError', 'Title is required.');
        markInvalid('msgTitle');
        valid = false;
    } else {
        clearError('titleError'); markValid('msgTitle');
    }

    var msg = $('#msgBody').val().trim();
    if (!msg) {
        setError('msgError', 'Message is required.');
        markInvalid('msgBody');
        valid = false;
    } else {
        clearError('msgError'); markValid('msgBody');
    }

    if (document.querySelectorAll('#channelCards .channel-card-sm.active').length === 0) {
        setError('channelError', 'Please select at least one channel.');
        valid = false;
    } else {
        clearError('channelError');
    }

    if (!$('#triggerEvent').val()) {
        setError('triggerError', 'Please select an event trigger.');
        valid = false;
    } else {
        clearError('triggerError');
    }

    if (!$('#audience').val()) {
        setError('audienceError', 'Please select an audience.');
        valid = false;
    } else {
        clearError('audienceError');
    }

    return valid;
}

function openCreateModal() {
    if (!validateForm()) return;
    document.getElementById('confirmTemplateName').textContent =
        document.getElementById('templateName').value.trim() || '[Template Name]';
    new bootstrap.Modal(document.getElementById('createConfirmModal')).show();
}

function saveDraft() {
    var name = $('#templateName').val().trim();
    if (!name) {
        setError('nameError', 'Template name is required.');
        markInvalid('templateName');
        return;
    }
    clearError('nameError'); markValid('templateName');
    submitTemplate('draft');
}

document.addEventListener('DOMContentLoaded', function () {
    $('#templateName').on('input', function () { clearError('nameError'); markValid('templateName'); });
    $('#msgTitle').on('input',     function () { clearError('titleError'); markValid('msgTitle'); });
    $('#msgBody').on('input',      function () { clearError('msgError'); markValid('msgBody'); });
    $('#triggerEvent').on('change',function () { clearError('triggerError'); });
    $('#audience').on('change',    function () { clearError('audienceError'); });
    document.querySelectorAll('#channelCards .channel-card-sm').forEach(function (card) {
        card.addEventListener('click', function () { clearError('channelError'); });
    });
});
// ─────────────────────────────────────────────────────────────────────────────

// Variable chips — insert into last focused field
var lastFocused = null;
document.getElementById('msgTitle').addEventListener('focus', function () { lastFocused = this; });
document.getElementById('msgBody').addEventListener('focus',  function () { lastFocused = this; });

document.querySelectorAll('.variable-chip').forEach(function (chip) {
    chip.addEventListener('click', function () {
        if (!lastFocused) return;
        var v   = this.textContent.trim();
        var el  = lastFocused;
        var s   = el.selectionStart ?? el.value.length;
        var e   = el.selectionEnd   ?? el.value.length;
        el.value = el.value.substring(0, s) + '{' + v + '}' + el.value.substring(e);
        el.focus();
        el.selectionStart = el.selectionEnd = s + v.length + 2;
    });
});

// Channel cards — multi-select toggle
document.querySelectorAll('#channelCards .channel-card-sm').forEach(function (card) {
    card.addEventListener('click', function () {
        this.classList.toggle('active');
    });
});

// Image upload preview
var uploadTrigger = document.getElementById('uploadTrigger');
var imageInput    = document.getElementById('productImageInput');
uploadTrigger.addEventListener('click', function (e) {
    if (!e.target.classList.contains('replace-image-btn')) imageInput.click();
});
imageInput.addEventListener('change', function () {
    var file = this.files[0];
    if (!file) return;
    var reader = new FileReader();
    reader.onload = function (e) {
        uploadTrigger.innerHTML =
            '<img src="' + e.target.result + '" class="preview-upload-image" alt="Preview">' +
            '<button type="button" class="replace-image-btn">Replace Image</button>';
        uploadTrigger.querySelector('.replace-image-btn').addEventListener('click', function (ev) {
            ev.stopPropagation();
            imageInput.click();
        });
    };
    reader.readAsDataURL(file);
});

// Flatpickr date range
document.addEventListener('DOMContentLoaded', function () {
    flatpickr('#dateRangePicker', {
        mode       : 'range',
        dateFormat : 'd M, Y',
        onChange   : function (dates) {
            document.getElementById('dateFrom').value = dates[0] ? flatpickr.formatDate(dates[0], 'Y-m-d') : '';
            document.getElementById('dateTo').value   = dates[1] ? flatpickr.formatDate(dates[1], 'Y-m-d') : '';
        },
    });
});

// Confirm create button
document.getElementById('confirmCreateBtn').addEventListener('click', function () {
    var status = document.querySelector('input[name="confirmStatus"]:checked').value;
    bootstrap.Modal.getInstance(document.getElementById('createConfirmModal')).hide();
    submitTemplate(status);
});

function submitTemplate(status) {
    var form = document.getElementById('createTemplateForm');
    var fd   = new FormData(form);
    fd.set('status', status);

    // Collect active channels
    fd.delete('channels');
    fd.delete('channels[]');
    document.querySelectorAll('#channelCards .channel-card-sm.active').forEach(function (card) {
        fd.append('channels[]', card.dataset.channel);
    });

    $.ajax({
        url        : '{{ route("backend.template.notification.store") }}',
        method     : 'POST',
        data       : fd,
        processData: false,
        contentType: false,
        success    : function (res) {
            if (res.success) {
                toastr.success(res.message);
                setTimeout(function () { window.location.href = res.redirect; }, 800);
            }
        },
        error      : function (xhr) {
            if (xhr.status === 422) {
                var errors = xhr.responseJSON.errors;
                if (errors.name) {
                    document.getElementById('nameError').textContent = errors.name[0];
                    document.getElementById('templateName').classList.add('is-invalid');
                }
                toastr.error('Please fix the errors.');
            } else {
                toastr.error('Failed to create template.');
            }
        },
    });
}
</script>
@endsection