@extends('layouts.app')
@section('title', 'Client')
@section('content') 
<style type="text/css">
	.colorWidth
	{
		width: 50%;
	}
</style>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.3/css/bootstrap-colorpicker.min.css" rel="stylesheet">
<div class="container-fluid mt-4">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header" >
                    <h5 class="mt-0 text-left"> Client </h5>
                </div></br>
                
               <div class="card-body">
                    <section class="card mt-2" id="org_list_view">
                        <div class="d-flex flex-row bd-highlight mb-3">
                        	@if(($cl_theme != null && $cl_theme->theme == 'default') || $cl_theme == null)
                        		<div class="p-2 card m-1 theme_click theme_active" data-id="default" >
                        	@else
					  			<div class="p-2 card m-1 theme_click " data-id="default" >
					  		@endif
					  			<div class="card p-3 " > <img src="{{asset('app-assets/images/theme1.jpg')}}"style="height:40vh;width:40vh;"></div> <center><strong>Default</strong></center>
					  		</div>

					  		@if($cl_theme != null && $cl_theme->theme == 'dark')
                        		<div class="p-2 card m-1 theme_click theme_active" data-id="dark" >
                        	@else
					  			<div class="p-2 card m-1 theme_click " data-id="dark" >
					  		@endif
					  		
					  			<div class="card p-3 " ><img src="{{asset('app-assets/images/theme2.jpg')}}"style="height:40vh;width:40vh;"> </div><center><strong>Theme 1</strong></center>
					  		</div>

					  		@if($cl_theme != null && $cl_theme->theme == 'custom')
                        		<!-- <div class="p-2 card m-1 theme_click theme_active " data-id="custom"  data-bs-toggle="modal" data-bs-target="#customtheme"> -->
                        		<div class="p-2 card m-1 theme_click theme_active " data-id="custom"  >
                        	@else
					  			<!-- <div class="p-2 card m-1 theme_click " data-id="custom"  data-bs-toggle="modal" data-bs-target="#customtheme"> -->
					  			<div class="p-2 card m-1 theme_click " data-id="custom"  >
					  		@endif
					  		
					  			<div class="card p-3 " ><img src="{{asset('app-assets/images/custom.jpg')}}"style="height:40vh;width:40vh;"> </div><center><strong>Custom</strong></center> 
					  		</div>

						</div>
                    </section>
                    <section>
                    	@if(($cl_theme != null && $cl_theme->theme == 'default') || $cl_theme == null)
                    		@php $cls = 'show';@endphp
                    	@else
                    		@php $cls = 'd-none';@endphp
                    	@endif

                    	@if($cl_theme != null && $cl_theme->theme == 'custom')
                    		@php $cls1 = 'show';@endphp
                    	@else
                    		@php $cls1 = 'd-none';@endphp
                    	@endif

                    	<div class="card {{$cls1}}" id="custom_div">
                    		<div class="card-header" >
			                    <h5 class="mt-0 text-left"> Custom Theme </h5>
			                </div></br>
                    		 <form name="change_themefrm" id="change_themefrm">
					      		@csrf
						      <div class="modal-body">
						        	<div class="row">
						        		<div class="col-3">Top menu Color</div>
						        		<div class="col-9">
						        			<input type="hidden" name="theme" value="custom" />
											<input type="color"  class="colorWidth" name="background" id="background" @if($cl_theme != null && $cl_theme->theme == 'custom') value="{{$cl_theme->back_color}}" @endif />
						        		</div>
						        	</div>
						        	<div class="row">
						        		<div class="col-3">Tabs color</div>
						        		<div class="col-9"><input type="color" class="colorWidth"  name="tabcolor" id="tabcolor" @if($cl_theme != null && $cl_theme->theme == 'custom') value="{{$cl_theme->tabcolor}}" @endif /></div>
						        	</div>
						        	<div class="row">
						        		<div class="col-3">Text color</div>
						        		<div class="col-9"><input type="color" class="colorWidth"  name="textcolor" id="textcolor" @if($cl_theme != null && $cl_theme->theme == 'custom') value="{{$cl_theme->text_color}}" @endif /></div>
						        	</div>
						      </div>
						      <div class="modal-footer">
						        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
						        <button type="button" class="btn btn-success" onclick="changeTheme()" >Save changes</button>
						      </div>
					      </form>
                    		
                    	</div>
                    	<div class="text-center {{$cls}}" id="othertheme_div">
                    		
                    		 <form name="change_themefrm1" id="change_themefrm1">
					      		@csrf

					      		<input type="hidden" name="theme" id="othertheme_txt" value="" />
					      			<input type="hidden"  class="colorWidth" name="background" id="background" value="NULL" />
					      			<input type="hidden" class="colorWidth"  name="tabcolor" id="tabcolor" value="NULL" />
					      			<input type="hidden" class="colorWidth"  name="textcolor" id="textcolor" value="NULL" />
						    
						        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
						        <button type="button" class="btn btn-success" onclick="changeTheme1()" >Save changes</button>
					      </form>
                    		
                    	</div>
                    </section>
                  
                    
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Button trigger modal -->


