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

@section('subhead')
    <title>Pricing Box</title>
@endsection

@section('subcontent')
    <div class="grid grid-cols-12 gap-6 mt-5">
        <div class="intro-y col-span-12 lg: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">Edit Pricing Box</h2>
                </div>
                <div id="input" class="p-5">
                    <form id="pricing_box_form" class="validate-form" action="javascript:;" enctype="multipart/form-data">
                        @csrf
                        @method('put')
                        <div class="input-form mb-2">
                            <label for="above" class="form-label">Above Price<span class="text-danger">*</span></label>
                            <input type="number" name="above" id="above" value="{{ $pricingBox->above }}" class="form-control form__input" required data-pristine-required-message="Please enter above price">
                            <div id="error-above" class="form__input-error text-danger"></div>
                        </div>
                        <div class="input-form mb-2">
                            <label for="under" class="form-label">Under Price</label>
                            <input type="number" name="under" value="{{ $pricingBox->under }}" id="under" class="form-control form__input">
                            <div id="error-under" 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">
                                            @if (!empty(Helper::LMFThums($pricingBox->photo)))
                                                <div class="w-24 h-24 relative image-fit mb-5 mr-5 cursor-pointer zoom-in">
                                                    <img class="rounded-md"
                                                        src="{{ Helper::LMFThums($pricingBox->photo) ?? config('constant.default_image') }}">
                                                    <div title="Remove this image?"
                                                        class="tooltip w-5 h-5 flex items-center justify-center absolute rounded-full text-white bg-danger right-0 top-0 -mr-2 -mt-2">
                                                        <i data-lucide="x" class="w-4 h-4"
                                                            onclick="deleteImage('lfm')"></i>
                                                    </div>
                                                </div>
                                            @endif
                                        </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="photo" data-preview="image_preview">
                                            <div class="rounded-md">
                                                <i data-lucide="image"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <input type="hidden" name="photo" id="photo" value="{{ $pricingBox->photo }}">
                                    <div id="error-photo" class="form__input-error text-danger"></div>
                                    <span><b>Note:</b> Image size must be 238*238px</span>
                                </div>
                            </div>
                        </div>
                        <button type="submit" id="btn-submit" class="btn btn-primary w-24 mr-1 mb-2">Update</button>
                        <a href="{{ route('pricing-box.index') }}"
                            class="btn btn-outline-secondary w-24 inline-block mr-1 mb-2">Back</a>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="{{ asset(mix('js/backend/pages/file-manager/others-file-manager.js')) }}"></script>
    <script>
        const pricingBoxUpdateRoute = '{{ route('pricing-box.update', $pricingBox->id) }}'
        others_lfm('lfm', 'image')
    </script>
    <script src="{{ asset(mix('js/backend/pages/pricing_box/edit.js')) }}"></script>
@endsection