@extends('dashbord.layouts.master')
@section('toolbar')
    <!--begin::Toolbar container-->
    <div id="kt_app_toolbar_container" class="app-container container-xxl 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">
                <li class="breadcrumb-item text-muted">
                    <a href="{{ route('admin.dashboard') }}" class="text-muted text-hover-primary">
                        {{trans('Toolbar.home')}}</a>
                </li>
                <li class="breadcrumb-item">
                    <span class="bullet bg-gray-400 w-5px h-2px"></span>
                </li>
                <li class="breadcrumb-item text-muted">
                    My Profile
                </li>
            </ul>
            <!--end::Breadcrumb-->
        </div>
        <!--end::Page title-->
    </div>
    <!--end::Toolbar container-->
@endsection

@section('content')
    <!--begin::Content container-->
    <div id="kt_app_content_container" class="app-container container-xxl">

        @if ($errors->any())
            <div class="alert alert-danger">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="d-flex flex-column gap-7 gap-lg-10">

            <!--begin::Update Password-->
            <div class="card card-flush py-4">
                <!--begin::Card header-->
                <div class="card-header">
                    <div class="card-title">
                        <h2>Update Password</h2>
                    </div>
                </div>
                <!--end::Card header-->
                <!--begin::Card body-->
                <div class="card-body pt-0">
                    <form method="POST" action="{{ route('admin.profile.password') }}" id="password_form"
                          class="form">
                        @csrf
                        @method('PUT')

                        <div class="row">
                            <div class="position-relative mb-3 col-md-4">
                                <label class="required form-label">Current Password</label>
                                <input class="form-control bg-transparent" type="password"
                                       placeholder="Current password" name="current_password"
                                       autocomplete="current-password" id="current-password-field"/>
                                <span
                                    class="btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2"
                                    data-kt-password-meter-control="visibility" id="current-password-toggle">
                                          <i class="fas fa-eye-slash fs-2 toggle-password" data-mode="password"></i>
                                            <i class="fas fa-eye fs-2 toggle-password d-none" data-mode="text"></i>
                                         </span>
                            </div>

                            <div class="position-relative mb-3 col-md-4">
                                <label class="required form-label">New Password</label>
                                <input class="form-control bg-transparent" type="password"
                                       placeholder="New password" name="password"
                                       autocomplete="new-password" id="new-password-field"/>
                                <span
                                    class="btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2"
                                    data-kt-password-meter-control="visibility" id="new-password-toggle">
                                          <i class="fas fa-eye-slash fs-2 toggle-password" data-mode="password"></i>
                                            <i class="fas fa-eye fs-2 toggle-password d-none" data-mode="text"></i>
                                         </span>
                            </div>

                            <div class="mb-10 fv-row col-md-4">
                                <label class="required form-label">Confirm New Password</label>
                                <input class="form-control bg-transparent" type="password"
                                       placeholder="Confirm new password" name="password_confirmation"
                                       autocomplete="new-password"/>
                            </div>
                        </div>

                        <div class="d-flex justify-content-end">
                            <button type="submit" class="btn btn-primary">
                                <span class="indicator-label">Save</span>
                                <span class="indicator-progress">Please wait...
                                    <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                            </button>
                        </div>
                    </form>
                </div>
                <!--end::Card body-->
            </div>
            <!--end::Update Password-->

        </div>
    </div>
    <!--end::Content container-->
@endsection

@section('js')
    <script>
        $(document).ready(function () {
            $("#current-password-toggle, #new-password-toggle").click(function () {
                var $wrapper = $(this).closest('.position-relative');
                var passwordField = $wrapper.find('input[type="password"], input[type="text"]').first();
                var passwordIcon = $wrapper.find('.toggle-password');

                if (passwordField.attr("type") === "password") {
                    passwordField.attr("type", "text");
                    passwordIcon.each(function () {
                        if ($(this).data("mode") === "password") {
                            $(this).addClass("d-none");
                        } else {
                            $(this).removeClass("d-none");
                        }
                    });
                } else {
                    passwordField.attr("type", "password");
                    passwordIcon.each(function () {
                        if ($(this).data("mode") === "password") {
                            $(this).removeClass("d-none");
                        } else {
                            $(this).addClass("d-none");
                        }
                    });
                }
            });
        });
    </script>
@endsection