@extends('backend.template.layouts.template-base')
@section('title', 'Settings - Invoice Setting')


@section('content')

    <div class="page-head-title mb-3">
        <div class="invoice d-flex align-items-center justify-content-between">
            <div class="d-inline-block">
                <h2 class="text-title fw-semibold mb-0">Invoice Settings
                </h2>
            </div>

            <div class="d-flex align-items-center gap-3">

                <a href="javascript: void(0);" class="button-green d-flex flex-row gap-2 align-items-center px-3">

                    Update changes
                </a>
            </div>
        </div>
    </div>



    <!-- Nav tabs -->
    <ul class="nav nav-tabs nav-tabs-custom" role="tablist">
        <li class="nav-item" role="presentation">
            <a class="nav-link active" data-bs-toggle="tab" href="#Categories" role="tab" aria-selected="false"
                tabindex="-1">
                Order Settings
            </a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" data-bs-toggle="tab" href="#Sections" role="tab" aria-selected="false" tabindex="-1">
                Invoice Settings
            </a>
        </li>
    </ul>


    {{-- ordersettings --}}


    <div class="tab-content card-tab-border text-muted">
        <div class="tab-pane show active" id="Categories" role="tabpanel">
            <div class="p-3">
                <div class="oi-wrapper">

                    <!-- LEFT CARD -->
                    <div class="oi-card">
                        <h4 class="oi-title">Order Identity</h4>

                        <div class="oi-row">
                            <div class="oi-field">
                                <label>Minimum Order Value ₹</label>
                                <input type="number" value="0">
                            </div>

                            <div class="oi-field">
                                <label>Maximum Order Value ₹</label>
                                <input type="number" value="0">
                            </div>
                        </div>
                    </div>

                    <!-- RIGHT CARD -->
                    <div class="oi-card">
                        <h4 class="oi-title">Manage Controls</h4>

                        <div class="oi-toggle">
                            <div>
                                <h5>Order Auto-confirm</h5>
                                <p>Turn On auto-confirm to make users to wait for confirmation</p>
                            </div>
                            <label class="oi-switch">
                                <input type="checkbox">
                                <span></span>
                            </label>
                        </div>

                        <!-- TOGGLE -->
                        <div class="oi-toggle">
                            <div>
                                <h5>Allow Cancellation</h5>
                                <p>If turned On, Customer get provision to cancel their orders</p>
                            </div>
                            <label class="oi-switch">
                                <input type="checkbox" id="cancelToggle">
                                <span></span>
                            </label>
                        </div>

                        <!-- ✅ MOVE HERE (OUTSIDE) -->
                        <div id="cancelContent" class="oi-extra d-none mb-3">

                            <label>Cancellation Time Limit (in hrs)</label>
                            <input type="number" value="0">

                            <div class="oi-info">
                                ⓘ Within the define cancellation time limit customers can cancel their Orders.
                            </div>

                        </div>
                        <div class="oi-toggle">
                            <div>
                                <h5>Scheduled Delivery</h5>
                                <p>If turned off users will not able to schedule their delivery</p>
                            </div>

                            <label class="oi-switch">
                                <input type="checkbox" id="scheduleToggle" checked>
                                <span></span>
                            </label>
                        </div>
                        <div id="scheduleContent" class="oi-extra">

                            <label class="mb-2" style="color: #374151; font-size:14px; font-weight:500 ";>Define Time
                                Slots</label>

                            <!-- ✅ MOVE WRAPPER INSIDE -->
                            <div id="timeSlotWrapper">

                                <div class="oi-time-row">
                                    <span>From</span>
                                    <input type="text" value="06:00:AM">
                                    <span>To</span>
                                    <input type="text" value="09:00:AM">
                                </div>

                                <div class="oi-time-row">
                                    <span>From</span>
                                    <input type="text" value="09:00:AM">
                                    <span>To</span>
                                    <input type="text" value="12:00:PM">
                                </div>

                                <div class="oi-time-row">
                                    <span>From</span>
                                    <input type="text" value="04:00:PM">
                                    <span>To</span>
                                    <input type="text" value="06:00:PM">
                                </div>

                                <div class="oi-time-row">
                                    <span>From</span>
                                    <input type="text" value="06:00:PM">
                                    <span>To</span>
                                    <input type="text" value="09:00:PM">
                                </div>

                            </div>

                            <!-- BUTTON ALWAYS BELOW -->
                            <div class="oi-add" id="addSlotBtn"><svg width="24" height="24" viewBox="0 0 24 24"
                                    fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <mask id="mask0_1252_2621" 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_1252_2621)">
                                        <path
                                            d="M16.19 2H7.81C4.17 2 2 4.17 2 7.81V16.18C2 19.83 4.17 22 7.81 22H16.18C19.82 22 21.99 19.83 21.99 16.19V7.81C22 4.17 19.83 2 16.19 2ZM18 12.75H12.75V18C12.75 18.41 12.41 18.75 12 18.75C11.59 18.75 11.25 18.41 11.25 18V12.75H6C5.59 12.75 5.25 12.41 5.25 12C5.25 11.59 5.59 11.25 6 11.25H11.25V6C11.25 5.59 11.59 5.25 12 5.25C12.41 5.25 12.75 5.59 12.75 6V11.25H18C18.41 11.25 18.75 11.59 18.75 12C18.75 12.41 18.41 12.75 18 12.75Z"
                                            fill="#F07C00" />
                                    </g>
                                </svg>
                                Add new Time Slot</div>

                        </div>
                    </div>

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


        <div class="tab-pane " id="Sections" role="tabpanel">
            <div class="p-3">
                <div class="inv-wrapper">

                    <!-- LEFT CARD -->
                    <div class="inv-card">
                        <h4 class="inv-title">Invoice Identity</h4>

                        <!-- ROW 1 -->
                        <div class="inv-row">
                            <div class="inv-field">
                                <label>Invoice Prefix <span>*</span></label>
                                <input type="text" placeholder="e.g., ORD">
                            </div>

                            <div class="inv-field">
                                <label>Company Name</label>
                                <input type="text" value="Chotekisan">
                            </div>
                        </div>

                        <!-- ROW 2 -->
                        <div class="inv-row">
                            <div class="inv-field">
                                <label>PAN/TAX ID</label>
                                <input type="text" value="1ABOO4567XA0">
                            </div>

                            <div class="inv-field">
                                <label>GST/VAT Number</label>
                                <input type="text" value="27ABCDE1234F1Z5">
                            </div>
                        </div>

                        <!-- FOOTER NOTES -->
                        <div class="inv-field">
                            <label>Footer Notes</label>
                            <textarea placeholder="Type here...."></textarea>
                        </div>
                        <div class="inv-field">
                            <label>Terms of Instruction</label>
                            <textarea placeholder="Type here...."></textarea>
                        </div>
                    </div>

                    <!-- RIGHT CARD -->
                    <div class="inv-card">
                        <h4 class="inv-title">Manage Controls</h4>

                        <!-- TOGGLE 1 -->
                        <div class="inv-toggle">
                            <div>
                                <h5>Auto Generate Invoice</h5>
                                <p>If turned Off, Customers will not receive invoice until admin generate it</p>
                            </div>
                            <label class="inv-switch">
                                <input type="checkbox" checked>
                                <span></span>
                            </label>
                        </div>

                        <!-- TOGGLE 2 -->
                        <div class="inv-toggle">
                            <div>
                                <h5>Show Logo</h5>
                                <p>If turned Off, logo will not appear in Invoice</p>
                            </div>
                            <label class="inv-switch">
                                <input type="checkbox" checked>
                                <span></span>
                            </label>
                        </div>

                        <!-- TOGGLE 3 -->
                        <div class="inv-toggle">
                            <div>
                                <h5>Show Signature</h5>
                                <p>Turn On to show the signature in the Invoice</p>
                            </div>
                            <label class="inv-switch">
                                <input type="checkbox" id="signatureToggle">
                                <span></span>
                            </label>
                        </div>
                        <div id="signatureContent" class="inv-extra d-none">

                            <label>Signature <span>*</span></label>

                            <div class="inv-upload">
                                <div class="inv-upload-inner">
                                    <div class="inv-icon">
                                        <svg width="32" height="32" viewBox="0 0 32 32" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <g clip-path="url(#clip0_1260_3556)">
                                                <mask id="mask0_1260_3556" style="mask-type:luminance"
                                                    maskUnits="userSpaceOnUse" x="0" y="0" width="32" height="32">
                                                    <path d="M32 0H0V32H32V0Z" fill="white" />
                                                </mask>
                                                <g mask="url(#mask0_1260_3556)">
                                                    <path
                                                        d="M12.0003 29.3346H20.0003C26.667 29.3346 29.3337 26.668 29.3337 20.0013V12.0013C29.3337 5.33464 26.667 2.66797 20.0003 2.66797H12.0003C5.33366 2.66797 2.66699 5.33464 2.66699 12.0013V20.0013C2.66699 26.668 5.33366 29.3346 12.0003 29.3346Z"
                                                        stroke="#111827" stroke-width="1.5" stroke-linecap="round"
                                                        stroke-linejoin="round" />
                                                    <path
                                                        d="M12.0007 13.3333C13.4735 13.3333 14.6673 12.1394 14.6673 10.6667C14.6673 9.19391 13.4735 8 12.0007 8C10.5279 8 9.33398 9.19391 9.33398 10.6667C9.33398 12.1394 10.5279 13.3333 12.0007 13.3333Z"
                                                        stroke="#111827" stroke-width="1.5" stroke-linecap="round"
                                                        stroke-linejoin="round" />
                                                    <path
                                                        d="M3.56055 25.2661L10.1339 20.8528C11.1872 20.1461 12.7072 20.2261 13.6538 21.0394L14.0938 21.4261C15.1338 22.3194 16.8138 22.3194 17.8538 21.4261L23.4005 16.6661C24.4405 15.7728 26.1205 15.7728 27.1605 16.6661L29.3338 18.5328"
                                                        stroke="#111827" stroke-width="1.5" stroke-linecap="round"
                                                        stroke-linejoin="round" />
                                                </g>
                                            </g>
                                            <defs>
                                                <clipPath id="clip0_1260_3556">
                                                    <rect width="32" height="32" fill="white" />
                                                </clipPath>
                                            </defs>
                                        </svg>
                                    </div>
                                    <p><strong>Click to Upload or drag and drop</strong></p>
                                    <small>Upload image format should be only PNG, JPG or JPEG.<br>
                                        Also, max file size should be 2MB</small>
                                </div>
                            </div>

                        </div>

                    </div>

                </div>

            </div>
        </div>
    </div>
