@extends('layouts.dashboard.app')
@section('title', 'CAS Number | 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(@$cas->id) Edit @else Add @endif CAS Number</h3>
                                <div class="cw-block-des text-soft">
                                    <p>Manage all your CAS Number.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    @include('layouts.dashboard.flash')
                    <div class="card">
                        <div class="card-body px-3 cw-form">
                            <form action="{{ route('admin.cas.store') }}" method="post" enctype="multipart/form-data" id="productCasForm">
                                <input type="hidden" name="id" id="cid" class="cid" value="{{ @$cas->uuid }}"/>
                                @csrf
                                <div class="row">
                                    <div class="col-lg-4 mb-3">
                                        <label class="form-label">Chemical Name:</label>
                                        <input type="text" name="name" id="name" value="{{ ucfirst(@$cas->name) }}" class="form-control name" placeholder="Chemical Name" autofocus required>
                                    </div>
                                    <div class="col-lg-4 mb-3">
                                        <label class="form-label">CAS Number:</label>
                                        <input type="text" name="cas" id="cas" value="{{ @$cas->cas }}" class="form-control cas" placeholder="Chemical Abstracts Service Code" required>
                                    </div>
                                </div>
                                <div class="col-lg-12 mb-3">
                                    <label class="form-label">Description:</label>
                                    <textarea class="editor p-4" cols="30" rows="10" id="description" name="description">{{ old('description') ? old('description') : @$cas->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