go-zap/resources/views/admin/assets/create.blade.php

@extends('layouts.master')

@section('title') @lang('translation.Add_Asset') @endsection

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

<!-- dropzone css -->
<link href="{{ URL::asset('/assets/libs/dropzone/dropzone.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('content')

@component('components.breadcrumb')
@slot('li_1') Ecommerce @endslot
@slot('title') Add Asset @endslot
@endcomponent

<div class="row">
    <div class="col-12">
        
    <form  class="needs-validation" id="asset_form" action="{{ route('assets.store') }}" method="post" enctype="multipart/form-data" novalidate>
    @csrf
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Basic Information</h4>
                <p class="card-title-desc">Fill all information below</p>
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="mb-3">
                                <label for="name">Asset Name</label>
                                <input id="name" name="name" type="text" class="form-control" placeholder="Asset Name" required>
                                <div  id="name_errors"  class="invalid-feedback">
                                    Required
                                </div>
                            </div>
                            <div class="mb-3">
                                <label for="manufacturer_name">Manufacturer Name</label>
                                <input id="manufacturer_name" name="manufacturer_name" type="text" class="form-control" placeholder="Manufacturer Name">
                            </div>
                            <div class="mb-3">
                                <label for="brand">Manufacturer Brand</label>
                                <input id="brand" name="brand" type="text" class="form-control" placeholder="Manufacturer Brand">
                            </div>
                            <div class="mb-3">
                                <label for="model_name">Model Name</label>
                                <input id="model_name" name="model_name" type="text" class="form-control" placeholder="Model Name">
                            </div>
                            <div class="mb-3">
                                <label for="model_number">Model Number</label>
                                <input id="model_number" name="model_number" type="text" class="form-control" placeholder="Model Number">
                            </div>
                        </div>

                        <div class="col-sm-6">
                            <div class="mb-3">
                                <label class="control-label">Category</label>
                                <select class="form-control select2">
                                    <option>Select</option>
                                    <option value="FA">Fashion</option>
                                    <option value="EL">Electronic</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="control-label">Features</label>
                                <select class="select2 form-control select2-multiple" multiple="multiple" data-placeholder="Choose ...">
                                    <option value="WI">Wireless</option>
                                    <option value="BE">Battery life</option>
                                    <option value="BA">Bass</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="cost">Cost</label>
                                <input id="cost" name="cost" type="text" class="form-control" placeholder="Price" required>
                                <div id="cost_errors" class="invalid-feedback">
                                </div>
                            </div>
                            <div class="mb-3">
                                <label for="duration">Duration</label>
                                <input id="duration" name="duration" type="text" class="form-control" placeholder="Duration">
                            </div>
                        </div>
                    </div>

            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <h4 class="card-title mb-3">Asset Description</h4>

                <textarea class="form-control" id="elm1" rows="5" placeholder="Asset Description"></textarea>
            </div>

        </div> <!-- end card-->
        <div class="card">
            <div class="card-body">
                <h4 class="card-title mb-3">Asset Images</h4>
                    <div action="/" method="post" class="dropzone">
                        <div class="fallback">
                            <input name="file" type="file" multiple />
                        </div>

                        <div class="dz-message needsclick">
                            <div class="mb-3">
                                <i class="display-4 text-muted bx bxs-cloud-upload"></i>
                            </div>

                            <h4>Drop files here or click to upload.</h4>
                        </div>
                    </div>
            </div>

        </div> <!-- end card-->

        <div class="card">
            <div class="card-body">

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

                <form>
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="mb-3">
                                <label for="metatitle">Meta title</label>
                                <input id="metatitle" name="assetname" type="text" class="form-control" placeholder="Metatitle">
                            </div>
                            <div class="mb-3">
                                <label for="metakeywords">Meta Keywords</label>
                                <input id="metakeywords" name="manufacturername" type="text" class="form-control" placeholder="Meta Keywords">
                            </div>
                        </div>

                        <div class="col-sm-6">
                            <div class="mb-3">
                                <label for="metadescription">Meta Description</label>
                                <textarea class="form-control" id="metadescription" rows="5" placeholder="Meta Description"></textarea>
                            </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('assets.index') }}" class="btn btn-secondary waves-effect waves-light">Cancel</a>
                    </div>
                </form>

            </div>
        </div>
    </form>
    </div>
</div>
<!-- end row -->

@endsection
@section('script')
    <!-- select 2 plugin -->
    <script src="{{ URL::asset('/assets/libs/select2/select2.min.js') }}"></script>

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

    <!-- init js -->
    <script src="{{ URL::asset('/assets/js/pages/ecommerce-select2.init.js') }}"></script>
    <!--tinymce js-->
    <script src="{{ URL::asset('/assets/libs/tinymce/tinymce.min.js') }}"></script>

    <!-- init js -->
    <script src="{{ URL::asset('/assets/js/pages/form-editor.init.js') }}"></script>
    <script src="{{ URL::asset('/assets/libs/parsleyjs/parsleyjs.min.js') }}"></script>

    <script src="{{ URL::asset('/assets/js/pages/form-validation.init.js') }}"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        
        $( "#asset_form" ).submit(function( event ) {
            event.preventDefault();
            actionUrl = "{{ route('asset.validate') }}";
            form = $( "#asset_form" );
            $.ajax({
                type: "POST",
                url: actionUrl,
                data: form.serialize(), // serializes the form's elements.
                success: function(data){ 
                    $('.needs-validation').addClass('validated');
                    form.unbind().submit(); 
                },
                error: function (data) {
                    console.log('An error occurred.');
                    response = data.responseJSON;
                    if(response.status == false){
                        $.each(response.errors, function(i, item) {
                            $('#'+i+'_errors').html(response.errors[i]);
                        });
                    }
                },
            });
        });
    });
    </script>
@endsection