@extends('../backend/layout/' . $layout)

@section('subhead')
<title>Brands</title>
@endsection

@section('subcontent')
<div class="grid grid-cols-12 gap-6 mt-5">
    <div class="intro-y col-span-12">
        <!-- BEGIN: Input -->
        <div class="intro-y box">
            <div
                class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
                <h2 class="font-medium text-base mr-auto">Add New Brand</h2>
            </div>
            <div id="form-validation" class="p-5">
                <div class="preview">
                    <form id="brand_form" class="validate-form" action="javascript:;" method="POST"
                        enctype="multipart/form-data">
                        @csrf

                        <div class="input-form mb-4">
                            <label for="regular-form-1" class="form-label w-full flex flex-col sm:flex-row">Name <span
                                    class="text-danger">*</span></label>
                            <input id="name" name="name" type="text" class="form-control form__input" minlength="2"
                            required data-pristine-required-message="Please enter brand name">
                            <div id="error-name" class="form__input-error text-danger"></div>
                        </div>

                        <div class="input-form mb-2">
                            <label for="description" class="form-label">Description</label>
                            <textarea id="description" type="text" name="description"
                                class="form-control form__input"></textarea>
                            <div id="error-description" class="form__input-error text-danger"></div>
                        </div>
                        <div class="intro-y col-span-12 mt-3">
                            <div class="intro-y">
                                <div class="preview pb-5">
                                    <div class="flex">
                                        <div id="image_preview">
                                        </div>
                                        <div class="flex items-center justify-center w-24 h-24 relative image-fit mb-5 mr-5 cursor-pointer border-dashed border-2"
                                            id="lfm" data-input="logo" data-preview="image_preview">
                                            <div class="rounded-md">
                                                <i data-lucide="image"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <input type="hidden" name="logo" id="logo">
                                </div>
                            </div>
                        </div>
                        <button type="submit" id="btn-submit" class="btn btn-primary w-24 mr-1 mb-2">Submit</button>
                        <button type="reset" id="btn-clear" class="btn btn-outline-secondary w-24 inline-block mr-1 mb-2"
                            id="clear">Clear</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script src="{{ asset(mix('js/backend/pages/file-manager/others-file-manager.js'))}}"></script>
<script>
    const store_brand_route = '{{ route('brands.store') }}';
    others_lfm('lfm', 'image')
</script>
<script src="{{ asset(mix('js/backend/pages/brands/create.js')) }}"></script>
@endsection