@extends('layouts.site.master')
@section('ordering',true)
@push('styles')
    <style>
        #order-app .gateway-card .pay-radio {
            left: 12px;
            top: 12px;
            right: auto;
            bottom: auto;
            margin: 0;
            transform: none;
        }
    </style>
@endpush
@section('content')
    <div class="container">
        <div class="row mx-0 mt-md-5 mt-0 w-100">
            @include('site.panel.sidebar')
            <div class="col-md-9 col-12 p-2" id="order-app">
                <form method="post" action="{{route('panel.order.store')}}">
                    @csrf

                    <input type="hidden" name="exchangeRate" :value="exchangeRate">
                    <input type="hidden" name="benefitPrice" :value="benefitPrice">

                    <div class="p-2 shadow-sm bg-white main-radius">
                        <div class="p-2">
                            <p class="bold side-title position-relative max-w">
                                افزودن سفارش
                            </p>
                        </div>
                        <div class="px-2" v-if="alert.show">
                            <div class="alert alert-danger mb-0 p-2 font-13 dark-gray main-radius"
                                 role="alert">
                                @{{ alert.message }}
                            </div>
                        </div>
                        <div class="row m-0 w-100">

                            {{--                                    <input value="{{$service->title}}"--}}
                            {{--                                           class="w-100 main-radius border login-input font-13"--}}
                            {{--                                           placeholder="مثلا: اشتراک بلند مدت" type="text" >--}}

                            <div class="col-4 p-2">
                                <label class="text-start w-100 font-14 mb-1 dark-gray light">
                                    خدمت انتخابی
                                </label>
                                <div class="position-relative">
                                    <select
                                        class="login-input font-13 pointer border main-radius dark-gray w-100"
                                        name="service_id"
                                        id="currencySelect"
                                        v-model="service_id"
                                        @change="fetchAccounts"
                                    >
                                        <option value="" disabled>انتخاب کنید</option>
                                        @if(@$allServices)
                                            @foreach($allServices as $allService)
                                                <option value="{{$allService->id}}">{{$allService->title}}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                    <img width="9" class="position-absolute top-0 bottom-0 end-0 my-auto me-2"
                                         src="{{asset('assets/site/img/menu-chevron.svg')}}" alt="">
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-6 col-12 p-2">
                                <label class="text-start w-100 font-14 mb-1 dark-gray light">
                                    نوع مدیریت
                                </label>
                                <div class="position-relative">
                                    <select
                                        v-model="manage_type"
                                        @change="onSettingsChange" name="management_type"
                                        class="login-input font-13 pointer border main-radius dark-gray w-100"
                                        id="manageSelect">
                                        <option value="1">با مدیریت</option>
                                        <option value="2">بدون مدیریت</option>
                                    </select>
                                    <img width="9" class="position-absolute top-0 bottom-0 end-0 my-auto me-2"
                                         src="{{asset('assets/site/img/menu-chevron.svg')}}" alt="">
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-6 col-12 p-2">
                                <label class="text-start w-100 font-14 mb-1 dark-gray light">
                                    انتخاب اکانت
                                </label>
                                <div class="position-relative">
                                    <select
                                        name="account_id"
                                        class="login-input font-13 pointer border main-radius dark-gray w-100"
                                        id="accountSelect"
                                        v-model="account_id"
                                        :disabled="accounts_loading"
                                    >
                                        <option value="new">ساخت اکانت جدید</option>

                                        <option v-if="accounts_loading" disabled>در حال دریافت اکانت‌ها...</option>

                                        <option
                                            v-for="account in accounts"
                                            :key="account.id"
                                            :value="account.id"
                                        >
                                            @{{ account.title }} - @{{ account.created_at_formatted }}
                                        </option>
                                    </select>
                                    <img width="9" class="position-absolute top-0 bottom-0 end-0 my-auto me-2"
                                         src="{{asset('assets/site/img/menu-chevron.svg')}}" alt="">
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-6 col-12 p-2">
                                <label class="text-start w-100 font-14 mb-1 dark-gray light">
                                    مبلغ شارژ
                                </label>
                                <div class="position-relative">
                                    <input
                                        :value="display_price"
                                        @input="onPriceInput"
                                        dir="ltr"
                                        class="w-100 main-radius border login-input font-13"
                                        inputmode="numeric"
                                        placeholder="۱۰۰,۰۰۰">
                                    <input type="hidden" name="cash" :value="input_price">
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-7 col-12 p-2">
                                <div class="row m-0 w-100">
                                    <div class="col-4 p-0">
                                        <label class="text-start w-100 font-14 mb-1 dark-gray light">
                                            از
                                        </label>
                                        <div class="position-relative">
                                            <select name="currency"
                                                    v-model="from_currency"
                                                    @change="onSettingsChange"
                                                    class="login-input font-13 pointer border main-radius dark-gray w-100"
                                            >
                                                <option value="">-- ارز --</option>
                                                @foreach($currencies as $currency)
                                                    <option value="{{$currency['key']}}">
                                                        {{$currency['label']}}
                                                    </option>
                                                @endforeach
                                            </select>
                                            <img width="9" class="position-absolute top-0 bottom-0 end-0 my-auto me-2"
                                                 src="{{asset('assets/site/img/menu-chevron.svg')}}" alt="">
                                        </div>
                                    </div>
                                    <div class="col-4 p-0">
                                        <label class="text-white opacity-0 w-100 font-14 mb-1 light">
                                            cv
                                        </label>
                                        <div style="height: 47.5px;" class="align-content-center">
                                            <i class="bi-arrow-left font-18 d-flex justify-content-center light-gray opacity-50"></i>
                                        </div>
                                    </div>
                                    <div class="col-4 p-0">
                                        <label class="text-start w-100 font-14 mb-1 dark-gray light">
                                            به
                                        </label>
                                        <div class="position-relative">
                                            <select
                                                class="login-input font-13 pointer border main-radius dark-gray w-100"
                                                id="exampleSelect">
                                                <option selected value="1">تومان</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-5 col-12 p-2">
                                <label class="text-white w-100 font-14 mb-1 d-lg-block d-none light">
                                    cv
                                </label>
                                <p class="m-0 align-content-center text-center font-14 border main-radius"
                                   style="height: 47.5px;">
                                    <span v-if="loading">در حال محاسبه...</span>
                                    <span v-else class="bold mint-green ms-1 font-12">
                                    @{{ converted_price }}
                                </span>
                                </p>
                            </div>
                            <div class="col-12 p-2">
                                <label class="text-start w-100 font-14 mb-1 dark-gray light">
                                    توضیحات <span class="mint-green">(اختیاری)</span>
                                </label>
                                <textarea placeholder="نوشتن توضیحات..." name="description" rows="3"
                                          class="w-100 main-radius border login-input font-13" id=""></textarea>
                            </div>
                        </div>
                        <div class="p-2">
                            <p class="bold side-title position-relative max-w">
                                نحوه پرداخت
                            </p>
                        </div>
                        <div class="row m-0 w-100">
                            <div class="col-6 p-2">
                                <label class="bg-body pointer w-100 border pay-bef-af main-radius p-3 position-relative"
                                       for="radioOption1">
                                    <i class="bi-globe Charcoal-gray fs-3 d-flex justify-content-center"></i>
                                    <p class="mt-3 mb-0 font-14 Charcoal-gray text-center">
                                        پرداخت اینترنتی
                                    </p>
                                    <br>
                                    <input checked class="pay-radio" type="radio" id="radioOption1" value="online"
                                           name="paymentMethod">
                                </label>
                            </div>
                            <div class="col-6 p-2">
                                <label class="bg-body pointer w-100 border pay-bef-af main-radius p-3 position-relative"
                                       for="radioOption2">
                                    <i class="bi-credit-card Charcoal-gray fs-3 d-flex justify-content-center"></i>
                                    <p class="mt-3 mb-0 font-14 Charcoal-gray text-center">
                                        کارت به کارت
                                    </p>
                                    <br>
                                    <input class="pay-radio" type="radio" id="radioOption2" value="cart"
                                           name="paymentMethod">
                                </label>
                            </div>
                            <div class="col-12 p-2" v-if="payment_method === 'online'">
                                <label class="text-start w-100 font-14 mb-2 dark-gray light">
                                    انتخاب درگاه پرداخت
                                </label>
                                <div class="row m-0 w-100">
                                    <div class="col-md-3 col-sm-6 col-12 p-2" v-for="gateway in gateway_options" :key="gateway.value">
                                        <label class="gateway-card bg-body pointer w-100 border pay-bef-af main-radius p-3 position-relative d-flex flex-column align-items-center justify-content-center"
                                               :for="'gateway_' + gateway.value">
                                            <img :src="gateway.logo" :alt="gateway.label" style="height:48px; object-fit:contain;">
                                            <p class="mt-2 mb-0 font-13 Charcoal-gray text-center">
                                                @{{ gateway.label }}
                                            </p>
                                            <input class="pay-radio" type="radio"
                                                   :id="'gateway_' + gateway.value"
                                                   :value="gateway.value"
                                                   name="payment_gateway"
                                                   v-model="payment_gateway">
                                        </label>
                                    </div>
                                </div>
                                <p class="font-12 text-danger mb-0" v-if="!payment_gateway">
                                    لطفا یک درگاه پرداخت انتخاب کنید.
                                </p>
                            </div>
                            <div class="col-md-3 col-12 p-2 ms-auto">
                                <button
                                    class="first-page-btn-component w-100 d-flex justify-content-center py-2 font-14 text-white main-radius btn-dark-gray"
                                    type="submit">
                                    پرداخت
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{asset('assets/admin/js/axios.min.js')}}"></script>
    <script src="{{asset('assets/admin/js/vue.js')}}"></script>

    <script>
        new Vue({
            el: "#order-app",
            data: {
                input_price: "{{ (string) request('cash', '') }}",
                display_price: "",
                from_currency: "{{ (string) request('currency', '') }}",
                manage_type: "{{ in_array((string) request('manage_type', '2'), ['1', '2'], true) ? (string) request('manage_type', '2') : '2' }}",
                converted_price: "ابتدا ارز را انتخاب کنید",
                loading: false,
                debounceTimer: null,
                exchangeRate: "",
                benefitPrice: "",

                service_id: "{{ $service->id ?? '' }}",
                account_id: "new",
                accounts: [],
                accounts_loading: false,
                payment_method: "online",
                payment_gateway: "{{ old('payment_gateway', ($paymentGateways[0]->bank_type ?? '')) }}",
                gateway_options: @json($gatewayOptions ?? []),

                alert: {
                    show: false,
                    message: ""
                }
            },
            methods: {
                formatNumber(value) {
                    if (!value) return "";
                    return Number(value).toLocaleString('fa-IR');
                },
                showAlert(msg) {
                    this.alert.message = msg;
                    this.alert.show = true;
                },
                clearAlert() {
                    this.alert.show = false;
                    this.alert.message = "";
                },
                onPriceInput(e) {
                    this.clearAlert();
                    let raw = e.target.value;
                    raw = raw.replace(/[۰-۹]/g, d => '۰۱۲۳۴۵۶۷۸۹'.indexOf(d));
                    raw = raw.replace(/[^0-9]/g, '');
                    if (!raw) {
                        this.input_price = "";
                        this.display_price = "";
                        this.converted_price = "ابتدا ارز را انتخاب کنید";
                        return;
                    }
                    if (raw.length > 1 && raw.startsWith('0')) {
                        raw = raw.substring(1);
                    }
                    this.input_price = raw;
                    this.display_price = this.formatNumber(raw);

                    this.$forceUpdate();
                    this.debouncedCalculate();
                },
                onSettingsChange() {
                    this.clearAlert();
                    if (!this.from_currency) {
                        this.converted_price = "ابتدا ارز را انتخاب کنید";
                        this.showAlert("لطفا ارز را انتخاب کنید");
                        return;
                    }
                    if (!this.input_price) {
                        this.converted_price = "ابتدا ارز را انتخاب کنید";
                        this.showAlert("لطفا مقدار یا مبلغ ارز را وارد کنید");
                        return;
                    }
                    this.calculatePrice();
                },
                debouncedCalculate() {
                    if (this.debounceTimer) clearTimeout(this.debounceTimer);
                    this.debounceTimer = setTimeout(() => {
                        this.validateAndCalculate();
                    }, 800);
                },
                validateAndCalculate() {
                    if (!this.input_price) return;
                    if (!this.from_currency) {
                        this.converted_price = "ابتدا ارز را انتخاب کنید";
                        this.showAlert("لطفا ارز را انتخاب کنید");
                        return;
                    }

                    this.calculatePrice();
                },
                async fetchAccounts() {
                    if (!this.service_id) return;

                    this.accounts_loading = true;
                    this.accounts = [];
                    this.account_id = "new";

                    try {
                        const response = await axios.post("{{ route('panel.order.getAccounts') }}", {
                            service_id: this.service_id
                        });

                        this.accounts = response.data;

                    } catch (error) {
                        console.error(error);
                        this.showAlert("خطا در دریافت لیست اکانت‌ها");
                    } finally {
                        this.accounts_loading = false;
                    }
                },
                async calculatePrice() {
                    this.loading = true;
                    this.converted_price = "در حال محاسبه...";
                    try {
                        const response = await axios.post(
                            "{{ route('panel.order.calculatePrice') }}",
                            {
                                inputPrice: this.input_price,
                                currency: this.from_currency,
                                manage_type: this.manage_type
                            }
                        );

                        if (response.data.status === 'error') {
                            Swal.fire({
                                icon: 'error',
                                title: 'خطا',
                                text: response.data.message,
                                showCancelButton: false,
                                showConfirmButton: false,
                                toast: true,
                                position: 'top-right',
                                timer: 5000
                            });

                        } else if (!response.data.price || response.data.price <= 0) {
                            Swal.fire({
                                icon: 'error',
                                title: 'خطا',
                                text: 'مبلغ محاسبه‌شده نامعتبر است',
                                showCancelButton: false,
                                showConfirmButton: false,
                                toast: true,
                                position: 'top-right',
                                timer: 5000
                            });
                            // this.showAlert("مبلغ محاسبه‌شده نامعتبر است");
                            this.converted_price = "ابتدا ارز را انتخاب کنید";
                            return;
                        }

                        this.converted_price = this.formatNumber(response.data.price) + " تومان";
                        this.exchangeRate = response.data.exchange_rate;
                        this.benefitPrice = response.data.benefit_price;

                    } catch (e) {
                        let msg = "خطا در برقراری ارتباط با سرور";
                        if (e.response && e.response.data && e.response.data.message) {
                            msg = e.response.data.message;
                        }
                        this.showAlert(msg);
                        this.converted_price = "ابتدا ارز را انتخاب کنید";
                    } finally {
                        this.loading = false;
                    }
                },
                submitOrder() {
                    if (!this.from_currency) {
                        this.showAlert("لطفا ارز را انتخاب کنید");
                        return;
                    }
                    if (!this.input_price) {
                        this.showAlert("لطفا مقدار یا مبلغ ارز را وارد کنید");
                        return;
                    }
                    alert("ارسال فرم...");
                }
            },
            watch: {
                payment_method(newValue) {
                    if (newValue !== 'online') {
                        this.payment_gateway = '';
                    } else if (!this.payment_gateway) {
                        this.payment_gateway = this.gateway_options.length ? this.gateway_options[0].value : '';
                    }
                }
            },
            mounted() {
                if (this.input_price) {
                    this.display_price = this.formatNumber(this.input_price);
                }

                const serviceSelect = document.getElementById('currencySelect');
                if (serviceSelect && serviceSelect.value) {
                    this.service_id = serviceSelect.value;
                    this.fetchAccounts();
                }

                if (this.input_price && this.from_currency) {
                    this.calculatePrice();
                }

                const selectedPaymentMethod = document.querySelector('input[name="paymentMethod"]:checked');
                if (selectedPaymentMethod) {
                    this.payment_method = selectedPaymentMethod.value;
                }

                document.querySelectorAll('input[name="paymentMethod"]').forEach((el) => {
                    el.addEventListener('change', (event) => {
                        this.payment_method = event.target.value;
                    });
                });
            }
        });
    </script>
@endpush