@extends('layouts.app')
@section('titlePage', 'Profile')
@section('content')
    @php
        if(is_client()){
           $userCurrent = user();
        }elseif(is_staff()){
            $userCurrent = user()->clientMng;
        }
    @endphp
    <div class="page-wrapper">
        <!-- [ breadcrumb ] start -->
        <div class="row">
            <div class="col-xl-12">
                @if(session()->has('message.level'))
                    <div class="mt-2 alert alert-{{session('message.level')}} alert-dismissible" role="alert">
                        <button type="button" class="close" data-dismiss="alert">&times;</button>
                        {!! session('message.content') !!}
                    </div>
                @endif
                <div class="card">
                    <div class="card-body">
                        <h5>Customizer</h5>
                        <hr>
                        <div class="row">
                            <div class="col-md-6">
                                <h6>Navbar Color</h6>
                                <div class="theme-color navbar-color" data-type="navbar">
                                    <a href="#!" class="{{$userCurrent->navbar_color == 'navbar-blue' ? 'active' : ''}}" data-value="navbar-blue"><span></span><span></span></a>
                                    <a href="#!" class="{{$userCurrent->navbar_color == 'navbar-red' ? 'active' : ''}}" data-value="navbar-red"><span></span><span></span></a>
                                    <a href="#!" class="{{$userCurrent->navbar_color == 'navbar-purple' ? 'active' : ''}}" data-value="navbar-purple"><span></span><span></span></a>
                                    <a href="#!" class="{{$userCurrent->navbar_color == 'navbar-info' ? 'active' : ''}}" data-value="navbar-info"><span></span><span></span></a>
                                    <a href="#!" class="{{$userCurrent->navbar_color == 'navbar-dark' ? 'active' : ''}}" data-value="navbar-dark"><span></span><span></span></a>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <h6>Header Color</h6>
                                <div class="theme-color header-color" data-type="header">
                                    <a href="#!" class="{{$userCurrent->header_color == 'header-default' ? 'active' : ''}}" data-value="header-default"><span></span><span></span></a>
                                    <a href="#!" class="{{$userCurrent->header_color == 'header-blue' ? 'active' : ''}}" data-value="header-blue"><span></span><span></span></a>
                                    <a href="#!" class="{{$userCurrent->header_color == 'header-red' ? 'active' : ''}}" data-value="header-red"><span></span><span></span></a>
                                    <a href="#!" class="{{$userCurrent->header_color == 'header-purple' ? 'active' : ''}}" data-value="header-purple"><span></span><span></span></a>
                                    <a href="#!" class="{{$userCurrent->header_color == 'header-info' ? 'active' : ''}}" data-value="header-info"><span></span><span></span></a>
                                    <a href="#!" class="{{$userCurrent->header_color == 'header-dark' ? 'active' : ''}}" data-value="header-dark"><span></span><span></span></a>
                                </div>
                                <h6>Brand Color</h6>
                                <div class="theme-color brand-color" data-type="brand">
                                    <a href="#!" class="{{$userCurrent->brand_color == 'brand-default' ? 'active' : ''}}" data-value="brand-default"><span></span><span></span></a>
                                    <a href="#!" class="{{$userCurrent->brand_color == 'brand-blue' ? 'active' : ''}}" data-value="brand-blue"><span></span><span></span></a>
                                    <a href="#!" class="{{$userCurrent->brand_color == 'brand-red' ? 'active' : ''}}" data-value="brand-red"><span></span><span></span></a>
                                    <a href="#!" class="{{$userCurrent->brand_color == 'brand-purple' ? 'active' : ''}}" data-value="brand-purple"><span></span><span></span></a>
                                    <a href="#!" class="{{$userCurrent->brand_color == 'brand-info' ? 'active' : ''}}" data-value="brand-info"><span></span><span></span></a>
                                    <a href="#!" class="{{$userCurrent->brand_color == 'brand-dark' ? 'active' : ''}}" data-value="brand-dark"><span></span><span></span></a>
                                </div>
                                <h6>Menu background [ Gradient ]</h6>
                                <div class="theme-color navbar-gradient-color" data-type="navbar">
                                    <a href="#!" class="{{$userCurrent->navbar_color == 'navbar-default' ? 'active' : ''}}" data-value="navbar-default"><span></span><span></span></a>
                                    <a href="#!" class="{{$userCurrent->navbar_color == 'navbar-gradient-blue' ? 'active' : ''}}" data-value="navbar-gradient-blue"><span></span><span></span></a>
                                    <a href="#!" class="{{$userCurrent->navbar_color == 'navbar-gradient-red' ? 'active' : ''}}" data-value="navbar-gradient-red"><span></span><span></span></a>
                                    <a href="#!" class="{{$userCurrent->navbar_color == 'navbar-gradient-purple' ? 'active' : ''}}" data-value="navbar-gradient-purple"><span></span><span></span></a>
                                    <a href="#!" class="{{$userCurrent->navbar_color == 'navbar-gradient-info' ? 'active' : ''}}" data-value="navbar-gradient-info"><span></span><span></span></a>
                                    <a href="#!" class="{{$userCurrent->navbar_color == 'navbar-gradient-dark' ? 'active' : ''}}" data-value="navbar-gradient-dark"><span></span><span></span></a>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- [ Main Content ] end -->
    </div>
@endsection

@section('script')
    <script>
        $('.theme-color > a').on('click',function (e) {
            e.preventDefault();
            let type = $(this).parent('div.theme-color').data('type');
            return $.ajax({
                type: "POST",
                url: '{{_route('client.account.saveLayout')}}',
                data: {
                    _token : '{{csrf_token()}}',
                    type : type,
                    value : $(this).data('value'),
                },
                success: function(response) {
                     location.reload(); 
                },

                beforeSend: function() {},
                complete: function() {}
            });
        })
    </script>
@endsection