@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') <a href="{{ url('/admin/assets') }}" title="Back">Assets</a> @endslot
@slot('title')  Create New 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">Asset Details</h4>
                <p class="card-title-desc">Fill all information below</p>
                <div class="mb-3 row">
                    <label class="col-md-3 col-form-label" for="category_id">Category</label>
                    <div class="col-md-6">
                        <select name="category_id" id="category_id" class="form-select" required>
                            <option value='' >Select</option>
                            @foreach($assetCategoryList as $assetCategory)
                                <option value="{{ $assetCategory->id }}" data-asset-type="{{ $assetCategory->asset_type }}" >{{ $assetCategory->asset_category}}</option>
                            @endforeach 
                        </select>
                        <div  id="category_id_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label class="col-md-3 col-form-label" for="name">Asset/Electric Product</label>
                    <div class="col-md-6">
                        <select name="name" id="name" class="form-select" required>
                            <option value='' >Select</option>
                        </select>
                        <div  id="name_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>   
                <div class="mb-3 row">
                    <label class="col-md-3 col-form-label" for="model_name">Name of the Model</label>
                    <div class="col-md-6">
                        <input id="model_name" name="model_name" type="text" class="form-control" placeholder="Model Name">
                    </div>
                </div>
                <div class="mb-3 row">
                    <label class="col-md-3 col-form-label" for="model_number">Model Number</label>
                    <div class="col-md-6">
                        <input id="model_number" name="model_number" type="text" class="form-control" placeholder="Model Number">
                    </div>
                </div>
                <div class="mb-3 row">
                    <label class="col-md-3 col-form-label" for="registeration_number">Registration Number</label>
                    <div class="col-md-6">
                        <input id="registeration_number" name="registeration_number" type="text" class="form-control" placeholder="Registration Number">
                    </div>
                </div>
                <div class="mb-3 row">
                    <label class="col-md-3 col-form-label"  for="asset_type">Asset Type</label>
                    <div class="col-md-6">
                        <input id="asset_type" name="asset_type" type="text" class="form-control" placeholder="Asset Type">
                    </div>
                </div>

                    <div class="col-sm-6">
                        <div class="mb-3">
                            <label class="control-label">Category</label>
                        </div>
                        <div class="mb-3">
                            <label for="asset_type">Asset Type</label>
                        </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>
                        <h4 class="card-title mb-3">Asset Documents</h4>
                        <div class="mb-3">
                            <input name="file[]" class="form-control" type="file" multiple />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">OEM/Dealer Details</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="oem">OEM</label>
                                <input id="oem" name="oem" type="text" class="form-control" placeholder="OEM" required>
                                <div  id="name_errors"  class="invalid-feedback">
                                    Required
                                </div>
                            </div>
                            <div class="mb-3">
                                <label for="dealer">Dealer</label>
                                <input id="dealer" name="dealer" type="text" class="form-control" placeholder="Dealer">
                            </div>
                            <div class="mb-3">
                                <label for="purchased_invoice_number">Purchase Invoice Number</label>
                                <input id="purchased_invoice_number" name="purchased_invoice_number" type="text" class="form-control" placeholder="Purchase Invoice Number">
                            </div>
                            <div class="mb-3">
                                <label for="purchased_date">Purchase Date</label>
                                <input id="purchased_date" name="purchased_date" type="text" class="form-control" placeholder="Purchase Date">
                            </div>
                        </div>
                    </div>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Assign Location</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="location">Location Name</label>
                                <input id="location" name="location" type="text" class="form-control" placeholder="Location Name" required>
                                <div  id="name_errors"  class="invalid-feedback">
                                    Required
                                </div>
                            </div>
                            <div class="mb-3">
                                <label for="city">City</label>
                                <input id="city" name="city" type="text" class="form-control" placeholder="City">
                            </div>
                            <div class="mb-3">
                                <label for="district">District</label>
                                <input id="district" name="district" type="text" class="form-control" placeholder="District">
                            </div>
                            <div class="mb-3">
                                <label for="state">State</label>
                                <input id="state" name="state" type="text" class="form-control" placeholder="state">
                            </div>
                            <div class="mb-3">
                                <label for="postal_code">Postal Code</label>
                                <input id="postal_code" name="postal_code" type="text" class="form-control" placeholder="Postal Code">
                            </div>
                        </div>
                    </div>
            </div>
        </div>
        <!--<div class="card">
            <div class="card-body">
                <h4 class="card-title mb-3">Asset Description</h4>
                <div class="mb-3">
                <textarea class="form-control" id="elm1" rows="5" placeholder="Asset Description"></textarea>
                
                </div>
            </div>

        </div>--> 
        
        
        <!--<div class="card">
            <div class="card-body">
                <h4 class="card-title mb-3">Asset Images</h4>
                    <div 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>

                    <div class="row">
                        <div class="col-sm-6">
                            <div class="mb-3">
                                <label for="slug">Meta Slug</label>
                                <input id="slug" name="slug" type="text" class="form-control" placeholder="Metatitle">
                            </div>
                            <div class="mb-3">
                                <label for="meta_keyword">Meta Keywords</label>
                                <input id="meta_keyword" name="meta_keyword" type="text" class="form-control" placeholder="Meta Keywords">
                            </div>
                        </div>

                        <div class="col-sm-6">
                            <div class="mb-3">
                                <label for="meta_description">Meta Description</label>
                                <textarea class="form-control" name="meta_description"  id="meta_description" 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>
            </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 src="{{ URL::asset('/assets/js/custom.js') }}"></script>
    <script type="text/javascript">
    $(document).ready(function(){

        var token = "{{ csrf_token() }}";
        $('#category_id').on('change', function(e) {
            e.preventDefault();
            actionUrl = "{{ route('product-types.index') }}";
            updateProductProperyOption(actionUrl, token);
        });

        $( "#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]); 
                            $('#'+i+'_errors').css('display', 'block');
                        });
                    }
                },
            });
        });
    });
    </script>
@endsection