@extends('layouts.admin')
@section('content')
<style type="text/css">
.disabled {
    pointer-events: none;
}

.disable{
    cursor: not-allowed;
    pointer-events: none;
}

.make_shadow{
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.4;
}
</style>
<script type="text/javascript">
function disableEnterKey(e) {
        var key;
        if (window.event)
            key = window.event.keyCode; //IE
        else
            key = e.which; //firefox
        return (key != 13);
    }

    function dailySchedule() {
        $('input[type=checkbox]').each(function (i) {
            $('#schedule_days_'+i).prop('checked', true);
            $('#schedule_days_'+i).addClass('disable');
            $('#day_'+i).removeClass('make_shadow');
        });
    }

    function weekEndSchedule() {
        $('input[type=checkbox]').each(function (i) {
            $('#schedule_days_'+i).prop('checked', false);
            $('#schedule_days_'+i).addClass('disable');
            $('#day_'+i).addClass('make_shadow');
        });
        $('#schedule_days_0').prop('checked', true);
        $('#schedule_days_6').prop('checked', true);
        $('#day_0').removeClass('make_shadow');
        $('#day_6').removeClass('make_shadow');
    }

    function weekDaySchedule() {
        $('input[type=checkbox]').each(function (i) {
            $('#schedule_days_'+i).prop('checked', false);
            $('#schedule_days_'+i).removeClass('disable');
            $('#day_'+i).removeClass('make_shadow');
        });
    }

    function defaultSchedule() {

        $('input[type=checkbox]').each(function (i) {
            $('#schedule_days_'+i).prop('checked', false);
            $('#schedule_days_'+i).addClass('disable');
            $('#day_'+i).addClass('make_shadow');
        });
    }

    function selectScheduleType() {

        var val = $('#schedule_type').val();
        if(val == 1) {
            dailySchedule();
        } else if(val == 2) {
            weekDaySchedule();
        } else if(val == 3) {
            weekEndSchedule();
        } else {
            defaultSchedule();
        }
    }

</script>
<style>
    .pac-container {
        z-index: 10000 !important;
    }
</style>
<section class="pt-4" id="checkout-body">
<div class="container">
<div class="">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:;"><i class="ti-home"></i></a></li>
            <li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Subscription</li>
        </ol>
    </nav>
