@extends('layouts.main')

@push('styles')

    <link href="{{ asset('elite/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('elite/bower_components/select2/select2.min.css') }}" rel="stylesheet" />

    <style>
        .no-padding {
            padding: 0px;
        }
    </style>

@endpush

@section('content')

    <div class="row bg-title">
        <div class="col-lg- col-md-4 col-sm-4 col-xs-12">
            <h4 class="page-title">{{ __('general_settings.subscription_tracking') }}</h4>
        </div>
        <div class="col-lg-8 col-sm-8 col-md-8 col-xs-12">
            <ol class="breadcrumb">
                <li><a href="{{ route('home') }}">{{ __('general_settings.dashboard') }}</a></li>
                <li class="active">{{ __('general_settings.edit_general_settings') }}</li>
            </ol>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            @include('flash::message')

            <div class="white-box">
                @if (session()->has('streamline_setup'))
                    <h3><font color="blue">{{ __('general_settings.streamline_setup_2') }}</font></h3>
                @endif
                {{ Form::open(['route' => isset($subscriptions) ? ['subscriptions.update_subscription_tracking', $subscriptions->id ]: 'subscriptions.save_subscription_tracking']) }}
                <div class="row">
                    <div class="col-md-12">
                        <div>
                            <h3 class="text-center">{{ __('general_settings.subscription_tracking') }}</h3>
                            <h4>{{ __('general_settings.description') }}</h4>
                            <div class="card card-inverse card-secondary text-center text-white">
                                <div class="card-block">
                                    <h4 class="text-white">{{ __('general_settings.subscription_tracking_description') }}</h4>
                                </div>
                            </div>

                            <h4>{{ __('general_settings.options') }}</h4>
                            <div class="card card-outline-secondary text-dark">
                                <div class="card-block">
                                    {{ Form::radio('enable_subscription_tracking', 0,($general_settings->enable_subscription_tracking == 0 ? true : false),['id'=>'disable_subscription_tracking_radio']) }}&nbsp; {{ Form::label('disable_subscription_tracking_radio',__('general_settings.disable')) }}&nbsp;&nbsp;
                                    <br>
                                    {{ Form::radio('enable_subscription_tracking', 1, ($general_settings->enable_subscription_tracking == 1 ? true : false),['id'=>'enable_subscription_tracking_radio']) }}&nbsp;{{ Form::label('enable_subscription_tracking_radio',__('general_settings.enable'))}}
                                </div>
                            </div>
                            <div id="enable_subscription_tracking_div" class="text-dark mb-3 row" style="display: none;">
                                <div class="col-sm-3 mt-3">
                                    <div class="form-group" id="searchby">
                                        {{ Form::label('start_date', __('general_settings.current_sub_start')) }}
                                        {{ Form::text('start_date',isset($subscriptions) ? $subscriptions->start_date : '', ['class' => 'form-control compulsory', 'required', 'readonly', 'id' => 'datepicker-autoclose']) }}

                                        <div class="help-block with-errors" style="color: red;" id="start_date_errors"></div>                                     

                                    </div>

                                </div>

                                <div class="col-sm-3 mt-3">
                                    <div class="form-group" id="">
                                        {{ Form::label('duration', __('general_settings.set_interval_sub')) }}
                                        {{ Form::number('duration',isset($subscriptions) ? $subscriptions->duration : '', ['class' => 'form-control compulsory','min'=>'1','max'=>'5', 'id' => 'duration']) }}
                                        <div class="help-block with-errors" style="color: red;" id="duration_errors"></div>
                                    </div>
                                </div>

                                <div class="col-sm-3 mt-3">
                                    <div class="form-group" id="searchby">
                                        {{ Form::label('end_date', __('general_settings.sub_expiry_date')) }}
                                        <div class="help-block with-errors " style="color: red;"id="show_end_date">{{ isset($subscriptions) ? streamline_date($subscriptions->end_date) : '' }}</div>
                                    {{ Form::hidden('end_date', isset($subscriptions) ? $subscriptions->end_date : '', ['class' => 'form-control', 'id' => 'end_date']) }}                                    
                                    </div> 
                                    {{ Form::hidden('suspension_period', $suspension_period, ['class' => 'form-control', 'placeholder' => '1', 'required' => 'true', 'disabled' => 'true', 'id' => 'suspension_period']) }}
                                    {{ Form::hidden('warning_period', $warning_period, ['class' => 'form-control', 'placeholder' => '1', 'required' => 'true', 'disabled' => 'true', 'id' => 'warning_period']) }}
                                </div>

                                <div class="col-sm-2 mt-3">
                                    <div class="form-group" id="">
                                        {{ Form::label('suspension_date', __('general_settings.sub_suspension_date')) }}
                                        {{ Form::text('suspension_date', isset($subscriptions) ? $subscriptions->suspension_date : '', ['class' => 'form-control','readonly', 'id' => 'show_suspension_date']) }}

                                    </div>

                                </div>
                                <p>{{ Form::label('warning_date', __('general_settings.warning_date')) }} :&nbsp; <div class="help-block with-errors " style="color: red;"id="show_warning_date"> </div></p>
                            </div>

                            <div id="disable_subscription_tracking_div" class="" style="display: none;">
                                    {{ Form::hidden('number_of_active_users_limit', 'unlimited', ['class' => 'form-control', 'placeholder' => '1', 'required' => 'true', 'disabled' => 'true', 'id' => 'unlimited_users_input']) }}
                            </div>
                        </div>
                    </div>
                </div>
                <br/>

                <br/>

                @if (session()->has('streamline_setup'))
                    {{ Form::button(__('general_settings.save_settings'),['type'=>'submit','class'=>'btn btn-success waves-effect waves-light m-r-10']) }}
                @else
                    {{ Form::button( isset($subscriptions) ?__('general_settings.update_settings') : __('general_settings.save_settings'),['type'=>'submit','id'=> isset($subscriptions) ? 'update_submit' : 'sub_submit','class'=>'btn btn-success waves-effect waves-light m-r-10']) }}
                @endif
                {{ Form::close() }}                   

            </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')

    <script src="{{ asset('elite/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>

    <script src="{{ asset('elite/js/validator.js') }}"></script>

    <script src="{{ asset('elite/bower_components/select2/select2.min.js') }}"></script>

    <script>

        $('#datepicker-autoclose,#datepicker-autoclose-1,#show_suspension_date').datepicker({
            autoclose: true,
            todayHighlight: true,
            format: 'dd/mm/yyyy'
        });

        //function to validate the duration inserted is between 1 and 5 years 
        const validate_duration = (number) => {
            // Check if the input is a number and an integer between 1 and 5
            return Number.isInteger(number) && number >= 1 && number <= 5;
        };
        // function to calculate expiry date from start date and duration in years
        const calculate_expiry_date = (start_date, duration) => {
                // Check if start_date is a valid Date object and duration is a positive integer
                if (typeof duration !== 'number' || duration <= 0) {
                    throw new TypeError('Invalid input: duration must be a positive integer.');
                }
                // Parse the start date string into a Date object
                const [startDay, startMonth, startYear] = start_date.split('/');
                const startDate = new Date(`${startMonth}/${startDay}/${startYear}`);
                // Add the specified number of years to the start year
                const expiryYear = parseInt(startYear, 10) + duration;
                // Create a new Date object with the updated year and the same day and month
                const expiryDate = new Date(startDate);
                expiryDate.setFullYear(expiryYear);
                // Format the expiry date as dd/mm/yyyy
                const formattedExpiryDate = `${expiryDate.getDate()}/${expiryDate.getMonth() + 1}/${expiryDate.getFullYear()}`;
                return formattedExpiryDate;
            }

        const calculate_suspension_date = (exp_date)=>{    
                var suspension_period = parseInt($('#suspension_period').val());
                    // Parse the expiry date string into a Date object
                    const [expiryDay, expiryMonth, expiryYear] = exp_date.split('/');
                    const expiryDate = new Date(`${expiryMonth}/${expiryDay}/${expiryYear}`);
                    // Add suspension_period months to the expiry date
                    const suspensionDate = new Date(expiryDate);
                    suspensionDate.setMonth(suspensionDate.getMonth() + suspension_period);
                    // Format the suspension date as dd/mm/yyyy
                    const formattedSuspensionDate = `${suspensionDate.getDate()}/${suspensionDate.getMonth() + 1}/${suspensionDate.getFullYear()}`;
                    return formattedSuspensionDate;

        }
        const calculate_warning_date = (exp_date)=>{
            var warning_period = parseInt($('#warning_period').val());
            // Parse the expiry date string into a Date object
            const [expiryDay, expiryMonth, expiryYear] = exp_date.split('/');
            const expiryDate = new Date(`${expiryMonth}/${expiryDay}/${expiryYear}`);
            // substract warning period days from expiry date
            const warningDate = new Date(expiryDate)
            warningDate.setDate(warningDate.getDate() - warning_period);
            // Format the suspension date as dd/mm/yyyy
            const formattedWarningDate = `${warningDate.getDate()}/${warningDate.getMonth() + 1}/${warningDate.getFullYear()}`;
            return formattedWarningDate;
        }

        const show_or_hide_limited_users_input = () => {
            let selectedValue = $('input[name="enable_subscription_tracking"]:checked').val();
            if(selectedValue === "1") {
                document.getElementById('enable_subscription_tracking_div').style.display = '';
                //disable submit button 
                $('#sub_submit').prop('disabled', true);
                document.getElementById('disable_subscription_tracking_div').style.display = 'none';
            } else {
                document.getElementById('disable_subscription_tracking_div').style.display = '';
                $('#sub_submit').prop('disabled', false);
                document.getElementById('enable_subscription_tracking_div').style.display = 'none';
            }

        }

        //set exipry date 
        const format_date = (inputDate)=>{
            // format date to day, Month name , Year
            // Split the input date string into day, month, and year components
            var parts = inputDate.split('/');
            var day = parseInt(parts[0]);
            var month = parseInt(parts[1]);
            var year = parseInt(parts[2]);

            // Create a new Date object from the components
            var formattedDate = new Date(year, month - 1, day);

            // Get the day, month, and year in their respective formats
            var formattedDay = formattedDate.toLocaleString('en', { weekday: 'short' });
            var formattedMonth = formattedDate.toLocaleString('en', { month: 'long' });
            var formattedYear = year;

            // Construct the final formatted string
            var formattedString = formattedDay+' ' + day+ ', ' + formattedMonth + ' ' + formattedYear;

            return formattedString;
        }

        const set_expiry_date = (start_date,duration)=>{
            if (duration == ''){   $('#sub_submit').prop('disabled', true); return $('#duration_errors').html('Please Set Interval ');}
            if (!validate_duration(parseInt(duration))) {  $('#sub_submit').prop('disabled', true); return $('#duration_errors').html('invalid interval ');}
            $('#duration_errors').html('');
            var expiry_date =calculate_expiry_date(start_date,parseInt(duration));
            var suspension_date = calculate_suspension_date(expiry_date);
            var warning_date =calculate_warning_date(expiry_date);
            var warning_date_string = format_date(warning_date);
            var expiry_date_string = format_date(expiry_date);
            $('#end_date').val(expiry_date);
            $('#show_end_date').html(expiry_date_string);
            $('#show_warning_date').html(warning_date_string);
            $("#show_suspension_date").datepicker("setDate", suspension_date);
            $('#sub_submit').prop('disabled', false);
        }

        $(document).ready(function() {
            show_or_hide_limited_users_input();
            var duration_default = $('#duration').val();
            var start_date_default = $('#datepicker-autoclose').val();
            set_expiry_date(start_date_default,duration_default);
            
            $('input[name="enable_subscription_tracking"]').on('change', function() {
                show_or_hide_limited_users_input();
            });
            //event listener for the current date
            $('#datepicker-autoclose').on('change', function(){
                var start_date = $(this).val();
                var duration = $('#duration').val();
                set_expiry_date(start_date,duration);
            });
            // event listener for the duration
            $('#duration').on('change',function(){
                var start_date = $('#datepicker-autoclose').val();
                if (start_date == '') {  $('#sub_submit').prop('disabled', true);  return $('#start_date_errors').html('Please Set Current Start Date ');}
                var duration = $('#duration').val();
                $('#start_date_errors').html('');
                set_expiry_date(start_date,duration);
            })

        });

    </script>

@endpush