@extends('backend.template.layouts.template-base')
@section('title', 'Add New Section - ALL')

@section('content')
    <section>
        <div class="page-head-title mb-3">
            <a href="{{ route('backend.template.product.category.manage-category') }}" class="d-inline-block">
                <h2 class="text-title fw-semibold mb-0"><i class=" ri-arrow-left-s-line"></i> Add New Section - ALL
                </h2>
            </a>
        </div>

        {{-- card start --}}
        <div class="card-border1 p-3">

            <div class="row g-3">

                <div class="col-md-4">
                    <label for="CategoryName" class="form-label-modal">
                        Category
                    </label>
                    <input type="text" id="CategoryName" class="form-control"
                        placeholder="All">
                </div>

                <div class="col-md-4">
                    <label for="SectionName" class="form-label-modal">
                        Section Name <span class="color-red">*</span>
                    </label>
                    <input type="text" id="SectionName" class="form-control"
                        placeholder="Enter Section name">
                </div>

                <div class="col-md-4">
                    <label class="form-label-modal d-block d-flex align-items-center gap-2">
                        Status 
                        <span class="d-flex gap-1 align-items-center text-sub-para fs-10">
                            <img src="{{ asset('backend/template/svg-icon/alert-muted.svg') }}" alt="alert">
                            By default turns to <span class="color-red text-decoration-underline ">Inactive</span>, if no products added.
                        </span>
                    </label>
                    <div class="d-flex align-items-center gap-4 mt-2">
                        <div class="form-check d-flex align-items-center gap-2 mb-0">
                            <input class="form-check-input" type="radio" name="status" id="activeStatus" >
                            <label class="form-label-modal mb-0" for="activeStatus">Active</label>
                        </div>
                        <div class="form-check d-flex align-items-center gap-2 mb-0">
                            <input class="form-check-input" type="radio" name="status" id="inactiveStatus" checked>
                            <label class="form-label-modal mb-0" for="inactiveStatus">Inactive</label>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <label for="categoryImage" class="form-label-modal">
                        Background Image (optional)
                    </label>

                    <div class="upload-dropzone text-center p-4 rounded-3 position-relative uploadBox">

                        <!-- Preview Image -->
                        <img src="" class="img-fluid d-none previewImage" style="max-height: 120px;">

                        <!-- Default Upload UI -->
                        <div class="uploadContent">
                            <img src="{{ asset('backend/template/svg-icon/upload-file.svg') }}" width="28">
                            <p class="mb-1 mt-2">Click to Upload or drag and drop</p>
                            <small class="text-muted">
                                Upload image format should be only PNG, JPG or JPEG. Also, max file size should be 10MB
                            </small>
                        </div>

                        <!-- Replace Button -->
                        <button type="button" class="replace-btn d-none replaceBtn">
                            Replace Image
                        </button>

                        <input type="file" class="d-none categoryImage" accept="image/png, image/jpeg, image/jpg">
                    </div>
                </div>

                <div class="col-md-6">
                    <label for="ShortDescription" class="form-label-modal">
                        Short Description (optional)
                    </label>
                    <textarea rows="7" type="text" id="ShortDescription" class="form-control"
                        placeholder="Type here..."></textarea>
                </div>

                <div class="col-12">
                    {{-- Add Product? Enable --}}
                    <div class="card-border seo-card Add_Product_card bg-color-lignGray rounded-16 shadow-sm">
                        <div class="card-border-header p-3">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="mb-0 fw-semibold">Add Product?</h6>
                                    <p class="mb-0 mt-1 seoNote small text-muted">You can add products from the product list to active the section in the application. Section won’t visible in application until product get added.</p>
                                </div>

                                <div class="form-check form-switch m-0">
                                    <input class="form-check-input seoToggle shadow-none" data-target="#productTable1" type="checkbox" role="switch">
                                </div>
                            </div>
                        </div>
                    </div>
                    {{-- Add Product? Enable end --}}

                    {{-- table --}}
                    <div id="productTable1" class="seoTable d-none">
                         <div class="table-responsive mt-3">

                            <table class="table table-nowrap align-middle rounded-10 overflow-hidden">
                                <thead class="">
                                    <tr class="all-table-head text-capitalize">
                                        <th colspan="2" class="p-3 table-head-content text-end">S.no</th>
                                        <th class="p-3 table-head-content">Product Group</th>
                                        <th class="p-3 table-head-content">Product Img</th>
                                        <th class="p-3 table-head-content">Product Name</th>
                                        <th class="p-3 table-head-content">Variant & Units</th>
                                        <th class="p-3 table-head-content">Base<br>Price ₹</th>
                                        <th class="p-3 table-head-content">Selling<br>Price ₹</th>
                                        <th class="p-3 table-head-content">Action</th>
                                    </tr>
                                    <tr>
                                        <th colspan="9" class="p-2 table-head-content">
                                            <div class="table-search-box w-50">
                                                <img class="table-search-icon"
                                                    src="{{ asset('backend/template/svg-icon/search.svg') }}"
                                                    alt="search2">
                                                <input type="text" placeholder="Search by product name"
                                                    class="table-search-input">
                                            </div>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody class="list form-check-all sortable-table">
                                    <tr class="" data-id="1">
                                        <th scope="row" class="p-3">
                                            <img src="{{ asset('backend/template/svg-icon/drag-bar.svg') }}" class="drag-handle" alt="drag-icon">
                                        </th>
                                        <td class="table-body-content p-3">1</td>
                                        <td class="table-body-content p-3">Fruits</td>
                                        <td class="table-body-content p-3">
                                            <img src="{{ asset('backend/template/svg-icon/product-img.svg') }}" class="product-image-size" alt="product-image">
                                        </td>
                                        <td class="table-body-content p-3">
                                            <div class="d-flex flex-column gap-1">
                                                <span class="">Lorem ipsum</span>
                                                <span class="secondary-text fs-11 ">லோரம் இப்சம்</span>
                                            </div>
                                        </td>
                                        <td class="table-body-content p-3">250g, 500g, 1kg, 2kg, 5kg</td>
                                        <td class="table-body-content p-3">₹000</td>
                                        <td class="table-body-content p-3">₹000</td>
                                        <td class="table-body-content p-3">
                                            <div class="d-flex align-items-center gap-3">
                                                <a href="javascript:void(0);" 
                                                data-bs-toggle="modal" data-bs-target="#ProductDetailsModal">
                                                    <img src="{{ asset('backend/template/svg-icon/view-blue.svg') }}" alt="view">
                                                </a>
                                                <a href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#DeleteCategoryModal">
                                                    <img src="{{ asset('backend/template/svg-icon/remove-red.svg') }}" alt="remove">
                                                </a>
                                            </div>
                                        </td>
                                    </tr>

                                    {{-- if no product show this --}}
                                    <tr class="" data-id="1">
                                        <td colspan="9" class="table-body-content p-3">
                                            <div class="text-center">
                                                <span class="secondary-text d-flex gap-2 align-items-center justify-content-center">
                                                    <img src="{{ asset('backend/template/svg-icon/alert-muted.svg') }}" alt="icon" width="20" height="20">
                                                    <p class="mb-1">No products selected yet!</p>
                                                </span>

                                                <p class="mb-0 fs-12 secondary-text">Select product by its name or select multiple products by selecting group at once. </p>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>

                        </div>
                    </div>
                    {{-- table end --}}
                </div>

            </div>

            <div class="mt-3 d-flex justify-content-end gap-2">
                <button type="button" class="button-outline-green w-button">Cancel</button>
                <button type="button" class="button-green"
                data-bs-toggle="modal" data-bs-target="#CreateSectionModal">Create Section</button>
            </div>
        </div>
        {{-- card end --}}


        {{-- Product Details modal --}}
        <div class="modal fade" id="ProductDetailsModal" tabindex="-1">
            <div class="modal-dialog custom-modal-width modal-dialog-centered">
                <div class="modal-content rounded-16 overflow-hidden">

                    <div class="modal-header bg-color-lightGreen">
                        <div class="d-flex flex-row align-items-center gap-2">
                            <img src="{{ asset('backend/template/svg-icon/product-image.svg') }}" alt="Product image" class="product-modal-img">
                            <div>
                                <h3 class="color-green modal-title mb-0">[Product Name] Details</h3>
                                <span class="text-sub-heading mb-0 fs-12">Group under : Fruits  |  Last updated on : 00/00/0000</span>
                            </div>
                        </div>
                        <button type="button" class="btn-close opacity-100" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body">
                        <span class="modal-sub-headings">Product Info</span>
                        <div class="card-border p-3 mt-2 mb-3">
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <p class="secondary-text mb-1 fs-12">Product Name</p>
                                    <p class="mb-0 text-title fs-14">Lorem Ipsum</p>
                                </div>
                                <div class="col-md-4">
                                    <p class="secondary-text mb-1 fs-12">Product Name (tamil/tanglish)</p>
                                    <p class="mb-0 text-title fs-12">லோரம் இப்சம்</p>
                                </div>
                                <div class="col-md-4">
                                    <p class="secondary-text mb-1 fs-12">Product Group</p>
                                    <p class="mb-0 text-title fs-14">Fruits</p>
                                </div>
                                <div class="col-md-12">
                                    <p class="secondary-text mb-1 fs-12">Short Description</p>
                                    <p class="mb-0 text-title fs-14">Lorem Ipsum dolor sit amet, consectetuer adipiscingelit. Duis tellus.</p>
                                </div>
                                <div class="col-md-12">
                                    <p class="secondary-text mb-1 fs-12">Product Keywords</p>
                                    <p class="mb-0 text-title fs-14">abc, def, ghi, jkl, mno</p>
                                </div>
                            </div>
                        </div>

                        
                        <span class="modal-sub-headings">Volume based Product Pricing</span>
                        <div class="table-responsive mt-2">

                            <table class="table table-nowrap align-middle rounded-10 overflow-hidden">
                                <thead class="all-table-head">
                                    <tr class=" text-capitalize">
                                        <th class="p-3 table-head-content">Variant</th>
                                        <th class="p-3 table-head-content">Unit</th>
                                        <th class="p-3 table-head-content">MRP ₹</th>
                                        <th class="p-3 table-head-content">Selling Price ₹</th>
                                        <th class="p-3 table-head-content">Action</th>
                                    </tr>
                                </thead>
                                <tbody class="list form-check-all">
                                    <tr class="">
                                        <td class="table-body-content p-3">250</td>
                                        <td class="table-body-content p-3">g</td>
                                        <td class="table-body-content p-3">₹000</td>
                                        <td class="table-body-content p-3">₹000</td>
                                        <td class="table-body-content p-3">
                                            <div class="product-cart-toggle remove">Remove</div>
                                        </td>
                                    </tr>

                                    <tr>
                                        <td colspan="6" class="table-body-content p-3">
                                            <div class="d-flex flex-row align-items-center justify-content-start gap-2 cursor-pointer"
                                            data-bs-toggle="modal" data-bs-target="#AddNewPriceModal">
                                                <img src="{{ asset('backend/template/svg-icon/add-yellow.svg') }}" alt="add">
                                                <p class="mb-0 color-orange">Add new Pricing</p>
                                            </div>
                                        </td>
                                    </tr>

                                </tbody>
                            </table>

                        </div>
                    </div>

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

        {{-- Add New Price modal --}}
        <div class="modal fade" id="AddNewPriceModal" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content rounded-16 overflow-hidden">

                    <div class="modal-header bg-color-lightGreen">
                        <h3 class="color-green modal-title mb-0">Add New Price</h3>
                        <button type="button" class="btn-close opacity-100" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body">

                        {{-- alert --}}
                        <div class="d-flex align-items-start gap-2 bg-color-lightOrange rounded-3 p-2 mb-3">
                            <img src="{{ asset('backend/template/svg-icon/alert-muted.svg') }}" alt="icon" width="16" height="16" class="fillter-orange mt-1">
                            <p class="mb-0 fs-12 color-orange">This price is only active for this section it’s not a permanent price of the [Product Name]. To make it one of the permanent price add from the product list.</p>
                        </div>
                       <div class="row g-3">

                            <div class="col-md-6">
                                <label for="Varient" class="form-label-modal">
                                    Varient <span class="color-red">*</span>
                                </label>
                                <select id="Varient" class="js-example-basic-single" name="state">
                                    <option value="Select">Select</option>
                                    <option value="Fruits">Fruits</option>
                                    <option value="Vegetable">Vegetable</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="Unit" class="form-label-modal">
                                    Unit <span class="color-red">*</span>
                                </label>
                                <select id="Unit" class="js-example-basic-single" name="state">
                                    <option value="Select">Select</option>
                                    <option value="Select">Select</option>
                                    <option value="Select">Select</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="LableName" class="form-label-modal">
                                    Lable (optional)
                                </label>
                                <input type="text" id="LableName" class="form-control"
                                    placeholder="Enter lable name">
                            </div>
                            <div class="col-md-6">
                                <label for="MRP" class="form-label-modal">
                                    MRP ₹ <span class="color-red">*</span>
                                </label>
                                <input type="text" id="MRP" class="form-control"
                                    placeholder="₹0">
                            </div>
                            <div class="col-md-6">
                                <label for="Discount" class="form-label-modal">
                                    Discount
                                </label>
                                <select id="Discount" class="js-example-basic-single" name="state">
                                    <option value="Fixed Price">Fixed Price</option>
                                    <option value="Fixed Price">Fixed Price</option>
                                    <option value="Fixed Price">Fixed Price</option>
                                </select>
                            </div>

                            {{-- if two form needed add this --}}
                            <div class="col-md-6">
                                <label for="DiscountValue" class="form-label-modal">
                                    Discount Value ₹ <span class="color-red">*</span>
                                </label>
                                <input type="text" id="DiscountValue" class="form-control"
                                    placeholder="Enter lable name">
                            </div>
                            <div class="col-md-6">
                                <label for="SellingPrice" class="form-label-modal">
                                    Selling Price ₹
                                </label>
                                <input type="text" id="SellingPrice" class="form-control"
                                    placeholder="Enter lable name">
                            </div>
                       </div>

                        
                    </div>

                    <div class="modal-footer border-0 px-4 pb-4 pt-0 d-flex justify-content-end gap-2">
                        <button type="button" class="button-outline" data-bs-dismiss="modal">Cancel</button>
                        <button type="button" class="button-green">Add Price</button>
                    </div>

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

        {{-- Create Section modal --}}
        <div class="modal fade" id="CreateSectionModal" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content rounded-16 overflow-hidden">

                    <div class="modal-header bg-color-lightGreen">
                        <h3 class="color-green modal-title mb-0">Create Section in [Category Name]?</h3>
                        <button type="button" class="btn-close opacity-100" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body">
                        <p class="mb-0 secondary-text">You’re about to create a new section with <span class="fw-semibold">{X products}</span> under <span class="fw-semibold">{Category Name}</span>. This section will be available only within this category.</p>

                        <p class="mb-2 text-title fs-14">Products will be immediately visible in this category.</p>

                        <div class="card-border seo-card bg-color-lignGray rounded-16 shadow-sm">

                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="mb-0 fw-semibold">Schedule?</h6>
                                    {{-- don't remove this class --}}
                                    <div class="mb-0 mt-1 seoNote small text-muted">You can schedule your section by selecting date and even by time.</div>
                                </div>

                                <div class="form-check form-switch m-0">
                                    <input class="form-check-input seoToggle shadow-none" type="checkbox" 
                                        role="switch">
                                </div>
                            </div>


                            <div class="card-border-content seoContent p-3" style="display: none;">

                                <div class="row g-3">

                                    {{-- Date From --}}
                                    <div class="col-md-6">
                                        <label class="form-label-modal">
                                            Date From/On
                                        </label>

                                        <div class="schedule-input-wrap">
                                            <input type="date" class="schedule-input">

                                            <img src="{{ asset('backend/template/images/svg/date-icon.svg') }}"
                                                alt="Calendar"
                                                class="schedule-date-icon">
                                        </div>
                                    </div>

                                    {{-- Date To --}}
                                    <div class="col-md-6">
                                        <label class="form-label-modal">
                                            Date To
                                        </label>

                                        <div class="schedule-input-wrap">
                                            <input type="date" class="schedule-input">

                                            <img src="{{ asset('backend/template/images/svg/date-icon.svg') }}"
                                                alt="Calendar"
                                                class="schedule-date-icon">
                                        </div>
                                    </div>

                                    {{-- Time From --}}
                                    <div class="col-md-6">
                                        <label class="form-label-modal">
                                            Time From
                                        </label>

                                        <div class="schedule-input-wrap">
                                            <input type="time" class="schedule-input">

                                            <img src="{{ asset('backend/template/images/svg/time-icon.svg') }}"
                                                alt="Clock"
                                                class="schedule-time-icon">
                                        </div>
                                    </div>

                                    {{-- Time To --}}
                                    <div class="col-md-6">
                                        <label class="form-label-modal">
                                            Time To
                                        </label>

                                        <div class="schedule-input-wrap">
                                            <input type="time" class="schedule-input">

                                            <img src="{{ asset('backend/template/images/svg/time-icon.svg') }}"
                                                alt="Clock"
                                                class="schedule-time-icon">
                                        </div>
                                    </div>

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

                    <div class="modal-footer">
                        <button type="button" class="button-outline-green w-button" data-bs-dismiss="modal">Cancel</button>
                        <button class="button-green ">Create Section</button>
                    </div>

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

    </section>
@endsection

@section('scripts')
    <script>
$(document).ready(function () {

    $('#categorySelect').select2({
        placeholder: "Select categories",
        width: '100%'
    });

});
</script>


<script>
$(document).ready(function () {

    $('#categorySelect').on('change', function () {

        let selectedData = $(this).select2('data');
        let container = $('#selectedCategoryList');
        let emptyText = $('#emptyCategoryText');

        container.html('');

        if (selectedData.length === 0) {
            emptyText.show();
            return;
        }

        emptyText.hide();

        selectedData.forEach(function (item) {

            let tag = `
                <div class="category-tag">
                    <span>${item.text}</span>
                    <button type="button" class="remove-tag" data-id="${item.id}">&times;</button>
                </div>
            `;

            container.append(tag);
        });

    });

    // remove from select2 also
    $(document).on('click', '.remove-tag', function () {

        let id = $(this).data('id');

        let values = $('#categorySelect').val() || [];

        values = values.filter(v => v != id);

        $('#categorySelect').val(values).trigger('change');

    });

});
</script>

<script>
 document.querySelectorAll('.sortable-table').forEach(table => {

    new Sortable(table, {
        animation: 150,
        handle: '.drag-handle',

        onEnd: function () {
            let order = [];

            table.querySelectorAll('tr').forEach((row, index) => {
                order.push({
                    id: row.dataset.id,
                    position: index + 1
                });
            });

            console.log(order);
        }
    });

});
</script>
<script>
document.querySelectorAll('.uploadBox').forEach(function (uploadBox) {
    const fileInput = uploadBox.querySelector('.categoryImage');
    const previewImage = uploadBox.querySelector('.previewImage');
    const uploadContent = uploadBox.querySelector('.uploadContent');
    const replaceBtn = uploadBox.querySelector('.replaceBtn');

    uploadBox.addEventListener('click', function () {
        fileInput.click();
    });

    replaceBtn.addEventListener('click', function (e) {
        e.stopPropagation();
        fileInput.click();
    });

    fileInput.addEventListener('change', function (event) {
        const file = event.target.files[0];

        if (file) {
            const reader = new FileReader();

            reader.onload = function (e) {
                previewImage.src = e.target.result;
                previewImage.classList.remove('d-none');
                uploadContent.classList.add('d-none');
                replaceBtn.classList.remove('d-none');
            };

            reader.readAsDataURL(file);
        }
    });
});
</script>
<script>
$(document).on('change', '.seoToggle', function () {

    let target = $(this).data('target');
    let table = $(target);

    if ($(this).is(':checked')) {
        table.stop(true, true).removeClass('d-none').hide().slideDown(200);
    } else {
        table.stop(true, true).slideUp(200, function () {
            $(this).addClass('d-none');
        });
    }

});
</script>

<script>
        document.querySelectorAll('.seo-card').forEach(card => {
            const toggle = card.querySelector('.seoToggle');
            const content = card.querySelector('.seoContent');
            const note = card.querySelector('.seoNote');

            if (!toggle || !content || !note) return; // safety

            // default state
            content.style.display = 'none';

            toggle.addEventListener('change', function() {
                if (this.checked) {
                    content.style.display = 'block';
                    note.style.display = 'none';
                } else {
                    content.style.display = 'none';
                    note.style.display = 'block';
                }
            });
        });
    </script>
<script>
$(document).on('click', '.product-cart-toggle', function () {

    let el = $(this);

    if (el.hasClass('remove')) {
        el.removeClass('remove').addClass('add').text('Add');
    } else {
        el.removeClass('add').addClass('remove').text('Remove');
    }

});
</script>

@endsection