@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>[Template Name] Duplicated
                    </h2>
                </a>

            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <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">
                            <div class="col-xxl-4 col-md-6">
                                <label for="Product Name" class="form-label">Template Name <span
                                        class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="ProductName"
                                    placeholder="Enter template name">
                            </div>
                            <div class="gi-row">
                                <div class="gi-col">
                                    <label>Business Logo <span>*</span></label>

                                    <div class="dropzone dz-clickable">

                                        <div class="dz-message needsclick">
                                            <div class="mb-2">
                                                <img src="http://127.0.0.1:8000/backend/template/svg-icon/product-img.svg"
                                                    alt="Product Image" width="35px">
                                            </div>
                                            <h5>Click to Upload or drag and drop</h5>
                                            <p class="upload-description">Upload image format should be only PNG, JPG or
                                                JPEG.
                                                Also, max file size should be 5MB</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="gi-col">
                                    <label>Short Description (optional)</label>
                                    <textarea placeholder="Type here..."></textarea>
                                </div>
                            </div>

                            <div class="container-fluid">
                                <div class="card custom-card ">
                                    <div class="card-body">
                                        <div class="row g-3">

                                            <!-- LEFT SIDE -->
                                            <div class="col-md-7">
                                                <div class="form-group title-group">
                                                    <label class="form-label">Title</label>
                                                    <input type="text" class="form-control custom-input"
                                                        placeholder="Type here....">
                                                </div>

                                                <div class="form-group">
                                                    <label class="form-label">Message</label>
                                                    <textarea class="form-control custom-textarea" rows="6" placeholder="Type here...."></textarea>
                                                </div>
                                            </div>

                                            <!-- RIGHT SIDE -->
                                            <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>
                                <div class=" m-2 p-1">
                                    <label class="form-label mb-2">
                                        Select channels <span class="text-danger">*</span>
                                    </label>

                                    <div class="d-flex gap-3 flex-wrap">

                                        <div class="channel-card-sm active">

                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <g clip-path="url(#clip0_1407_9619)">
                                                    <mask id="mask0_1407_9619" style="mask-type:luminance"
                                                        maskUnits="userSpaceOnUse" x="0" y="0" width="24"
                                                        height="24">
                                                        <path d="M24 0H0V24H24V0Z" fill="white" />
                                                    </mask>
                                                    <g mask="url(#mask0_1407_9619)">
                                                        <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="clip0_1407_9619">
                                                        <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">

                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <g clip-path="url(#clip0_1407_9630)">
                                                    <mask id="mask0_1407_9630" style="mask-type:luminance"
                                                        maskUnits="userSpaceOnUse" x="0" y="0" width="24"
                                                        height="24">
                                                        <path d="M24 0H0V24H24V0Z" fill="white" />
                                                    </mask>
                                                    <g mask="url(#mask0_1407_9630)">
                                                        <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="clip0_1407_9630">
                                                        <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">

                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <mask id="mask0_1420_2271" style="mask-type:luminance"
                                                    maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
                                                    <path d="M24 0H0V24H24V0Z" fill="white" />
                                                </mask>
                                                <g mask="url(#mask0_1420_2271)">
                                                    <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>
                            </div>
                        </div>

                    </div>

                </div>
                <div class="card trigger-card mt-3">
                    <!-- Header -->
                    <div class="card-header trigger-header">
                        Trigger Rules
                    </div>

                    <!-- Body -->
                    <div class="card-body">
                        <div class="row g-3">

                            <!-- Event Triggers -->
                            <div class="col-md-6">
                                <label class="form-label">
                                    Event Triggers <span class="text-danger">*</span>
                                </label>
                                <select class=" trigger-select js-example-basic-single" name="state">

                                    <option selected>Select</option>

                                    <option> Order Placed </option>
                                    <option> Order Confirmed </option>
                                    <option> Order Cancelled </option>
                                    <option> Out For Delivery </option>
                                    <option> Order Delivered </option>
                                    <option> New Customer Registered </option>
                                    <option> Subscription Activated </option>
                                    <option> Subscription Expired </option>
                                    <option> Subscription Expiry Reminder </option>
                                    <option> Others </option>
                                </select>

                            </div>

                            <!-- Select Audience -->
                            <div class="col-md-6">
                                <label class="form-label">
                                    Select Audience <span class="text-danger">*</span>
                                </label>
                                <select class=" trigger-select js-example-basic-single" name="state">
                                    <option selected>Select</option>
                                    <option> All Customers </option>
                                    <option> Custom Range </option>
                                    <option> Subscribed Customers </option>
                                    <option> New logged in Customers </option>
                                    <option> Delivery Team </option>
                                    <option> Dep 1 </option>
                                    <option> Dep 1 </option>
                                    <option> Dep 1 </option>
                                </select>
                            </div>

                        </div>
                        <div class="row g-3">

                            <!-- Event Triggers -->
                            <div class="col-md-4 ">
                                <label class="form-label mt-3">
                                    Date Range<span class="text-danger">*</span>
                                </label>
                                <div class="cz-date-input1">
                                    <input type="text" placeholder="Date Range" data-provider="flatpickr"
                                        data-date-format="d M, Y" data-range-date="true" class="cz-date-field">

                                    <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 <span class="text-danger">*</span>
                                </label>

                                <input type="number" class="form-control custom-input" value="0">
                            </div>
                            <div class="col-md-4 ">
                                <label class="form-label  mt-3">
                                    Customer To <span class="text-danger">*</span>
                                </label>

                                <input type="number" class="form-control custom-input" value="0">
                            </div>
                        </div>
                    </div>
                </div>



                <!-- RIGHT -->
                <div class="d-flex gap-3 align-items-right btn-list mb-3">
                    {{-- <button type="button" class="shadow-button-green">Save as Draft</button> --}}
                    <button type="button" class="outline-button-green">Cancel</button>

                    <!-- LEFT -->
                    <button type="button" class="button-green" data-bs-toggle="modal"
                        data-bs-target="#createProductModal">
                        Duplicate Template
                    </button>
                </div>


            </div>
        </div>

    </section>

    {{-- -----------modal code-------------- --}}
    <div id="createProductModal" 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 Product?</h5>

                </div>

                <div class="modal-body">
                    <p class="text-muted">
                        You are about to create a <strong>[Product Name]</strong>. Once created,
                        the product will be available for listing and further configuration.
                    </p>

                    <label class="form-label status mt-3">Product Status</label>

                    <div class="d-flex gap-4 mt-2">
                        <div class="form-check custom-radio">
                            <input class="form-check-input" type="radio" name="status" id="active" checked>
                            <label class="form-check-label" for="active">Active</label>
                        </div>

                        <div class="form-check custom-radio">
                            <input class="form-check-input" type="radio" name="status" id="inactive">
                            <label class="form-check-label" for="inactive">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">Create Product</button>

                </div>

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

@endsection

@section('scripts')
    <script>
        ClassicEditor
            .create(document.querySelector('#Descriptioneditor'))
            .catch(error => {
                console.error(error);
            });
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {

            document.querySelectorAll('[data-provider="flatpickr"]').forEach(function(el) {

                flatpickr(el, {
                    mode: el.dataset.rangeDate ? "range" : "single",
                    dateFormat: "d M, Y",
                });

            });

        });
    </script>

@endsection