@extends('welcome.welcome-layout')

@section('style')
    <style type="text/css" data-hse-inline-css="true">
        @media only screen and (max-width: 479.98px) {

            .dark_outline_btn,
            .dark_btn {
                width: 100%;
            }
        }

        .company_agreement input.form-check-input {
            width: 30px;
            height: 30px;
        }

        .modal .modal-header.green_border {
            border-top: 5px solid #5093c8;
        }

        .banner-sec-hero-document {
            background-color: rgba(245, 248, 251, 1);
            width: 100%;
            height: 30vh;
        }

        .banner-content-about h2 {
            color: rgba(34, 42, 46, 1);
        }

        .document_checkbox input[type="checkbox"] {
            appearance: none;
            -webkit-appearance: none;
            width: 1.5rem;
            height: 1.5rem;
            border: 1px solid rgba(195, 204, 208, 1);
            background-color: rgba(236, 242, 244, 1);
            border-radius: 4px;
            cursor: pointer;
            position: relative;
        }
    </style>
@endsection

@section('content')
    <section class="banner-sec-hero-document d-flex align-items-center justify-content-center p-relative">
        <div class="container">
            <div class="row banner-content-about">
                <div class="col-md-12 text-center">
                    <h2 class="text-uppercase fw-bold mb-md-4 mb-4">Profile update</h2>
                </div>
            </div>
        </div>
    </section>
    <section class="profile">
        <div class="container">
            <div class="row pt-5 pb-5 justify-content-center">
                {{-- <div class="col-md-7 text-center"> --}}
                <div class="col-md-7 text-center">
                    <div class="profile-card py-2 px-4">
                        <div class="card-body">
                            <h3 class="text-start pb-4">Update your profile picture</h3>
                            <div class="d-sm-flex justify-content-center justify-content-sm-start align-items-center gap-4">
                                <!-- Profile Image Placeholder -->
                                <div class="profile-img-wrapper mb-3">
                                    @if(Session::has('user_pic'))
                                        <img src="{{
                                            isset($profilePic) && $profilePic != '' && isset($profilePicStatus) && $profilePicStatus !=0
                                            ? asset('crm/employee/' . $profilePic)
                                            : asset('images/no-image.png')
                                        }}"
                                        id="preview" alt="mdo" class="rounded-circle profile-img-top">
                                    @else
                                        <img src="{{ isset($employee_pic) ? asset('crm/employee/' . $employee_pic) : asset('images/no-image.png') }}"
                                        id="preview" class="img-fluid" alt="Profile" width="80" height="80">
                                    @endif
                                </div>

                                <!-- Upload Button -->
                                <div class="">
                                    <h6 class="mb-3 text-sm-start text-dark">{{ Session::get('user_name') }}</h6>
                                    <form action="{{ route('update.employeepic') }}" method="POST" enctype="multipart/form-data">
                                        @csrf
                                        <input type="hidden" name="user_id" value="{{ $auth['user_id'] ?? '' }}">

                                        <label for="profileInput" class="btn dark_outline_btn px-4 mb-3">Upload Profile Pic</label>
                                        <input type="file" id="profileInput" name="employee_pic" class="d-none" accept="image/*" onchange="previewProfile(event)">
                                        <button type="submit" class="btn dark_btn px-5 py-2 text-white d-none ms-2 mb-3" id="saveBtn">
                                            Save
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                     <div class="mt-4">
                        <p class="mb-0"><b>
                            Please upload a clear, recent headshot photograph. This image will be used to create your official staff ID badge, which is required when working within the homes.</b>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('script')
    <script>
        function previewProfile(event) {
            const reader = new FileReader();
            reader.onload = function() {
                document.getElementById('preview').src = reader.result;
            };
            reader.readAsDataURL(event.target.files[0]);

            // Show the Save button
            document.getElementById('saveBtn').classList.remove('d-none');
        }
    </script>
@endsection