</div>
<div class="row pt-2">
    <div class="col-lg-8 col-md-12">
        <div class="checkout-step">
            <div class="accordion" id="accordionExample">
                <div class="card checkout-step-two">
                    <div class="card-header" id="headingTwo">
                        <h5 class="mb-0">
                            <a class="collapsed full-width" data-toggle="collapse" id="delivery-collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                <span class="ti-location-pin"></span> Delivery Options
                            </a>
                        </h5>
                    </div>
                    <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordionExample">
                        <div class="addr">
                            @if(!empty($address_list))
                                @foreach($address_list as $address)
                                    <div class="myaddress myaddress-{{$address->address_id}}">
                                        <div class="address-block radio-address" style="display: flex;">
                                            <div class="custom-control custom-radio" style="vertical-align: top;">
                                                <input id="customer_address_{{$address->address_id}}" class="custom-control-input customer_address set_deliver_address" name="customer_address" type="radio" data-address-id="{{ $address->address_id }}" data-mobile="{{$address->mobile_number}}" data-longitude="{{$address->longitude}}" data-pincode="{{ $address->pincode }}" data-latitude="{{$address->latitude}}" value="{{ $address->address_id }}">
                                                <label for="customer_address_{{$address->address_id}}" class="checkbox-custom-label"></label>
                                            </div>
                                            <div style="display:inline-block" class="pl-2">
                                                <!-- delivery Gateway -->
                                                <h6><b>{{ $address->address_type }}</b></h6>
                                                <!-- delivery Gateway -->
                                                <address>
                                                    <p style="font-weight:500;"> {{ $address->mobile_number }}<br></p>
                                                    <p>
                                                        {{ $address->address }}
                                                    </p>
                                                </address>
                                                <div class="mt-2 row mx-2">
                                                    <a href="javascript:void(0)" data-toggle="address" data-address-id="{{ $address->address_id }}" data-mobile="{{$address->mobile_number}}" data-longitude="{{$address->longitude}}" data-pincode="{{ $address->pincode }}" data-latitude="{{$address->latitude}}" data-address-id="{{$address->address_id}}" id="address_{{$address->address_id}}" class="set_deliver_address btn btn-dark btn-sm inline_block mar_r6">
                                                        <i class="ti-pin small" aria-hidden="true"></i>DELIVER HERE
                                                    </a>
                                                    <!-- <a href="javascript:;" data-toggle="address" class="btn btn-secondary btn-sm inline_block mar_r6 edit_address ml-2" id="edit_my_address_btn" data-address-id="{{ $address->address_id }}" data-address-type="{{ $address->address_type }}" data-house-no="{{ $address->house_no }}" data-apartment-name="{{ $address->apartment_name }}" data-mobile-number="{{ $address->mobile_number }}" data-landmark="{{ $address->landmark }}" data-pincode="{{ $address->pincode }}" data-address="{{ $address->address }}" data-latitude="{{ $address->latitude }}" data-longitude="{{ $address->longitude }}" data-street="{{ $address->street }}" data-contact-person="{{ $address->contact_person }}">
                                                        <i class="fa fa-pencil-alt small" aria-hidden="true"></i> Edit
                                                    </a> -->
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                            @if(empty($address_list))
                                <input type="hidden" name="check_address" class="check_address" value="yes">
                            @else
                                <input type="hidden" name="check_address" class="check_address" value="no">
                            @endif
                            <input type="hidden" name="choosed_address" class="choosed_address" id="choosed_address" value="">
                            <input type="hidden" name="choosed_address_mobile" class="choosed_address_mobile" id="choosed_address_mobile" value="">
                            <input type="hidden" name="choosed_address_latitude" class="choosed_address_latitude" id="choosed_address_latitude" value="">
                            <input type="hidden" name="choosed_address_longitude" class="choosed_address_longitude" id="choosed_address_longitude" value="">
                        </div>
                        <div class="card-body">
                            <div class="row">
                                                                <!-- <div class="col-md-6" style="">
                                    <a href="javascript:;" data-target="#myModal" class="btn btn-success btn-sm border-none collapsed add_address" data-toggle="modal"><i class="fa fa-1x fa-plus-circle"></i>Add Address </a>
                                </div> -->
                                <div class="col-md-6 text-left">
                                    <button type="button" id="shipping-btn" data-toggle="collapse" data-target="#shipping-opt" aria-expanded="false" aria-controls="collapseThree" class="btn btn-warning btn-sm"><i class="fa fa-1x fa-arrow"></i> Select Shipping</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card checkout-step-two">
                    <div class="card-header" id="shipping">
                        <h5 class="mb-0">
                            <a class="collapsed full-width" data-toggle="collapse" data-target="#shipping-opt" aria-expanded="false" aria-controls="collapseTwo">
                                <span class="ti-truck"></span> Delivery Slots & Subscription Options
                            </a>
                        </h5>
                    </div>
                    <div id="shipping-opt" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
                        <div class="p-3">
                            <table class="table table-bordered table-sm table-hover mb-0">
                                <tbody>
                                    <tr class="d-none">
                                        <td>
                                            <div class="custom-control custom-radio">
                                                <input class="custom-control-input" id="checkoutShippingStandard" name="shipping" type="radio">
                                                <label class="custom-control-label text-body text-nowrap" for="checkoutShippingStandard"><strong>Standard Shipping</strong></label>
                                            </div>
                                        </td>
                                        <td>Delivery in 5 - 7 working days</td>
                                    </tr>
                                    <tr>
                                        <td style="vertical-align: text-top;">
                                            <div class="custom-control">
                                                <input class="custom-control-input" id="warehouse_id" name="warehouse_id" type="text" value="{{Session::get('warehouse_id')}}">
                                                <label class="custom-control-label text-body text-nowrap" for="delivery_slot_parent"><strong>Delivery Slot</stong></label>
                                            </div>
                                        </td>
                                        <td>
                                            <ul class="no-ul-list">
                                                        @if(isset($pickup_slot_time) && !empty($pickup_slot_time))
                                                        @foreach($pickup_slot_time as $slot)
                                                        <li>
                                                            <div class="custom-control custom-radio">
                                                                <input id="{{$slot->slot }}" class="custom-control-input grocery_timing slot-date-sub" name="slot" type="radio" data-from-time="{{$slot->from_time}}" data-to-time="{{$slot->to_time}}">
                                                                <label for="{{$slot->slot }}" class="checkbox-custom-label">{{ $slot->slot }}</label>
                                                            </div>
                                                        </li>
                                                        @endforeach
                                                        @endif
                                                    </ul>
                                        </td>
                                    </tr>
                                    <td>
                                        <div class="custom-control custom-radio">
                                            <strong>Select Subscription Days</strong>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="row">
                                         <div class="col-lg-6 mt-1">
                                                Started On<span class='required asterisk' aria-required='true'>*</span>
                                                <input type="date" name="started_on" class="form-control" id="started_on" value="">
                                            </div>

                                            <div class="col-lg-6 mt-1">
                                                Schedule Type<span class='required asterisk' aria-required='true'>*</span>
                                            <select class="form-control" id="schedule_type" name="schedule_type" onchange="selectScheduleType()">
                                                <option value="1">Daily</option>
                                                <option value="2">Weekdays</option>
                                                <option value="3">Weekends</option>
                                                <option value="4">Monthly</option>
                                            </select>
                                            </div>
                                        </div>
                                        <div class="row custom-control">
                                                <div class="col-lg-12 mt-3">
                                                Schedule Days<span class='required asterisk' aria-required='true'>*</span>
                                                    <div class="input-group">
                                                    <div id="day_0" class="custom-control">
                                                        <input class="checkbox-custom schedule_days" type="checkbox" name="schedule_days[]" id="schedule_days_0" value="sunday"><label for="schedule_days_0" class="checkbox-custom-label">&nbsp;Sunday </label>
                                                    </div>

                                                    &nbsp;&nbsp;
                                                    <div id="day_1" class="custom-control">
                                                        <input class="checkbox-custom schedule_days" type="checkbox" name="schedule_days[]" id="schedule_days_1" value="monday"><label for="schedule_days_1" class="checkbox-custom-label">&nbsp;Monday </label>
                                                    </div>

                                                    &nbsp;&nbsp;
                                                    <div id="day_2" class="custom-control">
                                                        <input class="checkbox-custom schedule_days" type="checkbox" name="schedule_days[]" id="schedule_days_2" value="tuesday"><label for="schedule_days_2" class="checkbox-custom-label">&nbsp;Tuesday </label>
                                                    </div>


                                                    &nbsp;&nbsp;
                                                    <div id="day_3" class="custom-control">
                                                        <input class="checkbox-custom schedule_days" type="checkbox" name="schedule_days[]" id="schedule_days_3" value="wednesday"><label for="schedule_days_3" class="checkbox-custom-label">&nbsp;Wednesday </label>
                                                    </div>


                                                    &nbsp;&nbsp;<div id="day_4" class="custom-control">
                                                        <input class="checkbox-custom schedule_days" type="checkbox" name="schedule_days[]" id="schedule_days_4" value="thursday"><label for="schedule_days_4" class="checkbox-custom-label">&nbsp;Thursday </label>
                                                    </div>


                                                    &nbsp;&nbsp;<div id="day_5" class="custom-control">
                                                        <input class="checkbox-custom schedule_days" type="checkbox" name="schedule_days[]" id="schedule_days_5" value="friday"><label for="schedule_days_5" class="checkbox-custom-label">&nbsp;Friday </label>
                                                    </div>


                                                    &nbsp;&nbsp;<div id="day_6" class="custom-control">
                                                        <input class="checkbox-custom schedule_days" type="checkbox" name="schedule_days[]" id="schedule_days_6" value="saturday"><label for="schedule_days_6" class="checkbox-custom-label">&nbsp;Saturday </label>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6"></div>
                                <div class="col-md-6 text-right">
                                    <button type="button" id="review-btn" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree" class="btn btn-secondary btn-sm">Review Products</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header" id="headingThree">
                        <h5 class="mb-0">
                            <a class="collapsed full-width" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                <span class="fa fa-box"></span> Subscribed Products
                            </a>
                        </h5>
                    </div>
                    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
                        <div class="p-3">
                            <div class="card cart-table">
                                <div class="table-responsive subscribed_item subscribed_item_content">
                                    @include('admin.sub_view.subscription.subscribed_items_ajax')
                                </div>
                                <!-- <a href="checkout.html"><button class="btn btn-secondary btn-lg btn-block text-left" type="button"><span class="float-left"><i class="mdi mdi-cart-outline"></i> Proceed to Checkout </span><span class="float-right"><strong>Ks 1200.69</strong> <span class="mdi mdi-chevron-right"></span></span></button></a> -->
                                <div class="card-body text-right">
                                        <button type="button" data-toggle="collapse" data-target="#collapsefour" aria-expanded="false" aria-controls="collapsefour" class="btn btn-success mb-2 btn-md">Make Payment</button>
                                    </div>
                            </div>
                        </div>
                    </div>
                </div>

                {!!Form::open(array('class'=>'','id'=>'subscription_form', 'files' => true));!!}
                <div class="card" id="payment_div">
                    <div class="card-header" id="headingThree">
                        <h5 class="mb-0">
                            <a class="full-width collapsed"  data-toggle="collapse" data-target="#collapsefour" aria-expanded="false" aria-controls="collapsefour">
                                <span class="fa fa fa-credit-card"></span> Payment
                            </a>
                        </h5>
                    </div>
                    <div id="collapsefour" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
                        <div class="card-body">
                            <h6 class="d-none">Other Offers</h6>
                            <p class="d-none">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                            </p>
                            <div class="list-group list-group-sm mb-4 d-none">
                                <div class="list-group-item">
                                    <!-- Radio -->
                                    <div class="row">
                                        <!-- Input -->
                                        <div class="col-1">
                                            <!-- <img src="assets/img/Hdfc.png" alt="..."> -->

                                            <!-- Label -->
                                        </div>
                                        <div class="col-9">
                                            <p class="mb-0"><strong>Hdfc Bank </strong></p>
                                            <p>Hdfc Bank Upto ₹500 cashback, Min order ₹1500 on Credit & Debit Card payments</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="list-group-item">
                                    <div class="row">
                                        <!-- Input -->
                                        <div class="col-1">
                                            <!-- <img src="assets/img/axis.png" alt="..."> -->

                                            <!-- Label -->
                                        </div>
                                        <div class="col-9">
                                            <p class="mb-0"><strong>Axis Bank </strong></p>
                                            <p>Axis Bank Upto ₹500 cashback, Min order ₹1500 on Credit & Debit Card payments</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="">
                                <h6>Choose Payment Type</h6>
                                <div class="list-group list-group-sm mb-2">

                                    @if(!empty($paymentModeList))
                                        @foreach($paymentModeList as $payment)
                                                                                    @endforeach
                                    @endif
                                </div>
                                <div class="pt-2 mb-4" style="display:none" id="upload_prescription">
                                    <span><b>Upload Prescription Document</b></span><br><br>
                                    <input type="file" name="prescription_image" id="prescription_image" accept="image/jpeg,image/jpg, image/png, application/pdf,"><br />
                                </div>
                            </div>
                            <button type="submit" class="btn btn-block btn-success mb-2 place_subscription" href="javascript:;" id="btnSubmit" data-loading-text="<i class='fa fa-spinner fa-spin '></i> @lang('messages.Processing...')">Subscribe Order</button>
                        </div>
                    </div>
                </div>
                {!!Form::close();!!}
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-md-12 col-sm-12 col-12">
        <div class="cart_detail_box mb-4 subscribed_summary_main">
            @include('admin.sub_view.subscription.subscribed_summary_ajax')
        </div>
    </div>
