@extends('admin.layouts.layout')
@section('content')
    <!-- BEGIN: Content-->
    <div class="app-content content ">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper container-xxl p-0">
            {{-- <div class="content-header row">
            <div class="content-header-left col-md-9 col-12 mb-2">
                <div class="row breadcrumbs-top">
                    <div class="col-12">
                        <h2 class="content-header-title float-start mb-0">Account Settings</h2>
                        <div class="breadcrumb-wrapper">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{url('admin/dashboard')}}">Home</a>
                                </li>
                                <li class="breadcrumb-item active"> Account Settings
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div> --}}
            <div class="content-body">
                <!-- account setting page -->
                <section id="page-account-settings">
                    <div class="row">
                        <!-- left menu section -->
                        <div class="col-md-4 mb-2 mb-md-0">
                            <ul class="nav nav-pills flex-column nav-left card card-body">
                                <!-- general -->
                                <li class="nav-item">
                                    <a class="nav-link active" id="account-pill-general" data-bs-toggle="pill"
                                        href="#account-vertical-general" aria-expanded="true">
                                        <i data-feather="user" class="font-medium-3 me-1"></i>
                                        <span class="fw-bold">General</span>
                                    </a>
                                </li>
                                <!-- change password -->
                                <li class="nav-item">
                                    <a class="nav-link" id="account-pill-password" data-bs-toggle="pill"
                                        href="#account-vertical-password" aria-expanded="false">
                                        <i data-feather="lock" class="font-medium-3 me-1"></i>
                                        <span class="fw-bold">Change Password</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <!--/ left menu section -->

                        <!-- right content section -->
                        <div class="col-md-8">
                            <div class="card">
                                <div class="card-body">
                                    <div class="tab-content">
                                        <!-- general tab -->
                                        <div role="tabpanel" class="tab-pane active" id="account-vertical-general"
                                            aria-labelledby="account-pill-general" aria-expanded="true">
                                            <!-- form -->
                                            <form class="validate-form mt-2" action="{{ url('admin/profile') }}"
                                                method="POST" enctype="multipart/form-data">
                                                <!-- header section -->
                                                @csrf
                                                <div class="d-flex">
                                                    <a href="javascript:;" class="me-25">
                                                        @if (Auth::user()->image)
                                                            <img src="{{ url(Auth::user()->image) }}"
                                                                id="account-upload-img" class="rounded me-50"
                                                                alt="profile image" height="80" width="80" />
                                                        @else
                                                            <img src="../../../app-assets/images/portrait/small/avatar-s-11.jpg"
                                                                id="account-upload-img" class="rounded me-50"
                                                                alt="profile image" height="80" width="80" />
                                                        @endif
                                                    </a>
                                                    <!-- upload and reset button -->
                                                    <div class="mt-75 ms-1">
                                                        <label for="account-upload"
                                                            class="btn btn-sm btn-primary mb-75 me-75">Upload</label>
                                                        <input type="file" name="image" id="account-upload" hidden
                                                            accept="image/*" />
                                                    </div>
                                                    <!--/ upload and reset button -->
                                                </div>
                                                <!--/ header section -->
                                                <div class="row">
                                                    <div class="col-12 col-sm-6">
                                                        <div class="mb-1">
                                                            <label class="form-label" for="account-name">Name</label>
                                                            <input type="text" class="form-control" id="account-name"
                                                                name="first_name" placeholder="Name"
                                                                value="{{ Auth::user()->first_name }}" />
                                                        </div>
                                                    </div>
                                                    <div class="col-12 col-sm-6">
                                                        <div class="mb-1">
                                                            <label class="form-label" for="account-e-mail">E-mail</label>
                                                            <input type="email" class="form-control" id="account-e-mail"
                                                                readonly name="email" placeholder="Email"
                                                                value="{{ Auth::user()->email }}" />
                                                        </div>
                                                    </div>
                                                    <div class="col-12 col-sm-6">
                                                        <div class="mb-1">
                                                            <label class="form-label" for="account-company">Country
                                                                Code</label>
                                                            <input type="text" class="form-control" min="1"
                                                                maxlength="4" id="account-company" name="country_code"
                                                                placeholder="Country Code"
                                                                value="{{ Auth::user()->country_code }}" />
                                                        </div>
                                                    </div>
                                                    <div class="col-12 col-sm-6">
                                                        <div class="mb-1">
                                                            <label class="form-label" for="account-company">Phone
                                                                Number</label>
                                                            <input type="number" class="form-control"
                                                                id="account-company" name="phone_number"
                                                                placeholder="Phone Number"
                                                                value="{{ Auth::user()->phone_number }}" />
                                                        </div>
                                                    </div>
                                                    <div class="col-12">
                                                        <button type="submit" class="btn btn-primary mt-2 me-1">Save
                                                            changes</button>
                                                    </div>
                                                </div>
                                            </form>
                                            <!--/ form -->
                                        </div>
                                        <!--/ general tab -->

                                        <!-- change password -->
                                        <div class="tab-pane fade" id="account-vertical-password" role="tabpanel"
                                            aria-labelledby="account-pill-password" aria-expanded="false">
                                            <!-- form -->
                                            <form class="validate-form" id="passwordForm"
                                                action="{{ url('/admin/change-password') }}" method="POST">
                                                @csrf
                                                <div class="row">
                                                    <div class="col-12 col-sm-6">
                                                        <div class="mb-1">
                                                            <label class="form-label" for="account-old-password">Old
                                                                Password</label>
                                                            <div
                                                                class="input-group form-password-toggle input-group-merge">
                                                                <input type="password" class="form-control"
                                                                    id="account-old-password" name="old_password"
                                                                    placeholder="Old Password" />
                                                                <div class="input-group-text cursor-pointer">
                                                                    <i data-feather="eye"></i>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    @error('old_password')
                                                        <span class="text-danger">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                                <div class="row">
                                                    <div class="col-12 col-sm-6">
                                                        <div class="mb-1">
                                                            <label class="form-label" for="account-new-password">New
                                                                Password</label>
                                                            <div
                                                                class="input-group form-password-toggle input-group-merge">
                                                                <input type="password" id="password" name="new_password"
                                                                    class="form-control" placeholder="New Password" />
                                                                <div class="input-group-text cursor-pointer">
                                                                    <i data-feather="eye"></i>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        @error('new_password')
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                    <div class="col-12 col-sm-6">
                                                        <div class="mb-1">
                                                            <label class="form-label"
                                                                for="account-retype-new-password">Retype New
                                                                Password</label>
                                                            <div
                                                                class="input-group form-password-toggle input-group-merge">
                                                                <input type="password" class="form-control"
                                                                    id="new_password_confirmation"
                                                                    name="new_password_confirmation"
                                                                    placeholder="New Password" />
                                                                <div class="input-group-text cursor-pointer"><i
                                                                        data-feather="eye"></i></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-12">
                                                        <button type="submit" class="btn btn-primary me-1 mt-1">Save
                                                            changes</button>
                                                    </div>
                                                </div>
                                            </form>
                                            <!--/ form -->
                                        </div>
                                        <!--/ change password -->
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--/ right content section -->
                    </div>
                </section>
                <!-- / account setting page -->

            </div>
        </div>
    </div>
    <!-- END: Content-->

    <script>
        jQuery('#passwordForm1').validate({
            rules: {
                old_password: {
                    required: true,
                },
                new_password: {
                    required: true,
                    minlength: 6,
                },
                new_password_confirmation: {
                    required: true,
                    minlength: 6,
                    equalTo: "#password"
                },
            },
            messages: {
                old_password: {
                    required: "Please enter your old password",
                },
                new_password: {
                    required: "Please enter password",
                    minlength: "Your password must be at least 6 characters long"
                },
                new_password_confirmation: {
                    required: "Please confirm your password",
                    minlength: "Your password must be at least 6 characters long",
                    equalTo: "Password and confirm password do not match"
                }
            }
        });
    </script>
@endsection