@extends('admin.main')

@section('main')
    @php
        $percentUsed = 0;
        if ($couponData->usage_limit) {
            $percentUsed = calculatePercentageUsed($couponData->qt_used, $couponData->usage_limit);
        }
    @endphp

    <div class="post d-flex flex-column-fluid" id="kt_post">
        <!--begin::Container-->
        <div id="kt_content_container" class="container-xxl">
            <!--begin::Sitemap-->
            <div class="card mb-12">
                <!--begin::Body-->
                <div class="card-body p-5 px-lg-19 py-lg-16">

                    <div class="card-header align-items-center border-0 mb-15">
                        <div>
                            <h1 class="fs-2x text-dark mb-6">
                                Edit Coupon
                            </h1>
                            <div class="fs-5 text-muted fw-bold">
                                Update Coupon
                            </div>
                        </div>
                        <div class="card-toolbar">

                            <div class="d-flex flex-stack mb-2">
                                <span class="text-muted me-2 fs-7 fw-bold">{{ $percentUsed }}% used ( {{ $couponData->qt_used }} )</span>
                            </div>
                            <div class="progress h-6px w-100">
                                <div class="progress-bar bg-danger" role="progressbar" style="width: {{ $percentUsed }}%"
                                    aria-valuenow="{{ $percentUsed }}" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>

                        </div>
                    </div>


                    <!--begin::Row-->
                    <div class="row g-10 mb-15">

                        <div class="container">
                            <form action="{{ route('admin.coupons.update.action', $couponData->id) }}" method="POST"
                                id="formAddCoupon">
                                @csrf
                                <!--begin::Pricing-->

                                <!--begin::Card body-->
                                <!--begin::Input group-->
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="mb-10 fv-row">
                                            <!--begin::Label-->
                                            <label class="required form-label">Coupon code</label>
                                            <!--end::Label-->
                                            <!--begin::Input-->
                                            <input type="text" required name="code" value="{{ $couponData->code }}"
                                                class="form-control form-control-solid mb-2" placeholder="GIFT10" />
                                            <!--end::Input-->
                                            <!--begin::Description-->
                                            <div class="text-muted fs-7">Code used by the customer to use the
                                                coupon.</div>
                                            <!--end::Description-->
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="mb-10 fv-row">
                                            <!--begin::Label-->
                                            <label class="required form-label">Who is this coupon for?</label>
                                            <!--end::Label-->
                                            <!--begin::Input-->
                                            <select name="customer_id" class="form-control form-control-solid mb-2">
                                                <option value="">Any Customer</option>
                                                @foreach ($customers as $customer)
                                                    <option
                                                        {{ $couponData->customer_id == $customer->id ? 'selected' : '' }}
                                                        value="{{ $customer->id }}">{{ $customer->customer_name }}</option>
                                                @endforeach
                                            </select>
                                            <!--end::Input-->
                                            <!--begin::Description-->
                                            <div class="text-muted fs-7">Define who the coupon can be used by.</div>
                                            <!--end::Description-->
                                        </div>
                                    </div>
                                </div>
                                <!--end::Input group-->

                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="mb-10 fv-row">
                                            <!--begin::Label-->
                                            <label class="required form-label">Usage limit</label>
                                            <!--end::Label-->
                                            <!--begin::Input-->
                                            <input type="number" value="{{ $couponData->usage_limit }}" placeholder="125"
                                                name="usage_limit" class="form-control form-control-solid mb-2" />
                                            <!--end::Input-->
                                            <!--begin::Description-->
                                            <div class="text-muted fs-7">How many times can customers use this
                                                coupon?</div>
                                            <!--end::Description-->
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="mb-10 fv-row">
                                            <!--begin::Label-->
                                            <label class="required form-label">Minimum value</label>
                                            <!--end::Label-->
                                            <!--begin::Input-->
                                            <input type="text" value="{{ $couponData->min_value }}" placeholder="95.00"
                                                name="min_value" class="form-control form-control-solid mb-2" />
                                            <!--end::Input-->
                                            <!--begin::Description-->
                                            <div class="text-muted fs-7">Minimum purchase value for the coupon to be validated.
                                            </div>
                                            <!--end::Description-->
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="mb-10 fv-row">
                                            <!--begin::Label-->
                                            <label class="required form-label">Start of validity</label>
                                            <!--end::Label-->
                                            <!--begin::Input-->
                                            <input type="date" name="valid_start"
                                                value="{{ $couponData->valid_start !== null ? date('Y-m-d', strtotime($couponData->valid_start)) : '' }}"
                                                class="form-control form-control-solid mb-2" />
                                            <!--end::Input-->
                                            <!--begin::Description-->
                                            <div class="text-muted fs-7">The coupon will be valid from that date onwards. Blank or
                                                Coupon will be valid on any date.</div>
                                            <!--end::Description-->
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="mb-10 fv-row">
                                            <!--begin::Label-->
                                            <label class="required form-label">End of validity</label>
                                            <!--end::Label-->
                                            <!--begin::Input-->
                                            <input type="date" name="valid_at"
                                                value="{{ $couponData->valid_at ? date('Y-m-d', strtotime($couponData->valid_at)) : '' }}"
                                                class="form-control form-control-solid mb-2" />
                                            <!--end::Input-->
                                            <!--begin::Description-->
                                            <div class="text-muted fs-7">After this date, the coupon will no longer be valid. In
                                                white the coupon will be valid on any date.</div>
                                            <!--end::Description-->
                                        </div>
                                    </div>
                                </div>
                                <!--begin::Input group-->
                                <div class="fv-row mb-10">
                                    <!--begin::Label-->
                                    <label class="fs-6 fw-bold mb-2">Type of discount
                                        <i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip"
                                            title="Select a type of discount that will be applied to this product."></i></label>
                                    <!--End::Label-->
                                    <!--begin::Row-->
                                    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-1 row-cols-xl-2 g-9"
                                        data-kt-buttons="true" data-kt-buttons-target="[data-kt-button='true']">
                                        <!--begin::Col-->
                                        <div class="col">
                                            <!--begin::Option-->
                                            <label
                                                class="btn btn-outline btn-outline-dashed btn-outline-default d-flex text-start p-6"
                                                id="percentControl" data-kt-button="true">
                                                <!--begin::Radio-->
                                                <span
                                                    class="form-check form-check-custom form-check-solid form-check-sm align-items-start mt-1">
                                                    <input class="form-check-input" type="radio" name="discount_type"
                                                        value="1" />
                                                </span>
                                                <!--end::Radio-->
                                                <!--begin::Info-->
                                                <span class="ms-5">
                                                    <span class="fs-4 fw-bolder text-gray-800 d-block">Percentage %</span>
                                                </span>
                                                <!--end::Info-->
                                            </label>
                                            <!--end::Option-->
                                        </div>
                                        <!--end::Col-->
                                        <!--begin::Col-->
                                        {{-- <div class="col">
                                            <!--begin::Option-->
                                            <label
                                                class="btn btn-outline btn-outline-dashed btn-outline-default d-flex text-start p-6"
                                                id="fixedControl" data-kt-button="true">
                                                <!--begin::Radio-->
                                                <span
                                                    class="form-check form-check-custom form-check-solid form-check-sm align-items-start mt-1">
                                                    <input class="form-check-input" type="radio" name="discount_type"
                                                        value="2" />
                                                </span>
                                                <!--end::Radio-->
                                                <!--begin::Info-->
                                                <span class="ms-5">
                                                    <span class="fs-4 fw-bolder text-gray-800 d-block">Fixed Value $</span>
                                                </span>
                                                <!--end::Info-->
                                            </label>
                                            <!--end::Option-->
                                        </div> --}}
                                        <!--end::Col-->
                                    </div>
                                    <!--end::Row-->
                                </div>
                                <!--end::Input group-->
                                <!--begin::Input group-->
                                <div class="d-none mb-10 fv-row" id="kt_ecommerce_add_product_discount_percentage">
                                    <!--begin::Label-->
                                    <label class="form-label">Set the discount percentage</label>
                                    <!--end::Label-->
                                    <!--begin::Slider-->
                                    <div class="d-flex flex-column text-center mb-5">
                                        <div class="d-flex align-items-start justify-content-center mb-7">
                                            <span class="fw-bolder fs-3x"
                                                id="kt_ecommerce_add_product_discount_label">0</span>
                                            <span class="fw-bolder fs-4 mt-1 ms-2">%</span>
                                        </div>
                                        <div id="kt_ecommerce_add_product_discount_slider" class="noUi-sm"></div>
                                    </div>
                                    <!--end::Slider-->
                                    <!--begin::Description-->
                                    <div class="text-muted fs-7">This will be the value of the discount in percentage.</div>
                                    <!--end::Description-->
                                </div>
                                <!--end::Input group-->
                                <!--begin::Input group-->
                                <div class="d-none mb-10 fv-row" id="kt_ecommerce_add_product_discount_fixed">
                                    <!--begin::Label-->
                                    <label class="form-label">Fixed discount amount</label>
                                    <!--end::Label-->
                                    <!--begin::Input-->
                                    <input type="text" value="{{ $couponData->discount_value }}" id="discountFixed"
                                        class="form-control mb-2" placeholder="Fixed value discount" />
                                    <!--end::Input-->
                                    <!--begin::Description-->
                                    <div class="text-muted fs-7">This amount will be deducted from the purchase price.</div>
                                    <!--end::Description-->
                                </div>
                                <!--end::Input group-->

                                <input type="hidden" name="discount_value" id="discount_value"
                                    value="{{ $couponData->discount_value }}">

                                <div class="row mt-15">
                                    <div class="col-lg-6">
                                        <div class="row">
                                            <div class="col-lg-12 mb-5">
                                                <div class="d-flex flex-stack w-lg-50">
                                                    <!--begin::Label-->
                                                    <div class="me-5">
                                                        <label class="fs-6 fw-bold form-label">First only
                                                            purchase?</label>
                                                        <div class="fs-7 fw-bold text-muted">The customer may only use it if
                                                            This is your first in-app purchase.</div>
                                                    </div>
                                                    <!--end::Label-->
                                                    <!--begin::Switch-->
                                                    <label
                                                        class="form-check form-switch form-check-custom form-check-solid">
                                                        <input class="form-check-input" type="checkbox"
                                                            name="first_purchase_only"
                                                            {{ $couponData->first_purchase_only === 1 ? 'checked' : '' }}>
                                                        <span class="form-check-label fw-bold text-muted">First
                                                            purchase</span>
                                                    </label>
                                                    <!--end::Switch-->
                                                </div>
                                            </div>
                                            <div class="col-lg-12 mb-5">
                                                <div class="d-flex flex-stack w-lg-50">
                                                    <!--begin::Label-->
                                                    <div class="me-5">
                                                        <label class="fs-6 fw-bold form-label">Active?</label>
                                                        <div class="fs-7 fw-bold text-muted">Is the coupon active?</div>
                                                    </div>
                                                    <!--end::Label-->
                                                    <!--begin::Switch-->
                                                    <label
                                                        class="form-check form-switch form-check-custom form-check-solid">
                                                        <input class="form-check-input" type="checkbox" name="status"
                                                            {{ $couponData->status === 1 ? 'checked' : '' }}>
                                                        <span class="form-check-label fw-bold text-muted">Coupom
                                                            Active?</span>
                                                    </label>
                                                    <!--end::Switch-->
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="fv-row mb-10">
                                            <!--begin::Label-->
                                            <label class="fs-6 fw-bold mb-2">Discount applied to
                                                </label>
                                            <!--End::Label-->
                                            <!--begin::Row-->
                                            <div class="row row-cols-1 row-cols-md-1 row-cols-lg-1 row-cols-xl-1 g-9"
                                                data-kt-buttons="true" data-kt-buttons-target="[data-kt-button='true']">
                                                <!--begin::Col-->
                                                <div class="col">
                                                    <!--begin:Option-->
                                                    <label class="d-flex flex-stack mb-5 cursor-pointer">
                                                        <!--begin:Label-->
                                                        <span class="d-flex align-items-center me-2">
                                                            <!--begin:Icon-->
                                                            <span class="symbol symbol-50px me-6">
                                                                <span class="symbol-label bg-light-primary">
                                                                    <!--begin::Svg Icon | path: icons/duotune/maps/map004.svg-->
                                                                    <span class="svg-icon svg-icon-1 svg-icon-primary">
                                                                        <svg xmlns="http://www.w3.org/2000/svg"
                                                                            width="24" height="24"
                                                                            viewBox="0 0 24 24" fill="none">
                                                                            <path opacity="0.3"
                                                                                d="M18.041 22.041C18.5932 22.041 19.041 21.5932 19.041 21.041C19.041 20.4887 18.5932 20.041 18.041 20.041C17.4887 20.041 17.041 20.4887 17.041 21.041C17.041 21.5932 17.4887 22.041 18.041 22.041Z"
                                                                                fill="currentColor"></path>
                                                                            <path opacity="0.3"
                                                                                d="M6.04095 22.041C6.59324 22.041 7.04095 21.5932 7.04095 21.041C7.04095 20.4887 6.59324 20.041 6.04095 20.041C5.48867 20.041 5.04095 20.4887 5.04095 21.041C5.04095 21.5932 5.48867 22.041 6.04095 22.041Z"
                                                                                fill="currentColor"></path>
                                                                            <path opacity="0.3"
                                                                                d="M7.04095 16.041L19.1409 15.1409C19.7409 15.1409 20.141 14.7409 20.341 14.1409L21.7409 8.34094C21.9409 7.64094 21.4409 7.04095 20.7409 7.04095H5.44095L7.04095 16.041Z"
                                                                                fill="currentColor"></path>
                                                                            <path
                                                                                d="M19.041 20.041H5.04096C4.74096 20.041 4.34095 19.841 4.14095 19.541C3.94095 19.241 3.94095 18.841 4.14095 18.541L6.04096 14.841L4.14095 4.64095L2.54096 3.84096C2.04096 3.64096 1.84095 3.04097 2.14095 2.54097C2.34095 2.04097 2.94096 1.84095 3.44096 2.14095L5.44096 3.14095C5.74096 3.24095 5.94096 3.54096 5.94096 3.84096L7.94096 14.841C7.94096 15.041 7.94095 15.241 7.84095 15.441L6.54096 18.041H19.041C19.641 18.041 20.041 18.441 20.041 19.041C20.041 19.641 19.641 20.041 19.041 20.041Z"
                                                                                fill="currentColor"></path>
                                                                        </svg>
                                                                    </span>
                                                                    <!--end::Svg Icon-->
                                                                </span>
                                                            </span>
                                                            <!--end:Icon-->

                                                            <!--begin:Info-->
                                                            <span class="d-flex flex-column">
                                                                <span class="fw-bolder fs-6">Purchase value</span>
                                                                <span class="fs-7 text-muted">Apply discount to the sum of product prices.</span>
                                                            </span>
                                                            <!--end:Info-->
                                                        </span>
                                                        <!--end:Label-->

                                                        <!--begin:Input-->
                                                        <span class="form-check form-check-custom form-check-solid">
                                                            <input class="form-check-input" type="radio"
                                                                name="coupon_type"
                                                                {{ $couponData->coupon_type === 1 ? 'checked' : '' }}
                                                                value="1" />
                                                        </span>
                                                        <!--end:Input-->
                                                    </label>
                                                    <!--end::Option-->
                                                </div>
                                                <!--end::Col-->
                                                <!--begin::Col-->

                                                <!--end::Col-->
                                            </div>
                                            <!--end::Row-->
                                        </div>
                                    </div>

                                </div>
                                <!--end::Card header-->
                                <!--end::Pricing-->
                            </form>
                        </div>


                    </div>
                    <!--end::Card-->
                </div>
                <!--end::Body-->

                <div class="card-footer d-flex justify-content-end py-6 px-9">
                    <button type="submit" id="kt_ecommerce_add_product_submit" class="btn btn-primary"
                        onclick="document.querySelector('#formAddCoupon').submit()">
                        <span class="indicator-label">Salvar</span>
                    </button>
                </div>

            </div>
            <!--end::Sitemap-->


        </div>
        <!--end::Container-->
    </div>
@endsection

@push('js')
    <script src="{{ asset('admin/js/coupon.js') }}"></script>
    <script>
        const editMode = true
        let discount_type = "{{ $couponData->discount_type }}"
        let discount_value = "{{ $couponData->discount_value }}"

        coupon.init()
    </script>
@endpush

@push('css')
@endpush