@extends("web.layouts.master")
@section("content")
    <section class="height-auto text-center background-light-grey">
        <div class="container pos-vertical-center">
            <div class="row">
                <div class="col-12 col-md-8 text-left">
                    <div class="row">
                        <div class="col-12 col-md-12" data-aos="fade-up" data-aos-duration="1000">
                            <div class="feature custom-feature p-0">
                                <div class="p-5 text-center">
                                    <p class="font-size-24 text-dark-grey Font-Manrope-ExtraBold mb-0 text">Upload Payment Proof</p>
                                    <p class="my-4 text-center background-light-red px-5 py-3 mx-5" style="border-radius: 10px;">
                                        <span class="font-size-14 text-dark-grey Font-Manrope-ExtraBold mb-0 text">IMPORTANT ! <span class="Font-Manrope-Regular">Please transfer according the total amount below</span></span>
                                    </p>
                                </div>


                                <div class="custom-dashed-line" style="padding-top: 2px;"></div>
                                <div class="background-light-red text-center p-5">
                                    <p class="font-size-18 text-dark-grey Font-Manrope-Bold mb-5">Total Payment</p>
                                    <p class="font-size-48 text-dark-grey Font-Manrope-ExtraBold mb-5">{{ GeneralHelper::transformAmount($transaction->total) }}</p>
                                    <p class="font-size-18 text-dark-grey Font-Manrope-Bold mb-3">Order ID : {{ $transaction->order_id }}</p>
                                    <p class="font-size-12 text-dark-grey Font-Manrope-Light mb-0">After you have made your payment, please notify us by upload your payment proof</p>
                                    <p class="font-size-12 text-dark-grey Font-Manrope-Bold mb-0">Please note that order will be automatically cancelled after 24 hours if you don't fill this payment confirmation form</p>
                                </div>
                                <div class="custom-dashed-line"></div>

                                <div class="mt-4 p-5">
                                    <p class="font-size-24 text-dark-grey Font-Manrope-ExtraBold text-center">Account Information</p>

                                    <hr />
                                    <div class="row">
                                        <div class="col-3 col-md-3">
                                            <img src="{{ asset("web/assets/icons/bank_bni.png") }}" style="width: 150px; height: 50px;"/>
                                        </div>
                                        <div class="col-5 col-md-5 p-3">
                                            <p class="font-size-16 text-dark-grey Font-Manrope-SemiBold">{{ $bankInformation->bank_name }} Bank Transfer</p>
                                        </div>
                                        <div class="col-4 col-md-4 text-right">
                                            <p class="font-size-16 text-dark-grey Font-Manrope-Regular mb-1">Account Number</p>
                                            <p class="font-size-18 text-dark-grey Font-Manrope-Bold">{{ $bankInformation->bank_account_number }}</p>
                                        </div>
                                    </div>
                                    <hr />

                                    <p class="font-size-16 text-dark-grey Font-Manrope-Regular mb-1">Name</p>
                                    <p class="font-size-16 text-dark-grey Font-Manrope-ExtraBold">{{ $bankInformation->bank_account_name }}</p>

                                    <p class="font-size-16 text-dark-grey Font-Manrope-Regular mb-1">Branch</p>
                                    <p class="font-size-16 text-dark-grey Font-Manrope-ExtraBold">{{ $transaction->location->address }}</p>
                                </div>
                                <form id="form-upload-payment-proof" action="{{ route("web.order.payment-confirmation.store") }}" method="POST">
                                    <input type="hidden" name="order_id" value="{{ $transaction->order_id }}"/>
                                    <div class="background-pink p-5 ml-5 mr-5" style="border-radius: 20px;">
                                        <p class="font-size-16 text-dark-grey Font-Manrope-Regular mb-1">Transaction Date</p>
                                        <p class="font-size-16 text-dark-grey Font-Manrope-ExtraBold mb-5">{{ GeneralHelper::convertDateFormat($transaction->transaction_date) }}</p>
                                        <div class="custom-dashed-line"></div>
                                        <div class="form-group" style="margin-bottom: 60px;">
                                            <label class="font-size-16 text-dark-grey Font-Manrope-ExtraBold mb-2">Bank Name <span style="color: red;">*</span></label>
                                            <div class="mb-4">
                                                <select class="custom-select2" name="bank_code">
                                                    <option value="bca">BCA</option>
                                                    <option value="bni">BNI</option>
                                                    <option value="mandiri">Mandiri</option>
                                                    <option value="permata">Permata</option>
                                                    <option value="maybank">MayBank</option>
                                                    <option value="btn">BTN</option>
                                                    <option value="panin">Panin</option>
                                                    <option value="danamon">Danamon</option>
                                                    <option value="ocbc_nisp">OCBC NISP</option>
                                                    <option value="bri">BRI</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="custom-dashed-line"></div>
                                        <div class="form-group">
                                            <label class="font-size-16 text-dark-grey Font-Manrope-ExtraBold mb-2">Bank Account Name  <span style="color: red;">*</span></label>
                                            <div class="custom-big-input-container background-white mb-5">
                                                <input type="text" name="sender_name" class="font-size-14 text-dark-grey Font-Manrope-Light custom-big-input-field form-control" placeholder="Enter your Bank Account Name" />
                                            </div>
                                        </div>
                                        <div class="custom-dashed-line"></div>
                                        <div class="form-group text-center">
                                            <label class="font-size-18 text-dark-grey Font-Manrope-Bold">Upload Payment Proof <span style="color: red;">*</span></label>
                                            <p class="font-size-14 text-dark-grey Font-Manrope-Light">Please upload your payment proof to speed up the payment verification process.</p>

                                            <div>
                                                <img id="cropped-image-preview" src="{{ $attachment->image_url ?? asset("web/assets/upload-payment-proof-placeholder.png") }}" alt="Image"/>
                                                <input type="file" id="upload-image-input" class="hidden" accept="image/*">
                                                <br>
                                                <p class="font-size-14 text-dark-grey Font-Manrope-Light">You may upload up to 3MB in PNG, JPG or JPEG format.</p>

                                                <div class="row">
                                                    <div class="col-12 col-md-12">
                                                        <div class="row">
                                                            <div class="col-3 col-md-4"></div>
                                                            <div class="col-6 col-md-4">
                                                                <a id="upload-image-btn" class="btn custom-wrap-content-btn custom-btn-secondary" href="#">
                                                                    <span class="btn__text font-size-18 Font-Manrope-Bold">
                                                                        <img src="{{ asset("web/assets/icons/upload-icon.png") }}" style="margin-top: 0px; margin-right: 5px; width: 20px; height: 18px" class="mb-1"/>
                                                                        Upload
                                                                    </span>
                                                                </a>
                                                            </div>
                                                            <div class="col-3 col-md-4"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row my-5">
                                        <div class="col-12 col-md-12">
                                            <div class="row">
                                                <div class="col-12 col-md-2"></div>
                                                <div class="col-12 col-md-8 text-center">
                                                    <a id="delete-btn" class="btn custom-btn custom-btn-outline-danger type--uppercase mb-0" href="#">
                                                        <span class="btn__text font-size-18 Font-Manrope-ExtraBold">
                                                            Delete
                                                        </span>
                                                    </a>

                                                    <a id="submit-btn" class="btn custom-btn custom-btn-danger type--uppercase" href="#">
                                                        <span class="btn__text font-size-18 Font-Manrope-ExtraBold">
                                                            Submit
                                                            <img src="{{ asset("web/assets/icons/chevron-right.png") }}" style="margin-top: -3px; margin-right: 10px;" class="mb-1"/>
                                                        </span>
                                                    </a>
                                                </div>
                                                <div class="col-12 col-md-2"></div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--end of row-->
        </div>
        <!--end of container-->
    </section>
    @include("web.components.crop-image-modal", [
        "modalIndex" => 0
    ])
    @include("web.components.modal-with-loading-icon", [
        "modalIndex" => 1
    ])
    @include("web.components.cancelable-notification-modal", [
        "modalIndex" => 2
    ])
