@extends('layouts.dashboard.app')
@section('title', 'Product Type | Chemical Wholesale')
@section('content')
    <div class="cw-content">
        <div class="container-fluid">
            <div class="cw-content-inner">
                <div class="cw-content-body">
                    <div class="cw-block-head cw-block-head-sm">
                        <div class="cw-block-between d-flex justify-content-between align-items-center">
                            <div class="cw-block-head-content">
                                <h3 class="cw-block-title page-title">@if(@$productapp->id) Edit @else Add @endif Product Application</h3>
                                <div class="cw-block-des text-soft">
                                    <p>Manage all your product application.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    @include('layouts.dashboard.flash')
                    <div class="card">
                        <div class="card-body px-3 cw-form">
                            <form action="{{ route('admin.productapp.store') }}" method="post" enctype="multipart/form-data" id="productappForm">
                                <input type="hidden" name="id" id="cid" class="cid" value="{{ @$productapp->uuid }}"/>
                                @csrf
                                <div class="row">
                                    <div class="col-lg-4 mb-3">
                                        <label class="form-label">Application Name:</label>
                                        <input type="text" name="name" id="name" value="{{ ucfirst(@$productapp->name) }}" class="form-control name" placeholder="Product Application Name" autofocus required>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <div class="row">
                                        <div class="col-6">
                                            <label class="form-label onboarding-label">Upload Image:</label>
                                            <input type="file" name="productappimage" id="productappimage" data-prvid="productappimg" class="form-control onboarding-input productappimg" onchange="readURL(this);" accept="image/jpeg, image/png">

                                            <span class="upload-file-msg">Recommended size: 500 x 500 | Supported File types - PNG, JPG</span>
                                        </div>
                                        <div class="col-4 m-auto" style="border-left:2px solid #eee;">
                                            <div class="row">
                                                <div class="col-lg-12">
                                                    <div class="imgpreview-container">
                                                        <img src="{{ @$productapp->getimage->path }}" alt="" id="productappimg" class="imgpreview-img" onerror="src='/assets/img/noimg.jpg'">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <div class="col-lg-3 col-6">
                                        <label class="form-label">Featured:</label>
                                        <select name="display_on_home" id="display_on_home" class="form-control form-select display_on_home">
                                            <option selected="" disabled="">Select</option>
                                            <option value="1" {{ (@$productapp->display_on_home == 1) ? 'selected="selected"' : '' }}>Yes</option>
                                            <option value="0" {{ (@$productapp->display_on_home == 0) ? 'selected="selected"' : '' }}>No</option>
                                        </select>
                                    </div>
                                    <div class="col-lg-3 col-6">
                                        <label class="form-label">Sort Ordering:</label>
                                        <input type="number" name="order_number" min="1" value="{{ (@$productapp->order_number) ? @$productapp->order_number : 1}}" class="form-control">
                                    </div>
                                </div>
                                <div class="col-lg-12 mb-3">
                                    <label class="form-label">Description:</label>
                                    <textarea class=" editor p-4" rows="10" id="description" name="description">{{ old('description') ? old('description') : @$productapp->description }}</textarea>
                                </div>
                                <div>
                                    <button type="submit" class="btn-formpage-submit">Save</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('css')
    <link href="{{ asset('assets/dashboard/css/lib/summernote.min.css') }}" rel="stylesheet">
    <style>
        .note-editor.note-airframe.fullscreen,
        .note-editor.note-frame.fullscreen {
            z-index: 1067;
            background: #fff;
        }
    </style>
@endpush
@push('js')
    <script src="{{ asset('assets/dashboard/js/form-validation.js') }}"></script>
    <script src="{{ asset('assets/dashboard/js/lib/summernote.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            $('#description').summernote({
                height: 400,
                toolbar: [
                    // [groupName, [list of button]]
                    ['style', ['bold', 'italic', 'underline', 'clear']],
                    ['font', ['strikethrough', 'superscript', 'subscript']],
                    ['fontsize', ['fontsize']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['height', ['height']]
                ]
            });
            var noteBar = $('.note-toolbar');
            noteBar.find('[data-toggle]').each(function() {
                $(this).attr('data-bs-toggle', $(this).attr('data-toggle')).removeAttr('data-toggle');
            });
            $('form').submit(function(e) {
                var submitBtn = $(this).find('button[type="submit"]');
                submitBtn.html('<span class="spinner me-2"></span>Saving');
                setTimeout(function() {
                    submitBtn.removeAttr('disabled');
                    submitBtn.html('Save');
                }, 1000);
            });
        });
    </script>
    <script>
        $(document).ready(function () {
            var autofocusElement = $('input[autofocus]').filter(function () {
            return $(this).val().length > 0;
            }).first();

            if (autofocusElement.length) {
            var autofocuslength = autofocusElement.val().length;
            autofocusElement[0].setSelectionRange(autofocuslength, autofocuslength);
            autofocusElement.focus();
            }
        });
    </script>
@endpush