@extends('layouts.main')
@section('title', $data['title'])
@section('content')

    <style type="text/css">
        td p {
            max-width: 100%;
            white-space: break-spaces;
            word-break: break-all;
        }


        .page-title-right {
            text-align: left;
            margin-top: 20px;
        }

        .modal-lg {
            max-width: 1100px;
        }

        .target-box {
            margin-left: 15px;
        }

        h5#canvasTargetMasterLable {
            font-size: 1.4rem;
        }

        div.dataTables_wrapper div.dataTables_filter {
            text-align: right !important;
        }

        table.dataTable a {
            color: #3751A1;
        }

        #card_targetview .col-md-3 {
            margin-top: 10px;
        }

        @media (max-width:767px) {
            #card_targetview .col-md-3 {
                width: 50%;
            }

            .page-title-right {
                text-align: right;
                margin-top: 0;
                margin-bottom: 10px;
            }

        }

        @media (max-width:639px) {
            #datatable_wrapper .col-sm-12.col-md-6 {
                padding-left: 0;
                width: 50%;
            }
        }

        .page-content {
            padding: calc(70px + 24px) calc(24px / 2) 60px calc(24px / 2) !important;
        }

        #datatable thead th:first-child {
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
        }

        #datatable thead th:last-child {
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
        }


        #datatable thead th {
            color: #000;
            font-size: 13px;
            text-align: center;
            padding: 12px;
            font-weight: 600;
            /* font-family: 'Almarose Semibold', sans-serif; */
            font-family: 'Montserrat', sans-serif !important;
            /* background-color: rgb(225 232 242) !important; */
            background-color: #F1F4F9;
            border-bottom: none;
        }

        #datatable tbody td {
            font-size: 14px;
            font-family: 'Montserrat', sans-serif !important;
            text-align: center;
            background-color: #fff !important;
            color: #000;
            /* border-top: 1px solid #e5e9f2; */
        }

        #datatable_filter input {
            width: 500px;
            height: 36px;
            font-size: 12px;
        }

        #CardBodyScrolling {
                {
                    {
                    -- height: 712px;
                    --
                }
            }

            /* Adjust height as needed */
            overflow-y: auto;
            scroll-behavior: smooth;
            /* Enables smooth scrolling */
            background-color: transparent !important;
        }

        .boarder-radius-10 {
            border-radius: 10px;
        }

        .card-header h5 {
            position: relative;
            display: inline-block;
            /* Ensures it only takes up necessary width */
        }

        .card-header h5::after {
            content: "";
            position: absolute;
            left: -30px;
            /* Aligns it to the left */
            bottom: 8px;
            /* Adjust spacing from text */
            width: 22px;
            /* Adjust width */
            height: 4px;
            background: #3751a1;
            transform: rotateZ(90deg);
        }

        .ck-editor__editable {
            min-height: 200px !important;
            /* Adjust as needed */
            max-height: 400px !important;
            /* Set a max height */
            overflow-y: auto !important;
            /* Enable vertical scrolling */
        }

        .btn-secondary {
            background-color: #f5f5f5 !important;
            border: none;
            border-radius: 10px;
            color: #000 !important;
        }

        .btn-primary {
            background-color: #408dfb !important;
            border: none;
            border-radius: 10px;
        }
    </style>
    <div class="page-content">
        <div class="container-fluid">
            <div class="row">
                <!-- Sidebar -->
                <div class="col-lg-3 col-md-4 col-sm-12 mb-3">
                    <div class="card shadow-lg boarder-radius-10">
                        <div class="list-group list-group-flush boarder-radius-10">
                            @if (Auth::user()->type == 0)
                                <a href="#email-notification" class="list-group-item list-group-item-action active text-bold">
                                    Email Notification Setting <div class="float-end">
                                        <i class="bx bx-chevron-right font-size-24"></i>
                                    </div>
                                </a>
                            @elseif(Auth::user()->type == 1)
                                <a href="#company-tab" class="list-group-item list-group-item-action active text-bold">
                                    Company Setting <div class="float-end">
                                        <i class="bx bx-chevron-right font-size-24"></i>
                                    </div>
                                </a>
                                <a href="#unique-prefix-tab" class="list-group-item list-group-item-action text-bold">
                                    Unique Prefix <div class="float-end">
                                        <i class="bx bx-chevron-right font-size-24"></i>
                                    </div>
                                </a>
                                <a href="#email-tab" class="list-group-item list-group-item-action text-bold">
                                    Email Setting <div class="float-end">
                                        <i class="bx bx-chevron-right font-size-24"></i>
                                    </div>
                                </a>
                                <a href="#ip-restriction-settings" class="list-group-item list-group-item-action text-bold">
                                    IP Restriction Setting <div class="float-end">
                                        <i class="bx bx-chevron-right font-size-24"></i>
                                    </div>
                                </a>
                                <a href="#user-email-notification" class="list-group-item list-group-item-action text-bold">
                                    User Email Notification Setting <div class="float-end">
                                        <i class="bx bx-chevron-right font-size-24"></i>
                                    </div>
                                </a>
                                <a href="#email-template" class="list-group-item list-group-item-action text-bold">
                                    Email Template Setting <div class="float-end">
                                        <i class="bx bx-chevron-right font-size-24"></i>
                                    </div>
                                </a>
                                <a href="#printer-template" class="list-group-item list-group-item-action text-bold">
                                    Printer Setting <div class="float-end">
                                        <i class="bx bx-chevron-right font-size-24"></i>
                                    </div>
                                </a>
                                <a href="#payment-terms-setting" class="list-group-item list-group-item-action text-bold">
                                    Payment Terms <div class="float-end">
                                        <i class="bx bx-chevron-right font-size-24"></i>
                                    </div>
                                </a>
                                <a href="#terms-condition-setting" class="list-group-item list-group-item-action text-bold">
                                    Terms & Condition <div class="float-end">
                                        <i class="bx bx-chevron-right font-size-24"></i>
                                    </div>
                                </a>
                                <a href="#invoice-template-setting" class="list-group-item list-group-item-action text-bold">
                                    Invoice Template <div class="float-end">
                                        <i class="bx bx-chevron-right font-size-24"></i>
                                    </div>
                                </a>
                                <a href="#send-email-setting" class="list-group-item list-group-item-action text-bold">
                                    Send Mail <div class="float-end">
                                        <i class="bx bx-chevron-right font-size-24"></i>
                                    </div>
                                </a>
                            @else
                            @endif
                        </div>
                    </div>
                </div> <!-- end col -->

                <!-- Content -->
                <div class="col-lg-9 col-md-8 col-sm-12">
                    <div id="CardBodyScrolling" class="card shadow-lg p-3 boarder-radius-10">
                        @if (Auth::user()->type == 0)
                            <!-- Email Notification Settings -->
                            <section id="email-notification" class="content-section">
                                @include('setting.detail_tab.email_notification_tab')
                            </section>
                        @elseif(Auth::user()->type == 1)
                            <!-- Company Settings -->
                            <section id="company-tab" class="content-section">
                                @include('setting.detail_tab.company_tab')
                            </section>

                            <!-- Unique Prefix Settings -->
                            <section id="unique-prefix-tab" class="content-section">
                                @include('setting.detail_tab.unique_prefix_tab')
                            </section>

                            <!-- Email Settings -->
                            <section id="email-tab" class="content-section">
                                @include('setting.detail_tab.email_tab')
                            </section>

                            <!-- IP Restriction Settings -->
                            <section id="ip-restriction-settings" class="content-section">
                                @include('setting.detail_tab.ip_restriction_tab')
                            </section>

                            <!-- User Email Notification Settings -->
                            <section id="user-email-notification" class="content-section">
                                @include('setting.detail_tab.user_email_notification_tab')
                            </section>

                            <!-- Email Template Settings -->
                            <section id="email-template" class="content-section">
                                @include('setting.detail_tab.email_template_tab')
                            </section>
                            <!-- Printer Settings -->
                            <section id="printer-template" class="content-section">
                                @include('setting.detail_tab.printer_template_tab')
                            </section>
                            <!-- Payment Terms Settings -->
                            <section id="payment-terms-setting" class="content-section">
                                @include('setting.detail_tab.payment_terms_tab')
                            </section>
                            <!-- Terms Condition Settings -->
                            <section id="terms-condition-setting" class="content-section">
                                @include('setting.detail_tab.terms_condition_tab')
                            </section>
                            <!-- Invoice Template Settings -->
                            <section id="invoice-template-setting" class="content-section">
                                @include('setting.detail_tab.invoice_template_tab')
                            </section>
                            <section id="send-email-setting" class="content-section">
                                @include('setting.detail_tab.mail_send_tab')
                            </section>
                        @else
                        @endif
                    </div> <!-- end card-body -->
                </div> <!-- end col -->
            </div> <!-- end row -->
        </div> <!-- container-fluid -->
    </div> <!-- page-content -->

    @csrf
    @include('setting.comman.modal')

