@extends('admin.layouts.app')
@section('page_content')
<div class="content-wrapper">
    <!-- Page Title Header Starts-->
    <div class="row page-title-header">
        <div class="col-12">
            <div class="page-header">
              <h4 class="page-title">Add New Category</h4>
                <ul>
                    <li><a href="manage-category-main.html" class="filled_green_btn">Back</a></li> 
                </ul>    
            </div>
        </div>      
    </div>
    <!-- Page Title Header Ends-->

              
    <div class="row">
        <div class="col-md-12 grid-margin">
            <div class="row flex-grow">
                <div class="col-12">
                    <div class="card">
                        <form class="forms-sample" method="post" enctype="multipart/form-data" action="{{route('admin.cms.category-template')}}">   @csrf
                            <div class="card-body">
                                <div class="card p-4 bg-light" >
                                    <div class="custom-inline-checkbox mb-3">
                                        <h3 class="mb-1"><b>Choose Template</b></h3>
                                        <div class="form-radio form-inline">
                                            <label class="form-check-label lead">

                                                <input type="radio" class="form-check-input" name="template_id" id="rdio1" value="1"> Led Strip Light - Format <i class="input-helper"></i>

                                            </label>
                                        </div>                          
                                        <div class="form-radio form-inline lead">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input"  name="template_id" id="rdio2" value="2"> Led Accesories - Format <i class="input-helper"></i>
                                            </label>
                                        </div>
                                        <div class="form-radio form-inline lead">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input"  name="template_id" id="rdio3" value="3"> Led Downlight - Format <i class="input-helper"></i>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="custom-inline-checkbox" showIfIdChecked="rdio1">
                                        <h6 class="mb-1"><b>Choose Filters</b></h6>

                                        @if($template1)
                                            @foreach($template1 as $templatefilter1)
                                                <div class="form-check form-check-flat form-inline">
                                                    <label class="form-check-label">
                                                        <input type="checkbox" name="template_filters[]" value="{{$templatefilter1->id}}" class="form-check-input"> {{$templatefilter1->title}} <i class="input-helper"></i>
                                                    </label>
                                                </div>
                                            @endforeach
                                        @endif

                                    </div>
                                    <div class="custom-inline-checkbox" showIfIdChecked="rdio2">
                                        <h6 class="mb-1"><b>Choose Filters</b></h6>

                                        @if($template2)
                                            @foreach($template2 as $templatefilter2)
                                            <div class="form-check form-check-flat form-inline">
                                                <label class="form-check-label">
                                                    <input type="checkbox" name="template_filters[]" value="{{$templatefilter2->id}}" class="form-check-input" > {{$templatefilter2->title}} <i class="input-helper"></i>
                                                </label>
                                            </div>
                                            @endforeach
                                        @endif

                                    </div>
                                    <div class="custom-inline-checkbox" showIfIdChecked="rdio3">
                                        <h6 class="mb-1"><b>Choose Filters</b></h6>

                                        @if($template3)
                                            @foreach($template3 as $templatefilter3)
                                            <div class="form-check form-check-flat form-inline">
                                                <label class="form-check-label">
                                                    <input type="checkbox" name="template_filters[]" value="{{$templatefilter3->id}}" class="form-check-input" > {{$templatefilter3->title}} <i class="input-helper"></i>
                                                </label>
                                            </div>  
                                            @endforeach
                                        @endif                        
                                    </div>
                                </div>
                                <!-- <h4 class="card-title">Default form</h4> -->
                                
                                <div class="mt-4"> 
                                    <h6 class="mb-4"><b>Category Details</b></h6>
                                    <div class="form-row">
                                        <div class="form-group col-md-6">
                                            <label for="name">Category Name <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" id="name" required="" name="name" placeholder="Name" value="">
                                        </div>

                                        <div class="form-group col-md-6">
                                            <label for="ar_title">Category Name (Arabic) </label>
                                            <input type="text" class="form-control" id="ar_name" name="ar_name" placeholder="Name in Arabic" value="">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="aescription">Description</label>
                                        <textarea class="form-control" id="description" name="description" placeholder="Description"></textarea>
                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="ar_description">Description (Arabic) </label>
                                            <textarea class="form-control" id="ar_description" name="ar_description" placeholder="Description in Arabic">   </textarea>
                                    </div>

                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <label for="icon_image">Thumb Image </label>
                                                <div class="custom-file">
                                                    <input type="file" name="icon_image" class="custom-file-input form-control" id="icon_image">
                                                    <label class="custom-file-label" for="icon_image">Choose file</label>
                                                </div>
                                            </div>                                        
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="form-group cust_dark_bg p-3 my-4">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <label>Choose Icon<small>(Optional)</small>
                                            </label>
                                            <div class="icon_list_box px-0"> 
                                                @foreach($slider_icons as $k => $si)

                                                    <div class="icon_radio icon_radio_m1 icon-lg-radio">
                                                      <input type="radio" id="slider_icon{{$k}}" name="slider_icon" value="{{$si->id}}" >
                                                      <label class="slider_icon_label_cls " for="slider_icon{{$k}}">
                                                        <img class="slider_icon_cls" style="filter: brightness(0);" src="{{asset('uploads/products/categories')}}/{{$si->icon}}" alt="color-temperature" />
                                                      </label>
                                                    </div>
                                                @endforeach           
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <button type="submit" class="btn btn-green btn-rounded mr-2">Add Category </button>
                                <!-- <button class="btn btn-light btn-rounded">Cancel</button> -->
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>   
              
</div>              
<!-- content-wrapper ends -->
<script>  
    function executeAutomaticVisibility(name) {
      $("[name=" + name + "]:checked").each(function() {
        $("[showIfIdChecked=" + this.id + "]").show();
      });
      $("[name=" + name + "]:not(:checked)").each(function() {
        $("[showIfIdChecked=" + this.id + "]").hide();
      });
    }

    $(document).ready(function() {
      triggers = $("[showIfIdChecked]")
        .map(function() {
          return $("#" + $(this).attr("showIfIdChecked")).get()
        })
      $.unique(triggers);
      triggers.each(function() {
        executeAutomaticVisibility(this.name);
        $(this).change(function() {
          executeAutomaticVisibility(this.name);
        });
      });
    });


</script>  
@endsection