@extends('web.layouts.main')
@section('content')


 <main>
        <!-- Start page-heading -->
        <div class="page-heading">
            <div class="container">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="{{url(getCurrentLocale().'/')}}"><img src="{{url('')}}/assets/web/images/icons/nav/1.svg" alt="" class="home-icon"/></a></li>
                        <li class="breadcrumb-item active" aria-current="page">{{packagename($package->id)}}</li>
                    </ol>
                </nav>
                <h3 class="title text-center text-white mb-0"><b>{{packagename($package->id)}}</b></h3>
            </div>
            <img src="{{url('')}}/assets/web/images/pattern-3.png" alt="" class="pattern"/>
        </div>
        <!-- Start package-checkout -->
        <section class="checkout-pg">
            <div class="pkg-header">
                <img src="{{url('')}}/assets/web/images/register-2.png" alt="" class="bg"/>
                <div class="container content">
                    <span class="badge"><small>@if($contact == 'month') {{__('web.month')}} @else {{__('web.week')}} @endif/</small> <b>{{$cost}}</b> <small><b>{{__('web.sar')}}</b></small></span>
                    <h2 class="pkg-name text-center text-white mt-4">{{packagename($package->id)}}</h2>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 col-md-10 m-auto">
                        <div class="package-det-card dark-bg">
                            <div class="content">
                                <div class="row">
                                    <div class="col-6">
                                        <p class="label text-white"><i class="far fa-clock"></i> {{__('web.timing')}}</p>
                                    </div>
                                    <div class="col-6">
                                        <p class="det text-white-50">@if($period == 'four') 4 @else 8 @endif {{__('web.week')}}</p>
                                    </div>
                                    <div class="col-6">
                                        <p class="label text-white"><i class="fas fa-phone"></i> {{__('web.contactway')}}</p>
                                    </div>
                                    <div class="col-6">
                                        <p class="det text-white-50">{{__('web.each')}} @if($contact == 'month') {{__('web.month')}} @else {{__('web.week')}} @endif</p>
                                    </div>
                                    <div class="col-6">
                                        <p class="label text-white mb-0"><i class="far fa-calendar-alt"></i> {{__('web.start_date')}}</p>
                                    </div>
                                    <div class="col-6">
                                        <p class="det text-white-50 mb-0">{{date('M Y d')}}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="pay-wrapper mt-5 pt-5">
                    <div class="sec-heading text-center mb-5 ">
                        <h4 class="title">{{__('web.payway')}}</h4>
                    </div>
                    <form method="post" action="{{url(getCurrentLocale().'/paying')}}" enctype="multipart/form-data">
                        @CSRF
                        <input type="hidden" name="id" id="package" value="{{$package->id}}">
                        <input type="hidden" name="contact" id="contact"  value="{{$contact}}">
                        <input type="hidden" name="period"id="period"  value="{{$period}}">
                        <div class="row mb-5 justify-content-center">
                            <div class="col-md-4">
                                <div class="custom-control custom-radio">
                                    <input type="radio" id="checkout1" name="type" onclick="checkVal(this)" checked value="visa" class="custom-control-input">
                                    <label class="custom-control-label" for="checkout1">
                                        <span class="circle"></span>
                                        <h6 class="title mb-0"> {{__('web.visa')}} <img src="{{url('')}}/assets/web/images/pay/online-payment.png" alt="" class="icon"/>  </h6>
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="custom-control custom-radio">
                                    <input type="radio" id="checkout6" name="type" onclick="checkVal(this)" value="bankTransfer" class="custom-control-input">
                                    <label class="custom-control-label" for="checkout6">
                                        <span class="circle"></span>
                                        <h6 class="title mb-0"> {{__('web.transfer')}} <img src="{{url('')}}/assets/web/images/pay/bank-transfer.png" alt="" class="icon"/>  </h6>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-5" >
                            <!--<div class="col-md-12" style="display:none" id="transfer">-->
                            <!--    <div class="bankTransfer-form" id="bankTransfer">-->
                            <!--        <label class="label"><b> {{__('web.image_trans')}} </b></label>-->
                            <!--        <div class="form-group file-input-group">-->
                            <!--            <div class="wrap">-->
                            <!--                <div class="file">-->
                            <!--                    <div class="file__input" id="file__input">-->
                            <!--                        <input class="file__input--file" id="customFile" type="file"  name="image" />-->
                            <!--                        <label class="file__input--label" for="customFile" data-text-btn="اختر">  {{__('web.image_trans')}}:</label>-->
                            <!--                    </div>-->
                            <!--                </div>-->
                            <!--            </div>-->
                            <!--        </div>-->
                            <!--    </div>-->
                            <!--</div>-->
                            <!------------------>
                            <div class="bank_accounts package-det-card col-md-12 mr-auto" style="display:none"  id="transfer">
                                <div class="sec-heading text-center mb-5 ">
                                    <h4 class="title">الحسابات البنكية</h4>
                                </div>
                                <div class="content">
                                    <div class="row">
                                        @foreach($accounts as $row)
                                        <div class="col-md-4">
                                            <div class="acc_items">
                                                <p class="name">{{accountname($row->id)}} </p>
                                                <span>{{__('web.acc_num')}}</span>
                                                <h6>{{$row->num}}</h6>
                                                <span>{{__('web.ipan')}}</span>
                                                <h6 class="ipan">{{$row->iban}}</h6>
                                            </div>
                                        </div>
                                       
                                       @endforeach
                                    </div>
                                </div>
                                <div class="bankTransfer-form" id="bankTransfer">
                                    <label class="label"><b> {{__('web.image_trans')}} </b></label>
                                    <div class="form-group file-input-group">
                                        <div class="wrap">
                                            <div class="file">
                                                <div class="file__input bg-light" id="file__input">
                                                    <input class="file__input--file" id="customFile" type="file"  name="image" />
                                                    <label class="file__input--label" for="customFile" data-text-btn="اختر">  {{__('web.image_trans')}}:</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-------------->
                            <div class="col-md-12 mr-auto"  id="cobon">
                                <div class="discount-code" id="discountInput">
                                    <div class="in-flex">
                                        <label class="label"><b>{{__('web.cobon')}}</b></label>
                                        <span class="disc" id="value"></span>
                                    </div>
                                    <div class="form-group mb-0">
                                        <input class="form-control" id="code" name="cobon" onchange="cobonuse(this)" placeholder="{{__('web.code')}}"/>
                                        <a class="disc-butn">{{__('web.check')}}</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                      
                        <div class="col-md-3 m-auto ">
                            <button class="main-butn active-butn w-100"><span>{{__('web.pay')}}</span></button>
                        </div>
                    </form>
                </div>
            </div>
        </section>
        <!-- Start newsletter-sec -->
         <section class="newsletter-sec">
            <div class="container">
                <div class="row">
                    <div class="col-lg-3">
                        <img src="{{url('')}}/assets/web/images/icon.svg" alt="" class="logo wow zoomIn"/>
                    </div>
                    <div class="col-lg-5 col-md-6">
                        <div class="text  center-vr wow text-focus-in">
                           <h2 class="title text-white mb-3">{{__('web.subscribe_mail')}}</h2>
                            <p class="p text-white-50 mb-0">{{__('web.enter_email')}} </p>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="form-wrapper center-vr wow text-focus-in">
                            <form onsubmit="formemail(this)" id="formemail" method="post" action="{{url(getCurrentLocale().'/subscribe')}}" class="row">
                                @CSRF
                                <input type="email" name="email" class="form-control col-10"  placeholder="{{__('web.email')}}">
                                <button class="submit-butn col-2"><i class="fab fa-telegram-plane"></i></button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>
         <div class="modal logoutModal fade" id="confirmModal" tabindex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                    <div class="modal-body">
                        <img src="{{url('')}}/assets/web/images/confirmed.svg" alt="" class="main-img"/>
                        <h4 class="title text-center mt-3" id="success">{{__('web.success')}}</h4>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="main-butn active-butn" data-dismiss="modal"><span>{{__('web.ok')}}</span></button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Canceled Newsletter Modal --> 
        <div class="modal logoutModal fade" id="cancelModal" tabindex="-1" aria-labelledby="cancelModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                    <div class="modal-body">
                        <img src="{{url('')}}/assets/web/images/cancel.svg" alt="" class="main-img"/>
                        <div  id="error">
                        
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="main-butn active-butn" data-dismiss="modal"><span>{{__('web.ok')}}</span></button>
                    </div>
                </div>
            </div>
        </div>
    </main>
    @push('js')
   <script>
   function formemail(elem){
        event.preventDefault(); 
       var action = $('#formemail').attr('action');
       var urls = action;
       var dataform = $('#formemail').serialize();
     
      $.ajax({
          url : urls,
          type: 'POST',              
          data: dataform,
          success:function(data)
          {
           $('#confirmModal').modal('show');
              $('#error').css("display", "none");
              $('#success').css("display", "block");
           
            
             
          }
          ,error:function(data) {
             $('#cancelModal').modal('show');
              $('#success').css("display", "none");
              $('#error').html('');
    $('#error').css("display", "block");
   
   $.each(data.responseJSON.errors, function(key,value) {
       
     $('#error').append('<h4 class="title text-center mt-3">'+value+'</h4>');
     
     
 }); 
 
}
        })
        }
  