@endsection('content')

@section('custom-scripts')

    {{--
    <script src="{{ asset('assets/ckeditor5/build/ckeditor.js') }}"></script> --}}
    <script src="{{ asset('assets/libs/parsleyjs/parsley.min.js') }}"></script>
    <script src="{{ asset('assets/js/pages/form-validation.init.js') }}"></script>
    <script src="{{ asset('assets/js/pages/jquery.form.js') }}"></script>
    <script type="text/javascript">
        var RedirectRout = '{{ route('setting.index') }}';


        $(document).ready(function () {
            // Hide all sections except the first one
            $(".content-section").hide();
            $(".content-section:first").show().addClass("active");

            // Set the first menu item as active
            $(".list-group-item:first").addClass("active");

            $(".list-group-item").click(function (e) {
                e.preventDefault();

                // Remove active class from all tabs and add to clicked tab
                $(".list-group-item").removeClass("active");
                $(this).addClass("active");

                // Get the target section ID
                var target = $(this).attr("href");

                // Hide all sections, then fade in the selected one
                $(".content-section").hide().removeClass("active");
                $(target).fadeIn().addClass("active");

                // Smooth scroll inside #CardBodyScrolling
                $("#CardBodyScrolling").animate({
                    scrollTop: $(target).position().top + $("#CardBodyScrolling").scrollTop()
                }, 500); // Set animation duration to 500ms
            });

            // Detect scrolling and update active tab dynamically
            $("#CardBodyScrolling").on("scroll", function () {
                $(".content-section").each(function () {
                    var sectionTop = $(this).position().top;
                    var scrollTop = $("#CardBodyScrolling").scrollTop();

                    if (sectionTop <= scrollTop + 10) { // Adjust threshold if needed
                        var id = $(this).attr("id");

                        // Update active tab based on visible section
                        $(".list-group-item").removeClass("active");
                        $(".list-group-item[href='#" + id + "']").addClass("active");
                    }
                });
            });
        });

        $(document).ready(function () {

            var options = {
                beforeSubmit: showRequest, // pre-submit callback
                success: showResponse // post-submit callback
            };

            $('#formCompany').ajaxForm(options);
            $('#formUniquePrefix').ajaxForm(options);
            $('#formEmail').ajaxForm(options);
            $('#formIpRestriction').ajaxForm(options);
            $('#formEmailNotification').ajaxForm(options);
            $('#formUserEmail').ajaxForm(options);
            $('#purchase-form').ajaxForm(options);
            $('#quotation-form').ajaxForm(options);
            $('#salesOrder-form').ajaxForm(options);
            $('#formPaymentTerms').ajaxForm(options);
            $('#formTermsCondition').ajaxForm(options);
            $('#formInvoice').ajaxForm(options);
            $('#formSendEmailDetail').ajaxForm(options);
        });

        function showRequest(formData, jqForm, options) {
            var queryString = $.param(formData);

            $(".save-btn").html("Saving...");
            $(".save-btn").prop("disabled", true);

            return true;
        }

        function showResponse(resultData, statusText, xhr, $form) {


            if (resultData['status'] == 1) {
                toastr["success"](resultData['msg']);
                $(".save-btn").html("Save");
                $(".save-btn").prop("disabled", false);

                window.location.href = RedirectRout;

            } else if (resultData['status'] == 0) {

                if (typeof resultData['data'] !== "undefined") {

                    var size = Object.keys(resultData['data']).length;
                    if (size > 0) {

                        for (var [key, value] of Object.entries(resultData['data'])) {

                            toastr["error"](value);
                        }

                    }

                } else {
                    toastr["error"](resultData['msg']);
                }

                $(".save-btn").html("Save");
                $(".save-btn").prop("disabled", false);


            }

        }

        document.getElementById('purchase-color-picker').addEventListener('input', function () {
            const selectedColor = this.value;
            const elements = document.querySelectorAll(
                '.purchase-header, .tblShipAddress th, .tblDeliverAddress th, .table-bordered th');

            elements.forEach(element => {
                element.style.backgroundColor = selectedColor;
            });
        });
        document.getElementById('purchase-text-color-picker').addEventListener('input', function () {
            const selectedColor = this.value;
            const elements = document.querySelectorAll(
                '.purchase-header, .purchase-header h4, .purchase-header h3, .tblShipAddress th, .tblDeliverAddress th, .table-bordered th'
            );

            elements.forEach(element => {
                element.style.color = selectedColor;
            });

        });

        document.getElementById('quotation-color-picker').addEventListener('input', function () {
            const selectedColor = this.value;
            const elements = document.querySelectorAll('.quotation-header, .add-border.quotation-summary thead tr');

            elements.forEach(element => {
                element.style.backgroundColor = selectedColor;
            });
            const borderElements = document.querySelectorAll('table.quotation-summary tr');
            borderElements.forEach(element => {
                element.style.borderColor = selectedColor;
            });
        });

        document.getElementById('sales-order-color-picker').addEventListener('input', function () {
            const selectedColor = this.value;
            const elements = document.querySelectorAll(
                '.sales-order-header, .add-border.sales-order-summary thead tr');

            elements.forEach(element => {
                element.style.backgroundColor = selectedColor;
            });
            const borderElements = document.querySelectorAll('table.sales-order-summary tr');
            borderElements.forEach(element => {
                element.style.borderColor = selectedColor;
            });
        });
        document.getElementById('sales-order-text-color-picker').addEventListener('input', function () {
            const selectedColor = this.value;
            const elements = document.querySelectorAll(
                '.sales-order-header, .sales-order-header h4, .sales-order-header table td p, .sales-order-summary th'
            );

            elements.forEach(element => {
                element.style.color = selectedColor;
            });

        });
    </script>

    @include('setting.comman.script')
@endsection