@extends('web.layouts.main')
@section('content')
 <style>
        .rounded_15{
            border-radius: 15px;
        }
        .subscription_renewal .alert{
            border-radius: 15px;
            border: 0;
            opacity: 0.7;
            transition: all 0.3s ease;
        }
        .subscription_renewal .alert:hover{
            opacity: 1;
        }
    </style>
 <main>
        <!-- ----------  inner header ----------- -->   
        
        @include('web.pages.components.headerNav')

        <!-- ---------- profile page ----------- -->   
        <section class="subscription_renewal section_padding bg-light">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-9">
                        <div class="p-5 bg-white rounded_15">
                            <form method="post" onsubmit="saveFormStop(this)" action="{{url(getCurrentLocale().'/stop')}}">
                                @CSRF
                                <input type="hidden" name="subscribe_id" value="{{$subscribe->id}}">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="form-group mb-4">
                                            <label for=""> {{__('web.reason_stop')}} </label>
                                            <select name="reason_id" onchange="reasonSelect(this)" id="" class="form-control form-select bg-light mt-3">
                                                @foreach($reasons as $row)
                                                    <option value="{{$row->id}}"> {{$row->descriptions()->name}} </option>
                                                @endforeach
                                                    <option value="other">{{__('web.other')}}</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group mb-4" id="other" style="display:none">
                                            <label for=""> {{__('web.other')}} </label>
                                            <input type="text" name="other" placeholder=" " class="form-control bg-light mt-3">
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group mb-4">
                                            <label for=""> {{__('web.start_date')}} </label>
                                            <input type="text" name="start_date" placeholder=" " class="form-control bg-light mt-3" id="datepicker">
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group mb-4">
                                            <label for=""> {{__('web.end_date')}} </label>
                                            <input type="text" name="end_date" placeholder=" " class="form-control bg-light mt-3" id="datepicker1">
                                        </div>
                                    </div>
                                </div>
                                <div class="text-center">
                                    <button class="butn mb-5"> <span> {{__('web.next')}} </span> </button>
                                </div>
                            </form>
                            
                        </div>
                    </div>
                </div>
                
            </div>
        </section>
    </main>
    
        
        
@push('js')
    
    <script>
    
    function saveFormStop(elem)
    {
        event.preventDefault(); 
        var action = $(elem).attr('action');
        var urls = action;
        let dataform = new FormData( $(elem)[0]);
        if({!! json_encode(!\Auth::user()) !!})
        {
            $('#modal_login').modal('show');
        }
        else
        {
            $.ajax
            ({
                url : urls,
                type: 'POST',              
                data: dataform,
                contentType: false, 
                processData: false, 
                success:function(data)
                {
                    $('#modal_success').modal('show');
                    setTimeout(
                        function()
                        {
                            window.location.assign({!! json_encode(url(getCurrentLocale().'/profile')) !!});
                        }, 1000);
                }
                ,error:function(data) 
                {
                    $('#modal_error').modal('show');
                    $('#errors').html('');
                    $('#errors').css("display", "block");
                    $.each(data.responseJSON.errors, function(key,value) 
                    {
                        $('#errors').append('<h4 class="title text-center mt-3">'+value+'</h4>');
                    }); 
                }
            })
        }
    }
        function reasonSelect(elem)
        {
            let data = $(elem).val();
            if(data == 'other')
            {
                $('#other').css('display','block');
            }
            else
            {
                $('#other').css('display','none');
            }
        }
        $( function() {
          $( "#datepicker , #datepicker1" ).datepicker({
                minDate: {!! json_encode($start_date) !!},
                dateFormat: 'yy-mm-dd'
          });
        } );
    </script>

@endpush
@stop