@endsection
<script>
    document.addEventListener("DOMContentLoaded", function() {

        const toggle = document.getElementById("cancelToggle");
        const box = document.getElementById("cancelContent");

        box.classList.toggle("d-none", !toggle.checked);

        toggle.addEventListener("change", function() {
            box.classList.toggle("d-none", !this.checked);
        });

    });

    document.addEventListener("DOMContentLoaded", function() {

        const toggle = document.getElementById("scheduleToggle");
        const box = document.getElementById("scheduleContent");

        // initial
        box.classList.toggle("d-none", !toggle.checked);

        // toggle change
        toggle.addEventListener("change", function() {
            box.classList.toggle("d-none", !this.checked);
        });

    });

    document.addEventListener("DOMContentLoaded", function() {

        const addBtn = document.getElementById("addSlotBtn");
        const wrapper = document.getElementById("timeSlotWrapper");

        addBtn.addEventListener("click", function() {

            const newRow = document.createElement("div");
            newRow.className = "oi-time-row";

            newRow.innerHTML = `
            <span>From</span>
            <input type="text" placeholder="00:00:--">
            <span>To</span>
            <input type="text" placeholder="00:00:--">
        `;

            // ✅ ADD AT BOTTOM
            wrapper.appendChild(newRow);

        });

    });
    document.addEventListener("DOMContentLoaded", function() {

        const toggle = document.getElementById("signatureToggle");
        const box = document.getElementById("signatureContent");

        // initial state
        box.classList.toggle("d-none", !toggle.checked);

        // toggle change
        toggle.addEventListener("change", function() {
            box.classList.toggle("d-none", !this.checked);
        });

    });
</script>