Current File : //home/tradevaly/public_html/resources/views/backend/pages/editpages.blade.php

@extends('backend.ayaan.master')

@section('title') Edit 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="container-fluid">
  <div class="row">
    <div class="col-md-6">
      <div class="card">
        <div class="card-header card-header-icon card-header-info">
         
          <h4 class="card-title">{{translate('EDIT CATEGORY')}}
          </h4>
        </div>
        <div class="card-body">
          <form action="{{route('admin.editpages', $pages->slug)}}" method="POST" enctype="multipart/form-data">@csrf
            <div class="row">
         
           <div class="col-sm-12">
                                <div class="mb-3">
                                    <label for="metadescription">{{translate('Name')}}</label>
                                    <input name="image" type="file" oninput="preview_image(this, '.image_preview_container')" />
                                </div>
                            </div>
            
            
            
             <div class="image_preview_container">@if(!empty($pages->picsize)) <img src="{{asset('storage/pages/'.$pages->image)}}" alt="NO image avialable"> @else <img src="{{asset('assets/backend/img/image_placeholder.jpg')}}" alt="NO image avialable"> @endif </div>
                  
            
            
            <div class="col-sm-12">
                <div class="mb-3">
                    <label for="metadescription">{{translate('Title')}}</label>
                     <input id="metatitle" name="title" type="text" value="{{$pages->title}}" class="form-control" required>
                </div>
            </div>
            
            
             <div class="col-sm-12">
                <div class="mb-3">
                    <label for="metadescription">{{translate('Sub Title')}}</label>
                     <input id="metatitle" name="subtitle" type="text" value="{{$pages->subtitle}}" class="form-control" required>
                </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>
                            <a href="{{route('admin.pages')}}" class="btn btn-secondary waves-effect waves-light">Cancel</a>
                        </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;
}


</script>
@endsection