Current File : //home/tradevaly/new.tradevaly.com.bd/resources/views/backend/pages/category/add.blade.php

@extends('backend.ayaan.master')

@section('title') Add Categories @endsection
@section('css')
    <!-- select2 css -->
    <link href="{{ asset('/assets/libs/select2/select2.min.css') }}" rel="stylesheet" type="text/css" />

    <!-- dropzone css -->
    <link href="{{ asset('/assets/libs/dropzone/dropzone.min.css') }}" rel="stylesheet" type="text/css" />
    <style>
        .image_preview_container {
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 280px));
  justify-content: center;
  padding: 25px;
}
.image_preview_container img {
  width: 100%;
  border: 1px solid #0001;
  box-shadow: 0 2px 15px #0001, 0 2px 8px #0001;
  border-radius: 4px;
  aspect-ratio: 1/1;
  object-fit: cover;
}
    </style>
@endsection
@section('content')

    @component('components.breadcrumb')
        @slot('li_1') Dashboards @endslot
        @slot('title') Add Categories @endslot
    @endcomponent

    <div class="row">
    <div class="col-md-12">
       <div class="card">
                <div class="card-body">

                    <h4 class="card-title">@if($id != 0) {{translate('ADD NEW SUB CATEGORY')}} @else {{translate('ADD NEW CATEGORY')}} @endif</h4>
                    <p class="card-title-desc">Fill all information below</p>

                     <form action="{{route('admin.category.add', $id)}}" method="POST" enctype="multipart/form-data">@csrf
                        <div class="row">
                            @if($id != 0)
                            <div class="col-sm-12">
                                <div class="mb-3">
                                    <label for="metatitle">{{translate('Main Category')}} </label>
                                    <input id="metatitle" name="name" type="text" class="form-control" readonly value="{{\App\Models\Category::where('id', $id)->first()->name}}">
                                </div>
                                
                            </div>
                            @endif
                            <div class="col-sm-12">
                                <div class="mb-3">
                                    <label for="metadescription">{{translate('Sub category Name')}}</label>
                                     <input id="metatitle" name="name" type="text" class="form-control" required>
                                </div>
                            </div>
                            
                            
                            <div class="col-md-6 ">
                                <div class="mb-3">
                                         <div class="fallback">
                                             <label for="files">{{translate('Image')}} </label>
                                    <input name="image" width="100%" type="file" class="form-control" id="files" />
                                </div>
        
                                <div class="dz-message needsclick">
                                    
        
                                    <div class="image_preview_container"></div>
                                </div>
                                       
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="category_banner">{{translate(' Category Banner')}} </label>
                                         <div class="fallback">
                                    <input name="banner" type="file" class="form-control" id="category_banner" />
                                </div>
        
                                <div class="dz-message needsclick">
                                    
        
                                    <div class="image_preview_container"></div>
                                </div>
                                       
                                </div>
                            </div>
                        
                        
                        
                        
                        </div>

                        <div class="d-flex flex-wrap gap-2">
                            <button type="submit" class="btn btn-primary waves-effect waves-light">Save Changes</button>
                            <button type="submit" class="btn btn-secondary waves-effect waves-light">Cancel</button>
                        </div>
                    </form>

                </div>
            </div> 
        
    </div>
  </div>
      
@stop

@section('script')
<script src="{{ asset('/assets/libs/select2/select2.min.js') }}"></script>

    <!-- dropzone plugin -->
    <script src="{{ asset('/assets/libs/dropzone/dropzone.min.js') }}"></script>

    <!-- init js -->
    <script src="{{ asset('/assets/js/pages/ecommerce-select2.init.js') }}"></script>
<script>
function preview_image(F, image_container)
{
    let my_container = document.querySelector(image_container);
    
    let new_container = document.createElement('div');
        new_container.className = 'image_preview_container';

    F = F.files;
    F = Array.from(F);

    F.forEach(file => {
        let my_url = URL.createObjectURL(file);
        
        let my_image = getImage(my_url);
        new_container.append(my_image);
    });

    my_container.replaceWith(new_container);
}

function getImage(url)
{
    let img = document.createElement('img');
        img.src = url;
        img.alt = "Image Not Found";

    return img;
}

 $(document).on('change', '[name=parent_id]', function() {
            var child_id = $(this).val();
            get_child(child_id);
        });
        
        
        function get_child(child_id) {
            $('[name="sub_id"]').html("");
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: "{{ route('ajax.cat')}}",
                type: 'POST',
                data: {
                    sub_id  : child_id
                },
                success: function (response) {
                    var obj = JSON.parse(response);
                    if(obj != '') {
                        $('[name="sub_id"]').html(obj);
                    }
                }
            });
        }
</script>
@endsection