@extends('layouts.user')

@section('title')
    @lang('Pay For Cable')
@endsection

@section('breadcrumb')
   @lang('Pay for Cable')
@endsection

@section('content')
    @include('user.partials.breadcrumb',['btitle'=>'Pay TV Subscription'])
<div class="container-xl">
    <div class="row row-deck row-cards mb-5">
        <div class="col-12">
            <div class="card">
            <div class="card-body">


                  @csrf
                    <div class="row">
                        <div class="col-md-6 mt-3">
                            <div class="form-label">Pay TV Subscription From</div>
                            <select class="form-select wallet shadow-none" name="wallet_id">
                                <option value="" selected>@lang('Select Wallet')</option>

                                <option value="balance" data-code="{{$wallets->balance}}">
                                  MainBalance:  {{toMoney($wallets->balance)}}
                                </option>
                                <option value="bonus" data-code="{{$wallets->refer_bonus_balance}}">
                                   Referrer Bonus Balance: {{toMoney($wallets->refer_bonus_balance)}}
                                </option>

                            </select>
                        </div>

                        <div class="col-md-6 mt-3">

                            <div class="form-label">Cable TV</div>

                            <select class="form-select select_network shadow-none" name="network">
                                <option value="" selected>@lang('Select Cable TV')</option>

                                <option value="DSTV" >
                                    DSTV
                                </option>
                                <option value="GOTV" >
                                    GOTV
                                </option>
                                <option value="STARTIMES" >
                                    STARTIMES
                                </option>



                            </select>
                        </div>

                    </div>
                    <div class="row">

                        <div class="col-md-6 mt-3">
                            <div class="form-label">TV Subscription Type</div>
                            <select class="form-select  shadow-none" id="select_bundle" name="data_bundle" disabled>
                                <option value="" selected>@lang('Select TV Subscription Type')</option>




                            </select>
                        </div>
                        <div class="col-md-6 mt-3">

                            <div class="form-label">@lang('IUC NO')</div>
                            <div class="input-group">

                                <input type="text" name="icu_no"  class="form-control form--control bg--section phone_number" placeholder="ICU Number" required value="{{old('icu_no')}}">
                            </div>

                        </div>





                    </div>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-label">&nbsp;</div>
                            <button class="btn btn-primary" type="button" id="loading-btn" disabled style="display: none">            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>            <span>Loading...</span>        </button>

                            <button type="submit" class="btn btn-lg btn-primary confirm">Confirm</button>

                        </div>
                    </div>



                        <div class="modal fade" id="modal-confirm" aria-hidden="true" style="display: none;">
                            <div class="modal-dialog" role="document">

                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title">Confirm TV Subscription: </h5>
                                            <a href="#" class="close" data-bs-dismiss="modal" aria-label="Close">
                                                <em class="icon ni ni-cross"></em>
                                            </a>
                                        </div>
                                        <div class="modal-body">
                                            <div class="alert alert-primary alert-icon">
                                                <em class="icon ni ni-arrow-from-right"></em>
                                                <h5 class="icuDetails"></h5>
                                                <h5 class="withdraw-amount"></h5>
                                                <h5>Subcribe To IUC: </h5>
                                                <h5 class="withdraw-info"></h5>
                                            </div>

                                            <div class="form-group">
                                                <label class="form-label" for="account_number">Enter Your Password</label>
                                                <div class="form-control-wrap">
                                                    <input type="password" class="form-control withdraw-password" id="password" name="password" required="" placeholder="Password">
                                                </div>
                                            </div>




                                        </div>
                                        <div class="modal-footer bg-light">
                                            <div class="form-group">
                                                <button class="btn btn-primary" type="button" id="loading-btnw" disabled style="display: none">            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>            <span>Loading...</span>        </button>

                                                <button type="submit" class="btn btn-lg btn-primary confirm-withdraw">Confirm</button>

                                            </div>
                                        </div>
                                    </div>


                            </div>
                        </div>


            </div>
            </div>
        </div>
    </div>


</div>

@endsection

