@extends('admin.layouts.master')
@section('title')
    {{ $data['title'] ?? '' }}
@endsection
@section('content')
    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0">Profile</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                            <li class="breadcrumb-item active">Profile</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>

        <div class="content">
            <div class="container-fluid">
                <div class="d-flex justify-content-center">
                    <div class="col-md-3">
                        <div class="card card-primary card-outline">
                            <div class="card-body box-profile">
                                <div class="float-right">
                                    <a href="{{ route('admin.profile', ['mode' => 'edit']) }}" class="text-info"><i
                                            class="fas fa-edit"></i></a>
                                </div>
                                <div class="text-center">
                                    <img class="profile-user-img img-fluid img-circle"
                                        src="{{ getPhoto(Auth::user()->image) }}"
                                        style="width:120px; height:120px; display:block;" alt="">
                                </div>
                                <h3 class="profile-username text-center">{{ Auth::user()->name }}</h3>
                                <p class="text-muted text-center">{{ Auth::user()->email }}</p>
                                <p class="text-muted text-center">From :
                                    {{ date('d-M-Y', strtotime(Auth::user()->created_at)) }}</p>
                                <p class="text-muted text-center">Role :
                                    {{ ucfirst(auth()->user()->getRoleNames()->first()) }}</p>
                            </div>
                        </div>
                    </div>


                    @if (request()->has('mode') && request()->get('mode') == 'edit')
                        <div class="col-md-9">
                            <div class="card">
                                <div class="card-header">
                                    <div class="d-flex justify-content-between">

                                        <h3 class="card-title">Edit Profile</h3>

                                        <a href="{{ route('admin.profile') }}"
                                            class="btn btn-primary float-text-end">Back</a>

                                    </div>
                                </div>
                                <div class="card-body">
                                    <form action="{{ route('admin.profile.update') }}" method="post"
                                        enctype="multipart/form-data">
                                        @csrf
                                        <div class="row">

                                            <div class="col-md-12 ">
                                                <div id="image-preview-container" class=""
                                                    style="margin-bottom: 20px;">
                                                    <img style="width: 150px; height: 150px;" id="image-preview"
                                                        class="img-thumbnail" src="{{ getPhoto(Auth::user()->image) }}"
                                                        alt="Image Preview">
                                                </div>
                                                <label class="" for="customFile">Profile Image <span
                                                        class="text-success">(Recommened size:250*250)</span></label><br>
                                                <div class="custom-file col-md-6">
                                                    <label class="custom-file-label" for="customFile">Profile Image</label>
                                                    <input type="file" name="image" class="custom-file-input"
                                                        id="image-input">
                                                </div>
                                            </div>
                                            <div class="col-md-6 mt-2">
                                                <div class="form-group">
                                                    <label for="name" class="form-label">Name</label>
                                                    <input type="text" name="name" id="name"
                                                        class="form-control shadow-none"
                                                        value="{{ auth()->guard('admin')->user()->name }}">
                                                </div>
                                            </div>
                                            <div class="col-md-6 mt-2">
                                                <div class="form-group">
                                                    <label for="email" class="form-label">Email</label>
                                                    <input type="text" name="email" id="email"
                                                        class="form-control shadow-none"
                                                        value="{{ auth()->guard('admin')->user()->email }}">
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <div class="form-group text-center">
                                                    <button type="submit" class="btn btn-primary">Update</button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>


                            <div class="card">
                                <div class="card-header">
                                    Password Change
                                </div>
                                <div class="card-body">
                                    <form action="{{ route('admin.profile.password') }}" method="post"
                                        enctype="multipart/form-data">
                                        @csrf

                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="password">Passwords</label>
                                                    <div class="input-group">
                                                        <input type="password" name="password" id="password"
                                                            class="form-control shadow-none password-field">
                                                        <span class="input-group-text">
                                                            <span
                                                                class="link-secondary fa fa-fw fa-eye field-icon toggle-password"
                                                                toggle=".password-field">
                                                            </span>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">

                                                <div class="form-group">
                                                    <label for="password">Conform Passwords</label>
                                                    <div class="input-group">
                                                        <input type="password" name="password_confirmation"
                                                            id="password_confirmation"
                                                            class="form-control shadow-none cpassword-field">
                                                        <span class="input-group-text">
                                                            <span
                                                                class="link-secondary fa fa-fw fa-eye field-icon toggle-password"
                                                                toggle=".cpassword-field"></span>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <div class="form-group text-center">
                                                    <button type="submit" class="btn btn-primary ">Update</button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>

                        </div>
                    @endif

                </div>
            </div>
        </div>
    </div>
@endsection
@push('script')
    <script>
        $(document).ready(function() {
            // Listen for changes in the file input
            $("#image-input").change(function() {
                readURL(this);
            });
        });

        // Function to display the selected image in the preview container
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function(e) {
                    $("#image-preview").attr("src", e.target.result);
                    $("#image-preview-container").show();
                };

                reader.readAsDataURL(input.files[0]);
            }
        }
        $(document).ready(function() {

            // password show hide
            $(".toggle-password").click(function() {
                $(this).toggleClass("fa-eye fa-eye-slash");
                var input = $($(this).attr("toggle"));
                if (input.attr("type") == "password") {
                    input.attr("type", "text");
                } else {
                    input.attr("type", "password");
                }
            });

            $(".confirm-toggle-password").click(function() {
                $(this).toggleClass("fa-eye fa-eye-slash");
                var input = $($(this).attr("toggle"));
                if (input.attr("type") == "password") {
                    input.attr("type", "text");
                } else {
                    input.attr("type", "password");
                }
            });

        })
    </script>
@endpush