{{-- Extends layout --}}
@extends('layout.default')

{{-- Content --}}
@section('content')

<style>
.form-control{
    display:inline-block;
}      
label.error{
    color:red;
} 
.form-control.error {
    border-color: #fd397a;
    padding-right: calc(1.5em + 1.3rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fd397a' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23fd397a' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E");
    background-repeat: no-repeat;
    background-position: center right calc(0.375em + 0.325rem);
    background-size: calc(0.75em + 0.65rem) calc(0.75em + 0.65rem);
}
 .required
{
    color:red;
}
</style>
<!--begin::Card-->
<div class="card card-custom gutter-b">
    <div class="card-header flex-wrap pt-6 pb-0 ">
        <div class="card-title">
         @if(isset($appuser)) 
            <h3 class="card-label">Edit AppUser Page
            @else 
            <h3 class="card-label">Add AppUser Page
            @endif 
                <!-- <span class="d-block text-muted pt-2 font-size-sm">row selection and group actions</span> --></h3>
            </div>

        </div>
          @if(isset($appuser)) 
        <form class="kt-form" id="frmappuseradd" enctype="multipart/form-data"  method='post' action="/appuser/{{$appuser->id}}" >
            <input type='hidden' id='documentisset' name='documentisset' value='{{count($userdocument)}}' />
                   
                   
            @method('put')
            @else 
            <form name='frmappuseradd' id='frmappuseradd' enctype="multipart/form-data" method="post" action="{{ route('appuser.store') }}" >   
            <input type='hidden' id='documentisset' name='documentisset' value='0' />
                @endif  
                    
                @csrf 
                   
                <input type="hidden" id="usr_id" name="usr_id" value=""/>
                <input type="hidden" id="usr_document" name="usr_document" value=""/>
                   
                <div class="card-body">
                   
                    <div class="form-group row">
                        <div class="col-lg-6">
                            <label>Name</label><span class="required">*</span><span>:</span>
                            <input type="text" name='name' value='@isset($appuser->username){{ $appuser->username }} @endisset' class="form-control"
                            placeholder="Enter Name">
                        </div>
                        <div class="col-lg-6">
                            <label class="">Email</label><span class="required">*</span><span>:</span>
                            <input name='email' type="text" class="form-control"
                            placeholder="Enter Email" value='@isset($appuser->email){{$appuser->email}}@endisset'>
                        </div>
                    </div>  
                    <div class="form-group row">
                        <div class="col-lg-6">
                            <label>Password</label><span class="required"> @if(!isset($appuser)) * @endif</span><span>:</span>



                            <input type='password' name='password' type="text" class="form-control"
                            @if(!isset($appuser)) placeholder="Enter Password" @else placeholder="Please leave password empty retain old password" @endif>
                        </div>
                        <div class="col-lg-6">
                            <label>Phone Number</label><span class="required"> @if(!isset($appuser)) * @endif</span><span>:</span>

                            <input name='phoneno' type="text" class="form-control"
                            placeholder="Enter Phone No" value='@isset($appuser->phone){{ $appuser->phone  }}@endisset'>

                        </div>
                    </div>
                    
                    <div class="form-group row">
                        <div class="col-lg-6">
                            <label>User Country</label><span class="required">*</span><span>:</span>  
                                <select class="form-control" name="country_id">
                                    <option value="">Select Country</option>
                                @foreach ($country as $con)	
                                    <option value='{{ $con->id }}' @if (@isset ($appuser->country_id) && $appuser->country_id == $con->id) selected @endif>{{ ucfirst($con->name) }}</option>
                                @endforeach    
                                </select>
                        </div>
                        <div class="col-lg-6">
                        <label>SSN Number</label><span class="required"> @if(!isset($appuser)) * @endif</span><span>:</span>
                            <input name='ssn' type="text" class="form-control"
                            placeholder="Enter SSN Number" value='@isset($appuser->ssn){{ $appuser->ssn  }}@endisset'>
                        </div>
                    </div>
                
                    <div class="form-group row">
                        <div class="col-lg-6">
                            <div class="image-input image-input-outline" id="kt_image_1"> 
                            @if(@isset ($appuser->profile_pic) && $appuser->profile_pic !="")                                                                        
                            <div class="image-input-wrapper" style="background-image: url({{ asset('/media/users/'.$appuser->profile_pic) }})"></div>
                            @else
                            <div class="image-input-wrapper" style="background-image: url({{ asset('/media/users/blank.png') }})"></div>
                            @endif
                            <label class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="change" data-toggle="tooltip" title="" data-original-title="Change avatar">
                                <i class="fa fa-pen icon-sm text-muted"></i>
                                <input type="file" name="profile_avatar" accept=".png, .jpg, .jpeg" />
                                <input type="hidden" name="profile_avatar_remove" />
                            </label>
                            <span class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="cancel" data-toggle="tooltip" title="Cancel avatar">
                                <i class="ki ki-bold-close icon-xs text-muted"></i>
                            </span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-lg-3">
                            <label class="">Status:</label>
                        </div>
                        <div class="col-lg-3">
                        <input type='hidden' id='appuser_id' name='appuser_id' value='@if(isset($appuser)){{$appuser->id}}@endif' />
                            <input type="hidden" name="status" @if (@isset ($appuser->status) && $appuser->status == "0") value="0" @else value="1" @endif />
                            <span class="kt-switch kt-switch--sm">
                                <label class="checkbox">
                                    <input type="checkbox" @if (@isset ($appuser->status) && $appuser->status == '0') value="0" @else checked="checked" value="1" @endif name="status_hidden" onclick="checkValset()" >
                                    <span></span>
                                </label>
                            </span>
                        </div>
                    </div>
                    <div class="form-group row">
                   
                        <label class="col-lg-3 col-form-label text-lg-left">Upload Files:</label>
                        <div class="col-lg-9">
                            <div class="dropzone dropzone-multi" id="kt_dropzone_5">
                                <div class="dropzone-panel mb-lg-0 mb-2">
                                    <a class="dropzone-select btn btn-light-primary font-weight-bold btn-sm">Attach files</a>
                                </div>
                                <div class="dropzone-items">
                                    @if (@isset ($userdocument))
                                        @if(count($userdocument)>0)
                                            @foreach ($userdocument as $document)
                                                <div class="dropzone-item">
                                                    <div class="dropzone-file">
                                                        <div class="dropzone-filename" title="some_image_file_name.jpg">
                                                            <span data-dz-name="">{{$document->original_name}}</span>
                                                            <!-- <strong>(
                                                            <span data-dz-size="">340kb</span>)</strong> -->
                                                        </div>
                                                        <div class="dropzone-error" data-dz-errormessage=""></div>
                                                    </div>
                                                    <div class="dropzone-progress">
                                                        <div class="progress">
                                                            <div class="progress-bar bg-primary" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" data-dz-uploadprogress=""></div>
                                                        </div>
                                                    </div>
                                                    <div class="dropzone-toolbar">
                                                        <a href="/documentdelete/{{$document->id}}">
                                                            <span class="dropzone-delete" data-dz-remove="{{$document->id}}">
                                                                <i class="flaticon2-cross"></i>
                                                            </span>
                                                        </a>
                                                    </div>
                                                </div>
                                            @endforeach
                                        @else
                                            <div class="dropzone-item" style="display:none">
                                                <div class="dropzone-file">
                                                    <div class="dropzone-filename" title="some_image_file_name.jpg">
                                                        <span data-dz-name="">some_image_file_name.jpg</span>
                                                        <strong>(
                                                        <span data-dz-size="">340kb</span>)</strong>
                                                    </div>
                                                    <div class="dropzone-error" data-dz-errormessage=""></div>
                                                </div>
                                                <div class="dropzone-progress">
                                                    <div class="progress">
                                                        <div class="progress-bar bg-primary" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" data-dz-uploadprogress=""></div>
                                                    </div>
                                                </div>
                                                <div class="dropzone-toolbar">
                                                    <span class="dropzone-delete" data-dz-remove="">
                                                        <i class="flaticon2-cross"></i>
                                                    </span>
                                                </div>
                                            </div>
                                        @endif         
                                    @else
                                        <div class="dropzone-item" style="display:none">
                                            <div class="dropzone-file">
                                                <div class="dropzone-filename" title="some_image_file_name.jpg">
                                                    <span data-dz-name="">some_image_file_name.jpg</span>
                                                    <strong>(
                                                    <span data-dz-size="">340kb</span>)</strong>
                                                </div>
                                                <div class="dropzone-error" data-dz-errormessage=""></div>
                                            </div>
                                            <div class="dropzone-progress">
                                                <div class="progress">
                                                    <div class="progress-bar bg-primary" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" data-dz-uploadprogress=""></div>
                                                </div>
                                            </div>
                                            <div class="dropzone-toolbar">
                                                <span class="dropzone-delete" data-dz-remove="">
                                                    <i class="flaticon2-cross"></i>
                                                </span>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </div>
                            <span class="form-text text-muted">Max file size is 1MB and max number of files is 5.</span>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <button class="btn btn-primary mr-2" id="submit_appuser">Submit</button>
                    <button class="btn btn-primary mr-2" hidden id="myprocessqButton"></button>
                    <button  id="cancel_appuser" class="btn btn-secondary">Cancel</button>
                </div>

            </form>
        </div>
        <!--end::Card-->


        @endsection

        {{-- Styles Section --}}
        @section('styles')

        @endsection

        {{-- Scripts Section --}}
        @section('scripts')

        <script src="{{ asset('/js/appusers/appuser_add.js') }}" type="text/javascript"></script>
       
        @endsection