@extends('layouts.user')

@section('content')
@push('css')

    <link href="{{ asset('') }}/assets/libs/select2/css/select2.min.css" rel="stylesheet" type="text/css" />
    {{-- dropzone --}}
    <link href="{{ asset('') }}/assets/libs/dropzone/min/dropzone.min.css" rel="stylesheet" type="text/css" />
    <link href="{{ asset('') }}/assets/libs/dropify/css/dropify.min.css" rel="stylesheet" type="text/css" />
@endpush
<div class="container-fluid">
    <div class="row">  
        <div class="col-md-3">
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-body">
                    <h2 class="mb-3" align="center">Registration for new user</h2>
                    <form method="POST" action="{{ route('user.joining_store') }}"  enctype="multipart/form-data">
                        @csrf
                        <div class="row">

                            <div class="col-md-12">
                                <label for="picture">Picture</label>
                                <input type="file" name="picture" id="picture" class="dropify" data-height="150" data-default-file="{{default_image()}}" />                                          
                            </div>
                            <div class="col-md-12 mt-2">                                 
                                <div class="form-group ">
                                    <label for="name" class="col-form-label pt-0">Full Name<span class="text-danger">*</span></label>
                                    <input class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }}" type="text" name="name" id="name" placeholder="Full Name" value="{{ old('name') }}">
                                    @if ($errors->has('name'))
                                        <span class="text-danger" role="alert">
                                            <strong>{{ $errors->first('name') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-6">                                 
                                <div class="form-group ">
                                    <label for="user_account" class="col-form-label pt-0">User Account<span class="text-danger">*</span></label>
                                    <input class="form-control{{ $errors->has('user_account') ? ' is-invalid' : '' }}" type="text" name="user_account" id="user_account" placeholder="Type Account ID" value="{{ old('user_account') }}">
                                    <span class="text-danger error_msg" style="margin-top: 3px;font-size: 15px;"></span>
                                    @if ($errors->has('user_account'))
                                        <span class="text-danger" role="alert">
                                            <strong>{{ $errors->first('user_account') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-6">                                 
                                <div class="form-group ">
                                    <label for="mobile" class="col-form-label pt-0">Mobile<span class="text-danger">*</span></label>
                                    <input class="form-control{{ $errors->has('mobile') ? ' is-invalid' : '' }}" type="text" name="mobile" id="mobile" placeholder="01913XXXXXX" value="{{ old('mobile') }}">
                                    @if ($errors->has('mobile'))
                                        <span class="text-danger" role="alert">
                                            <strong>{{ $errors->first('mobile') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>

                            <div class="col-md-6">                                   
                                <div class="form-group ">
                                    <label for="gender" class="col-form-label pt-0">Gender<span class="text-danger">*</span></label>
                                    <select id="gender" class="select2 form-control mb-3 custom-select" name="gender" style="width: 100%; height:42px;">
                                        <option disabled="" selected="" value="">Select One</option>
                                        <option value="Male" @if(old('gender')=='Male') selected="" @endif>Male</option> 
                                        <option value="Female" @if(old('gender')=='Female') selected="" @endif>Female</option> 
                                    </select>
                                    @if ($errors->has('gender'))
                                        <span class="text-danger" role="alert">
                                            <strong>{{ $errors->first('gender') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>

                            <div class="col-md-6">                                   
                                <div class="form-group ">
                                    <label for="religion" class="col-form-label pt-0">Religion<span class="text-danger">*</span></label>
                                    <select id="religion" class="select2 form-control mb-3 custom-select" name="religion" style="width: 100%; height:42px;">
                                        <option disabled="" selected="" value="">Select One</option>
                                        <option value="Islam" @if(old('religion')=='Islam') selected="" @endif>Islam</option> 
                                        <option value="Buddhist" @if(old('religion')=='Buddhist') selected="" @endif>Buddhist</option> 
                                        <option value="Christian" @if(old('religion')=='Christian') selected="" @endif>Christian</option> 
                                        <option value="Hindu" @if(old('religion')=='Hindu') selected="" @endif>Hindu</option> 
                                        <option value="Others" @if(old('religion')=='Others') selected="" @endif>Others</option> 
                                    </select>
                                    @if ($errors->has('religion'))
                                        <span class="text-danger" role="alert">
                                            <strong>{{ $errors->first('religion') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-6">                                 
                                <div class="form-group ">
                                    <label for="referral" class="col-form-label pt-0">Referral ID<span class="text-danger">*</span></label>
                                    <input class="form-control{{ $errors->has('referral') ? ' is-invalid' : '' }}" type="text" name="referral" id="referral" placeholder="Referral" value="{{ Auth::user()->user_id }}">
                                    <span class="text-danger error_msg_referral" style="margin-top: 3px;font-size: 15px;"></span>
                                    @if ($errors->has('referral'))
                                        <span class="text-danger" role="alert">
                                            <strong>{{ $errors->first('referral') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-6">                                 
                                <div class="form-group ">
                                    <label for="email" class="col-form-label pt-0">E-mail</label>
                                    <input class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" type="email" name="email" id="email" placeholder="Email" value="{{ old('email') }}">                                    
                                    @if ($errors->has('email'))
                                        <span class="text-danger" role="alert">
                                            <strong>{{ $errors->first('email') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-6">                                 
                                <div class="form-group ">
                                    <label for="password" class="col-form-label pt-0">Password<span class="text-danger">*</span></label>
                                    <input class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" type="password" name="password" id="password" placeholder="password">
                                    @if ($errors->has('password'))
                                        <span class="text-danger" role="alert">
                                            <strong>{{ $errors->first('password') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-6">                                 
                                <div class="form-group ">
                                    <label for="re_password" class="col-form-label pt-0">Re-password<span class="text-danger">*</span></label>
                                    <input class="form-control{{ $errors->has('re_password') ? ' is-invalid' : '' }}" type="password" name="re_password" id="re_password" placeholder="Re-password">
                                    @if ($errors->has('re_password'))
                                        <span class="text-danger" role="alert">
                                            <strong>{{ $errors->first('re_password') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-12 text-right mt-4">
                                <button type="submit" class="btn btn-dribbble">
                                    <i class="fas fa-save mr-2"></i> Save
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>                                                              
    </div><!--end row-->
    
</div> <!-- container-fluid -->
@push('alljs')
    <script src="{{ asset('') }}/assets/libs/select2/js/select2.min.js"></script>
    <script src="{{ asset('') }}/assets/js/pages/form-advanced.init.js"></script>
    <script src="{{ asset('') }}/assets/libs/dropzone/min/dropzone.min.js"></script>
    <script src="{{ asset('') }}/assets/libs/dropify/js/dropify.min.js"></script>

    <script src="{{ asset('') }}/assets/js/pages/form-fileuploads.init.js"></script>

    <script type="text/javascript">
        $('#user_account').on('change', function(){
            var user_account = $(this).val();
            var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
            $.ajax({
                 method: "POST",
                 url: '{{ route('user.user_check') }}',
                 data:  {_token: CSRF_TOKEN, user_account:user_account},
                 beforeSend: function(){
                   $('.error_msg').html('<i class="fas fa-circle-notch fa-spin" style="font-size: 16px;margin-top: 3px;"></i>');
                 },success: function(data){
                    $('.error_msg').html(data);
                 }
             });
        })
        $('#referral').on('change', function(){
            var referral = $(this).val();
            var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
            $.ajax({
                 method: "POST",
                 url: '{{ route('user.referral_check') }}',
                 data:  {_token: CSRF_TOKEN, referral:referral},
                 beforeSend: function(){
                   $('.error_msg_referral').html('<i class="fas fa-circle-notch fa-spin" style="font-size: 16px;margin-top: 3px;"></i>');
                 },success: function(data){
                    $('.error_msg_referral').html(data);
                 }
             });
        })
    </script>

    @if ($message = Session::get('error'))
    <script type="text/javascript">
        var msg = '{{$message}} ';   
        show_toast('error',msg);
    </script>
    @endif
    @if ($message = Session::get('success'))
    <script type="text/javascript">
        var msg = '{{$message}} ';   
        show_toast('success',msg);
    </script>
    @endif
@endpush
@endsection