</div>
</div>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade add-address-mode" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
    <div class="modal-header text-center" style="background: #f0f0f0;">
        <span class="mod-close" data-dismiss="modal" aria-hidden="true"><i class="ti-close"></i></span>
        <h4 class="modal-title address_title">Add Address</h4>
    </div>
    <div class="modal-body ">
        <!-- Single Filter Card -->
        <div class="single_filter_card">
            {!!Form::open(array('class'=>'','id'=>'address_form','files' => true));!!}
            <div class="card-body pt-0">
                <div class="address-body">
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label class="control-label">House No / Flat No / Street<span class="required">*</span></label>
                                <input class="form-control border-form-control" id="house_no" name="house_no"  type="text">
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label class="control-label">Apartment Name</label>
                                <input class="form-control border-form-control" id="apartment_name" name="apartment_name" type="text">
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label class="control-label">Street Details</label>
                                <input class="form-control border-form-control" id="street" name="street" type="text">
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label class="control-label">Landmark</label>
                                <input class="form-control border-form-control" id="landmark" name="landmark" type="text">
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label class="control-label">Phone <span class="required">*</span></label>
                                <input class="form-control border-form-control" value="" name="mobile_number" id="mobile_number" pattern="/^-?\d+\.?\d*$/" onKeyPress="if(this.value.length==10) return false;" type="number">
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label class="control-label">Contact Person</label>
                                <input class="form-control border-form-control" name="contact_person" id="contact_person" type="text">
                            </div>
                        </div>
                        <div class="col-12 col-lg-6">
                            <!-- Gender -->
                            <div class="form-group mb-8">
                                <label>Location Type <span class="required">*</span></label>
                                <div class="btn-group-toggle mt-2 d-flex bd-highlight">
                                    <div class="mr-2">
                                        <input id="Home" class="radio-custom address_type" checked="checked" name="address_type" value="Home" type="radio">
                                        <label for="Home" class="radio-custom-label">Home</label>
                                    </div>
                                    <div class="ml-1 mr-2">
                                        <input id="Office" class="radio-custom address_type" name="address_type" value="Work" type="radio">
                                        <label for="Office" class="radio-custom-label">Office</label>
                                    </div>
                                    <div class="ml-1">
                                        <input id="Others" class="radio-custom address_type" name="address_type" value="Other" type="radio">
                                        <label for="Others" class="radio-custom-label">Others</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--<div class="row">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label class="control-label">@lang('messages.Address') <span class="required">*</span></label>
                                <input id="address" type="text" onKeyPress="return disableEnterKey(event)" name="address" value="" placeholder="Search your place and press enter" class="input-text select_place validate-place-map form-control" maxlength="100" />
                                <div id="map" style=" width: 100%; height:200px;margin-top:10px;float:left;margin-bottom:15px"></div>
                                <div class="gllpMap"></div>
                                <input type="hidden" name="latitude" class="gllpLatitude" id="lat" value="">
                                <input type="hidden" name="longitude" class="gllpLongitude" id="lng" value="">
                                <input type="hidden" id="address_id" name="address_id" class="" value="">
                            </div>
                        </div>
                    </div>-->

                    <div class="row">
                        <div class="col-sm-12">
                            <label class="control-label">@lang('messages.Address') <span class="asterisk">*</span></label>
                            <div class="input-group mb-3" style="border:1px solid #ccc;">
                                <div class="p-2 form-inline" style="width:84%"><i class="fa fa-check-circle text-success"></i> <span class="pl-3 address" id="addressBegin">Pick Your Address</span></div>
                                <div class="input-group-append">
                                    <a class="btn text-danger setaddress"><strong>Change</strong></a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- <div class="custom-control custom-checkbox mb-3">
                                <input type="checkbox" class="custom-control-input" id="customCheckbill">
                                <label class="custom-control-label" for="customCheckbill">Use my delivery address as my billing address</label>
                    </div> -->

                    <div class="mt-3 btn-box">
                        <button type="button" data-toggle="address" class="btn btn-secondary mb-2 btn-lg">@lang('messages.Cancel')</button>
                        <button type="submit" class="btn btn-success mb-2 btn-lg address_action">@lang('messages.Save')</button>
                    </div>

                    <!--<div class="text-right">
                        <button type="submit" name="submit" class="btn btn-dark mb-2 py-2 address_action">Save</button>
                    </div>-->
                </div>
            </div>
            <div id="show_address" style="display:none;">
                <div class="text-right mb-1 mr-3"><a class="btn btn-rounded btn-light close-btn" href="javascript:;"><i class="ti-close"></i></a></div>
                <div class="col-sm-12">
                    <div class="form-group">
                        <label class="control-label">@lang('messages.Address') <span class="asterisk">*</span></label>
                        <input id="address" type="text" onKeyPress="return disableEnterKey(event)" value="" placeholder="Search your place and press enter" class="input-text select_place validate-place-map form-control address2" maxlength="100"/>
                        <div id="map" style=" width: 100%; height:400px;margin-top:10px;float:left;"></div>
                        <div class="gllpMap"></div>
                        <input type="hidden"  name="latitude" class="gllpLatitude" id="lat" value="">
                        <input type="hidden" name="longitude" class="gllpLongitude" id="lng" value="">
                        <input type="hidden" id="address_id" name="address_id" class="" value="">
                        <input type="hidden" id="pincode" name="pincode" class="" value="">
                    </div>
                    <div class="btn-box mt-2">
                        <button type="button" class="btn btn-success mb-2 mt-3 btn-lg set_address">Set Address</button>
                    </div>
                </div>
            </div>
        {!!Form::close();!!}
    </div>
</div>
<!-- <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div> -->
</div>
</div>
</div>
</section>