<?php $__env->startSection('content'); ?>



 <div class="page-heading">
        <div class="bread">
            <h4><?php echo e(__('web.subscribepackage')); ?></h4>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="<?php echo e(url(getCurrentLocale().'/')); ?>"><?php echo e(__('web.home')); ?></a></li>
                    <li class="breadcrumb-item active" aria-current="page"><?php echo e(__('web.subscribepackage')); ?></li>
                </ol>
            </nav>
        </div>
    </div>  
    <main>
        <!--Start package-details -->
        <section class="package-details packages-pg">
            <div class="container">
                <div class="inner">
                    <div class="pcg_det_head">
                        <div class="text-box text-center">
                            <h5 class="name"><?php echo e(packagename($package->id)); ?></h5>
                            <h1 class="price"><b><?php echo e($package->cost); ?></b> <small><?php echo e(__('web.sar')); ?></small></h1>
                            <h5 class="period"> <?php echo e($package->length); ?> <?php echo e(__('web.months')); ?></h5>
                        </div>
                    </div>
                     <form method="post" action="<?php echo e(url(getCurrentLocale().'/paying')); ?>" enctype='multipart/form-data'>
                         <?php echo csrf_field(); ?>
                         <input type="hidden" name="id" id="package" value="<?php echo e($package->id); ?>">
                    <div class="card-body">
                        <div class="row mt-5">
                            <div class="col-md-7 m-auto">
                                <div class="form-wrapper">
                                   
                                        <div class="form-group">
                                            <label class="label"><?php echo e(__('web.date_start')); ?> (<?php echo e(__('web.hint_sub')); ?>)</label>
                                            <input class="form-control" type="date" name="date"  data-date-format="mm/dd/yyyy" required />
                                        </div>
                                        
                                        <div class="form-group">
                                            <label class="label"><?php echo e(__('web.cobon')); ?></label>
                                            <input class="form-control " id="cobon" name="cobon" type="text"/>
                                            <a href="#0" onclick="cobonuse(this)" class="code-butn"><?php echo e(__('web.use')); ?></a>
                                            <small class="value" id="value"></small>
                                        </div>

                                    <!--<div class="form-group" id="image" style="display:none">-->
                                    <!--        <label class="label">صورة التحويل</label>-->
                                    <!--        <input class="form-control " type="file" name="image"/>-->
                                    <!--    </div>-->
                                </div>
                            </div>
                           
                            <!---------- new ---------->
                            <div class="pay_footer text-center col-12 mt-5">
                                <div class="custom-control custom-radio custom-control-inline">
                                    <input type="radio" class="custom-control-input" checked id="customRadio" name="type" value="visa">
                                    <label class="custom-control-label" for="customRadio"><div class="butn"><span> <i class="far fa-credit-card mr-1"></i> الدفع بالفيزا او ماستركارد </span></div></label>
                                </div>
                                <div class="custom-control custom-radio custom-control-inline">
                                    <input type="radio" class="custom-control-input" id="transfer_input" name="type" value="convert">
                                    <label class="custom-control-label" for="transfer_input"><div class="butn"><span> <i class="fas fa-exchange-alt mr-1"></i> التحويل البنكى </span></div></label>
                                </div>
                            </div>
                            <section class="bank_transfer w-100">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="content">
                                        <div class="header_transfer text-center">
                                            <h3><?php echo e(__('web.bank_con')); ?> </h3>
                                            <p><?php echo e(__('web.accounts')); ?></p>
                                        </div>
                                        <div class="cont">
                                            <div class="row">
                                                <?php $__currentLoopData = $accounts; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $row): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                <div class="col-md-4">
                                                    <div class="item">
                                                        <p class="name"><?php echo e(accountname($row->id)); ?></p>
                                                        <span><?php echo e(__('web.acc_num')); ?></span>
                                                        <h6><?php echo e($row->num); ?></h6>
                                                        <span><?php echo e(__('web.ipan')); ?></span>
                                                        <h6 class="ipan"><?php echo e($row->iban); ?></h6>
                                                    </div>
                                                </div>
                                               <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                            </div>
                                        </div>
                                        <div class="header_transfer text-center mt-5">
                                            <h3><?php echo e(__('web.convert')); ?> </h3>
                                            <p><?php echo e(__('web.upload_image')); ?> </p>
                                        </div>
                                        <div class="upload_img">
                                            <div class="wrapper">
                                                <div class="box">
                                                    <div class="js--image-preview"></div>
                                                    <div class="upload-options">
                                                        <label>
                                                               <input type="file" name="image" class="image-upload" accept="image/*" />
                                                            </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>
                         
                            <div class="col-md-12">
                                <button type="submit" class="subscription_butn"><span> <?php echo e(__('web.pay')); ?> </span></button>
                            </div>
                        </div>
                        <img src="<?php echo e(url('')); ?>/assets/web/images/nawal-pattern.png" alt="" class="popular_pattern">
                    </div>
                     </form>
                </div>
            </div>
        </section>
    </main>


<?php $__env->startPush('js'); ?>
<script>
function cobonuse(elem){
let packages = $('#package').val();    
let cobon = $('#cobon').val();   

$.ajax({
          url : <?php echo json_encode(url(getCurrentLocale().'/cobon')); ?>+'/'+packages+','+cobon,
          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>
<?php $__env->stopPush(); ?>

<?php $__env->stopSection(); ?>
<?php echo $__env->make('web.layouts.main', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/omaralyomhost/public_html/nawalgym/resources/views/web/pages/paypackage.blade.php ENDPATH**/ ?>