@extends("sendingpartner.layouts.layout")

@section("title", "Edit Recipient")

@section("page_style")
<link rel="stylesheet" type="text/css" href="{{ url('css/select2.min.css') }}">
<style type="text/css">
    .select2-container--default .select2-selection--single {
        min-height: 38px;
        max-height: 38px;
    }
</style>
@endsection

<div id="loading"  style="display:none;">
    <div id="image-loader">
        <img  src="{{ url('img/loading.gif')}}" alt="Loading..." />
    </div>
</div>

@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">
            <div class="row">
                <div class="col-lg-12">
                    <!--begin::Card-->
                    <div class="card card-custom gutter-b example1 example1-compact">
                        <div class="card-header">
                            <h3 class="card-title">
                                {!! trans("message_lang.LBL_IMPORT_RECIPIENT_EDITION") !!}
                            </h3>
                        </div>
                        <!--begin::Form-->
                        <form method="post" name="form" id="form" action="{{ url('sendingpartner/batches/store-batch-item') }}" enctype="multipart/form-data" autocomplete="off">
                            @csrf
                            <input type="hidden" name="batch_id" value="{{ @base64_encode($batchId) }}" />
                            <input type="hidden" name="batch_item_id" value="{{ @$item->id }}" />
                            <div class="card-body">
                                <div class="form-group row">
                                    <div class="col-md-6">
                                        <label class="" for="firstname">{!! trans("message_lang.LBL_FIRST_NAME") !!} <span style="color:red;">*</span></label>
                                        <input type="text" name="firstname" placeholder="{!! trans("message_lang.LBL_FIRST_NAME") !!}" value="{{ old('firstname', @$item->firstname) }}" id="firstname" class="form-control"/>
                                        {{-- <span class="err_firstname" style="color: red; display: none;">Please enter Firstname</span> --}}
                                        @error('firstname')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>

                                    <div class="col-md-6">
                                        <label class="" for="lastname">{!! trans("message_lang.LBL_LAST_NAME") !!} <span style="color:red;">*</span></label>
                                        <input type="text" name="lastname" placeholder="{!! trans("message_lang.LBL_LAST_NAME") !!}" value="{{ old('lastname', @$item->lastname) }}" id="lastname" class="form-control" />
                                        {{-- <span class="err_lastname" style="color: red; display: none;">Please enter Lastname</span> --}}
                                        @error('lastname')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <div class="col-md-6">
                                        <label class="" for="phone_no">{!! trans("message_lang.LBL_PHONE_NUMBER") !!} <span style="color:red;">*</span></label>
                                        <input type="text" name="phone_no" placeholder="{!! trans("message_lang.LBL_PHONE_NUMBER") !!}" value="{{ old('phone_no', @$item->phone_no) }}" id="phone_no" class="form-control" />
                                        {{-- <span class="err_phone_no" style="color: red; display: none;">Please enter Phone Number</span> --}}
                                        @error('phone_no')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label class="" for="email">{!! trans("message_lang.LBL_EMAIL") !!} </label>
                                        <input type="text" name="email" placeholder="{!! trans("message_lang.LBL_EMAIL") !!}" value="{{ old('email', @$item->email) }}" id="email" class="form-control" />
                                        @error('email')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <div class="col-md-6">
                                        <label class="" for="country_code">{!! trans("message_lang.LBL_RECEIVER_COUNTRY") !!} <span style="color:red;">*</span></label>
                                        <select class="form-control" name="country_code" id="country_code"  autocomplete="country_code" >
                                            <option value="" {{ old('country_code', @$item->country_code) == "" ? 'selected' : '' }} data-currency="">{{ __('message_lang.LBL_SELECT_COUNTRY') }}</option>
                                            @foreach ($destCountries as $country)
                                                <option value="{{ $country->sending_country->country_code }}" {{ old('country_code', @$item->country_code) == $country->sending_country->country_code ? 'selected' : '' }} data-currency={{ $country->currency }}>{{ $country->sending_country->country_name }}</option>
                                            @endforeach
                                        </select>
                                        {{-- <span class="err_country_code" style="color: red; display: none;">Please select Country</span> --}}
                                        @error('country_code')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>

                                    <div class="col-md-6">
                                        <label for="currency">{{ __('message_lang.LBL_RECEIVING_CURRENCY') }} <span style="color:red;">*</span></label>
                                        <select class="form-control" name="currency" id="currency" autocomplete="currency">
                                            @if(isset($item))
                                                <option value="{!! $item->currency !!}"> {!! $item->currency !!}</option>
                                            @endif
                                        </select>
                                        {{-- <span class="err_currency" style="color: red; display: none;">Please select Currency</span> --}}
                                        @error('currency')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <div class="col-md-6">
                                        <label class="" for="amount">{!! trans("message_lang.LBL_AMOUNT") !!} <span style="color:red;">*</span></label>
                                        <input type="number" name="amount" placeholder="{!! trans("message_lang.LBL_AMOUNT") !!}" value="{{ old('amount', @$item->amount) }}" id="amount" class="form-control" />
                                        {{-- <span class="err_amount" style="color: red; display: none;">Please enter Amount</span> --}}
                                        @error('amount')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                        <div style="padding: 20px;">
                                            <div style="display: block;">
                                                <label class="form-check-label" style="margin-right: 20px;">
                                                    <input class="form-check-input" type="radio" name="amount_type" id="amount_type1" value="1" {{ old('amount_type', @$item->amount_type) == 1 ? 'checked' : '' }}  >
                                                    Sending Amount
                                                </label>
                                                <label class="form-check-label">
                                                    <input class="form-check-input" type="radio" name="amount_type" id="amount_type2" value="2" {{ old('amount_type', @$item->amount_type) == 2 ? 'checked' : '' }} >
                                                    Receiving Amount
                                                </label>
                                                @error('amount_type')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                            <div style="display: block;">
                                                {{-- <span class="err_amount_type" style="color: red; display: none;">Please choose Amount Type</span> --}}
                                                
                                            </div>
                                        </div>
                                        
                                    </div>

                                    <div class="col-md-6">
                                        <label class="" for="receiving_option">{!! trans("message_lang.LBL_RECEIVING_OPTION") !!} <span style="color:red;">*</span></label>
                                        <select class="form-control custom-field" name="receiving_option" id="receiving_option" autocomplete="receiving_option" >
                                                <option value="" @if(old('receiving_option') == "") selected @endif>{{ __('message_lang.LBL_SELECT_RECEIVING_OPTION') }}</option>
                                                @foreach ($ReceivingOptions as $value)
                                                    <option value="{{ $value->receiving_option_code }}" {{ old('receiving_option', @$item->receiving_option) == $value->receiving_option_code ? 'selected' : '' }}>{{ $value->receiving_option }}</option>
                                                @endforeach
                                        </select>
                                        {{-- <span class="err_receiving_option" style="color: red; display: none;">Please select Receiving Option</span> --}}
                                        @error('receiving_option')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>

                                <div class="form-group row" id="MW" style="display: block;">
                                    <div class="col-md-6" >
                                        <div class="form-check">
                                            <input type="checkbox" name="is_same_phone" value="1" id="is_same_phone" class="form-check-input" />
                                            <label class="form-check-label" for="is_same_phone" style="margin-bottom: 0.5rem;">{!! trans("message_lang.LBL_USE_PHONE_NUMBER") !!} <span style="color:red;">*</span></label>
                                        </div>
                                        <input onKeypress="return event.charCode != 32" type="text" name="mobile_wallet_no" placeholder="{!! trans("message_lang.LBL_MOBILE_WALLET_NUMBER") !!}" value="{{ old('account_number', @$item->account_number) }}" id="mobile_wallet_no" class="form-control custom-field" />
                                        {{-- <span class="err_mobile_wallet_no" style="color: red; display: none;">Please enter Mobile Wallet Number</span> --}}
                                        @error('mobile_wallet_no')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>

                                <div class="form-group row" id="BD" style="display: flex;">
                                    <div class="col-md-6">
                                        <label class="" for="bank_code">{!! trans("message_lang.LBL_BANKS") !!} <span style="color:red;">*</span></label>
                                        <select class="form-control custom-field" name="bank_code" id="bank_code" autocomplete="bank_code">
                                            @if(isset($item))
                                                <option value="{!! $item->bank_code !!}"> {!! $item->bank_name !!}</option>
                                            @endif
                                        </select>
                                        {{-- <span class="err_bank_code" style="color: red; display: none;">Please select Bank</span> --}}
                                        @error('bank_code')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label class="" for="account_number">{!! trans("message_lang.LBL_ACCOUNT_NUMBER") !!} <span style="color:red;">*</span></label>
                                        <input type="text" name="account_number" placeholder="{!! trans("message_lang.LBL_ACCOUNT_NUMBER") !!}" value="{{ old('account_number', @$item->account_number) }}" id="account_number" class="form-control" />
                                        {{-- <span class="err_account_number" style="color: red; display: none;">Please enter Account Number</span> --}}
                                        @error('account_number')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>

                            </div>

                            <div class="card-footer">
                                <button type="submit" id="save"  class="btn btn-primary mr-2">{!! trans("message_lang.BTN_SUBMIT") !!}</button>
                                <a href="{{ url('sendingpartner/batches/show/' .@base64_encode($batchId)) }}" class="btn btn-secondary">{{ __('message_lang.BUTTON_CANCEL') }}</a>
                                {{-- <button type="button" id="cancel"  class="btn btn-secondary">{{ trans('message_lang.BUTTON_CANCEL') }}</button> --}}
                            </div>
                        </form>
                        <!--end::Form-->
                    </div>
                    <!--end::Card-->
                </div>
            </div>
        </div>
        <!--end::Container-->
    </div>
    <!--end::Entry-->
