@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">
                            Add 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">Add 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_add_product_form" class="form d-flex flex-column flex-lg-row"
                        data-action="{{ route('product.add-product') }}">
                        @csrf
                        {{-- <input type="hidden" id="gst_percentage" 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 }}">
                                                                            {{ $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">
                                                                <!--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">
                                                                <!--end::Input-->
                                                                <!--begin::Description-->
                                                                <div class="text-muted fs-7">A Product Name is required and
                                                                    recommended
                                                                    to be unique.</div>
                                                            </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('{{ 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"
                                                                    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">
                                                                <!--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">
                                                                <!--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');">
                                                    </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');">
                                                    </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');">
                                                    </div>
                                                </div>
                                                <br>
                                                <div class="row">
                                                    <div class="col-md-4 fv-row">
                                                        <label class="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');" />
                                                        {{-- <input type="hidden" id="gstInput" name="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_percentage"
                                                            class="form-control mb-2" placeholder="Enter GST"
                                                            maxlength="6"
                                                            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">PTR</label>
                                                        <input type="text" name="ptr" class="form-control mb-2"
                                                            placeholder="Enter PTR" maxlength="6" id="ptrInput"
                                                            oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');">
                                                    </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"
                                                            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"
                                                            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">
                                                    </div>
                                                </div>
                                                <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">
                                                        <!--end::Input-->
                                                    </div>
                                                    <div class="col-md-4 fv-row">
                                                        <!--begin::Label-->
                                                        <label class="required form-label">Expiery Date</label>
                                                        <!--end::Label-->
                                                        <!--begin::Input-->
                                                        <input type="text" name="expiery_date" id="kt_datepicker"
                                                            class="form-control mb-2" placeholder="Expiery Date">
                                                        <!--end::Input-->
                                                    </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">
                                                    </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" />
                                                            <span class="form-check-label fw-semibold text-muted"
                                                                for="kt_discount"></span>
                                                        </label>

                                                    </div>
                                                </div>
                                                <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>
                                                            <input class="form-control form-control"
                                                                placeholder="Enter Quantity" name="buy_quantity_of_this"
                                                                maxlength="6"
                                                                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>
                                                                @forelse ($products as $product)
                                                                    <option value="{{ $product->id }}">
                                                                        {{ $product->name }}
                                                                    </option>
                                                                @empty
                                                                    <p>No Data found</p>
                                                                @endforelse
                                                            </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"
                                                                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"
                                                                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_add_product_submit" class="btn btn-primary">
                                    <span class="indicator-label">Save 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>
        $(document).ready(function() {
            var show = false;
            $('#kt_discount').change(function() {
                showPass = ($('#kt_discount:checked').length > 0);
                if (showPass == true) {
                    $(".show-discount").removeClass('d-none');
                    $('.show-discount').show();
                } else {
                    $('.show-discount').hide();
                    $(".show-discount").addClass('d-none');
                }
            });
            // $('.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();
            // $('#ptrInput').on('input', function() {
            //     var ptrValue = $(this).val();
            //     if (!isNaN(ptrValue)) {
            //         // var gstPercentage = 18;
            //         var gstAmount = (gstPercentage) / 100;
            //         $('#gstInput').val(gstAmount.toFixed(2));
            //     } else {
            //         $('#gstInput').val('');
            //     }
            // });
            $('#ptrInput, input[name="gst_percentage"]').on('input', function() {
                var ptrValue = $('#ptrInput').val();
                var gstPercentage = $('input[name="gst_percentage"]').val();

                if (!isNaN(ptrValue) && !isNaN(gstPercentage) && ptrValue !== '' && gstPercentage !== '') {
                    var ptrNumeric = parseFloat(ptrValue);
                    var gstNumeric = parseFloat(gstPercentage);
                    var gstAmount = (ptrNumeric * gstNumeric) / 100;

                    // Add a hidden input for GST amount if it doesn't exist
                    if ($('#gstInput').length === 0) {
                        $('<input>').attr({
                            type: 'hidden',
                            id: 'gstInput',
                            name: 'gst',
                            value: gstAmount.toFixed(2)
                        }).appendTo('form'); // Adjust this selector to match your form
                    }

                    // $('#gstInput').val(gstAmount.toFixed(2));
                } else {
                    if ($('#gstInput').length > 0) {
                        $('#gstInput').val('');
                    }
                }
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            $('input[name="min_order_quantity"], input[name="max_order_quantity"]').on('keydown', function() {
                setTimeout(() => {
                    var minQuantity = parseFloat($('input[name="min_order_quantity"]').val()) || 0;
                    var maxQuantity = parseFloat($('input[name="max_order_quantity"]').val()) || 0;
                    if (maxQuantity !== 0 && minQuantity !== 0) {
                        if (maxQuantity === minQuantity) {
                            showToast('error', 'Pilldrop',
                                'Max Order Quantity cannot be the same as Min Order Quantity');
                        } else if (maxQuantity < minQuantity) {
                            showToast('error', 'Pilldrop',
                                'Max Order Quantity cannot be less than Min Order Quantity');
                        }
                    }
                }, 1000);
            });
        });
    </script>
    <script src="{{ asset('assets/js/product/add-product.js') }}"></script>
@endpush