@extends("agentportal.layouts.layout")

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

@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_ADD_OPERATOR") !!}</h3>
                    </div>
                </div>
                <div class="card-body">
                    <!-- operator form start -->
                    <form id="saveOperatorForm" action="{{ route('agentportal.multiservice-configs.store-operator') }}" method="post" enctype="multipart/form-data">
                        @csrf

                        <!-- operator country -->
                        <div class="form-row mb-4">
                            <div class="col-12 col-lg-4">
                                <label for="countryCode">{!! trans('message_lang.LBL_COUNTRY') !!}</label>
                                <select name="countryCode" id="countryCode" class="form-control">
                                    <option value="">{{ trans('message_lang.LBL_SELECT_COUNTRY') }}</option>
                                    @foreach ($countries as $country)
                                        <option value="{{ $country->sortname }}" @if (old('countryCode') == $country->sortname) selected @endif>{{ $country->name }}</option>
                                    @endforeach
                                </select>
                                @error('countryCode')
                                    <span class="invalid-feedback" role="alert" style="display: block">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

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

                        <div class="form-row mb-4">
                            <div class="col-12 col-lg-6">
                                <label for="operatorLogo">{{ __('message_lang.LBL_LOGO') }} <span style="color:red;">*</span></label>
                                <div class="custom-file">
                                    <input class="custom-file-input" id="operatorLogo" name="operatorLogo" type="file" onchange="readURL(this);">
                                    <label class="custom-file-label" for="operatorLogo">{{ __('message_lang.CHOOSE_FILE') }}</label>
                                </div>
                                <small class="form-text text-muted">{{ __('message_lang.JPG_PNG_MAX_FILE_SIZE') }}</small>
    
                                @error('operatorLogo')
                                    <span class="invalid-feedback" style="display: block;" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
    
                                <div class="row">
                                    <div class="col-md-6">
                                        @if(isset($operators) && $operators->logoUrl != '')
                                            <img onerror="this.onerror=null;this.src='{{ URL::to('/') }}/public/uploads/default/100_no_img.jpg';" src="{{ URL::to('/') }}/img/{{ $sending_company->logo_file_storage_location }}"
                                            style="height: auto; width: 100%;">
                                        @else
                                            <img onerror="this.onerror=null;this.src='{{ URL::to('/') }}/public/uploads/default/100_no_img.jpg';" src="{{ URL::to('/') }}/public/uploads/default/100_no_img.jpg" style="height: 200px; width: 200px;">
                                        @endif
                                    </div>
                                    <div class="col-md-6">
                                        <img id="operatorLogo_preview" src="" alt="" />
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-row mb-4">
                            <div class="col-12">
                                <button type="button" class="btn btn-primary mr-1" id="saveOperator">
                                    {!! trans('message_lang.BTN_SAVE') !!}
                                    <span id="saveOperatorSpinner"></span>
                                </button>
                                <a href="{{ route("agentportal.multiservice-configs.index") }}" type="button" class="btn btn-light" id="cancel">
                                    {!! trans('message_lang.BUTTON_CANCEL') !!}
                                </a>
                            </div>
                        </div>

                    </form>
                    <!-- operator form end -->
                </div>
            </div>
            <!--end::Card-->
        </div>
        <!--end::Container-->
    </div>
    <!--end::Entry-->
</div>
@endsection

@section("page_script")
<script type="text/javascript">
    $(document).ready(() => {
        $("#countryCode").trigger("change");
    });

    $("#countryCode").change(() => {
        const countryCode = $("#countryCode").val();
        // set the operators for the selected country
        if(!countryCode) return;
        let url = "{{ route('agentportal.multiservice-configs.getPartnerOperators') }}";
        let data = {
            country: countryCode,
            _token: "{{csrf_token()}}"
        }

        postRequest(url, data).then(res => {
            setOperatorsList(res.data);
        })
        .catch(e => {
            const failedResponse = e.responseJSON;
            setOperatorsList(failedResponse.data);
        })
    })

    function setOperatorsList(operatorsData){
        const operators = Object.values(operatorsData);
        let operatorsList = "<option value=''>{!! trans('message_lang.LBL_SELECT_OPERATOR') !!}</option>"
        if(!operators || operators.length == 0) {
            alert("No operators found for the selected county");
            return operatorsList;
        }

        // set the operators
        operators.map(operator => {
            operatorsList += `<option value="${operator.id}">${operator.name}</option>`
        });

        // update the view with the country operators
        $("#operatorId").html(operatorsList);
    }

    async function postRequest(url, data)
    {
        return $.ajax({
            url: url,
            type: "POST",
            dataType: "json",
            data: data,
            success: (res) => {
                return res;
            }
        })
    }

    function readURL(input)
    {
        if (input.files && input.files[0])
        {
            var reader = new FileReader();

            reader.onload = function (e)
            {
                $('#operatorLogo_preview').attr('src', e.target.result);
            }

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

    $("#saveOperator").click(() => {
        // init a loader
        $("#saveOperator").prop("disabled", true);
        $("#saveOperatorSpinner").addClass("spinner spinner-border-sm");

        // submit the update operator form
        $("#saveOperatorForm").trigger("submit");
    });

</script>
@endsection