@extends('layout.master')
@section('content')
    <section class="content pb-5">
        <div class="container-fluid">

            <div class="row pt-4">
                <div class="col-md-12">
                    <div class="title-section">
                        <p>Settings</span></p>
                    </div>
                </div>

                <div class="col-md-12 pt-0 pt-sm-4">
                    <div class="title-section">
                        <p>COD Payments <span>Early COD</span></p>
                    </div>
                </div>

                <div class="col-md-12 pt-2 pt-sm-4">
                    <div class="early-heading">
                        <h5>Introducing Early COD - Grow Faster with Daily COD Remittance</h5>
                        <p>Activate Early COD today by selecting your preferred plan</p>
                    </div>
                </div>
            </div>

            <div class="row justify-content-center pt-3">
                <div class="col-md-10">
                    <div class="row">
                        @foreach($plans as $key => $plan)
                        <div class="col-md-4">
                            <div class="row h-100">
                                <div class="plan-card">
                                    <div class="col-md-12">
                                        <div class="cod-card">
                                            <img src="images/earlyPlan1.png" height="50px" alt="">
                                            <h4>{{$plan['name']}} <br />+ {{$plan['tat_days']}} DAYS</h4>
                                            <hr>
                                        </div>
                                        <div class="transaction-charges">
                                            <p>Transaction Charges</p>
                                            <h3>{{$plan['percentage']}}</h3>
                                            <p>of COD Amount</p>
                                            <p class="gst-txt">(GST Inclusive)</p>
                                        </div>
                                        
                                        </div>
                                        <div class="col-md-12 mt-auto">
                                            @if(@$plan->id == @$earlyCod->plan_id)
                                            <div class="cod-check text-left">
                                            <p> Please agree to our T&C to activate the plan.</p>
                                                <div class="form-group custom-form-group">
                                                    <input class="filled-in filled-check early_cod_check_box" name="earlyCod" type="checkbox" id="" checked disabled>
                                                    <label for="early_cod_check_box_{{$key}}">I have read and agree to 
                                                        <a href="{{route('term/condition')}}" target="_blank"> Terms and <br /> Conditions </a>
                                                    </label>                               
                                                </div>
                                            </div>
                                            <button type="button" class="btn btn-success earlyCodPercentage button-dissable-checkbox" id="">Activated</button>
                                            @else
                                            <div class="cod-check text-left">
                                            <p> Please agree to our T&C to activate the plan.</p>
                                                <div class="form-group custom-form-group">
                                                    <input class="filled-in filled-check early_cod_check_box" name="earlyCod" type="checkbox" id="early_cod_check_box_{{$key}}">
                                                    <label for="early_cod_check_box_{{$key}}">I have read and agree to 
                                                        <a href="{{route('term/condition')}}" target="_blank"> Terms and <br /> Conditions </a>
                                                    </label>                               
                                                </div>
                                            </div>
                                            <button type="button" class="btn btn-danger earlyCodPercentage button-dissable-checkbox" id="active_button_id_{{$key}}" value="{{$plan->id}}">Activate</button>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>

                        <div class="col-md-12 mt-4 mt-sm-5">
                            <div class="early-cod text-center">
                                <h4>Why should you activate Early COD?</h4>
                                <p>Get guaranteed remittance in just 2* days from the shipment delivered date.</p>
                                <p>Grow your business by removing cash flow restrictions.</p>
                                <p>Get full control over your remittance cycle and take better decisions for your business.</p>
                            </div>
                        </div>
                    </div>
                </div>   
            </div>
        </div>
    </section>
   <style type="text/css">
       .button-dissable-checkbox {
        pointer-events: none;
       }
   </style>
    <script type="text/javascript">
        $(document).ready(function(){

            $(".early_cod_check_box").on("click", function(e) {
                // $(".early_cod_check_box").removeAttr('checked');
                $('input[type="checkbox"]').not(this).prop("checked", false);

                $(".earlyCodPercentage").addClass('button-dissable-checkbox');

                var id = $(this).attr('id');
                var arr = id.split('_');
                var key = arr[arr.length - 1];

                if ($(this).is(":checked")) {
                    $('#active_button_id_'+key).removeClass('button-dissable-checkbox');
                }
                else{
                    $('#active_button_id_'+key).addClass('button-dissable-checkbox');
                }
            });

            $(".earlyCodPercentage").on("click", function(e) {
                var plan_id = $(this).val();
                // console.log(plan_id); return false;

                var data = {
                    "_token" : '{{ csrf_token() }}',
                    "plan_id": plan_id
                }

                $.ajax({
                    url : "{{route('early/deliverd')}}",
                    type: 'POST',
                    data: data,
                    success:function(data) {       
                        swal({
                            icon: 'success',
                            title: "Updated",
                            text: 'Plan Activated Successfully!',
                            type: "success",

                            closeOnConfirm: false,
                            showLoaderOnConfirm: true,
                        },function() {
                                        window.location.reload();
                                    });
                    }
                });
            });
        })
    </script>
@endsection