function checkVal(elem){
    let value = $(elem).val();
    if(value == 'visa'){
        $('#transfer').css('display','none');
        $('#cobon').css('display','block');

    }
    else{
        $('#transfer').css('display','block');
        $('#cobon').css('display','none');
    }
}
function cobonuse(elem){
let packages = $('#package').val();    
let cobon = $('#code').val();    
let contact = $('#contact').val();   
let period = $('#period').val();   


$.ajax({
          url : {!! json_encode(url(getCurrentLocale().'/cobon')) !!}+'/'+packages+','+cobon+','+contact+','+period,
          type: 'Get',              
          data: 'dataform',        
          dataType: 'json',
          success:function(data)
          {
           
              $('#value').html(data);
             
          }
          
 

        })
}
    function selecttype(elem){
        let data = $(elem).val();
        if(data == 'visa'){
            $('#image').css('display','none');
        }
        else{
            $('#image').css('display','block');
        }
    }
</script>

    <!-- -------- upload script -------- -->
    <script>
        function initImageUpload(box) {
            let uploadField = box.querySelector('.image-upload');

            uploadField.addEventListener('change', getFile);

            function getFile(e) {
                let file = e.currentTarget.files[0];
                checkType(file);
            }

            function previewImage(file) {
                let thumb = box.querySelector('.js--image-preview'),
                    reader = new FileReader();

                reader.onload = function() {
                    thumb.style.backgroundImage = 'url(' + reader.result + ')';
                }
                reader.readAsDataURL(file);
                thumb.className += ' js--no-default';
            }

            function checkType(file) {
                let imageType = /image.*/;
                if (!file.type.match(imageType)) {
                    throw 'Datei ist kein Bild';
                } else if (!file) {
                    throw 'Kein Bild gewählt';
                } else {
                    previewImage(file);
                }
            }

        }

        // initialize box-scope
        var boxes = document.querySelectorAll('.box');

        for (let i = 0; i < boxes.length; i++) {
            let box = boxes[i];
            initDropEffect(box);
            initImageUpload(box);
        }



        /// drop-effect
        function initDropEffect(box) {
            let area, drop, areaWidth, areaHeight, maxDistance, dropWidth, dropHeight, x, y;

            // get clickable area for drop effect
            area = box.querySelector('.js--image-preview');
            area.addEventListener('click', fireRipple);

            function fireRipple(e) {
                area = e.currentTarget
                    // create drop
                if (!drop) {
                    drop = document.createElement('span');
                    drop.className = 'drop';
                    this.appendChild(drop);
                }
                // reset animate class
                drop.className = 'drop';

                // calculate dimensions of area (longest side)
                areaWidth = getComputedStyle(this, null).getPropertyValue("width");
                areaHeight = getComputedStyle(this, null).getPropertyValue("height");
                maxDistance = Math.max(parseInt(areaWidth, 10), parseInt(areaHeight, 10));

                // set drop dimensions to fill area
                drop.style.width = maxDistance + 'px';
                drop.style.height = maxDistance + 'px';

                // calculate dimensions of drop
                dropWidth = getComputedStyle(this, null).getPropertyValue("width");
                dropHeight = getComputedStyle(this, null).getPropertyValue("height");

                // calculate relative coordinates of click
                // logic: click coordinates relative to page - parent's position relative to page - half of self height/width to make it controllable from the center
                x = e.pageX - this.offsetLeft - (parseInt(dropWidth, 10) / 2);
                y = e.pageY - this.offsetTop - (parseInt(dropHeight, 10) / 2) - 30;

                // position drop and animate
                drop.style.top = y + 'px';
                drop.style.left = x + 'px';
                drop.className += ' animate';
                e.stopPropagation();

            }
        }
    </script>
    
<!-- ----------- -->
    <script>
        $('#transfer_input').change(function() {
            $(".bank_transfer").slideDown();
        });

        $('.pay_footer input[type=radio]').not('#transfer_input').change(function() {
            $(".bank_transfer").slideUp();
        })
    </script>
@endpush

@stop