@extends('layout._default')
@section('title')
    Profile Settings
@endsection
@section('body-con')
   
<div class="card">
    <!--begin::Card header-->
    <div class="card-body py-4">
        
        <div class="w-50">
            <form class="form w-100" method="POST" novalidate="novalidate" id="kt_sign_in_form" data-kt-redirect-url="{{ route('dashboard') }}" action="{{ route('profile.update') }}" enctype="multipart/form-data">
                @csrf
                <div class="fv-row mb-7">
                    <!--begin::Label-->
                    <label class="d-block fw-semibold fs-6 mb-5">Avatar</label>
                    <!--end::Label-->
                    <!--begin::Image placeholder-->
                    <style>
                        .image-input-placeholder {
                            background-image: url('{{ image('svg/files/blank-image.svg') }}');
                        }

                        [data-bs-theme="dark"] .image-input-placeholder {
                            background-image: url('{{ image('svg/files/blank-image-dark.svg') }}');
                        }

                        .custom-image-placeholder {
                            background-image: url('{{ auth()->user()->profile_image }}')
                        }
                    </style>
                    <!--end::Image placeholder-->
                    <!--begin::Image input-->
                    <div class="image-input image-input-outline @if(auth()->user()->profile_image == null) image-input-placeholder @else custom-image-placeholder @endif image-input-empty" data-kt-image-input="true">
                        <!--begin::Preview existing avatar-->
                        <div class="image-input-wrapper w-125px h-125px" style="background-image: "></div>
                        
                        <!--end::Preview existing avatar-->
                        <!--begin::Label-->
                        <label class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="change" data-bs-toggle="tooltip" title="Change avatar">
                            {!! getIcon('pencil','fs-7') !!}
                            <!--begin::Inputs-->
                            <input type="file" wire:model.defer="avatar" name="avatar" accept=".png, .jpg, .jpeg"/>
                            <input type="hidden" name="avatar_remove"/>
                            <!--end::Inputs-->
                        </label>
                        <!--end::Label-->
                        <!--begin::Cancel-->
                        <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="cancel" data-bs-toggle="tooltip" title="Cancel avatar">
                            {!! getIcon('cross','fs-2') !!}
                        </span>
                        <!--end::Cancel-->
                        <!--begin::Remove-->
                        <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="remove" data-bs-toggle="tooltip" title="Remove avatar">
                            {!! getIcon('cross','fs-2') !!}
                        </span>
                        <!--end::Remove-->
                    </div>
                    <!--end::Image input-->
                    <!--begin::Hint-->
                    <div class="form-text">Allowed file types: png, jpg, jpeg.</div>
                    <!--end::Hint-->
                    @error('avatar')
                    <span class="text-danger">{{ $message }}</span> @enderror
                </div>
                <div class="row g-3 mb-2">
                    <div class="fv-row mb-8">
                        <label class="required fw-semibold fs-6 mb-2">Email</label>
                        <!--begin::Email-->
                        <input type="text" placeholder="Email" name="email" id="email" autocomplete="off" class="form-control bg-transparent" value="{{ auth()->user()->email }}" onkeyup="validate()" @if(auth()->user()->role->slug != 'admin') disabled @endif/>
                        <span class="text-danger" id="email_error"></span>      
                        <!--end::Email-->
                    </div>
                </div>

                <div class="row g-3 mb-2">
                    <div class="fv-row mb-8">
                        <label class="required fw-semibold fs-6 mb-2">Full Name</label>
                        <!--begin::Email-->
                        <input type="text" placeholder="Name" name="name" id="name" autocomplete="off" class="form-control bg-transparent" value="{{ auth()->user()->name }}" onkeyup="validate()"/>
                        <span class="text-danger" id="name_error"></span> 
                        <!--end::Email-->
                    </div>
                </div>

                {{-- <div class="row g-3 mb-2">
                    <div class="fv-row mb-8">
                        <label class="required fw-semibold fs-6 mb-2">Phone</label>
                        <!--begin::Email-->
                        <input type="text" placeholder="Phone" name="phone" id="phone" autocomplete="off" class="form-control bg-transparent" value="{{ auth()->user()->phone }}" onkeyup="validate()"/>
                        <span class="text-danger" id="phone_error"></span> 
                        <!--end::Email-->
                    </div>
                </div> --}}

                {{-- <div class="row g-3 mb-2">
                    <div class="fv-row mb-8">
                        <label class="fw-semibold fs-6 mb-2">UserName</label>
                        <!--begin::Email-->
                        <input type="text" placeholder="UserName" name="Username" autocomplete="off" class="form-control bg-transparent" value="{{ auth()->user()->username }}" disabled/>
                        <!--end::Email-->
                    </div>
                </div> --}}

                <button type="submit" class="btn btn-sm btn-dark" >
                    <span class="indicator-label" >Submit</span>
                    <span class="indicator-progress">
                        Please wait...
                        <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                    </span>
                </button>

            </form>
        </div>
    </div>

</div>

@push('scripts')
    <script>
        $("#kt_sign_in_form").on('submit', function(e) {
            e.preventDefault();
            if(validate())
            {
                this.submit();
            }
        })

        function validate()
        {
            var email = $("#email").val();
            var phone = $("#phone").val();
            var name = $("#name").val();
            $('.text-danger').html('');
            var validate = true;
            if(email === '')
            {
                $("#email_error").html('Email is required');
                validate = false;
            }
            if(phone === '')
            {
                $("#phone_error").html('Phone is required');
                validate = false;
            }
            if(name === '')
            {
                $("#name_error").html('Name is required');
                validate = false;
            }
            return validate;
        }
    </script>
@endpush

@endsection