<!-- Modal -->
  <div class="modal fade" id="customtheme" aria-labelledby="add_organization_modalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">

  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h6 class="modal-title" id="exampleModalLabel">Custom Theme</h6>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form name="change_themefrm" id="change_themefrm">
      	@csrf
	      <div class="modal-body">
	        	<div class="row">
	        		<div class="col-3">Top menu Color</div>
	        		<div class="col-9">
	        			<input type="hidden" name="theme" value="custom" />
						<input type="color"  class="colorWidth" name="background" id="background" @if($cl_theme != null && $cl_theme->theme == 'custom') value="{{$cl_theme->back_color}}" @endif />
	        		</div>
	        	</div>
	        	<div class="row">
	        		<div class="col-3">Tabs color</div>
	        		<div class="col-9"><input type="color" class="colorWidth"  name="tabcolor" id="tabcolor" @if($cl_theme != null && $cl_theme->theme == 'custom') value="{{$cl_theme->tabcolor}}" @endif /></div>
	        	</div>
	        	<div class="row">
	        		<div class="col-3">Text color</div>
	        		<div class="col-9"><input type="color" class="colorWidth"  name="textcolor" id="textcolor" @if($cl_theme != null && $cl_theme->theme == 'custom') value="{{$cl_theme->text_color}}" @endif /></div>
	        	</div>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
	        <button type="button" class="btn btn-success" onclick="changeTheme()" >Save changes</button>
	      </div>
      </form>
    </div>
  </div>
</div>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.3/js/bootstrap-colorpicker.min.js"></script>
<script type="text/javascript">
	$(document).ready(function()
	{
		
		let html = document.querySelector("html")
		$(document).on('click','.theme_click',function()
		{

			$(".theme_click").removeClass('theme_active');
			$(this).addClass('theme_active');
			var theme = $(this).data('id');
			console.log(theme);
			html.setAttribute('data-theme',theme) ;

			if(theme == 'custom')
			{
				$("#custom_div").show();
				$("#custom_div").removeClass('d-none');
				$("#othertheme_div").addClass('d-none');


			}
			else
			{
				$("#othertheme_txt").val(theme);
				$("#custom_div").addClass('d-none');
				$("#othertheme_div").removeClass('d-none');
			}
		});

		// alert();
	});
//  $(function () {
// 	$('#color-picker1').colorpicker();
// });
// $(function () {
// 	$('#color-picker2').colorpicker({
// 	format: 'rgba'
// 	});
// });
 	function changeTheme() 
 	{
        if($("#change_themefrm").parsley()) 
        {
            if ($("#change_themefrm").parsley().validate()) {
                event.preventDefault();
                if ($("#change_themefrm").parsley().isValid()) {
                    $.ajax({
                        type: "POST",
                        cache:false,
                        async: false,
                        url: "{{ route('changeTheme') }}",
                        data: new FormData($("#change_themefrm")[0]),
                        processData: false,
                        contentType: false,
                        success: function(response) {
                            new PNotify({
                                title: 'Success',
                                text:  response.msg,
                                type: 'success'
                            });
                            // localStorage.setItem('lastTab', "#docs");
                            setTimeout(function(){  location.reload(); }, 2000);
                        },
                        error:function(response) {
                            var err = "";
                            $.each(response.responseJSON.errors,function(field_name,error){
                                err = err +'<br>' + error;
                            });
                            new PNotify({
                                title: 'Error',
                                text:err,
                                type: 'error',
                                delay: 1000
                            });
                        }
                    });
                }
            }
        }
    }
    function changeTheme1() 
 	{
        if($("#change_themefrm1").parsley()) 
        {
            if ($("#change_themefrm1").parsley().validate()) {
                event.preventDefault();
                if ($("#change_themefrm1").parsley().isValid()) {
                    $.ajax({
                        type: "POST",
                        cache:false,
                        async: false,
                        url: "{{ route('changeTheme') }}",
                        data: new FormData($("#change_themefrm1")[0]),
                        processData: false,
                        contentType: false,
                        success: function(response) {
                            new PNotify({
                                title: 'Success',
                                text:  response.msg,
                                type: 'success'
                            });
                            // localStorage.setItem('lastTab', "#docs");
                            setTimeout(function(){  location.reload(); }, 2000);
                        },
                        error:function(response) {
                            var err = "";
                            $.each(response.responseJSON.errors,function(field_name,error){
                                err = err +'<br>' + error;
                            });
                            new PNotify({
                                title: 'Error',
                                text:err,
                                type: 'error',
                                delay: 1000
                            });
                        }
                    });
                }
            }
        }
    }
</script>
@endsection