<?php $__env->startSection('title', __('locale.menu.Theme Customizer')); ?>

<?php $__env->startSection('content'); ?>
    <!-- Basic Vertical form layout section start -->
    <section id="basic-vertical-layouts">
        <div class="row">

            
            <div class="customizer d-none d-md-block">

                <a class="customizer-toggle d-flex align-items-center justify-content-center" href="javascript:void(0);">
                    <i class="spinner" data-feather="settings"></i>
                </a>

                <div class="customizer-content">
                    <!-- Customizer header -->
                    <div class="customizer-header px-2 pt-1 pb-0 position-relative">
                        <h4 class="mb-0">Theme Customizer</h4>
                        <p class="m-0">Customize & Preview in Real Time</p>

                        <a class="customizer-close" href="javascript:void(0);"><i data-feather="x"></i></a>
                    </div>

                    <hr/>

                    <!-- Styling & Text Direction -->
                    <div class="customizer-styling-direction px-2">
                        <p class="fw-bold">Skin</p>
                        <div class="d-flex">
                            <div class="form-check me-1">
                                <input type="radio" id="skinlight" name="skinradio" class="form-check-input layout-name" checked="" data-layout="">
                                <label class="form-check-label" for="skinlight">Light</label>
                            </div>
                            <div class="form-check me-1">
                                <input type="radio" id="skinbordered" name="skinradio" class="form-check-input layout-name" data-layout="bordered-layout">
                                <label class="form-check-label" for="skinbordered">Bordered</label>
                            </div>
                            <div class="form-check me-1">
                                <input type="radio" id="skindark" name="skinradio" class="form-check-input layout-name" data-layout="dark-layout">
                                <label class="form-check-label" for="skindark">Dark</label>
                            </div>
                            <div class="form-check">
                                <input type="radio" id="skinsemidark" name="skinradio" class="form-check-input layout-name" data-layout="semi-dark-layout">
                                <label class="form-check-label" for="skinsemidark">Semi Dark</label>
                            </div>
                        </div>
                    </div>

                    <hr/>

                    <!-- Menu -->
                    <div class="customizer-menu px-2">
                        <div id="customizer-menu-collapsible" class="d-flex">
                            <p class="fw-bold me-auto m-0">Menu Collapsed</p>
                            <div class="form-check form-check-primary form-switch">
                                <input type="checkbox" class="form-check-input" id="collapse-sidebar-switch">
                                <label class="form-check-label" for="collapse-sidebar-switch"></label>
                            </div>
                        </div>
                    </div>
                    <hr/>

                    <!-- Layout Width -->
                    <div class="customizer-footer px-2">
                        <p class="fw-bold">Layout Width</p>
                        <div class="d-flex">
                            <div class="form-check me-1">
                                <input type="radio" id="layout-width-full" name="layoutWidth" class="form-check-input" checked="">
                                <label class="form-check-label" for="layout-width-full">Full Width</label>
                            </div>
                            <div class="form-check me-1">
                                <input type="radio" id="layout-width-boxed" name="layoutWidth" class="form-check-input">
                                <label class="form-check-label" for="layout-width-boxed">Boxed</label>
                            </div>
                        </div>
                    </div>
                    <hr/>

                    <!-- Navbar -->
                    <div class="customizer-navbar px-2">
                        <div id="customizer-navbar-colors">
                            <p class="fw-bold">Navbar Color</p>
                            <ul class="list-inline unstyled-list">
                                <li class="color-box bg-white border selected" data-navbar-default=""></li>
                                <li class="color-box bg-primary" data-navbar-color="bg-primary"></li>
                                <li class="color-box bg-secondary" data-navbar-color="bg-secondary"></li>
                                <li class="color-box bg-success" data-navbar-color="bg-success"></li>
                                <li class="color-box bg-danger" data-navbar-color="bg-danger"></li>
                                <li class="color-box bg-info" data-navbar-color="bg-info"></li>
                                <li class="color-box bg-warning" data-navbar-color="bg-warning"></li>
                                <li class="color-box bg-dark" data-navbar-color="bg-dark"></li>
                            </ul>
                        </div>

                        <p class="navbar-type-text fw-bold">Navbar Type</p>
                        <div class="d-flex">
                            <div class="form-check me-1">
                                <input type="radio" id="nav-type-floating" name="navType" class="form-check-input" checked="">
                                <label class="form-check-label" for="nav-type-floating">Floating</label>
                            </div>
                            <div class="form-check me-1">
                                <input type="radio" id="nav-type-sticky" name="navType" class="form-check-input">
                                <label class="form-check-label" for="nav-type-sticky">Sticky</label>
                            </div>
                            <div class="form-check me-1">
                                <input type="radio" id="nav-type-static" name="navType" class="form-check-input">
                                <label class="form-check-label" for="nav-type-static">Static</label>
                            </div>
                        </div>
                    </div>
                    <hr/>

                    <!-- Footer -->
                    <div class="customizer-footer px-2">
                        <p class="fw-bold">Footer Type</p>
                        <div class="d-flex">
                            <div class="form-check me-1">
                                <input type="radio" id="footer-type-sticky" name="footerType" class="form-check-input">
                                <label class="form-check-label" for="footer-type-sticky">Sticky</label>
                            </div>
                            <div class="form-check me-1">
                                <input type="radio" id="footer-type-static" name="footerType" class="form-check-input" checked="">
                                <label class="form-check-label" for="footer-type-static">Static</label>
                            </div>
                            <div class="form-check me-1">
                                <input type="radio" id="footer-type-hidden" name="footerType" class="form-check-input">
                                <label class="form-check-label" for="footer-type-hidden">Hidden</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>

        <div class="row match-height">
            <div class="col-md-6 col-12">

                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title"><?php echo e(__('locale.menu.Theme Customizer')); ?></h4>
                    </div>
                    <div class="card-content">
                        <div class="card-body">
                            <form class="form form-vertical" action="<?php echo e(route('admin.theme.customizer')); ?>" method="post">
                                <?php echo csrf_field(); ?>


                                <div class="col-12">
                                    <div class="mb-1">
                                        <label for="mainLayoutType" class="form-label required">Menu Layout</label>
                                        <select class="form-select" id="mainLayoutType" name="mainLayoutType">
                                            <option value="vertical" <?php echo e(env('THEME_LAYOUT_TYPE') == 'vertical' ? 'selected': null); ?>>Vertical</option>
                                            <option value="horizontal" <?php echo e(env('THEME_LAYOUT_TYPE') == 'horizontal' ? 'selected': null); ?>>Horizontal</option>
                                        </select>
                                    </div>
                                    <?php $__errorArgs = ['mainLayoutType'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                    <p><small class="text-danger"><?php echo e($message); ?></small></p>
                                    <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                                </div>


                                <div class="col-12">
                                    <div class="mb-1">
                                        <label for="theme" class="form-label required">Skin</label>
                                        <select class="form-select" id="theme" name="theme">
                                            <option value="light" <?php echo e(config('custom.horizontal.theme') == 'light' ? 'selected': null); ?>>Light</option>
                                            <option value="bordered" <?php echo e(config('custom.horizontal.theme') == 'bordered' ? 'selected': null); ?>>Bordered</option>
                                            <option value="dark" <?php echo e(config('custom.horizontal.theme') == 'dark' ? 'selected': null); ?>>Dark</option>
                                            <option value="semi-dark" <?php echo e(config('custom.horizontal.theme') == 'semi-dark' ? 'selected': null); ?>>Semi Dark</option>
                                        </select>
                                    </div>
                                    <?php $__errorArgs = ['theme'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                    <p><small class="text-danger"><?php echo e($message); ?></small></p>
                                    <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                                </div>


                                <div class="col-12">
                                    <div class="mb-1">
                                        <label for="navbarColor" class="form-label required">Navbar Color</label>
                                        <select class="form-select" id="navbarColor" name="navbarColor">
                                            <option value="bg-primary" <?php echo e(config('custom.horizontal.navbarColor') == 'bg-primary' ? 'selected': null); ?>>Purple</option>
                                            <option value="bg-info" <?php echo e(config('custom.horizontal.navbarColor') == 'bg-info' ? 'selected': null); ?>>Blue</option>
                                            <option value="bg-warning" <?php echo e(config('custom.horizontal.navbarColor') == 'bg-warning' ? 'selected': null); ?>>Orange</option>
                                            <option value="bg-success" <?php echo e(config('custom.horizontal.navbarColor') == 'bg-success' ? 'selected': null); ?>>Green</option>
                                            <option value="bg-danger" <?php echo e(config('custom.horizontal.navbarColor') == 'bg-danger' ? 'selected': null); ?>>Red</option>
                                            <option value="bg-dark" <?php echo e(config('custom.horizontal.navbarColor') == 'bg-dark' ? 'selected': null); ?>>Dark</option>
                                            <option value="bg-white" <?php echo e(config('custom.horizontal.navbarColor') == 'bg-white' ? 'selected': null); ?>>White</option>
                                            <option value="bg-secondary" <?php echo e(config('custom.horizontal.navbarColor') == 'bg-secondary' ? 'selected': null); ?>>Gray</option>
                                        </select>
                                    </div>
                                    <?php $__errorArgs = ['navbarColor'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                    <p><small class="text-danger"><?php echo e($message); ?></small></p>
                                    <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                                </div>


                                <div class="col-12">
                                    <div class="mb-1">
                                        <label for="navbarType" class="form-label required">Navbar Type</label>
                                        <select class="form-select" id="navbarType" name="navbarType">
                                            <option value="floating" <?php echo e(config('custom.horizontal.horizontalMenuType') == 'floating' ? 'selected': null); ?>>Floating</option>
                                            <option value="static" <?php echo e(config('custom.horizontal.horizontalMenuType') == 'static' ? 'selected': null); ?>>Static</option>
                                            <option value="sticky" <?php echo e(config('custom.horizontal.horizontalMenuType') == 'sticky' ? 'selected': null); ?>>Sticky</option>
                                        </select>
                                    </div>
                                    <?php $__errorArgs = ['navbarType'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                    <p><small class="text-danger"><?php echo e($message); ?></small></p>
                                    <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                                </div>

                                <div class="col-12">
                                    <div class="mb-1">
                                        <label for="footerType" class="form-label required">Footer Type</label>
                                        <select class="form-select" id="footerType" name="footerType">
                                            <option value="static" <?php echo e(config('custom.horizontal.footerType') == 'static' ? 'selected': null); ?>>Static</option>
                                            <option value="sticky" <?php echo e(config('custom.horizontal.footerType') == 'sticky' ? 'selected': null); ?>>Sticky</option>
                                            <option value="hidden" <?php echo e(config('custom.horizontal.footerType') == 'hidden' ? 'selected': null); ?>>Hidden</option>
                                        </select>
                                    </div>
                                    <?php $__errorArgs = ['footerType'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                    <p><small class="text-danger"><?php echo e($message); ?></small></p>
                                    <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                                </div>

                                <div class="col-12">
                                    <div class="mb-1">
                                        <label for="layoutWidth" class="form-label required">Layout Width</label>
                                        <select class="form-select" id="layoutWidth" name="layoutWidth">
                                            <option value="full" <?php echo e(config('custom.horizontal.layoutWidth') == 'full' ? 'selected': null); ?>>Full Width</option>
                                            <option value="boxed" <?php echo e(config('custom.horizontal.layoutWidth') == 'boxed' ? 'selected': null); ?>>Boxed</option>
                                        </select>
                                    </div>
                                    <?php $__errorArgs = ['layoutWidth'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                    <p><small class="text-danger"><?php echo e($message); ?></small></p>
                                    <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                                </div>


                                <div class="col-12">
                                    <div class="mb-1">
                                        <label for="sidebarCollapsed" class="form-check-label">Menu Collapsed</label>
                                        <div class="form-switch me-3 me-lg-5 mt-1">
                                            <input type="checkbox" class="form-check-input" id="sidebarCollapsed" <?php if(config('custom.horizontal.sidebarCollapsed')): ?> checked <?php endif; ?> value="true" name="sidebarCollapsed">
                                        </div>
                                        <p><small class="text-danger">Warning:this option only applies to the vertical layout</small></p>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <div class="mb-1">
                                        <label for="pageHeader" class="form-check-label">Show Breadcrumbs</label>
                                        <div class="form-switch me-3 me-lg-5 mt-1">
                                            <input type="checkbox" class="form-check-input" id="pageHeader" <?php if(config('custom.horizontal.pageHeader') == true): ?> checked <?php endif; ?>  value="true" name="pageHeader">
                                        </div>
                                    </div>
                                </div>


                                <div class="col-12 mt-2">
                                    <button type="submit" class="btn btn-primary mb-1">
                                        <i data-feather="save"></i> <?php echo e(__('locale.buttons.save')); ?>

                                    </button>
                                </div>

                            </form>
                        </div>

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


        </div>
    </section>
    <!-- // Basic Vertical form layout section end -->


<?php $__env->stopSection(); ?>


<?php $__env->startSection('page-script'); ?>

    <script src="<?php echo e(asset(mix('js/scripts/customizer.js'))); ?>"></script>

    <script>

        let showCustom = $('.show-custom'),
            NavbarColor = $('#navbarColor'),
            firstInvalid = $('form').find('.is-invalid').eq(0);

        if (firstInvalid.length) {
            $('body, html').stop(true, true).animate({
                'scrollTop': firstInvalid.offset().top - 200 + 'px'
            }, 200);
        }


        if (NavbarColor.val() === 'custom') {
            showCustom.show();
        } else {
            showCustom.hide();
        }

        NavbarColor.on('change', function () {
            if (NavbarColor.val() === 'custom') {
                showCustom.show();
            } else {
                showCustom.hide();
            }

        });

    </script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts/contentLayoutMaster', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/bouloter/sms/resources/views/admin/ThemeCustomizer/index.blade.php ENDPATH**/ ?>