@extends('admin.layouts.app')
@section('title', 'Create Wholesale Discount Plan')
@section('content')
    <!-- Content -->

    <div class="container-xxl flex-grow-1 container-p-y">
        {{-- <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">Forms/</span> Horizontal Layouts</h4> --}}

        <!-- Basic Layout & Basic with Icons -->
        <div class="row ">
            <!-- Basic Layout -->
            <div class="col-12 col-sm-12">
                <div class="card px-4 mb-4">
                    <div class="title-n-btn ">
                        <h4 class="">Create Wholesale Discount Plan</h4>

                    </div>

                    <div class="card-body px-0">
                        <form class="ajax-submit-form" data-url="{{ route('admin.wholesale-plan.store') }}" data-method="POST"
                            enctype="multipart/form-data">


                            <div class="row mb-3">
                                <label class="col-sm-2 col-form-label" for="title">Title</label>
                                <div class="col-sm-10">
                                    <input name="title" type="text" class="form-control" id="title" />
                                </div>
                            </div>
                            {{-- 
                            <div class="row mb-3">
                                <label class="col-sm-4 col-form-label" for="title">Assign to Customers</label>
                                <div class="col-sm-8">
                                    <select class="select2 " name="assigned_customer[]" id="assigned_customer"
                                        multiple="multiple">
                                        @foreach ($customers as $customer)
                                            <option value="{{ $customer->id }}">{{ $customer->full_name }}</option>
                                        @endforeach
                                    </select>

                                </div>
                            </div> --}}

                            <div class="row mb-3">
                                <label class="col-sm-2 col-form-label" for="price">Price</label>
                                <div class="col-sm-3">
                                    {{-- <input name="price" type="number" step="0.01" min="0" class="form-control"
                                        id="price" /> --}}
                                    <div class="input-group">
                                        <span class="input-group-text" id="basic-addon13">USD</span>
                                        <input type="number" step="0.01" min="0" name="price_in_usd"
                                            id="price_in_usd" class="form-control" placeholder="" aria-label="price_in_usd"
                                            aria-describedby="basic-addon13" />

                                    </div>
                                </div>
                                <div class="col-sm-3">
                                    <div class="input-group">
                                        <span class="input-group-text" id="basic-addon13">MMK</span>
                                        <input type="number" step="0.01" min="0" name="price_in_mmk"
                                            id="price_in_mmk" class="form-control" placeholder="" aria-label="price_in_mmk"
                                            aria-describedby="basic-addon13" />

                                    </div>
                                </div>
                                <div class="col-sm-3">
                                    <div class="input-group">
                                        <span class="input-group-text" id="basic-addon13">RMB</span>
                                        <input type="number" step="0.01" min="0" name="price_in_rmb"
                                            id="price_in_rmb" class="form-control" placeholder="" aria-label="price_in_rmb"
                                            aria-describedby="basic-addon13" />

                                    </div>
                                </div>

                            </div>


                            <div class="row mb-3">
                                <label class="col-sm-2 col-form-label" for="discount">Discount</label>
                                <div class="col-sm-10">
                                    <div class="input-group">
                                        <input type="number" step="0.01" min="0" name="discount" id="discount"
                                            class="form-control" placeholder="" aria-label="discount"
                                            aria-describedby="basic-addon13" />
                                        <span class="input-group-text" id="basic-addon13">%</span>
                                    </div>
                                </div>
                            </div>


                            <div class="row mb-3">
                                <label class="col-sm-2 col-form-label" for="min_order_amt">Minimum Order Amount</label>
                                <div class="col-sm-10">
                                    <div class="input-group">
                                        <span class="input-group-text" id="basic-addon13">MMK</span>
                                        <input type="number" step="0.01" min="0" name="min_order_amt"
                                            id="min_order_amt" class="form-control" placeholder="" aria-label="price_in_rmb"
                                            aria-describedby="basic-addon13" />

                                    </div>


                                </div>
                            </div>

                            <div class="row mb-3">
                                <label class="col-sm-2 col-form-label" for="status">Status</label>
                                <div class="col-sm-10">
                                    <select class="select2" name="status" id="status">
                                        @foreach (CommonStatusesForCrud() as $key => $value)
                                            <option value="{{ $key }}">{{ $value }}</option>
                                        @endforeach


                                    </select>

                                </div>
                            </div>

                            <div class="row justify-content-end">
                                <div class="col-sm-10">
                                    <button type="submit" class="btn btn-primary">Create</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!-- / Content -->
@endsection
@section('scripts')
    <script>
        const usdToMmkRate = {{ $currrncyRateMmk ?? 0 }}
        const usdToRmbRate = {{ $currrncyRateRmb ?? 0 }}
        // When typing in USD field
        $('#price_in_usd').on('input', function() {
            let usd = parseFloat($(this).val());
            if (!isNaN(usd)) {
                let mmk = (usd * usdToMmkRate).toFixed(2);
                let rmb = (usd * usdToRmbRate).toFixed(2);
                $('#price_in_mmk').val(mmk);
                $('#price_in_rmb').val(rmb);
            } else {
                $('#price_in_mmk').val('');
                $('#price_in_rmb').val('');
            }
        });

        // When typing in MMK field
        $('#price_in_mmk').on('input', function() {
            let mmk = parseFloat($(this).val());
            if (!isNaN(mmk)) {

                let usd = (mmk / usdToMmkRate).toFixed(2);
                $('#price_in_usd').val(usd);
                let rmb = (usd * usdToRmbRate).toFixed(2);

                $('#price_in_rmb').val(rmb);
            } else {
                $('#price_in_usd').val('');
                $('#price_in_rmb').val('');
            }
        });
        // When typing in RMB field
        $('#price_in_rmb').on('input', function() {
            let rmb = parseFloat($(this).val());
            let mmk = parseFloat($('#price_in_mmk').val());
            if (!isNaN(rmb)) {
                let usd = (rmb / usdToRmbRate).toFixed(2);
                $('#price_in_usd').val(usd);
                let mmk = (usd * usdToMmkRate).toFixed(2);
                $('#price_in_mmk').val(mmk);
            } else {
                $('#price_in_usd').val('');
                $('#price_in_mmk').val('');

            }
        });
    </script>
@endsection