@endsection
@push("stackJs")
    <script>
        $(document).ready(function () {
            var $uploadImageBtn = $("#upload-image-btn");
            var $uploadImageInput = $("#upload-image-input");
            var $triggerCropImageModalBtn = $("#trigger-crop-image-modal-btn");
            var $cropAndSaveImageBtn = $("#crop-and-save-image-btn");
            var $croppedImagePreview = $("#cropped-image-preview");
            var $closeCropImageModalBtn = $("#close-crop-image-modal-btn");
            var $cropImageContainer = $('#crop-image-container').croppie({
                enableExif: true,
                viewport: {
                    width: 200,
                    height: 200,
                    type: 'square'
                },
                boundary: {
                    width: 300,
                    height: 300
                }
            });

            $uploadImageBtn.on("click", function (e) {
                e.preventDefault();
                $uploadImageInput.trigger("click");
            });

            var filename = null;
            $uploadImageInput.on("change", function (e) {
                filename = e.target.files[0].name;

                var reader = new FileReader();
                reader.onload = function (event) {
                    $cropImageContainer.croppie("bind", {
                        url: event.target.result
                    }).then(function () {
                        $triggerCropImageModalBtn.trigger("click");
                    });
                };

                reader.readAsDataURL(this.files[0]);
            });

            $cropAndSaveImageBtn.on("click", function (e) {
                e.preventDefault();

                showModalWithLoadingIcon();
                $cropImageContainer.croppie("result", {
                    "type": "canvas",
                    "size": "viewport"
                }).then(function (response) {
                    $closeCropImageModalBtn.trigger("click");
                    $croppedImagePreview.attr("src", response);

                    $.ajax({
                        url: "{{ route("web.order.upload-payment-proof") }}",
                        method: "POST",
                        data: {
                            "transaction_uuid": "{{ $transaction->uuid }}",
                            "user_uuid": "{{ Auth::user()->uuid }}",
                            "filename": filename,
                            "base64": response
                        },
                        success: function (res) {
                            hideModalWithLoadingIcon();
                            isUploaded = res.success;

                            if (res.success) {

                                showCancelableModalNotification({
                                    "title": "Order Receipt",
                                    "message": "Your order receipt has been saved successfully."
                                });
                            } else {
                                showCancelableModalNotification({
                                    "title": "Order Receipt",
                                    "message": "#0 Failed to save order receipt."
                                });
                            }
                        },
                        error: function (res) {
                            isUploaded = false;
                            hideModalWithLoadingIcon();

                            showCancelableModalNotification({
                                "title": "Order Receipt",
                                "message": "#1 Failed to save order receipt."
                            });
                        }
                    });
                });
            });

            $closeCropImageModalBtn.on("click", function () {
                $uploadImageInput.val("");
            });

            var $deleteBtn = $("#delete-btn");
            var $submitBtn = $("#submit-btn");
            var $formUploadPaymentProof = $("#form-upload-payment-proof");
            var isUploaded = false;

            $deleteBtn.on("click", function (e) {
                e.preventDefault();

                $uploadImageInput.val("");
                isUploaded = false;
                $croppedImagePreview.attr("src", "{{ asset("web/assets/upload-payment-proof-placeholder.png") }}");
            });

            $submitBtn.on("click", function (e) {
                e.preventDefault();

                if (! isUploaded) {
                    showCancelableModalNotification({
                        "message": "Payment Proof is required."
                    });
                } else {
                    var serializeArray = $formUploadPaymentProof.serializeArray();

                    var data = {};
                    for (var key in serializeArray) {
                        var obj = serializeArray[key];
                        data[obj.name] = obj.value;
                    }

                    showModalWithLoadingIcon();
                    $.ajax({
                        url: "{{ route("web.order.payment-confirmation.store") }}",
                        method: "POST",
                        data: data,
                        success: function (res) {
                            hideModalWithLoadingIcon();

                            if (res.success) {
                                window.location = res.redirect_url;
                            } else {
                                showCancelableModalNotification({
                                    "message": res.message
                                });
                            }
                        },
                        error: function (err) {
                            hideModalWithLoadingIcon();

                            showCancelableModalNotification({
                                "message": err.message
                            });
                        }
                    });
                }
            });
        });
    </script>
@endpush