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

@extends('backend.ayaan.master')

@push('title') Add Categories @endpush
@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') Edit Topbar @endslot
    @endcomponent

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

                    <h4 class="card-title">Edit News</h4>
                    <p class="card-title-desc">Fill all information below</p>

                     <form action="" method="POST" enctype="multipart/form-data">
                         @csrf
                        <div class="row">
                            
                            <div class="col-sm-12">
                                <div class="mb-3">
                                    <div class="0 box">
                                     
                                     
                                     <div class="1 box">
                                    <label for="metadescription">{{translate('File')}}</label>
                                     <input id="metatitle" name="title" type="file" class="form-control" >
                                     </div>
                                </div>
                            </div>
                            
                            
                           
                        
                            <div class="col-sm-12">
                                <div class="mb-3">
                                    <label for="metadescription">{{translate('Status')}}</label>
                                     <select name="status" class="form-control">
                                         <option value="0">Inactive</option>
                                         <option value="1" selected>Active</option>
                                     </select>
                                </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>
     <script src="{{ asset('assets/libs/tinymce/tinymce.min.js') }}"></script>
    
    <!-- dropzone plugin -->
    <script src="{{ asset('/assets/libs/dropzone/dropzone.min.js') }}"></script>
    <script src="{{ asset('assets/js/pages/form-editor.init.js') }}"></script>
    <!-- init js -->
    <script src="{{ asset('/assets/js/pages/ecommerce-select2.init.js') }}"></script>
<script>


$(document).ready(function(){
    $("select").change(function(){
        $(this).find("option:selected").each(function(){
            var optionValue = $(this).attr("value");
            if(optionValue){
                $(".box").not("." + optionValue).hide();
                $("." + optionValue).show();
            } else{
                $(".box").hide();
            }
        });
    }).change();
});




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