@extends('layouts.parent.app')
@section('content')

<div class="dash-left">
    <div class="dash-left-box">
        <h2>Velkommen til Fritidskortet</h2>
        <div class="clearfix"></div>
        <div class="full-width info-left profileMode">
            <h3>{{ucfirst(Auth::user()->firstname)}} {{ucfirst(Auth::user()->lastname)}} 
                <a href="javascript:void(0)" class="edit_profile">
                    <img src="{{asset('images/edit-icon.svg')}}">
                </a>
            </h3>
            <span>{{ucfirst(Auth::user()->address)}}</span>
            <div><b>E-post :</b><span>{{Auth::user()->email}}</span></div>
            <div><b>Telefon :</b><span>{{Auth::user()->phone}}</span></div>
        </div>

        <div class="desh-left-link">
            @php
            $id_token=Session::get('id_token');
            $link=config('idPort.API_URL')."/endsession?id_token_hint=".$id_token."&post_logout_redirect_uri=https://demo.fritidskortet.app/";
            @endphp
            
            <a href="javascript:void(0);" hrefpath="{{$link}}" id="logout">Logg ut</a>
            {{-- <a href="#" onclick="event.preventDefault();document.getElementById('logout-form').submit();">Logg ut</a>
            <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                @csrf
            </form> --}}
        </div>

    </div>
</div>
@if(session('flash_success'))
    <div class="alert alert-success" role="alert">
    <button type="button" class="close" data-dismiss="alert">×</button>
        {{ session('flash_success') }}
    </div>
@endif
@if(session('flash_warning'))
    <div class="alert alert-danger" role="alert">
    <button type="button" class="close" data-dismiss="alert">×</button>
        {{ session('flash_warning') }}
    </div>
@endif
<div class="dash-right">
    <div class="dash-right-box">
        <div class="righ-logo full-width">
            VADSØ KOMMUNE <img src="{{asset('images/vads-logo.png')}}">
        </div>    

        <div class="name-main full-width">
            <h3>{{ucfirst(Auth::user()->firstname)}} {{ucfirst(Auth::user()->lastname)}}</h3>
            <span>Velg profil</span>
        </div>

        <div class="full-width">
            <div class="dash-sub-left">
                @if(Session::get('user_age') >= 22)
                <div class="child-name full-width">
                    @foreach($child_data as $cdata)
                        <a href="{{route('parent.child_activity',$cdata->id)}}">{{$cdata->firstname.' '.$cdata->lastname}}</a>
                    @endforeach
                </div>
                @elseif(Session::get('user_age') < 22 && Session::get('child_login') == 1)
                <div class="child-name full-width">
                    <a href="{{route('parent.child_activity', Auth::user()->id)}}">
                    @if(filled(Auth::user()->firstname) || filled(Auth::user()->lastname))
                        {{ucfirst(Auth::user()->firstname)}} {{ucfirst(Auth::user()->lastname)}}
                    @else
                        {{Auth::user()->social_id}}
                    @endif
                    </a>
                </div>
                @endif
            </div>
            <div class="dash-sub-right">
                <div class="add-child-box">
                    <div class="dash-sub-right-box full-width">
                        <h3>Registrer dine barn her</h3>
                        <a class="add_child">Legg til et barn</a>
                        <div class="clearfix"></div>
                        <p>Her kan du legge til dine barn hvis du er forelder, eller deg selv hvis du er fylt 22år (eller fyller 22 år inneværende år)</p>
                    </div>
                    <div class="dash-sub-right-box full-width">
                        <h3>REGISTRER DEG SELV HER</h3>
                        <form action="{{route('parent.validate.child.login')}}" method="post">
                            @csrf
                            <a class="validate_as_child_login">Legg til min bruker</a>
                        </form>
                        <div class="clearfix"></div>
                        <p>Her kan du legge til deg selv hvis du er mellom 16 og 18 år. Du har da rett til å administrere Fritidskortet på egen hånd.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade center-popup sm-popup" id="add_child_popup" tabindex="-1" role="dialog" aria-labelledby="add_child_popup" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
             {{-- action="{{ route('login') }}" --}}
            <form id="add_child_form" method="POST" action="{{route('parent.add_child')}}">
            @csrf
                <div class="modal-header">
                    <h5 class="modal-title">{{trans('parent.add_child')}}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>{{trans('parent.id_no')}}</label>
                        <input type="text" value="" class="form-control id_no @error('id_no') is-invalid @enderror" name="id_no" value="{{ old('id_no') }}" placeholder="{{trans('parent.enter_id_no')}}"  autocomplete="id_no" autofocus>
                    </div>
                    <div class="form-group">
                        <label>{{trans('parent.child_name')}}</label>
                        <input type="child_name" value="" class="form-control @error('child_name') is-invalid @enderror" placeholder="{{trans('parent.enter_child_name')}}" name="child_name" autocomplete="child_name">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="primary-btn sub-btn">{{trans('parent.register_child')}}</button>
                </div>
            </form>
        </div>
    </div>
