@extends('web.layouts.layout')

@section('container_content')
<section class="box">
    <div class="container-fluid">
        <div class="dots wow zoomIn">
            <span class="dot active"></span>
            <span class="dot"></span>
            <span class="dot"></span>
        </div>
        <h3 class="title wow fadeInUp">disclaimer</h3>
        <div class="terms-condition stylebar">
            <div class="bxsh">
                <div class="content">
                    <h3>{{$terms ?? '' ? $terms->title : ''}}</h3>
                    {!! $terms ?? '' ? $terms->description : '' !!}
                </div>
            </div>
            <div class=" mt-4 required">
                <input type="checkbox" class="terms_condition_agree" id="customCheck">
                <label class="" for="customCheck">by checking this i read all of that and i totally agree  </label>
            </div>
            <a href="javascript:void" class="butn wow zoomIn sendButton gray mt-3 agree_link text-white" disabled>Continue</a>
        </div>
    </div>
</section>

@endsection

@section('container_js')
    <script>
        $(document).ready(function() {
            $('.terms_condition_agree').click(function () {
                if ($(this).prop('checked') === true){
                    $('.agree_link').removeAttr('disabled').removeClass('gray');
                } else {
                    $('.agree_link').prop('disabled', true).addClass('gray');
                }
            });

            $('.agree_link').click(function () {
                if ($('.terms_condition_agree').prop('checked') !== true){
                    return false;
                }
                location=  "{{route('user.register')}}?agree=true";
            })
        });
    </script>

@endsection