@extends('layouts.app')
@section('content')
    <div class="app-main flex-column flex-row-fluid" id="kt_app_main">
        <!--begin::Content wrapper-->
        <div class="d-flex flex-column flex-column-fluid">
            <!--begin::Toolbar-->
            <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
                <!--begin::Toolbar container-->
                <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
                    <!--begin::Page title-->
                    <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                        <!--begin::Title-->
                        <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">
                            Edit Product</h1>
                        <!--end::Title-->
                        <!--begin::Breadcrumb-->
                        <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                            <!--begin::Item-->
                            <li class="breadcrumb-item text-muted">
                                <a href="{{ route('dashboard') }}" class="text-muted text-hover-primary">Home</a>
                            </li>
                            <!--end::Item-->
                            <!--begin::Item-->
                            <li class="breadcrumb-item">
                                <span class="bullet bg-gray-400 w-5px h-2px"></span>
                            </li>
                            <!--end::Item-->
                            <!--begin::Item-->
                            <li class="breadcrumb-item text-muted">Product</li>
                            <li class="breadcrumb-item">
                                <span class="bullet bg-gray-400 w-5px h-2px"></span>
                            </li>
                            <!--end::Item-->
                            <!--begin::Item-->
                            <li class="breadcrumb-item text-muted">Edit Product</li>

                            <!--end::Item-->
                        </ul>
                        <!--end::Breadcrumb-->
                    </div>
                </div>
                <!--end::Toolbar container-->
            </div>
            <!--end::Toolbar-->
            <!--begin::Content-->
            <div id="kt_app_content" class="app-content flex-column-fluid">
                <!--begin::Content container-->
                <div id="kt_app_content_container" class="app-container container-xxl">
                    <!--begin::Form-->
                    <form id="kt_update_product_form" class="form d-flex flex-column flex-lg-row"
                        data-action="{{ route('product.update-product') }}">
                        @csrf
                        <input type="hidden" name="product_uuid" value="{{ $product_info->uuid }}">
                        {{-- <input type="hidden" id="gst" value="{{ $gst->gst }}"> --}}
                        <div class="d-flex flex-column flex-row-fluid gap-7 gap-lg-10">
                            <!--begin::Tab content-->
                            <div class="tab-content">
                                <!--begin::Tab pane-->
                                <div class="tab-pane fade show active" role="tab-panel">
                                    <div class="d-flex flex-column gap-7 gap-lg-10">
                                        <!--begin::General options-->
                                        <div class="card card-flush py-4">
                                            <div class="card-body pt-0">
                                                <!--begin::Input group-->
                                                <div class="row">
                                                    <div class="col-md-10">
                                                        <div class="row">
                                                            <div class="col-md-6 fv-row">
                                                                <!--begin::Label-->
                                                                <label class="required form-label">Category</label>
                                                                <!--end::Label-->
                                                                <!--begin::Input-->
                                                                <select name="product_category_id" data-control="select2"
                                                                    class="form-select form-select-solid"
                                                                    data-hide-search="true">
                                                                    <option value="">Select Category</option>
                                                                    @foreach ($categories as $category)
                                                                        <option value="{{ $category->id }}"
                                                                            @isset($product_info->product_category_id)
                                                                            {{ $product_info->product_category_id == $category->id ? 'selected' : '' }}
                                                                        @endisset>
                                                                            {{ $category->name }}
                                                                        </option>
                                                                    @endforeach
                                                                </select>
                                                                <!--end::Input-->
                                                            </div>
                                                            <div class="col-md-6 fv-row">
                                                                <!--begin::Label-->
                                                                <label class="required form-label">Type</label>
                                                                <!--end::Label-->
                                                                <!--begin::Input-->
                                                                <input type="text" name="type"
                                                                    class="form-control mb-2" placeholder="Enter type"
                                                                    value="{{ !empty($product_info->type) ? $product_info->type : '' }}">
                                                                <!--end::Input-->
                                                            </div>
                                                        </div>
                                                        <br>
                                                        <div class="row">
                                                            <div class="col-md-12 fv-row">
                                                                <!--begin::Label-->
                                                                <label class="required form-label">Product Name</label>
                                                                <!--end::Label-->
                                                                <!--begin::Input-->
                                                                <input type="text" name="name"
                                                                    class="form-control mb-2"
                                                                    placeholder="Enter Product Name"
                                                                    value="{{ !empty($product_info->name) ? $product_info->name : '' }}">
                                                                <!--end::Input-->
                                                                <!--begin::Description-->
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-2 fv-row">
                                                        <!--begin::Label-->
                                                        <label class="d-block fw-semibold fs-6 mb-5">
                                                            <span>Image</span>
                                                            <i class="fas fa-exclamation-circle ms-2 fs-7"
                                                                data-bs-toggle="tooltip" aria-label="Select a user image."
                                                                data-bs-original-title="Select a user image."
                                                                data-kt-initialized="1"></i>
                                                        </label>
                                                        <!--end::Label-->
                                                        <!--begin::Image input placeholder-->
                                                        <style>
                                                            .image-input-placeholder {
                                                                background-image: url('assets/media/svg/files/blank-image.svg');
                                                            }

                                                            [data-bs-theme="dark"] .image-input-placeholder {
                                                                background-image: url('assets/media/svg/files/blank-image-dark.svg');
                                                            }
                                                        </style>
                                                        <!--end::Image input placeholder-->
                                                        <!--begin::Image input-->
                                                        <div class="image-input image-input-empty image-input-outline image-input-placeholder mb-3"
                                                            data-kt-image-input="true">
                                                            <!--begin::Preview existing avatar-->
                                                            <div class="image-input-wrapper w-150px h-150px"
                                                                style="background-image: url('{{ $product_info->image ? asset('storage/product_images/' . $product_info->image) : asset('assets/media/svg/files/blank-image.svg') }}');">
                                                            </div>
                                                            <!--end::Preview existing avatar-->
                                                            <!--begin::Label-->
                                                            <label
                                                                class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                                                data-kt-image-input-action="change" data-bs-toggle="tooltip"
                                                                aria-label="Change avatar"
                                                                data-bs-original-title="Change avatar"
                                                                data-kt-initialized="1">
                                                                <i class="bi bi-pencil-fill fs-7"></i>
                                                                <!--begin::Inputs-->
                                                                <input type="file" name="logo"
                                                                    accept=".png, .jpg, .jpeg">
                                                                <input type="hidden" name="avatar_remove">
                                                                <!--end::Inputs-->
                                                            </label>
                                                            <!--end::Label-->
                                                            <!--begin::Cancel-->
                                                            <span
                                                                class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                                                data-kt-image-input-action="cancel" data-bs-toggle="tooltip"
                                                                aria-label="Cancel avatar"
                                                                data-bs-original-title="Cancel avatar"
                                                                data-kt-initialized="1">
                                                                <i class="bi bi-x fs-2"></i>
                                                            </span>
                                                            <!--end::Cancel-->
                                                            <!--begin::Remove-->
                                                            <span
                                                                class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                                                data-kt-image-input-action="remove" data-bs-toggle="tooltip"
                                                                aria-label="Remove avatar"
                                                                data-bs-original-title="Remove avatar"
                                                                data-kt-initialized="1">
                                                                <i class="bi bi-x fs-2"></i>
                                                            </span>
                                                            <!--end::Remove-->
                                                        </div>
                                                        <!--end::Image input-->
                                                        <!--begin::Hint-->
                                                        <div class="form-text" style="font-size: 10px;">Allowed file
                                                            types:
                                                            png, jpg, jpeg.</div>
                                                        <!--end::Hint-->
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="row">
                                                            <div class="col-md-4 fv-row">
                                                                <label class="required fs-6 fw-semibold mb-2">Product
                                                                    No.</label>
                                                                <input type="text" name="batch_no"
                                                                    class="form-control mb-2" value="{{ !empty($product_info->batch_no) ? $product_info->batch_no : '' }}"
                                                                    placeholder="Enter product Code">
                                                            </div>
                                                            <div class="col-md-4 fv-row">
                                                                <!--begin::Label-->
                                                                <label class="required fs-6 fw-semibold mb-2">Origin
                                                                    Country</label>
                                                                <!--end::Label-->
                                                                <!--begin::Input-->
                                                                <input type="text" name="origin_country"
                                                                    class="form-control mb-2"
                                                                    placeholder="Enter Origin Country"
                                                                    value="{{ !empty($product_info->origin_country) ? $product_info->origin_country : '' }}">
                                                                <!--end::Input-->
                                                            </div>
                                                            <div class="col-md-4 fv-row">
                                                                <!--begin::Label-->
                                                                <label
                                                                    class="required fs-6 fw-semibold mb-2">Company</label>
                                                                <!--end::Label-->
                                                                <!--begin::Input-->
                                                                <input type="text" name="company"
                                                                    class="form-control mb-2"
                                                                    placeholder="Enter Company Name"
                                                                    value="{{ !empty($product_info->company) ? $product_info->company : '' }}">
                                                                <!--end::Input-->
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <br>
                                                <div class="row">
                                                    <div class="col-md-4 fv-row">
                                                        <label class="required fs-6 fw-semibold mb-2">Total Available
                                                            Quantity</label>
                                                        <input type="text" name="total_available_quantity"
                                                            class="form-control mb-2"
                                                            placeholder="Total available Quantity" maxlength="6"
                                                            oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');"
                                                            value="{{ !empty($product_info->total_available_quantity) ? $product_info->total_available_quantity : '' }}">
                                                    </div>
                                                    <div class="col-md-4 fv-row">
                                                        <label class="required fs-6 fw-semibold mb-2">Min Order
                                                            Quantity</label>
                                                        <input type="text" name="min_order_quantity"
                                                            class="form-control mb-2"
                                                            placeholder="Enter Min Order Quantity" maxlength="6"
                                                            oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');"
                                                            value="{{ !empty($product_info->min_order_quantity) ? $product_info->min_order_quantity : '' }}">
                                                    </div>
                                                    <div class="col-md-4 fv-row">
                                                        <label class="required fs-6 fw-semibold mb-2">Max Order
                                                            Quantity</label>
                                                        <input type="text" name="max_order_quantity"
                                                            class="form-control mb-2"
                                                            placeholder="Enter Max Order Quantity" maxlength="6"
                                                            oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');"
                                                            value="{{ !empty($product_info->max_order_quantity) ? $product_info->max_order_quantity : '' }}">
                                                    </div>
                                                </div>
                                                <br>
                                                <div class="row">
                                                    <div class="col-md-4 fv-row">
                                                        <label class="required fs-6 fw-semibold mb-2">MRP</label>
                                                        <input class="form-control form-control" placeholder="Enter MRP"
                                                            name="mrp" maxlength="6" id="mrpInput"
                                                            oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');"
                                                            value="{{ !empty($product_info->mrp) ? $product_info->mrp : '' }}" />
                                                        {{-- <input type="hidden" id="gstInput" name="gst"
                                                            value="{{ !empty($product_info->gst) ? $product_info->gst : '' }}"> --}}
                                                    </div>
                                                    <div class="col-md-4 fv-row">
                                                        <label class="required fs-6 fw-semibold mb-2">GST ( % )</label>
                                                        <input type="text" name="gst" class="form-control mb-2"
                                                            placeholder="Enter GST" maxlength="6" id="gstInput"
                                                            oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');"
                                                            value="{{ !empty($product_info->gst_percentage) ? $product_info->gst_percentage : '' }}">
                                                    </div>
                                                    <div class="col-md-4 fv-row">
                                                        <label class="required fs-6 fw-semibold mb-2">PTR</label>
                                                        <input type="text" name="ptr" class="form-control mb-2"
                                                            placeholder="Enter PTR" maxlength="6"
                                                            oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');"
                                                            value="{{ !empty($product_info->ptr) ? $product_info->ptr : '' }}">
                                                    </div>
                                                </div>
                                                <br>
                                                <div class="row">
                                                    <div class="col-md-4 fv-row">
                                                        <!--begin::Label-->
                                                        <label class="form-label">Cost</label>
                                                        <!--end::Label-->
                                                        <!--begin::Input-->
                                                        <input type="text" name="cost" class="form-control mb-2"
                                                            placeholder="Enter Cost" value="{{ !empty($product_info->cost) ? $product_info->cost : '' }}" 
                                                            oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');">
                                                        <!--end::Input-->
                                                    </div>
                                                    <div class="col-md-4 fv-row">
                                                        <label class="fs-6 fw-semibold mb-2">Prate</label>
                                                        <input type="text" name="prate" class="form-control mb-2"
                                                            placeholder="Enter Prate" value="{{ !empty($product_info->prate) ? $product_info->prate : '' }}"
                                                            oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');">
                                                    </div>
                                                    <div class="col-md-4 fv-row">
                                                        <label class="required fs-6 fw-semibold mb-2">Strip
                                                            (packaging)</label>
                                                        <input type="text" name="stripe" class="form-control mb-2"
                                                            placeholder="Enter strip" value="{{ !empty($product_info->stripe) ? $product_info->stripe : '' }}">
                                                    </div>
                                                </div>
                                                <br>
                                                <div class="row">
                                                    <div class="col-md-4 fv-row">
                                                        <!--begin::Label-->
                                                        <label class="required form-label">Chemical
                                                            Combination</label>
                                                        <!--end::Label-->
                                                        <!--begin::Input-->
                                                        <input type="text" name="chemical_combination"
                                                            class="form-control mb-2"
                                                            placeholder="Enter Chemical Combination" value="{{ !empty($product_info->chemical_combination) ? $product_info->chemical_combination : '' }}">
                                                        <!--end::Input-->
                                                    </div>
                                                    <div class="col-md-3 fv-row">
                                                        <label class="fs-6 fw-semibold mb-2">Expiery Date</label>
                                                        <input class="form-control form-control-solid"
                                                            placeholder="Expiery Date" id="kt_datepicker"
                                                            name="expiery_date"
                                                            value="{{ !empty($product_info->expiery_date) ? $product_info->expiery_date : '' }}" />
                                                    </div>
                                                    <div class="col-md-4 fv-row">
                                                        <label class="fs-6 fw-semibold mb-2">Scheme</label>
                                                        <input type="text" name="scheme" class="form-control mb-2"
                                                            placeholder="Enter scheme" value="{{ !empty($product_info->scheme) ? $product_info->scheme : '' }}">
                                                    </div>
                                                </div>
                                                <br>
                                                <div class="row">
                                                    <div class="col-md-6"><label
                                                            class="form-check form-switch form-check-custom form-check-solid fs-6 fw-semibold mb-2">Add
                                                            Discount&nbsp;&nbsp;&nbsp;
                                                            <input class="form-check-input" name="add_discount"
                                                                type="checkbox" id="kt_discount"
                                                                {{ !empty($product_info->discount) ? 'checked' : '' }} />
                                                            <span class="form-check-label fw-semibold text-muted"
                                                                for="kt_discount"></span>
                                                        </label>

                                                    </div>
                                                </div>
                                                <br>
                                                <div class="row show-discount d-none">
                                                    <div class="col-md-4">
                                                        <div class="fv-row mb-15">
                                                            <label class="fs-6 fw-semibold mb-2">Buy Quantity of this
                                                                Product</label>
                                                            @php
                                                                $firstNumber = 0;
                                                                $secondNumber = 0;
                                                                $offerProductScheme =
                                                                    $product_info->offer_product_scheme ?? null;
                                                                if ($offerProductScheme != null) {
                                                                    $firstNumber = !empty($offerProductScheme)
                                                                        ? explode('+', $offerProductScheme)[0]
                                                                        : 0;
                                                                    $secondNumber = !empty($offerProductScheme)
                                                                        ? explode('+', $offerProductScheme)[1]
                                                                        : 0;
                                                                }
                                                            @endphp
                                                            <input class="form-control form-control"
                                                                placeholder="Enter Quantity" name="buy_quantity_of_this"
                                                                maxlength="6" value="{{ $firstNumber }}"
                                                                oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" />
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4 discount_product">
                                                        <div class="fv-row mb-15">
                                                            <label class="fs-6 fw-semibold mb-2">Choose Offer
                                                                Product</label>
                                                            <select name="offer_product_id" data-control="select2"
                                                                class="form-select form-select-solid" id="bonus_product">
                                                                <option value="">Select Offer Product</option>
                                                                @foreach ($products as $product)
                                                                    <option value="{{ $product->id }}"
                                                                        {{ $product_info->discount?->discount_product_id == $product->id ? 'selected' : '' }}>
                                                                        {{ $product->name }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4 discount_percentage">
                                                        <div class="fv-row mb-15">
                                                            <label class="fs-6 fw-semibold mb-2">Offer Product
                                                                Quantity</label>
                                                            <input class="form-control form-control"
                                                                placeholder="Enter Quantity" name="offer_product_quantity"
                                                                maxlength="6" value="{{ $secondNumber }}"
                                                                oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" />
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <div class="fv-row mb-15">
                                                            <label class="fs-6 fw-semibold mb-2">Discount ( % )</label>
                                                            <input type="text" name="percentage"
                                                                class="form-control mb-2"
                                                                placeholder="Enter Discount Percentage"
                                                                value="{{ !empty($product_info->discount?->discount) ? $product_info->discount?->discount : '' }}"
                                                                oninput="this.value = this.value.replace(/[^0-9\+\,]/g, '').replace(/(\..*?)\..*/g, '$1');">
                                                        </div>
                                                    </div>
                                                    {{-- <div class="col-md-4">
                                                        <div class="fv-row mb-15">
                                                            <label class="fs-6 fw-semibold mb-2">Scheme</label>
                                                            <input type="text" name="scheme"
                                                                class="form-control mb-2" placeholder="Enter Scheme"
                                                                oninput="this.value = this.value.replace(/[^0-9\+\,]/g, '').replace(/(\..*?)\..*/g, '$1');">
                                                        </div>
                                                    </div> --}}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <br>
                            <!--end::Tab content-->
                            <div class="d-flex justify-content-end">
                                <!--begin::Button-->
                                <a href="" id="kt_add_product_cancel" class="btn btn-light me-5">Cancel</a>
                                <!--end::Button-->
                                <!--begin::Button-->
                                <button type="submit" id="kt_update_product_submit" class="btn btn-primary">
                                    <span class="indicator-label">Update Changes</span>
                                    <span class="indicator-progress">Please wait...
                                        <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                                </button>
                                <!--end::Button-->
                            </div>
                        </div>
                        <!--end::Main column-->
                </div>
                </form>
                <!--end::Form-->
            </div>
            <!--end::Content container-->
        </div>
        <!--end::Content-->
    </div>
@endsection
@push('script')
    <script>
        const currentDate = new Date();
        $("#kt_datepicker").flatpickr({
            dateFormat: "Y-m-d",
            minDate: currentDate,
        });
    </script>
    <script>
        function updateDiscountVisibility() {
            var showPass = ($('#kt_discount:checked').length > 0);
            if (showPass) {
                $(".show-discount").removeClass('d-none').show();
            } else {
                $(".show-discount").addClass('d-none').hide();
            }
        }

        // Run on page load
        $(document).ready(function() {
            updateDiscountVisibility();
        });

        // Run on checkbox change
        $(document).on('change', '#kt_discount', updateDiscountVisibility);
        // $(document).ready(function() {
        //     var show = false;
        //     // $('.show-discount').change(function() {
        //     //     let discountType = $('#discount_type_add').val();
        //     //     if (discountType == 1) {
        //     //         $(".discount_product").addClass('d-none');
        //     //         $(".discount_percentage").removeClass('d-none');
        //     //     } else if (discountType == 2) {
        //     //         $(".discount_product").addClass('d-none');
        //     //         $(".discount_percentage").addClass('d-none');

        //     //     } else if (discountType == 3) {
        //     //         $(".discount_product").removeClass('d-none');
        //     //         $(".discount_percentage").addClass('d-none');

        //     //     } else if (discountType == 4) {
        //     //         $(".discount_product").addClass('d-none');
        //     //         $(".discount_percentage").removeClass('d-none');

        //     //     } else if (discountType == 5) {
        //     //         $(".discount_product").removeClass('d-none');
        //     //         $(".discount_percentage").removeClass('d-none');
        //     //     }
        //     // });
        //     let gstPercentage = $('#gst_percentage').val();
        //     $('#mrpInput').on('change', function() {
        //         var mrpValue = $(this).val();
        //         if (!isNaN(mrpValue)) {
        //             // var gstPercentage = 18;
        //             var gstAmount = (parseFloat(mrpValue) * gstPercentage) / 100;
        //             $('#gstInput').val(gstAmount.toFixed(2));
        //         } else {
        //             $('#gstInput').val('');
        //         }
        //     });
        // });
    </script>
    <script src="{{ asset('assets/js/product/update-product.js') }}"></script>
@endpush