@push('script')
   <script>


       'use strict';

       $('.select_network').change(function(){

           var selectedNetwork = $(this).find('option:selected').val();

           var selectElement = $("#select_bundle"); // Replace "mySelect" with the actual ID or selector of your select element

           let cfsToken = '{{ csrf_token() }}';
           //console.log(selectedCrypto.val());
           selectElement.prop("disabled", true);
           selectElement.html('<option value="" selected>Select TV Subscription</option>'
           );
           $.ajax({
               url:"{{route('user.get-tvsub')}}",
               type:'POST',
               data: {network: selectedNetwork,   _token: cfsToken},

               success: function(response){


                   $.each(response.data, function(index, option) {
                       var price =  option.price;
                       var optionElement = $("<option>")
                           .val(option.code)
                           .text(option.name + " - ₦"+ price.toLocaleString());
                       selectElement.append(optionElement);

                   });
                   selectElement.prop("disabled", false);

               },
               error: function(xhr, status, error){

               }
           });

       })

        $('.confirm').on('click',function () {
            var loadingBtn = $('#loading-btn');
            var saveBtn = $(this);

            var icuNo = $(".phone_number").val();

            var selectedNetwork = $('.select_network option:selected')
            var selectedBundle = $('#select_bundle option:selected')
            var selectedWallet = $('.wallet option:selected')

            if($('.phone_number').val() == ''){
                showAlert('@lang('Please provide the ICU NO.')','error')
                return false;
            }

            if(selectedNetwork.val() == ''){
                showAlert('@lang('Please select the Cable TV Type.')','error')
                return false;
            }
            if(selectedWallet.val() == ''){
                showAlert('@lang('Please select Wallet.')','error')
                return false;
            }
            if(selectedBundle.val() == ''){
                showAlert('@lang('Please select the Subscription Type.')','error')
                return false;
            }

            loadingBtn.show();
            saveBtn.hide();
            let cfsToken = '{{ csrf_token() }}';
            //console.log(amount.toLocaleString('en-US'));
            //verify ICU NO
           // console.log("stated");
            $.post('{{route('user.cable.verify-icu')}}',{icu_no:icuNo,  _token: cfsToken, cable_type: selectedNetwork.val()},function (res) {
                //showAlert(res.message,'success');
/*if(res.custname==undefined){
    showAlert('Invalid IUC Please Try again','error');
    loadingBtn.hide();
    saveBtn.show();
    return;
}*/
                console.log(res.data);
                // $("#account_name").val(res);
                $('.savebtn').prop('disabled', false);
                loadingBtn.hide();
                saveBtn.show();
                $(".withdraw-amount").html('Cable TV Subscription: ' +selectedBundle.text());
                $(".icuDetails").html('IUC: '+res.data.custno+'<br/>Customer Name: '+res.data.custname);
                $(".withdraw-info").html(icuNo)
                // console.log(selectedBeneficiary.data('code'));
                $('#modal-confirm').modal('show')

            })
                .fail(function(xhr, status, error) {
                    // request failed
                    //   console.log('iget here');
                    loadingBtn.hide();
                    saveBtn.show();
                    showAlert(xhr.responseJSON.message,'error');
                });

            //fun();
        })

       $('.confirm-withdraw').on('click', function(){

          var loadingBtn = $('#loading-btnw');
          var saveBtn = $(this);

         loadingBtn.show();
           saveBtn.hide();
           var phoneNumber = $(".phone_number").val();
           var selectedNetwork = $('.select_network option:selected')
           var selectedWallet = $('.wallet option:selected')
           var selectedbundle = $('#select_bundle option:selected')
           var password = $(".withdraw-password").val();


           if($('.phone_number').val() == ''){
               showAlert('@lang('Please provide the ICU No.')', 'error')
               loadingBtn.hide();
               saveBtn.show();
               return false;
           }

           if(selectedbundle.val() == ''){
               showAlert('@lang('Please select the Subscription Type.')','error')
               loadingBtn.hide();
               saveBtn.show();
               return false;
           }
           if(selectedWallet.val() == ''){
               showAlert('@lang('Please select Wallet.')','error')
               return false;
           }
           if(selectedNetwork.val() == ''){
               showAlert('@lang('Please select the Cable TV Type.')','error')
               loadingBtn.hide();
               saveBtn.show();
               return false;
           }
           if(password==''){
               showAlert('@lang('Please input your password')','error');
               loadingBtn.hide();
               saveBtn.show();
               return false;
           }
           let cfsToken = '{{ csrf_token() }}';

           $.post('{{route('user.cable.confirm')}}',{icu_no:phoneNumber,data_plan: selectedbundle.val(),   _token: cfsToken, password: password, cable_type: selectedNetwork.val(), wallet: selectedWallet.val()},function (res) {
               showAlert(res.message,'success');

              // $("#account_name").val(res);
               $('.savebtn').prop('disabled', false);
               loadingBtn.hide();
               saveBtn.show();
               $('#modal-confirm').modal('hide');
              // location.reload(true);
               location.href = "{{route('user.dashboard')}}";

           })
               .fail(function(xhr, status, error) {
                   // request failed
                //   console.log('iget here');
                   loadingBtn.hide();
                   saveBtn.show();
                   showAlert(xhr.responseJSON.message,'error');
               });
       })


   </script>
@endpush