{{-- {{ dd($roleData) }} --}}
@extends('layouts.app')
@section('content')
    <!--begin::Toolbar-->
    <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
        <!--begin::Toolbar container-->
        <div id="kt_app_toolbar_container" class="app-container container-fluid d-flex flex-stack">
            <!--begin::Page title-->
            <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                <!--begin::Title-->
                <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">
                    My Profile</h1>
                <!--end::Title-->
                <!--begin::Breadcrumb-->
                <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                    <!--begin::Item-->
                    <li class="breadcrumb-item text-muted">
                        <a href="{{ route('dashboard') }}">Home</a>
                    </li>
                    <!--end::Item-->
                    <!--begin::Item-->
                    <li class="breadcrumb-item">
                        <span class="bullet bg-gray-400 w-5px h-2px"></span>
                    </li>
                    <!--end::Item-->
                    <!--begin::Item-->
                    <li class="breadcrumb-item text-muted">My Profile</li>
                    <!--end::Item-->
                </ul>
                <!--end::Breadcrumb-->
                <div style="padding-left:916px;"><a href="{{ route('dashboard') }}" class="btn btn-primary">Back</a>
                </div>
            </div>
            <!--end::Page title-->
        </div>
        <!--end::Toolbar container-->
    </div>
    <!--end::Toolbar-->

    <!--begin::Content-->
    <div id="kt_app_content" class="app-content flex-column-fluid">
        <!--begin::Content container-->
        <div id="kt_app_content_container" class="app-container container-fluid">
            <!--begin::Row-->
            <div class="g-5 g-xl-10 mb-5 mb-xl-10">
                <!--begin::Col-->
                <div class="col-xxl-12">
                    <!--begin::Card widget 18-->
                    <div class="card card-flush h-xl-100">
                        <!--begin::Body-->
                        <div class="card-body py-9">
                            <!--begin::Row-->
                            <div class="row gx-9 h-100">
                                <!--begin::Col-->
                                <div>
                                    <form id="my_prof_form" method="post">
                                        @csrf
                                        <div class="row">
                                            <div class="col-md-10">
                                                <div class="row">
                                                    <div class="form-group col-md-6">
                                                        <label class="d-block fw-semibold fs-6 mb-5">
                                                            <span class="required">First Name</span>
                                                            <i class="fas fa-exclamation-circle ms-2 fs-7"
                                                                data-bs-toggle="tooltip" title="Enter first name."></i>
                                                        </label>
                                                        <input type="text" name="first_name" class="form-control"
                                                            id="my_prof_first_name" placeholder="First Name"
                                                            value="{{ auth()->user()->first_name }}">
                                                    </div>
                                                    <div class="form-group col-md-6">
                                                        <label class="d-block fw-semibold fs-6 mb-5">
                                                            <span class="required">Last Name</span>
                                                            <i class="fas fa-exclamation-circle ms-2 fs-7"
                                                                data-bs-toggle="tooltip" title="Enter last name."></i>
                                                        </label>
                                                        <input type="text" name="last_name" class="form-control"
                                                            id="my_prof_last_name" placeholder="Last Name"
                                                            value="{{ auth()->user()->last_name }}">
                                                    </div>
                                                    <input type="hidden" name="uuid" id="my_prof_id"
                                                        value="{{ auth()->user()->uuid }}">
                                                </div>
                                                <br>
                                                <div class="row">
                                                    <div class="form-group col-md-6">
                                                        <label class="d-block fw-semibold fs-6 mb-5">
                                                            <span class="required">Phone</span>
                                                            <i class="fas fa-exclamation-circle ms-2 fs-7"
                                                                data-bs-toggle="tooltip" title="Enter phone number."></i>
                                                        </label>
                                                        <input type="text" name="phone" class="form-control"
                                                            id="my_prof_phone" placeholder="Phone" maxlength="10"
                                                            value="{{ auth()->user()->phone }}"
                                                            oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');">
                                                    </div>
                                                    <div class="form-group col-md-6">
                                                        <label class="d-block fw-semibold fs-6 mb-5">
                                                            <span class="required">Email</span>
                                                            <i class="fas fa-exclamation-circle ms-2 fs-7"
                                                                data-bs-toggle="tooltip" title="Enter email id."></i>
                                                        </label>
                                                        <input type="email" name="email" class="form-control"
                                                            id="my_prof_email" placeholder="Email"
                                                            value="{{ auth()->user()->email }}" readonly>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="fv-row col-md-2">
                                                <!--begin::Label-->
                                                <label class="d-block fw-semibold fs-6 mb-5">
                                                    <span class="required">User Image</span>
                                                    <i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip"
                                                        title="Select a user image."></i>
                                                </label>
                                                <!--end::Label-->
                                                <!--begin::Image input placeholder-->
                                                <style>
                                                    .image-input-placeholder {
                                                        background-image: url('{{ asset('assets/media/svg/files/blank-image.svg') }}');
                                                    }

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

                                                <!--end::Image input placeholder-->
                                                <!--begin::Image input-->
                                                <div class="image-input image-input-empty image-input-outline image-input-placeholder"
                                                    data-kt-image-input="true">
                                                    <!--begin::Preview existing avatar-->
                                                    <div class="image-input-wrapper w-125px h-125px"></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="Add image">
                                                        <i class="bi bi-pencil-fill fs-7"></i>
                                                        <!--begin::Inputs-->
                                                        <input type="file" name="avatar" accept=".png, .jpg, .jpeg"
                                                            required id="my_prof_image" />
                                                        <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 image">
                                                        <i class="bi bi-x fs-2"></i>
                                                    </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 logo">
                                                        <i class="bi bi-x fs-2"></i>
                                                    </span>
                                                    <!--end::Remove-->
                                                </div>
                                                <!--end::Image input-->
                                                <!--begin::Hint-->
                                                <div class="form-text" style="font-size: 10px;">Allowed file types: png,
                                                    jpg, jpeg.</div>
                                                <!--end::Hint-->
                                            </div>
                                        </div>
                                        <input type="hidden" id="my_prof_img_hidden"
                                            value="{{ auth()->user()->image }}">

                                        <div class="form-group" style="margin-top: 40px; margin-left: 450px;">
                                            <a href="javascript:void(0)" type="submit" class="btn btn-primary"
                                                id="my_prof_submit">Save</a>
                                        </div>
                                    </form>
                                </div>
                                <!--end::Col-->
                            </div>
                            <!--end::Row-->
                        </div>
                        <!--end::Body-->
                    </div>
                    <!--end::Card widget 18-->
                </div>
                <!--end::Col-->
            </div>
            <!--end::Row-->
        </div>
        <!--end::Content container-->
    </div>
    <!--end::Content-->
@endsection
@push('script')
    {{-- <script>
        const base_url = "{{ url('/') }}";
        const asset_url = "{{ asset('') }}";
    </script> --}}
    <script src="{{ asset('assets/js/profile/my_profile.js') }}"></script>
@endpush