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

@section('content')

    <section class="general-setting">


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


                <div id="actionButtons" class="d-flex align-items-center gap-3 fa-wrapper d-none">
                    <button class="fa-btn fa-outline">Back to Default</button>
                    <button class="fa-btn fa-primary">Update Changes</button>

                    <label class="fa-checkbox">
                        <input type="checkbox" checked>
                        <span class="fa-checkmark"></span>
                        Mark as Default

                </div>
            </div>


        </div>
        </div>
        {{-- <div class="gi-card mt-3">
            <h4 class="gi-title">General Identity</h4>

            <!-- ROW 1 -->
            <div class="gi-row">
                <div class="gi-col">
                    <label>Business Name <span>*</span></label>
                    <input type="text" placeholder="Enter business name">
                </div>

                <div class="gi-col">
                    <label>Legal Entity Name</label>
                    <input type="text" placeholder="Enter legal entity name">
                </div>
            </div>

            <!-- ROW 2 -->
            <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>

            <!-- ROW 3 -->
            <div class="gi-row">
                <div class="gi-col">
                    <label>GST/VAT Number <span>*</span></label>
                    <input type="text" placeholder="Enter GST/VAT number">
                </div>

                <div class="gi-col">
                    <label>PAN/TAX ID <span>*</span></label>
                    <input type="text" placeholder="Enter PAN/TAX ID">
                </div>

                <div class="gi-col">
                    <label>Default Tax Type <span>*</span></label>
                    <select class="js-example-basic-single select2-hidden-accessible" name="state"
                        data-select2-id="select2-data-1-q2w1" tabindex="-1" aria-hidden="true">
                        <option value="All Status" data-select2-id="select2-data-3-cl70">GST</option>
                        <option value="Active">GST1</option>
                        <option value="Inactive">GST2</option>
                    </select>
                </div>
            </div>

            <!-- ROW 4 -->
            <div class="gi-row">
                <div class="gi-col">
                    <label>Display Name</label>
                    <input type="text" placeholder="e.g., Global Market as GLB Market">
                </div>

                <div class="gi-col">
                    <label>Website URL</label>
                    <input type="text" placeholder="Paste website URL">
                </div>

                <div class="gi-col">
                    <label>Default Currency <span>*</span></label>
                    <select class="js-example-basic-single select2-hidden-accessible" name="state"
                        data-select2-id="select2-data-1-6h8y" tabindex="-1" aria-hidden="true">
                        <option value="All Status" data-select2-id="select2-data-3-8jv5">Select
                        </option>
                        <option value="Active">select1</option>
                        <option value="Inactive">select2</option>
                    </select>
                </div>
            </div>

        </div>
        <div class="ci-card mt-3">
            <h4 class="ci-title">Contact Information</h4>

            <!-- ROW 1 -->
            <div class="ci-row">
                <div class="ci-col">
                    <label>Support Email</label>
                    <input type="text" placeholder="Enter support email">
                </div>

                <div class="ci-col">
                    <label>Support Contact</label>
                    <input type="text" placeholder="Enter contact number">
                </div>

                <div class="ci-col">
                    <label>Alternate Contact</label>
                    <input type="text" placeholder="Enter alternate contact number">
                </div>
            </div>

            <!-- ROW 2 -->
            <div class="ci-row">
                <div class="ci-col">
                    <label>PIN Code <span>*</span></label>
                    <input type="text" placeholder="Enter PIN Code">
                </div>

                <div class="ci-col">
                    <label>City</label>
                    <input type="text" value="AUTO-FETCH" disabled class="ci-disabled">
                </div>

                <div class="ci-col">
                    <label>State</label>
                    <input type="text" value="AUTO-FETCH" disabled class="ci-disabled">
                </div>
            </div>

            <!-- ROW 3 -->
            <div class="ci-row">
                <div class="ci-col">
                    <label>Country <span>*</span></label>
                    <input type="text" value="AUTO-FETCH" disabled class="ci-disabled">
                </div>

                <div class="ci-col ci-wide ">
                    <label>Building number/ Street number(name)</label>
                    <input type="text" placeholder="Enter here">
                </div>
            </div>
        </div>
        <div class="mn-wrapper mt-3">

            <!-- LEFT CARD -->
            <div class="mn-card">
                <h4 class="mn-title">Manage Operations & Notifications</h4>

                <div class="mn-item">
                    <div>
                        <h5>Email Notifications</h5>
                        <p>If turned off users will not get updates on email</p>
                    </div>
                    <label class="mn-switch">
                        <input type="checkbox" checked>
                        <span></span>
                    </label>
                </div>

                <div class="mn-item">
                    <div>
                        <h5>SMS Notifications</h5>
                        <p>If turned off users will not get updates on SMS</p>
                    </div>
                    <label class="mn-switch">
                        <input type="checkbox" checked>
                        <span></span>
                    </label>
                </div>

                <div class="mn-item">
                    <div>
                        <h5>Push Notifications</h5>
                        <p>If turned off users will not get push notification</p>
                    </div>
                    <label class="mn-switch">
                        <input type="checkbox" checked>
                        <span></span>
                    </label>
                </div>

                <div class="mn-item">
                    <div>
                        <h5>Maintenance Mode</h5>
                        <p>Turn On in case of maintenance required with user notes</p>
                    </div>
                    <label class="mn-switch">
                        <input type="checkbox">
                        <span></span>
                    </label>
                </div>
            </div>

            <!-- RIGHT CARD -->
            <div class="mn-card">
                <h4 class="mn-title">Social Presence</h4>

                <div class="mn-field">
                    <label>Instagram URL</label>
                    <input type="text" placeholder="Paste instagram URL">
                </div>

                <div class="mn-field">
                    <label>Facebook URL</label>
                    <input type="text" placeholder="Paste facebook URL">
                </div>

                <div class="mn-field">
                    <label>YouTube URL</label>
                    <input type="text" placeholder="Paste youtube URL">
                </div>

                <div class="mn-field">
                    <label>Twitter URL</label>
                    <input type="text" placeholder="Paste twitter URL">
                </div>

                <div class="mn-add">
                    <span>＋</span> Add new Fee band
                </div>
            </div>

        </div> --}}


        <div class="general-identity ms-2 me-2 mt-3">
            <h2 class="gi-title">General Indentity</h2>

            <!-- ROW 1 -->
            <div class="gi-row">
                <div class="gi-col">
                    <label>Business Name <span>*</span></label>
                    <input type="text" placeholder="Enter business name">
                </div>

                <div class="gi-col">
                    <label>Legal Entity Name</label>
                    <input type="text" placeholder="Enter legal entity name">
                </div>
            </div>
            <!-- ROW 2 -->
            <div class="gi-row">
                <div class="gi-col">
                    <label>Business Logo <span>*</span></label>


                    <div class="dropzone dz-clickable upload-box1" id="uploadTrigger">

                        <!-- Hidden File Input -->
                        <input type="file" id="productImageInput" accept="image/png, image/jpeg, image/jpg" hidden>

                        <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="gi-row">
                <div class="gi-col">
                    <label>GST/VAT Number <span>*</span></label>
                    <input type="text" placeholder="Enter GST/VAT number">
                </div>

                <div class="gi-col">
                    <label>PAN/TAX ID <span>*</span></label>
                    <input type="text" placeholder="Enter PAN/TAX ID">
                </div>

                <div class="gi-col">
                    <label>Default Tax Type <span>*</span></label>
                    <select class="js-example-basic-single select2-hidden-accessible" name="state"
                        data-select2-id="select2-data-1-q2w1" tabindex="-1" aria-hidden="true">
                        <option value="All Status" data-select2-id="select2-data-3-cl70">GST</option>
                        <option value="Active">GST1</option>
                        <option value="Inactive">GST2</option>
                    </select>
                </div>
            </div>
            <!-- ROW 4 -->
            <div class="gi-row">
                <div class="gi-col">
                    <label>Display Name</label>
                    <input type="text" placeholder="e.g., Global Market as GLB Market">
                </div>

                <div class="gi-col">
                    <label>Website URL</label>
                    <input type="text" placeholder="Paste website URL">
                </div>

                <div class="gi-col">
                    <label>Default Currency <span>*</span></label>
                    <select class="js-example-basic-single select2-hidden-accessible" name="state"
                        data-select2-id="select2-data-1-6h8y" tabindex="-1" aria-hidden="true">
                        <option value="All Status" data-select2-id="select2-data-3-8jv5">Select
                        </option>
                        <option value="Active">select1</option>
                        <option value="Inactive">select2</option>
                    </select>
                </div>
            </div>

        </div>

        <div class="contact-information ms-2 me-2 mt-3">
            <h4 class="ci-title">Contact Information</h4>
            <!-- ROW 1 -->
            <div class="ci-row">
                <div class="ci-col">
                    <label>Support Email</label>
                    <input type="text" placeholder="Enter support email">
                </div>

                <div class="ci-col">
                    <label>Support Contact</label>
                    <input type="text" placeholder="Enter contact number">
                </div>

                <div class="ci-col">
                    <label>Alternate Contact</label>
                    <input type="text" placeholder="Enter alternate contact number">
                </div>
            </div>
            <!-- ROW 2 -->
            <div class="ci-row">
                <div class="ci-col">
                    <label>PIN Code <span>*</span></label>
                    <input type="text" placeholder="Enter PIN Code">
                </div>

                <div class="ci-col">
                    <label>City</label>
                    <input type="text" value="AUTO-FETCH" disabled class="ci-disabled">
                </div>

                <div class="ci-col">
                    <label>State</label>
                    <input type="text" value="AUTO-FETCH" disabled class="ci-disabled">
                </div>
            </div>

            <!-- ROW 3 -->
            <div class="ci-row">
                <div class="ci-col">
                    <label>Country <span>*</span></label>
                    <input type="text" value="AUTO-FETCH" disabled class="ci-disabled">
                </div>

                <div class="ci-col ci-wide ">
                    <label>Building number/ Street number(name)</label>
                    <input type="text" placeholder="Enter here">
                </div>
            </div>
        </div>
        <div class="notification-media ms-2 me-2 mt-3">
            <!-- LEFT CARD -->
            <div class="mn-card">
                <h4 class="mn-title">Manage Operations & Notifications</h4>

                <div class="mn-item">
                    <div>
                        <h5>Email Notifications</h5>
                        <p>If turned off users will not get updates on email</p>
                    </div>
                    <label class="mn-switch">
                        <input type="checkbox" checked>
                        <span></span>
                    </label>
                </div>

                <div class="mn-item">
                    <div>
                        <h5>SMS Notifications</h5>
                        <p>If turned off users will not get updates on SMS</p>
                    </div>
                    <label class="mn-switch">
                        <input type="checkbox" checked>
                        <span></span>
                    </label>
                </div>

                <div class="mn-item">
                    <div>
                        <h5>Push Notifications</h5>
                        <p>If turned off users will not get push notification</p>
                    </div>
                    <label class="mn-switch">
                        <input type="checkbox" checked>
                        <span></span>
                    </label>
                </div>
                <div class="mn-item">
                    <div>
                        <h5>Maintenance Mode</h5>
                        <p>Turn On in case of maintenance required with user notes</p>
                    </div>

                    <label class="mn-switch">
                        <input type="checkbox" id="maintenanceToggle">
                        <span></span>
                    </label>
                </div>

                <!-- HIDDEN SECTION -->
                <div id="maintenanceBox" class="mn-maintenance-box d-none">
                    <label>Maintenance Message <span>*</span></label>
                    <textarea placeholder="Type here..."></textarea>
                </div>
            </div>

            <!-- RIGHT CARD -->
            <div class="mn-card">
                <h4 class="mn-title">Social Presence</h4>
                <div id="socialFields">
                    <div class="mn-field">
                        <label>Instagram URL</label>
                        <input type="text" placeholder="Paste instagram URL">
                    </div>

                    <div class="mn-field">
                        <label>Facebook URL</label>
                        <input type="text" placeholder="Paste facebook URL">
                    </div>

                    <div class="mn-field">
                        <label>YouTube URL</label>
                        <input type="text" placeholder="Paste youtube URL">
                    </div>

                    <div class="mn-field">
                        <label>Twitter URL</label>
                        <input type="text" placeholder="Paste twitter URL">
                    </div>




                </div>

                <!-- ADD BUTTON -->
                <div class="mn-add mt-3" onclick="addSocialField()">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <mask id="mask0_1200_3609" 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_1200_3609)">
                            <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 Social Link
                </div>

            </div>

        </div>
    </section>

    {{-- //Unsaved modal popup  --}}
    <div id="unsavedModal" class="cz-modal d-none">
        <div class="cz-modal-card cz-warning-card">

            <!-- HEADER -->
            <div class="cz-modal-header cz-warning-header">
                Unsaved Changes
            </div>

            <!-- BODY -->
            <div class="cz-modal-body">
                You have added the fee bands, but the changes are not saved.
                If you leave now, these changes will be lost.
            </div>

            <!-- FOOTER -->
            <div class="cz-modal-footer cz-warning-footer">
                <button class="cz-btn-text" onclick="closeUnsavedModal()">Cancel</button>
                <button class="cz-btn-outline">Discard Changes</button>
                <button class="cz-btn-warning">Save Changes</button>
            </div>

        </div>
    </div>
@endsection
<script>
    function addSocialField() {

        const container = document.getElementById("socialFields");

        const newField = `
        <div class="mn-social-group">
            
            <div class="mn-field">
                <label>Social Link Name</label>
                <input type="text" placeholder="Enter Link Name">
            </div>

            <div class="mn-field">
                <label>Paste URL</label>
                <input type="text" placeholder="Paste URL">
            </div>
        </div>
    `;

        container.insertAdjacentHTML("beforeend", newField);
    }

    //Maintanance mode 
    document.addEventListener("DOMContentLoaded", function() {

        const toggle = document.getElementById("maintenanceToggle");
        const box = document.getElementById("maintenanceBox");

        toggle.addEventListener("change", function() {

            if (this.checked) {
                box.classList.remove("d-none"); // show
            } else {
                box.classList.add("d-none"); // hide
            }

        });

    });

    //buttons hide 
    document.addEventListener("DOMContentLoaded", function() {

        const inputs = document.querySelectorAll("input, textarea, select");
        const actionBox = document.getElementById("actionButtons");

        function checkFormFilled() {

            let hasValue = false;

            inputs.forEach(input => {
                if (input.value.trim() !== "") {
                    hasValue = true;
                }
            });

            if (hasValue) {
                actionBox.classList.remove("d-none"); // show
            } else {
                actionBox.classList.add("d-none"); // hide
            }
        }

        inputs.forEach(input => {
            input.addEventListener("input", checkFormFilled);
            input.addEventListener("change", checkFormFilled);
        });

    });
</script>
<script>
    document.addEventListener("DOMContentLoaded", function() {

        const uploadTrigger = document.getElementById("uploadTrigger");

        const productImageInput = document.getElementById("productImageInput");

        // Open file manager
        uploadTrigger.addEventListener("click", function() {

            productImageInput.click();

        });

        // Selected file
        productImageInput.addEventListener("change", function() {

            const file = this.files[0];

            if (file) {

                console.log("Selected File:", file.name);

            }

        });

    });
</script>