</div>
@endsection

@section("page_vendors")
<script src="{{ asset('ex_plugins/jquery-validation-1.19.1/dist/jquery.validate.js') }}"></script>
<script src="{{ url('js/select2.min.js') }}"></script>
<script src="{{ url('js/sweetalert2.min.js') }}"></script>
@endsection

@section("page_script")
<script type="text/javascript">
    $(document).ready(function () {
        getCountryCurrencies($("#country_code"), $("#currency"), $("#bank_code"), true);

        // if()


        // var $mobile_wallet_no = "{{@$item->mobile_wallet_no}}";
        var $account_number = "{{@$item->account_number}}";
        var $bank_code = "{{@$item->bank_code}}";

        console.log("accoun");
        console.log($account_number);


        $('#BD, #MW').hide();
        if($('#receiving_option').val() == "MW") {
            $('#MW').show();
            if($bank_code != "") $('#BD').show();
        } else if($('#receiving_option').val() == "BD") {
            $('#BD').show();
            // if($mobile_wallet_no != "") $('#MW').show();
        }

        $('#receiving_option').on('change', function () {
            $('#BD, #MW').hide();
            $('#bank_code, #account_number, #mobile_wallet_no').val('');
            $('#is_same_phone').prop('checked', false);
            if ($(this).val() == 'BD') {
                $('#BD').show();
            } else if ($(this).val() == 'MW' || $(this).val() == "{{config('constants.WAVE')}}") {
                $('#MW').show();
            }
        });

        $('#save1').on('click', function (e) {
            console.log("on save click");
            var formIvalid = false;
            $('.err_firstname').hide(); $('.err_lastname').hide(); $('.err_phone_no').hide();
            $('.err_country_code').hide(); $('.err_currency').hide(); $('.err_amount').hide();
            $('.err_receiving_option').hide(); $('.err_mobile_wallet_no').hide(); $('.err_bank_code').hide();

            if($('#firstname').val() == "") { $('.err_firstname').show(); formIvalid = true; }
            if($('#lastname').val() == "") { $('.err_lastname').show(); formIvalid = true; }
            if($('#phone_no').val() === "") { $('.err_phone_no').show(); formIvalid = true; }
            if($('#country_code').val() == "") { $('.err_country_code').show(); formIvalid = true; }
            if($('#currency').val() == "") { $('.err_currency').show(); formIvalid = true; }
            if($('#amount').val() == "") { $('.err_amount').show(); formIvalid = true; }
            if($('#receiving_option').val() == "") { $('.err_receiving_option').show(); formIvalid = true; }

            if($('#receiving_option').val() == "MW" && $('#mobile_wallet_no').val() == "") { $('.err_mobile_wallet_no').show(); formIvalid = true; }
            if($('#receiving_option').val() == "BD" && $('#account_number').val() == "") { $('.err_account_number').show(); formIvalid = true; }
            if($('#receiving_option').val() == "BD" && $('#bank_code').val() == "") { $('.err_bank_code').show(); formIvalid = true; }

            if($('#amount_type1').prop('checked') == false && $('#amount_type2').prop('checked') == false) { console.log('amount type is here'); $('.err_amount_type').show(); formIvalid = true; }

            console.log('amount type is here', $('#amount_type1').prop('checked'));

            if(formIvalid) return;
            var html = "<span style='font-size: 13px;'>Are you sure you want to save these data?</span>";
            Swal.fire({
            title: "Confirmation",
            confirmButtonText: "{{trans("message_lang.YES_I_CONFIRM")}}",
            showCancelButton: true,
            html: html,
            }).then((result) => {
                if (result.isConfirmed) {
                    console.log("submit");
                    $('#form').submit();
                }
            });


        });

        $("#form").validate({
            errorElement: "span", // contain the error msg in a span tag
            errorClass: 'help-block',
            errorPlacement: function (error, element) {
                error.insertAfter(element);
            },
            ignore: "",
            rules:
            {
                firstname: {
                    required: true
                },
                lastname: {
                    required: true,
                },
                phone_no: {
                    required: true,
                },
                email: {
                    email: true,
                },
                country_code: {
                    required: true,
                },
                currency: {
                    required: true,
                },
                amount: {
                    required: true,
                },
                amount_type: {
                    required: true,
                },
                receiving_option: {
                    required: true,
                },
                bank_code: {
                    required: function(element) {
                        if($("#receiving_option").val() == "BD") {  return true; } 
                        else { return false; }
                    },
                },
                account_number: {
                    required: function(element) {
                        if($("#receiving_option").val() == "BD") {  return true; } 
                        else { return false; }
                    },
                },
                mobile_wallet_no: {
                    required: function(element) {
                        if($("#receiving_option").val() == "MW") {  return true; } 
                        else { return false; }
                    },
                },
            },
            messages:
            {
                firstname: {
                    required: '{{ __('message_lang.PLEASE_ENTER_FIRST_NAME') }}'
                },
                lastname: {
                    required: '{{ __('message_lang.PLEASE_ENTER_LAST_NAME') }}',
                },
                phone_no: {
                    required: '{{ __('message_lang.PLEASE_ENTER_PHONE_NUMBER') }}',
                },
                country_code: {
                    required: '{{ __('message_lang.PLEASE_SELECT_COUNTRY') }}',
                },
                currency: {
                    required: '{{ __('message_lang.PLEASE_SELECT_CURRENCY') }}',
                },
                amount: {
                    required: '{{ __('message_lang.PLEASE_ENTER_AMOUNT') }}',
                },
                amount_type: {
                    required: '{{ __('message_lang.PLEASE_CHOOSE_AMOUNT_TYPE') }}',
                },
                receiving_option: {
                    required: '{{ __('message_lang.PLEASE_SELECT_RECEIVING_OPTION') }}',
                },
                bank_code: {
                    required: '{{ __('message_lang.PLEASE_SELECT_BANK') }}',
                },
                account_number: {
                    required: '{{ __('message_lang.PLEASE_ENTER_ACCOUNT_NUMBER') }}',
                },
                mobile_wallet_no: {
                    required: '{{ __('message_lang.PLEASE_ENTER_MOBILE_WALLET_NUMBER') }}',
                },
            },
            invalidHandler: function (event, validator)
            { },
            highlight: function (element)
            {
                $(element).closest('.help-block').removeClass('valid');
                $(element).closest('.form-group').removeClass('has-success').addClass('has-error').find('.symbol').removeClass('ok').addClass('required');
            },
            unhighlight: function (element)
            {
                $(element).closest('.form-group').removeClass('has-error');
            },
            success: function (label, element)
            {
                label.addClass('help-block valid');
                $(element).closest('.form-group').removeClass('has-error').addClass('has-success').find('.symbol').removeClass('required').addClass('ok');
            },
            submitHandler: function (frmadd)
            {
                successHandler1.show();
                errorHandler1.hide();
            }
        });

        $('#is_same_phone').on('change', function() {
            $('#mobile_wallet_no').prop('readonly', false);
            if (this.checked) {
                $('#mobile_wallet_no').prop('readonly', true);
                $('#mobile_wallet_no').val($('#phone_no').val());
            }
        });

    });

    $(document).on("change", "#country_code", function () {
        getCountryCurrencies($(this), $("#currency"), $("#bank_code"));
    });

    function getCountryCurrencies(countryObj, currencyObj, bankObj, initial) {
        var country_id = countryObj.val();
        var token = '{{ csrf_token() }}';

        var currency    = $('option:selected', '#country_code').attr('data-currency');
        console.log('set currency', currency);
        currencyObj.find('option').remove();
        currencyObj.append(getOption("Select Currency", ""));
        if(currency != '') {
            console.log('currency is not empty');
            currencyObj.find('option').remove();
            currencyObj.append(getOption("Select Currency", ""));
            currencyObj.append(getOption(currency, currency));
        }
        if(initial == true)
            currencyObj.val("{{@$item->currency}}");
        else
            currencyObj.val($("#target option:first").val());

        $.ajax({
            url: "{!! route('sendingpartner.sending-country-currency-bank') !!}",
            type: 'POST',
            datatype: "json",
            data: {
                    "_token": token,
                    "country_id": country_id,
                    "from_country_code" : true
                },
            success:function (data) {
                console.log(data);
                // var value = '';
                // currencyObj.find('option').remove();
                // currencyObj.append(getOption("Select Currency", ""));
                // if(data.currencies.length) {
                //     //Loop through array and add options
                //     $.each(data.currencies, function( key, value ) {
                //         currencyObj.append(getOption(value.currency_code, value.currency_code));
                //     });

                //     value = currencyObj.find("option:eq(1)").val();
                // }
                // if(initial == true)
                // currencyObj.val("{{@$item->currency}}");
                // else
                // currencyObj.val($("#target option:first").val());

                var value1 = '';
                // bankObj.find('option').not(':first').remove();
                bankObj.find('option').remove();
                bankObj.append(getOption("Select Bank", ""));
                if(data.banks.length) {
                    //Loop through array and add options
                    $.each(data.banks, function( key, value ) {
                        bankObj.append(getOption(value.bank_name, value.bank_code));
                    });

                    value1 = bankObj.find("option:eq(1)").val();
                }

                if(initial == true)
                bankObj.val("{{@$item->bank_code}}");
                else
                bankObj.val($("#target option:first").val());
            },
            error:function (error) {
                console.log(error);
            }
        });
    }

    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#logoImg').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    function getOption(text, value) {
        return "<option value = '" + value + "'>" + text + "</option>";
    }

    function showLoader() {
        $("#loading").show();
    }
</script>
@endsection