</div>   

<div class="modal fade center-popup sm-popup" id="parentProfilePopup" tabindex="-1" role="dialog" aria-labelledby="parentProfilePopup" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form id="parentProfile" method="POST" action="{{route('parent.update.profile')}}">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">{{trans('parent.edit_profile')}}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>{{trans('parent.first_name')}}</label>
                        <input type="text" value="{{$user->firstname??''}}" class="form-control" name="first_name">
                    </div>
                    <div class="form-group">
                        <label>{{trans('parent.last_name')}}</label>
                        <input type="text" value="{{$user->lastname??''}}" class="form-control" name="last_name">
                    </div>
                    <div class="form-group">
                        <label>{{trans('parent.email')}}</label>
                        <input type="text" value="{{$user->email??''}}" class="form-control" name="email" readonly>
                    </div>
                    <div class="form-group">
                        <label>{{trans('parent.phone')}}</label>
                        <input type="text" value="{{$user->phone??''}}" class="form-control" name="phone">
                        @error('phone')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>
                </div>
                <div class="modal-footer mt-0">                    
                    <a class="primary-btn sub-btn" href="{{route('parent.dashboard')}}">{{trans('parent.cancel')}}</a>
                    <input type="submit" class="primary-btn sub-btn" value="{{trans('parent.update')}}" name="update_profile">
                </div>
            </form>
        </div>
    </div>
</div> 

{{-- Error message popup --}}
<div class="modal fade center-popup sm-popup" id="alertModal" tabindex="-1" role="dialog" aria-labelledby="login-popup" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
                <div class="modal-body">
                    <p class="main_text"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="primary-btn sub-btn" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">Ok</span></button>
                </div>
        </div>
    </div>
</div>
{{-- End Error message popup --}}
@endsection

@section('script')
<script src="{{ asset('js/jquery.validate.js') }}"></script>
<script src="{{ asset('js/norway.js') }}"></script>
<script type="text/javascript">
    
    $(document).ready(function() {
        $("#logout").on('click',function(){
            var hrefpath=$(this).attr('hrefpath');
            $.ajax({
                type: "post",
                url: "{{route('logout')}}",
                data: {
                _token: function() {
                    return $('meta[name="csrf-token"]').attr('content');
                }},
                cache: false,
                success: function (data)
                {  
                    if(data==1){
                        // alert();
                        window.location=hrefpath;
                    }
                },
            });
        });

        $(".add_child").on('click',function(){
            $.ajax({
                type: "post",
                url: "{{route('parent.validate.child.age')}}",
                data: {
                _token: function() {
                    return $('meta[name="csrf-token"]').attr('content');
                }},
                cache: false,
                success: function (data)
                {  
                    if(data==1){
                        $("#add_child_popup").modal('show');
                    }
                    else{
                        $('#alertModal').find('.modal-title').text("{{trans('activity.confirmation')}}");
                        $('#alertModal').find('.main_text').html("{{trans('parent.Your_not_22y_old')}}");
                        $("#alertModal").modal('show');
                    }
                },
            });            
        });

        $('.validate_as_child_login').on('click',function(){
            $(this).parent('form').submit();
        });

        var validator = $('#add_child_form').validate({
            lang:'no',
            rules: {
                "id_no": {
                    required: true,
                    remote :
                    {
                        url: "{{route('parent.check_unique_child')}}",
                        type: "post",
                        data: {
                            _token: function() {
                                return $('meta[name="csrf-token"]').attr('content');
                            },
                            'id_no':function() {
                                return $('#add_child_form').find('.id_no').val()
                            },
                        }
                    },
                    digits:true,
                    minlength:11,
                    maxlength:11,
                },"child_name": {
                    required: true,
                    maxlength:35,
                }
            },
            messages: {
                id_no: {
                    remote: "{{ trans('parent.child_exist_with_id')}}"
                }
            }
        });

        $('#parentProfilePopup').find('#parentProfile').validate({
            lang:'no',
            rules: {
                "first_name": {
                    required: true,
                },
                "last_name": {
                    required: true,
                },
                "phone": {
                    required: true,
                    digits:true,
                    minlength:8,
                    maxlength:10,

                }
            },
        });

        $('.edit_profile').on('click', function(){
            $('#parentProfilePopup').modal('show');
        });
        
    });
</script>
@endsection