@extends('layouts.backend')
@section('extraCss')  
 <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
 <style>
table.TableAddDelete{
    width: 100%;
    border-collapse: collapse;
    margin-top:20px;
}
table.TableAddDelete th, table.TableAddDelete td{
    border: 1px solid #cdcdcd;
    padding: 7px;
}
</style>
@endsection
@php 
 $status = [1 => 'Active',0 =>'Deactive'];
@endphp
@section('mainContentArea')

<div class="card card-default pt-4">
    <div class="card-header">
        <h4>
            Edit Category
            <a href="{{ route('catlist') }}" class="btn btn-info float-right btn-sm"> Back</a>
        </h4>
    </div>

    @if (count($errors) > 0)
   <div class = "alert alert-danger">
      <ul>
         @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
         @endforeach
      </ul>
   </div>
   @endif
    <div class="card-body">  
        <form role="form" method="post" enctype="multipart/form-data" action="{{ route('category-save') }}">
            @csrf
            <div id="admintabs">
                <div class="c_tabs">
                <ul>
                    <li><a href="#tabs1" class="active">Category Details</a></li>
                    <li><a href="#tabs2">Search Engine Optimization</a></li>
                </ul>
                </div>
                <div id="tabs1">
                    <div class="row">
                        <div class="col-md-12"><h5>Basic Details</h5><hr class="mt-2"/></div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Category Name*</label>
                                <input type="text" name="name" class="form-control" placeholder="Category name" value="" required />
                            </div>
                        </div>

                        @php /*<div class="col-md-6">
                            <div class="form-group">
                                <label>Category Slug*</label>
                                <input type="text" name="slug" class="form-control" placeholder="Category slug" readonly value="" />
                            </div>
                        </div>*/ @endphp
                        
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Shortcode*</label>
                                <input type="text" name="shortcode" class="form-control" placeholder="Category shortcode" value="" required />
                            </div>
                        </div>

                        <div class="col-sm-6">
                            <div class="form-group">
                                <label>Select parent category*</label>                                    
                                <select name="parent_id" id="parent_id" class="form-control select2">
                                    <option value="0">Select Parent Section</option> 
                                        @php $dash=''; $category['parent_id']=''; @endphp
                                    @foreach($sections as $section)                                       
                                    <option value="{{ $section->id }}" {{ $section->id == $category['parent_id'] ? 'selected' : '' }}> {{ $section->name }}</option>
                                        @foreach ($section->childrenCategories as $childCategory)                                        
                                        @include('backend.sections.child_category', ['child_category' => $childCategory])
                                        @endforeach
                                    @endforeach
                                </select>
                            </div>
                        </div>

                            <div class="col-md-6 form-group">
                            <label for="status">Enable / Disable Category*</label>
                            <select name="status" id="status" class="form-control select2" required>
                                <option value="">Select Option</option>
                                @foreach($status as $key => $statusv)
                                <option value="{{ $key }}">{{ $statusv }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-12"><h5 class="mt-4"> Images</h5><hr class="mt-2"/></div>
                        <div class="col-md-6 form-group">
                            <label for="code"> Banner Image </label>
                            <input type="file" name="banner" id="banner" class="form-control" onchange="previewBanner(this);" accept="image/*">
                        </div> 

                        <div class="col-md-6 form-group">
                            <label for="code"> Photo </label>
                            <input type="file" name="photoFile" id="photo" class="form-control" onchange="previewPhoto(this);" accept="image/*">
                        </div> 
                        
                        <div class="col-md-6 form-group">
                            <label for="code"> Desktop Banner </label>
                            <input type="file" name="d_banner" id="d_banner" class="form-control" onchange="previewBanner(this);" accept="image/*">
                        </div> 
                        
                        <div class="col-md-6 form-group">
                            <label for="code"> Mobile Banner </label>
                            <input type="file" name="m_banner" id="m_banner" class="form-control" onchange="previewBanner(this);" accept="image/*">
                        </div> 

                        <div class="col-md-6 form-group" id="preview_banner" style='display:none;'>
                            <img id="preview_banner_img" src="" alt="Placeholder" width = '100px' height='150px'>
                        </div>

                        <div class="col-md-6 form-group" id="preview_photo" style='display:none;'>
                            <img id="preview_photo_img" src="" alt="Placeholder" width = '100px' height='150px'>
                        </div>
                    </div>
                </div>
                <div id="tabs2">
                    <div class="row">
                        <div class="col-md-12"><h5>Other Details</h5><hr class="mt-2"/></div>

                        <div class="col-md-6 form-group">
                            <label for="title">Title </label>
                            <textarea name="title" id="title" class="form-control"></textarea>
                        </div>   

                        <div class="col-md-6 form-group">
                            <label for="description">Description </label>                
                            <textarea name="description" id="description" class="form-control"></textarea>
                        </div>

                        <div class="col-md-6 form-group">
                            <label for="keyword">Keyword </label>                
                            <textarea name="keyword" id="keyword" class="form-control"></textarea>
                        </div>

                        <div class="col-md-6 form-group">
                            <label for="content">Content </label>                
                            <textarea name="content" id="content" class="form-control"></textarea>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-md-12 text-center" style="margin:20px;">
            <button type="submit" class="btn btn-success" ><i class="fa fas fa-save"></i> Submit </button>
            <a href="{{ route('catlist') }}" class="btn btn-danger">Cancel</a>
        </div>
     </form>
    </div>
</div>
@endsection

@section('extraJs')
<script>
$(document).ready(function() {
    //$("#admintabs").tabs();
});
/*var value = {{$subsection->parent_id}};
$("select option[value="+value+"]").attr("selected","selected");

function previewBanner(input){
       $("#preview_banner").css("display", "block");
        var file = $("input[type=file]").get(0).files[0];
 
        if(file){
            var reader = new FileReader();
 
            reader.onload = function(){
                $("#preview_banner_img").attr("src", reader.result);
            }
 
            reader.readAsDataURL(file);
        }
    }

    function previewPhoto(input){
       $("#preview_photo").css("display", "block");
        var file = $("input[type=file]").get(0).files[0];
 
        if(file){
            var reader = new FileReader();
 
            reader.onload = function(){
                $("#preview_photo_img").attr("src", reader.result);
            }
 
            reader.readAsDataURL(file);
        }
    }*/
</script>
@endsection