@extends('frontView.layout')

@section('title_area')

    Shopping

@endsection



@section('content')
    <!-- Breadcromb Area Start -->
    <section class="nyja-breadcromb-area pt-5">
        <div class="container mt-5 pt-5">
                    <ol class="breadcrumb indigo lighten-4">
                        <li class="breadcrumb-item"><a class="black-text" href="#">Home</a><i class="fa fa-caret-right mx-2" aria-hidden="true"></i></li>
                        <li class="breadcrumb-item active">Shopping</li>
                    </ol>
        </div>
    </section>
    <!-- Breadcromb Area End -->


    <!-- Top Products Area Start -->
    <section class="nyja-top-products-page-area section_100">
        <div class="container">
            <div class="row">
                <div class="col-md-8 float-right col-sm-12">
                    <h4>Billing Details</h4>
                    <div class="row">
                        <div class="col form-group">
                            <label>First Name</label>
                            <input type="text" name="firstname" class="form-control" required>
                        </div>
                        <div class="col form-group">
                            <label>Last Name</label>
                            <input type="text" name="lastname" class="form-control" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Company name (optional)</label>
                        <input type="text" name="company" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>Country / Region *</label>
                        <input type="text" name="payment_country" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label>Street address *</label>
                        <input type="text" name="payment_address_1" class="form-control mb-3" required
                               placeholder="House number and street name">
                        <input type="text" name="payment_address_2" class="form-control"
                               placeholder="Apartment, suite, unit, etc.(optional)">
                    </div>

                    <div class="form-group">
                        <label>Town / City *</label>
                        <input type="text" name="payment_city" class="form-control" required>
                    </div>

                    <div class="form-group">
                        <label>State *</label>
                        <input type="text" name="payment_state" class="form-control" required>
                    </div>

                    <div class="form-group">
                        <label>Phone *</label>
                        <input type="text" name="province" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label>Email address *</label>
                        <input type="email" name="email" value="{{Auth::user()->email ?? ''}}" class="form-control"
                               required>
                    </div>

                    <div class="form-group">
                        <label>Device Or Software(Method of view) *</label>
                        <select name="device" id="device" class="selectpicker form-control"  required   data-live-search="true" data-size="10" data-placeholder="">
                          <option value="">--Select One--</option>
                            @foreach($devices as $item)
                                <option value="{{ $item->id }}">{{ $item->device_name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label> <input type="checkbox" name="activaation_fee" value="1">
                            Please Tick this box and choose any option below If you want to add premium
                            international,sports,movies & entertainment channels in your preferred language or country
                            (Free for first 3 months) Then $20/month (optional)</label>

                    </div>
                    <div class="form-group">
                        <label>Please select any 1 preferred Country or Language from the list below (optional)</label>
                          <select name="prefered_country" id="prefered_country" class="selectpicker form-control"    data-live-search="true" data-size="10" data-placeholder="">
                            <option value="">--Select One--</option>
                          @foreach($countries as $item)
                            <option value="{{ $item->iso }}">{{ $item->name }}</option>
                          @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Plan Expire on(DD/MM/YYYY) *</label>
                        <div class="form-control">{{ $expire_date ?? ''  }}</div>
                    </div>

                    <div class="form-group">
                        <label>Agent ID (optional)</label>
                        <input type="text" name="agent_id" value="" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>Where did you hear about us (optional)</label>
                        <select name="know_sourse" id="know_sourse" class="selectpicker form-control"
                                data-live-search="true" data-size="10" data-placeholder="">
                            <option value="0"></option>
                            <option value="Facebook">Facebook</option>
                            <option value="Instagram">Instagram</option>
                            <option value="Youtube">Youtube</option>
                            <option value="Google Banner Add">Google Banner Add</option>
                            <option value="Other">Other</option>
                            <option value="Bloggers">Bloggers</option>
                            <option value="Social Media Influencers">Social Media Influencers</option>
                            <option value="Text Message">Text Message</option>
                            <option value="Magazine">Magazine</option>
                            <option value="Leaflets">Leaflets</option>
                            <option value="Tele Marketing">Tele Marketing</option>
                            <option value="Shopping Mall Exhibition">Shopping Mall Exhibition</option>
                            <option value="Visit by Smartflix Sales People">Visit by Smartflix Sales People</option>
                            <option value="Billboard">Billboard</option>
                            <option value="Visited Smartflix Office">Visited Smartflix Office</option>
                        </select>

                    </div>

                    @if(isset($result->additional_options))
                    @foreach($result->additional_options as $item)
                    <div class="form-group">
                        <label>
                            <input type="checkbox" name="additional[{{ $item->id }}]" value="{{$item->id ?? ''}}"
                                   @if($item->required == 'Active') required @endif class="additional">
                            {{$item->device_title ?? ''}}   @if($item->required == 'Active') * @endif</label>
                        <div class="form-group additional_note">

                            @if($item->additional_option == 'Text Option')
                            <input type="text" name="additional[{{$item->id ?? ''}}][note]" data-itemID="{{$item->id ?? ''}}"  data-price="" value="" class="form-control selectDevice"
                                   @if($item->required == 'Active') required @endif>
                             @elseif($item->additional_option == 'Device Option')
                                <select name="additional[{{$item->id ?? ''}}][note]"
                                       @if($item->required == 'Active') required @endif
                                        class="selectpicker form-control selectDevice"     data-live-search="true" data-size="10" data-placeholder="">
                                    <option value="">--Select One--</option>
                                    @foreach($devices as $device)
                                        <option value="{{ $device->device_name }}"  data-itemID="{{$item->id ?? ''}}"  data-price="{{$item->additional_price ?? ''}}"   >{{ $device->device_name }}</option>
                                    @endforeach
                                </select>
                                @endif
                        </div>
                    </div>
                        @endforeach
                   @endif

                    <div class="form-group">
                        <label>Order notes (optional)</label>
                        <input type="text" name="note" value="" class="form-control">
                    </div>

                </div>
                <div class="col-md-4 float-left col-sm-12">
                    <h4>Your Order</h4>

                    <table class="table table-bordered ">
                        <thead>
                        <tr class="text-white bg-primary">
                            <th width="70%">Product</th>
                            <th>Subtotal</th>
                        </tr>
                        </thead>
                        <tbody id="shoppingCartView">
                        @if($cart_couunt > 0 && $shoppingcart)
                            @foreach($shoppingcart as $item)
                                <tr>
                                    <td>{{$item->name ?? ''}}</td>
                                    <td>  {{ \App\basic::price($item->subtotal ?? '0.00',  $currency_config)}}</td>
                                </tr>
                            @endforeach
                        @endif
                        </tbody>
                    </table>


                    <div class="form-group">
                        <img src="{{asset('images/dpo.jpg')}}" title="dpo" alert="DPO">
                        <p class="text-sm small">Your personal data will be used to process your order, support your
                            experience throughout this website, and for other purposes described in our privacy
                            policy.</p>
                    </div>
                    <div class="text-right" id="dpoPaymentBtn">

                    </div>
                </div>

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

    <!--/Main content-->
    <script>
        $(function () {
            // $('#regModal').modal('show');
            $('.add-to-cart').click(function (event) {
                event.preventDefault();
                var user = '{{ Auth::id() ?? ''}}';
                if (user == '') {
                    $('.loginBtn').trigger('click')
                }


            })

            $('.additional_note').hide()

            $(document).on('change', '.additional', function () {
                if ($(this).is(':checked')) {

                    $(this).parent().next('.additional_note').show();


                }else{
                    $(this).parent().next('.additional_note').hide();
                    var  removeCartItem = 'opt'+$(this).val();

                   $(this).parent().next('.additional_note').find('.selectDevice option:selected').prop("selected", false);

                    $.ajax({
                        url: "{{URL::to('/removeCartItem')}}",
                        dataType: "html",
                        type: 'POST',
                        data: {'_token': $('meta[name=csrf-token]').attr('content'),  'removeCartItem': removeCartItem },
                        success: function( responce ) {
                            $('#shoppingCartView').html(responce)

                        }
                    })

                }
            })


            $.fn.dpoToken =  function(){
                var  slug = '{{$result->slug ?? ''}}'


                $.ajax({
                    url: "{{URL::to('/createDPOToken')}}",
                    dataType: "html",
                    type: 'POST',
                    data: {'_token': $('meta[name=csrf-token]').attr('content'), 'slug':  slug  },
                    success: function( responce ) {

                        $('#dpoPaymentBtn').html(responce)

                    }
                });
            }



            $(document).on('change', '.selectDevice', function () {

                var  slug = '{{$result->slug ?? ''}}'
                var  additional_note = $(this).val();

                var   additional_itemID=   $('option:selected',this).attr('data-itemID');

                var   additional_price=   $('option:selected',this).attr('data-price');
                $.fn.dpoToken();

                    $.ajax({
                    url: "{{URL::to('/addOptionsIntoCart')}}",
                    dataType: "html",
                    type: 'POST',
                    data: {'_token': $('meta[name=csrf-token]').attr('content'), 'slug':  slug,
                        'additional_note': additional_note,  'option_id': additional_itemID,  'additional_price': additional_price },
                    success: function( responce ) {

                        $('#shoppingCartView').html(responce)
                    }
                })
            });
        });
    </script>



@endsection