@extends('layout.form-layout')

@section('form-name','Settings')

@section('style-area')

<style>
    form .error {
        color: #ff0000;
    }
</style>

@endsection

@section('form-area')

@include('includes.links')


<div  class="p-5 setting-change-box" style="width: 40%;">

    <div class="tab-content">

        <div class="tab-content__pane active">
            <!-- <div class="preloader" id="latest-tasks-new"></div> -->
            <!-- <div class="preloader-remove" id="latest-tasks-new">
                <div class="loader"></div>
            </div> -->
            <!-- <div class="" id= "#loadingDiv"> -->
            <div class="app" id="loadingDiv"><div class="loader_new"></div></div>
            <form method="post", id="frmdt" action="{{route('changelayout')}}">
                @csrf
                <div class="flex items-center">
                    <div class="border-l-2 border-theme-1 dark:border-theme-1 pl-4">
                        <p class="font-medium">Menu Layout</p>
                    </div>
                    @php
                    $user = Auth::user();
                    @endphp

                    <select name="layout_name" data-search="true" class="tail-select w-full menu-select ml-auto">
                        <option class="selected-menu" value="{{$user->layout}}">{{$user->layout}}</option>
                        @if($user->layout!='side-menu')
                            <option value="side-menu">Side Menu</option>
                        @endif

                        @if($user->layout!='simple-menu')
                            <option value="simple-menu">Simple Menu</option>
                        @endif

                        @if($user->layout!='top-menu')
                            <option value="top-menu">Top Menu</option>
                        @endif
                    </select>
                </div>

                <div class="flex items-center mt-5">
                    <div class="border-l-2 border-theme-1 dark:border-theme-1 pl-4">
                        <a href="" class="font-medium">Dark Mode</a>
                    </div>


                    @if($user->theme=="dark")
                    <input class="input input--switch ml-auto border" name="theme_color" type="checkbox" checked>
                    @elseif($user->theme=="light")
                    <input class="input input--switch ml-auto border" name="theme_color" type="checkbox">
                    @endif
                </div>

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








<!-- END: Latest Tasks -->

@endsection


@section('script-area')


<script>

    $(document).ready(function(){
        $('#save').attr('hidden',false);
        $('#cancel').attr('hidden',false);
    });


    $('#save').click(function() {
        $('#latest-tasks-new').removeClass("preloader-remove");
        $('#latest-tasks-new').addClass("preloader");
        $('#frmdt').submit();
    });

    $(window).on('load', function() {
        setTimeout(removeLoader, 2000); //wait for page load PLUS two seconds.
    });


    // $('.app').append('<div style="" id="loadingDiv"><div class="loader_new"></div></div>');
   
    // function removeLoader(){
    // $( "#loadingDiv" ).fadeOut(500, function() {
    // fadeOut complete. Remove the loading div
    //   $( "#loadingDiv" ).remove(); //makes page more lightweight  
    //   });  
    // }
</script>


@endsection