@extends("agentportal.layouts.layout")

@section("title", trans("message_lang.LBL_OPERATOR_PRODUCT"))

@section("content")
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <!--begin::Entry-->
    <div class="d-flex flex-column-fluid">
        <!--begin::Container-->
        <div class="container">
            <!--begin::Card-->
            <div class="card card-custom">
                <div class="card-header">
                    <div class="card-title">
                        <h3 class="card-label">{!! trans("message_lang.LBL_OPERATOR_PRODUCT") !!}</h3>
                    </div>
                    <div class="card-toolbar">
                        <a href="{{ route('agentportal.multiservice-configs.view-operator', [base64_encode($operator->id)]) }}" class="btn btn-sm btn-primary">
                            {!! trans('message_lang.BTN_BACK') !!}
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <!--begin: product form -->
                    <form action="{{ route('agentportal.multiservice-configs.store-operator-product') }}" id="productAddForm" method="POST">
                        @csrf

                        <!-- hidden operator and country code fields -->
                        <div>
                            <input type="text" name="countryCode" id="countryCode" value="{{ $operator->countryCode }}" hidden>
                            <input type="number" name="operatorId" id="operatorId" value="{{ $operator->id }}" hidden>
                        </div>

                        <!-- product id -->
                        <div class="form-row mb-4">
                            <div class="col-12 col-lg-6">
                                <select name="productId" id="productId" class="form-control">
                                    <option value="">{!! trans('message_lang.LBL_SELECT_PRODUCT') !!}</option>
                                </select>
                                @error('productId')
                                    <span class="invalid-feedback" style="display: block" role="alert">
                                        {{ $message }}
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <!-- product details display -->
                        <div class="form-row mb-4" id="productDetailsHolder" style="display: none">
                            <div class="col-12 col-lg-6 border border-rounded mb-4 p-3">
                                <h6>{!! trans('message_lang.LBL_PRODUCT_DETAILS') !!}</h6>
                                <table class="table table-borderless table-sm">
                                    <tbody id="productDetailsTbl">
                                        <tr>
                                            <td colspan="2" style="text-align: center">
                                                {!! trans('message_lang.LBL_NO_PRODUCTS') !!}
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="form-row mb-4">
                            <div class="col-12">
                                <button type="submit" class="btn btn-sm btn-primary" id="storeProductBtn">
                                    {!! trans('message_lang.BTN_SAVE') !!}
                                    <span id="storeProductBtnLoader"></span>
                                </button>
                            </div>
                        </div>
                    </form>
                    
                    <!--end: product form-->
                </div>
            </div>
            <!--end::Card-->
        </div>
        <!--end::Container-->
    </div>
    <!--end::Entry-->
</div>
@endsection

@section("page_script")
    <script type="text/javascript">
    $(document).ready(() => {
        // get the operator product details
        const operatorProducts = @json($operatorProducts->products ?? []);
        const operatorCurrency = @json($operatorProducts->currency ?? []);

        // extract the object values
        const products = Object.values(operatorProducts);
        const currencies = Object.values(operatorCurrency);

        // set the products selector
        setOperatorSelector(products);

        // set a change event to update the product details space
        $("#productId").change(() => {
            // get the selected product id
            let productId = $("#productId").val();
            showSelectedProductDetails(productId, products, currencies);
        })
    })

    function setOperatorSelector(operatorProducts)
    {
        let listStr = `<option value="">{!! trans('message_lang.LBL_SELECT_PRODUCT') !!}</option>`;
        if(operatorProducts && operatorProducts.length) {
            // update the list
            operatorProducts.map(product => {
                listStr += `<option value="${product.id}">${product.name}</option>`;
            });
        }

        // set the updated option list
        $("#productId").html(listStr);
        return;
    }

    function showSelectedProductDetails(productId, products, currencies)
    {
        // hide the product details
        $("#productDetailsHolder").hide();

        // check for the product
        const productInfo = products && products.length ? products.filter(val => val.id == productId)[0] : [];

        // update the table list
        let tblStr = `<tr>
                            <td colspan="2" style="text-align: center">
                                no details found
                            </td>
                        </tr>`;

        if(productInfo)
        {
            tblStr = ``;
            let priceType = productInfo.priceType;
            let max_price = priceType == "fixed" ? productInfo.price.operator : productInfo.price.max.operator;
            let min_price = priceType == "fixed" ? productInfo.price.operator : productInfo.price.min.operator;
            let currency = currencies.length ? currencies[0] : "";
            tblStr += `<tr>
                            <td>{!! trans('message_lang.LBL_PRODUCT_ID') !!}:</td>
                            <td>
                                <strong>${productInfo.id}</strong>
                            </td>
                        </tr>
                        <tr>
                            <td>{!! trans('message_lang.LBL_PRODUCT_NAME') !!}:</td>
                            <td>
                                <strong>${productInfo.name}</strong>
                            </td>
                        </tr>
                        <tr>
                            <td>{!! trans('message_lang.LBL_PRODUCT_PRICE') !!}:</td>
                            <td>
                                <strong>${min_price} ${priceType == 'range' ? "- " + max_price : ""} (${currency})</strong>
                            </td>
                        </tr>
                        <tr>
                            <td>{!! trans('message_lang.LBL_PRODUCT_PRICE_TYPE') !!}:</td>
                            <td>
                                <strong>${priceType}</strong>
                            </td>
                        </tr>
                        <tr>
                            <td>{!! trans('message_lang.LBL_PRODUCT_CATEGORY') !!}:</td>
                            <td>
                                <strong>${productInfo.productCategory.name}</strong>
                            </td>
                        </tr>
                        <tr>
                            <td>{!! trans('message_lang.LBL_PRODUCT_TYPE') !!}:</td>
                            <td>
                                <strong>${productInfo.productType.name}</strong>
                            </td>
                        </tr>`;
        }

        // update the info on the table
        $("#productDetailsTbl").html(tblStr);
        $("#productDetailsHolder").fadeIn('slow');
    }

    </script>
@endsection