@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">
    <div class="card-header">
        <h4>
            Edit Sub-Section
            <a href="{{ route('subsections-list') }}" 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('subsections-update') }}">
                    @csrf
                    <div class="box-body">
                        <div class="row">
                            <div class="col-md-12"><h5>Basic Details</h5><hr/></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="{{$subsection->name}}" required />
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Category Slug*</label>
                                    <input type="hidden" name = 'catid' value="{{$subsection->id}}">
                                    <input type="text" name="slug" class="form-control" placeholder="Category slug" value="{{$subsection->alias}}" 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">
                                        <option value="">Select Parent Section</option> 
                                         @php $dash=''; @endphp
                                        @foreach($sections as $section)                                       
                                        <option value="{{ $section->id }}"> {{ $section->name }}</option>
                                         @foreach ($section->childrenCategories as $childCategory)                                        
                                            @include('backend.subsections.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 }}" {{ $subsection->is_active == $key ? 'selected' : '' }}>{{ $statusv }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-12"><h5> Images</h5><hr/></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/*">
                                <img src="{{ asset('uploads/sections/'.$subsection->banner) }}" alt="" title="" width = '100px' height='150px'>
                            </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/*">
                                <img src="{{ asset('uploads/sections/'.$subsection->photo) }}" alt="" title="" width = '100px' height='150px'>
                            </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 class="col-md-12"><h5>Other Details</h5><hr/></div>

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

                            <div class="col-md-6 form-group">
                                <label for="description">Description </label>                
                                <textarea name="description" id="description" class="form-control" required>
                                    {{$subsection->desc}}
                                </textarea>
                            </div>

                            <div class="col-md-6 form-group">
                                <label for="keyword">Keyword </label>                
                                <textarea name="keyword" id="keyword" class="form-control" required>
                                    {{$subsection->keywords}}
                                </textarea>
                            </div>

                            <div class="col-md-6 form-group">
                                <label for="content">Content </label>                
                                <textarea name="content" id="content" class="form-control" required>
                                    {{$subsection->content}}
                                </textarea>
                            </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('subsections-list') }}" class="btn btn-danger">Cancel</a>
                </div>
     </form>
    </div>
</div>
@endsection

@section('extraJs')
<script>
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