<?php $__env->startSection('title', 'Ride Confirmation '); ?>

<?php $__env->startSection('styles'); ?>
<style type="text/css">
    .surge-block{
        background-color: black;
        width: 50px;
        height: 50px;
        border-radius: 25px;
        margin: 0 auto;
        padding: 10px;
        padding-top: 15px;
    }
    .surge-text{
        top: 11px;
        font-weight: bold;
        color: white;
    }
</style>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>
<div class="col-md-9">
    <div class="dash-content">
        <div class="row no-margin">
            <div class="col-md-12">
                <h4 class="page-title"><?php echo app('translator')->get('user.ride.ride_now'); ?></h4>
            </div>
        </div>
        <?php echo $__env->make('common.notify', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>
        <div class="row no-margin">
            <div class="col-md-6">
                <form action="<?php echo e(url('create/ride')); ?>" method="POST" id="create_ride">

                <?php echo e(csrf_field()); ?>

                    <dl class="dl-horizontal left-right">
                        <dt><?php echo app('translator')->get('user.type'); ?></dt>
                        <dd><?php echo e($service->name); ?></dd>
                        <dt><?php echo app('translator')->get('user.total_distance'); ?></dt>
                        <dd><?php echo e($fare->distance); ?> <?php echo e($fare->distance_unit); ?></dd>
                        <dt><?php echo app('translator')->get('user.eta'); ?></dt>
                        <dd><?php echo e($fare->time); ?></dd>
                        <dt><?php echo app('translator')->get('user.estimated_fare'); ?></dt>
                        <dd><?php echo e(currency($fare->estimated_fare)); ?></dd>
                        <hr>
                        <?php if(Auth::user()->wallet_balance > 0): ?>

                        <input type="checkbox" name="use_wallet" value="1"><span style="padding-left: 15px;"><?php echo app('translator')->get('user.use_wallet_balance'); ?></span>
                        <br>
                        <br>
                            <dt><?php echo app('translator')->get('user.available_wallet_balance'); ?></dt>
                            <dd><?php echo e(currency(Auth::user()->wallet_balance)); ?></dd>
                        <?php endif; ?>
                    </dl>

                    <input type="hidden" name="s_address" value="<?php echo e(Request::get('s_address')); ?>">
                    <input type="hidden" name="d_address" value="<?php echo e(Request::get('d_address')); ?>">
                    <input type="hidden" name="s_latitude" value="<?php echo e(Request::get('s_latitude')); ?>">
                    <input type="hidden" name="s_longitude" value="<?php echo e(Request::get('s_longitude')); ?>">
                    <input type="hidden" name="d_latitude" value="<?php echo e(Request::get('d_latitude')); ?>">
                    <input type="hidden" name="d_longitude" value="<?php echo e(Request::get('d_longitude')); ?>">
                    <input type="hidden" name="service_type" value="<?php echo e(Request::get('service_type')); ?>">
                    <input type="hidden" name="distance" value="<?php echo e($fare->distance); ?>">
                    <input type="hidden" name="web" value="web">
                    <p><?php echo app('translator')->get('user.payment_method'); ?></p>
                    <select class="form-control" name="payment_mode" id="payment_mode" onchange="card(this.value);">
                      <option value="CASH">CASH</option>
                      <?php if(Setting::get('CARD') == 1): ?>
                      <?php if($cards->count() > 0): ?>
                        <option value="CARD">CARD</option>
                      <?php endif; ?>
                      <?php endif; ?>
                    </select>
                    <br>

                    <?php if(Setting::get('CARD') == 1): ?>
                        <?php if($cards->count() > 0): ?>
                        <select class="form-control" name="card_id" style="display: none;" id="card_id">
                          <option value="">Select Card</option>
                          <?php $__currentLoopData = $cards; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $card): $__env->incrementLoopIndices(); $loop = $__env->getFirstLoop(); ?>
                            <option value="<?php echo e($card->card_id); ?>"><?php echo e($card->brand); ?> **** **** **** <?php echo e($card->last_four); ?></option>
                          <?php endforeach; $__env->popLoop(); $loop = $__env->getFirstLoop(); ?>
                        </select>
                        <?php endif; ?>
                    <?php endif; ?>

                    

                    <button type="submit" class="half-primary-btn fare-btn"><?php echo app('translator')->get('user.ride.ride_now'); ?></button>
                    <button type="button" class="half-secondary-btn fare-btn" data-toggle="modal" data-target="#schedule_modal">Schedule Later</button>

                </form>
            </div>

            <div class="col-md-6">
                <div class="user-request-map">
                    <?php 
                    $map_icon = asset('asset/img/marker-start.png');
                    $static_map = "https://maps.googleapis.com/maps/api/staticmap?autoscale=1&size=600x450&maptype=roadmap&format=png&visual_refresh=true&markers=icon:".$map_icon."%7C".$request->s_latitude.",".$request->s_longitude."&markers=icon:".$map_icon."%7C".$request->d_latitude.",".$request->d_longitude."&path=color:0x191919|weight:8|".$request->s_latitude.",".$request->s_longitude."|".$request->d_latitude.",".$request->d_longitude."&key=".env('GOOGLE_MAP_KEY'); ?>
                    <div class="map-static" style="background-image: url(<?php echo e($static_map); ?>);">
                    </div>
                    <div class="from-to row no-margin">
                        <div class="from">
                            <h5>FROM</h5>
                            <p><?php echo e($request->s_address); ?></p>
                        </div>
                        <div class="to">
                            <h5>TO</h5>
                            <p><?php echo e($request->d_address); ?></p>
                        </div>
                    </div>
                </div> 
            </div>
        </div>

    </div>
</div>



<!-- Schedule Modal -->
<div id="schedule_modal" class="modal fade schedule-modal" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Schedule a Ride</h4>
      </div>
      <form>
      <div class="modal-body">
        
        <label>Date</label>
        <input value="<?php echo e(date('m/d/Y')); ?>" type="text" id="datepicker" placeholder="Date" name="schedule_date">
        <label>Time</label>
        <input value="<?php echo e(date('H:i')); ?>" type="text" id="timepicker" placeholder="Time" name="schedule_time">

      </div>
      <div class="modal-footer">
        <button type="button" id="schedule_button" class="btn btn-default" data-dismiss="modal">Schedule Ride</button>
      </div>

      </form>
    </div>

  </div>
</div>


<?php $__env->stopSection(); ?>

<?php $__env->startSection('scripts'); ?>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#schedule_button').click(function(){
                $("#datepicker").clone().attr('type','hidden').appendTo($('#create_ride'));
                $("#timepicker").clone().attr('type','hidden').appendTo($('#create_ride'));
                document.getElementById('create_ride').submit();
            });
        });
    </script>
    <script type="text/javascript">
        var date = new Date();
        date.setDate(date.getDate()-1);
        $('#datepicker').datepicker({  
            startDate: date
        });
        $('#timepicker').timepicker({showMeridian : false});
    </script>
    <script type="text/javascript">
        function card(value){
            if(value == 'CARD'){
                $('#card_id').fadeIn(300);
            }else{
                $('#card_id').fadeOut(300);
            }
        }
    </script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('user.layout.base', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>