@extends('backend.template.layouts.template-base')
@section('title', 'Notification - Edit 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>Edit {{ $template->name }}
                </h2>
            </a>
        </div>
    </div>

    <form id="editTemplateForm" 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"
                                    value="{{ $template->name }}" 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>
                                        @if($template->image)
                                            <img src="{{ asset('storage/' . $template->image) }}"
                                                class="preview-upload-image" alt="Preview" id="existingImage">
                                            <button type="button" class="replace-image-btn" id="replaceBtn">Replace Image</button>
                                        @else
                                            <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>
                                        @endif
                                    </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...">{{ $template->description }}</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"
                                                        value="{{ $template->title }}"
                                                        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....">{{ $template->message }}</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>
                                    @php $savedChannels = $template->channels ?? []; @endphp
                                    <div class="d-flex gap-3 flex-wrap" id="channelCards">
                                        <div class="channel-card-sm {{ in_array('push', $savedChannels) ? 'active' : '' }}" 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(#cc1e)"><mask id="cm1e" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path d="M24 0H0V24H24V0Z" fill="white"/></mask><g mask="url(#cm1e)"><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="cc1e"><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 {{ in_array('sms', $savedChannels) ? 'active' : '' }}" 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(#cc2e)"><mask id="cm2e" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path d="M24 0H0V24H24V0Z" fill="white"/></mask><g mask="url(#cm2e)"><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="cc2e"><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 {{ in_array('email', $savedChannels) ? 'active' : '' }}" data-channel="email">
                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="cm3e" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path d="M24 0H0V24H24V0Z" fill="white"/></mask><g mask="url(#cm3e)"><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>
                                    @foreach([
                                        'order_placed'                 => 'Order Placed',
                                        'order_confirmed'              => 'Order Confirmed',
                                        'order_cancelled'              => 'Order Cancelled',
                                        'out_for_delivery'             => 'Out For Delivery',
                                        'order_delivered'              => 'Order Delivered',
                                        'new_customer_registered'      => 'New Customer Registered',
                                        'subscription_activated'       => 'Subscription Activated',
                                        'subscription_expired'         => 'Subscription Expired',
                                        'subscription_expiry_reminder' => 'Subscription Expiry Reminder',
                                        'others'                       => 'Others',
                                    ] as $val => $label)
                                        <option value="{{ $val }}" {{ $template->trigger_event === $val ? 'selected' : '' }}>
                                            {{ $label }}
                                        </option>
                                    @endforeach
                                </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>
                                    @foreach([
                                        'all_customers'        => 'All Customers',
                                        'custom_range'         => 'Custom Range',
                                        'subscribed_customers' => 'Subscribed Customers',
                                        'new_logged_in'        => 'New Logged In Customers',
                                        'delivery_team'        => 'Delivery Team',
                                    ] as $val => $label)
                                        <option value="{{ $val }}" {{ $template->audience === $val ? 'selected' : '' }}>
                                            {{ $label }}
                                        </option>
                                    @endforeach
                                </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"
                                        value="{{ $template->date_from ? $template->date_from->format('d M, Y') . ($template->date_to ? ' to ' . $template->date_to->format('d M, Y') : '') : '' }}">
                                    <input type="hidden" name="date_from" id="dateFrom"
                                        value="{{ $template->date_from ? $template->date_from->format('Y-m-d') : '' }}">
                                    <input type="hidden" name="date_to" id="dateTo"
                                        value="{{ $template->date_to ? $template->date_to->format('Y-m-d') : '' }}">
                                    <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="{{ $template->customer_from ?? 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="{{ $template->customer_to ?? 0 }}" min="0">
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Action Buttons --}}
                <div class="d-flex gap-3 align-items-center btn-list mb-3 mt-3">
                    <a href="{{ route('backend.template.notification.TemplateList') }}"
                       class="outline-button-green">Cancel</a>
                    <button type="button" class="button-green" onclick="openSaveModal()">
                        Save Changes
                    </button>
                </div>

            </div>
        </div>
    </form>
</section>

{{-- Save Confirm Modal --}}
<div id="saveConfirmModal" 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">Save Changes?</h5>
            </div>
            <div class="modal-body">
                <p class="text-muted">Update template
                    <strong>{{ $template->name }}</strong>.
                </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" {{ $template->status === '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" {{ $template->status === 'inactive' ? 'checked' : '' }}>
                        <label class="form-check-label" for="statusInactive">Inactive</label>
                    </div>
                    <div class="form-check custom-radio">
                        <input class="form-check-input" type="radio" name="confirmStatus" id="statusDraft"
                            value="draft" {{ $template->status === 'draft' ? 'checked' : '' }}>
                        <label class="form-check-label" for="statusDraft">Draft</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="confirmSaveBtn">Save Changes</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
var UPDATE_URL = '{{ route("backend.template.notification.update", $template->id) }}';

// ── 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;

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

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

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

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

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

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

    return valid;
}

function openSaveModal() {
    if (!validateForm()) return;
    new bootstrap.Modal(document.getElementById('saveConfirmModal')).show();
}

// Clear errors on input
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
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
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);
});
@if($template->image)
document.getElementById('replaceBtn') && document.getElementById('replaceBtn').addEventListener('click', function (e) {
    e.stopPropagation();
    imageInput.click();
});
@endif

// Flatpickr date range
document.addEventListener('DOMContentLoaded', function () {
    var picker = 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 save
document.getElementById('confirmSaveBtn').addEventListener('click', function () {
    var status = document.querySelector('input[name="confirmStatus"]:checked').value;
    var form   = document.getElementById('editTemplateForm');
    var fd     = new FormData(form);
    fd.set('status', status);

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

    bootstrap.Modal.getInstance(document.getElementById('saveConfirmModal')).hide();

    $.ajax({
        url        : UPDATE_URL,
        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 save changes.');
            }
        },
    });
});
</script>
@endsection