@extends('admin.layouts.main')

@section('title', 'Profile')

@section('menu', 'Profile')

@push('css')
    <!-- Asset -->
    <link href="{{ asset('assets/metronic/plugins/custom/cropper/cropper.bundle.css') }}" rel="stylesheet" type="text/css"/>
    <!-- Asset -->

    <!-- Custom Style -->
    <style>
        #img_container {
            position: relative;
            display: inline-block;
            text-align: center;
        }
        .btn-foto {
            position: absolute;
            bottom: 0rem;
            width: 100%;
        }
        .transparan{
            background-color: #009ef7;
            cursor: pointer;
            opacity: 1;
        }
    </style>
    <!-- Custom Style -->
@endpush

@section('breadcrumb')
<div class="toolbar" id="kt_toolbar">
    <div id="kt_toolbar_container" class="container-fluid d-flex justify-content-end flex-stack">
        <ol class="breadcrumb text-muted fs-6 fw-bold">
            <li class="breadcrumb-item px-3 text-muted">Profile</li>
        </ol>
    </div>
</div>
@endsection

@section('content')
    <div id="kt_app_content_container" class="app-container container-fluid">
        <div class="card mb-5 mb-xxl-8">
            <div class="card-body pt-9 pb-0">
                <div class="d-flex flex-wrap flex-sm-nowrap mb-3">
                    <div class="me-7 mb-4">
                        <div class="symbol symbol-100px symbol-lg-160px symbol-fixed position-relative">
                            <img src="{{ (auth()->user()->photo != NULL) ? asset(auth()->user()->photo) : asset('assets/metronic/img/profile_placeholder.jpg') }}" alt="image" />
                            <div class="position-absolute translate-middle bottom-0 start-100 mb-6 bg-success rounded-circle border border-4 border-white h-20px w-20px"></div>
                        </div>
                    </div>
                    <div class="flex-grow-1">
                        <div class="d-flex justify-content-between align-items-start flex-wrap mb-2">
                            <div class="d-flex flex-column">
                                <div class="d-flex align-items-center mb-2">
                                    <a class="text-gray-900 text-hover-primary fs-2 fw-bolder me-1">{{ auth()->user()->name }}</a>
                                    <a >
                                        <span class="svg-icon svg-icon-1 svg-icon-primary">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
                                                <path d="M10.0813 3.7242C10.8849 2.16438 13.1151 2.16438 13.9187 3.7242V3.7242C14.4016 4.66147 15.4909 5.1127 16.4951 4.79139V4.79139C18.1663 4.25668 19.7433 5.83365 19.2086 7.50485V7.50485C18.8873 8.50905 19.3385 9.59842 20.2758 10.0813V10.0813C21.8356 10.8849 21.8356 13.1151 20.2758 13.9187V13.9187C19.3385 14.4016 18.8873 15.491 19.2086 16.4951V16.4951C19.7433 18.1663 18.1663 19.7433 16.4951 19.2086V19.2086C15.491 18.8873 14.4016 19.3385 13.9187 20.2758V20.2758C13.1151 21.8356 10.8849 21.8356 10.0813 20.2758V20.2758C9.59842 19.3385 8.50905 18.8873 7.50485 19.2086V19.2086C5.83365 19.7433 4.25668 18.1663 4.79139 16.4951V16.4951C5.1127 15.491 4.66147 14.4016 3.7242 13.9187V13.9187C2.16438 13.1151 2.16438 10.8849 3.7242 10.0813V10.0813C4.66147 9.59842 5.1127 8.50905 4.79139 7.50485V7.50485C4.25668 5.83365 5.83365 4.25668 7.50485 4.79139V4.79139C8.50905 5.1127 9.59842 4.66147 10.0813 3.7242V3.7242Z" fill="#00A3FF" />
                                                <path class="permanent" d="M14.8563 9.1903C15.0606 8.94984 15.3771 8.9385 15.6175 9.14289C15.858 9.34728 15.8229 9.66433 15.6185 9.9048L11.863 14.6558C11.6554 14.9001 11.2876 14.9258 11.048 14.7128L8.47656 12.4271C8.24068 12.2174 8.21944 11.8563 8.42911 11.6204C8.63877 11.3845 8.99996 11.3633 9.23583 11.5729L11.3706 13.4705L14.8563 9.1903Z" fill="white" />
                                            </svg>
                                        </span>
                                    </a>
                                </div>
                                <div class="d-flex flex-wrap fw-bold fs-6 mb-4 pe-2">
                                    <a class="d-flex align-items-center text-gray-400 text-hover-primary me-5 mb-2">
                                        <span class="svg-icon svg-icon-4 me-1">
                                            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path opacity="0.3" d="M16.5 9C16.5 13.125 13.125 16.5 9 16.5C4.875 16.5 1.5 13.125 1.5 9C1.5 4.875 4.875 1.5 9 1.5C13.125 1.5 16.5 4.875 16.5 9Z" fill="currentColor" />
                                                <path d="M9 16.5C10.95 16.5 12.75 15.75 14.025 14.55C13.425 12.675 11.4 11.25 9 11.25C6.6 11.25 4.57499 12.675 3.97499 14.55C5.24999 15.75 7.05 16.5 9 16.5Z" fill="currentColor" />
                                                <rect x="7" y="6" width="4" height="4" rx="2" fill="currentColor" />
                                            </svg>
                                        </span>
                                        Admin
                                    </a>
                                    <a class="d-flex align-items-center text-gray-400 text-hover-primary me-5 mb-2">
                                        <span class="svg-icon svg-icon-4 me-1">
                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path opacity="0.3" d="M18.0624 15.3453L13.1624 20.7453C12.5624 21.4453 11.5624 21.4453 10.9624 20.7453L6.06242 15.3453C4.56242 13.6453 3.76242 11.4453 4.06242 8.94534C4.56242 5.34534 7.46242 2.44534 11.0624 2.04534C15.8624 1.54534 19.9624 5.24534 19.9624 9.94534C20.0624 12.0453 19.2624 13.9453 18.0624 15.3453Z" fill="currentColor" />
                                                <path d="M12.0624 13.0453C13.7193 13.0453 15.0624 11.7022 15.0624 10.0453C15.0624 8.38849 13.7193 7.04535 12.0624 7.04535C10.4056 7.04535 9.06241 8.38849 9.06241 10.0453C9.06241 11.7022 10.4056 13.0453 12.0624 13.0453Z" fill="currentColor" />
                                            </svg>
                                        </span>
                                        {{ auth()->user()->address }}
                                    </a>
                                    <a class="d-flex align-items-center text-gray-400 text-hover-primary mb-2">
                                        <span class="svg-icon svg-icon-4 me-1">
                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path opacity="0.3" d="M21 19H3C2.4 19 2 18.6 2 18V6C2 5.4 2.4 5 3 5H21C21.6 5 22 5.4 22 6V18C22 18.6 21.6 19 21 19Z" fill="currentColor" />
                                                <path d="M21 5H2.99999C2.69999 5 2.49999 5.10005 2.29999 5.30005L11.2 13.3C11.7 13.7 12.4 13.7 12.8 13.3L21.7 5.30005C21.5 5.10005 21.3 5 21 5Z" fill="currentColor" />
                                            </svg>
                                        </span>
                                        {{ auth()->user()->email }}
                                    </a>
                                </div>
                                <!--end::Info-->
                            </div>
                            <!--end::User-->

                        </div>
                        <!--end::Title-->

                    </div>
                    <!--end::Info-->
                </div>
                <!--end::Details-->
                <div class="d-flex overflow-auto h-55px">
                    <ul class="nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder flex-nowrap">
                        <li class="nav-item">
                            <a class="nav-link text-active-primary me-6 active" id="update-profile" data-bs-toggle="tab" href="#tab-update-profile">Update Profile</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-active-primary me-6" id="update-password" data-bs-toggle="tab" href="#tab-update-password">Update Password</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade active show" id="tab-update-profile" role="tabpanel">
                <div class="card card-flush shadow-sm">
                    <div class="card-header">
                        <h3 class="card-title text-primary"><i class="fas fa-user-edit text-primary me-3"></i> Update Profile</h3>
                    </div>
                    <div class="card-body py-5">
                        <form id="form-edit-profile" method="post" action="{{ route('admin.profile.update.profile') }}" enctype="multipart/form-data" autocomplete="off">
                            @csrf
                            <div class="mx-3 justify-content-center">
                                <div class="row">
                                    <div class="col-lg-3 col-md-6 col-sm-12 text-center">
                                        <label class="form-label" for="name">Foto Profil<span class="text-danger ms-1">*</span></label>
                                        <br>
                                        <div class="image-input image-input-outline" data-kt-image-input="true" style="background-image: url('assets/media/svg/avatars/blank.svg')">
                                            <!--begin::Preview existing avatar-->
                                            <div class="image-input-wrapper w-125px h-125px" style="background-image: url({{ (auth()->user()->photo != NULL) ? asset(auth()->user()->photo) : asset('assets/metronic/img/profile_placeholder.jpg') }})"></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="Change avatar">
                                                <i class="bi bi-pencil-fill fs-7"></i>
                                                <!--begin::Inputs-->
                                                <input type="file" name="profile_picture" accept=".png, .jpg, .jpeg" />
                                                <input type="hidden" name="profile_picture_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 avatar">
                                                <i class="bi bi-x fs-2"></i>
                                            </span>
                                            <!--end::Cancel-->

                                        </div>
                                        <!--end::Image input-->
                                        <!--begin::Hint-->
                                        <div class="form-text">Allowed file types: png, jpg, jpeg.</div>
                                        @error('foto')
                                            <div class="invalid-feedback text-start">
                                                {{ $message }}
                                            </div>
                                        @else
                                            <div class="invalid-feedback">
                                                Foto wajib diisi
                                            </div>
                                        @enderror
                                    </div>
                                    <div class="col-lg-9 col-md-6 col-sm-12">
                                        <div class="mb-5">
                                            <label class="form-label" for="name">Nama<span class="text-danger ms-1">*</span></label>
                                            <input type="text" class="form-control" name="name" id="name" placeholder="Masukkan nama" value="{{ old('name', auth()->user()->name) }}" required>
                                            @if ($errors->has('name'))
                                                <span class="text-danger">{{ $errors->first('name') }}</span>
                                            @endif
                                        </div>

                                        <div class="row">
                                            <div class="col-lg-6 col-sm-12">
                                                <div class="mb-5">
                                                    <label class="form-label" for="birth-date">Tanggal Lahir<span class="text-danger ms-1">*</span></label>
                                                    <x-input-date-picker name="birth_date" id="birth-date" placeholder="Pilih tanggal lahir" value="{{ auth()->user()->birth_date }}" />
                                                    @if ($errors->has('birth_date'))
                                                        <span class="text-danger">{{ $errors->first('birth_date') }}</span>
                                                    @endif
                                                </div>
                                            </div>
                                            <div class="col-lg-6 col-sm-12">
                                                <div class="mb-5">
                                                    <label class="form-label" for="gender">Jenis Kelamin<span class="text-danger ms-1">*</span></label>
                                                    <x-select-gender name="gender" id="gender" value="{{ auth()->user()->gender }}" />
                                                    @if ($errors->has('phone_number'))
                                                        <span class="text-danger">{{ $errors->first('phone_number') }}</span>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row mt-5">
                                    <div class="col-lg-6 col-sm-12">
                                        <div class="mb-5">
                                            <label class="form-label" for="email">Email<span class="text-danger ms-1">*</span></label>
                                            <input type="email" class="form-control" name="email" id="email" placeholder="Masukkan email" value="{{ old('email', auth()->user()->email) }}" required>
                                            @if ($errors->has('email'))
                                                <span class="text-danger">{{ $errors->first('email') }}</span>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-sm-12">
                                        <div class="mb-5">
                                            <label class="form-label" for="phone-number">Nomor Telepon<span class="text-danger ms-1">*</span></label>
                                            <input type="text" class="form-control" name="phone_number" id="phone-number" placeholder="Masukkan nomor telepon" value="{{ old('phone_number', auth()->user()->phone_number) }}" required>
                                            @if ($errors->has('phone_number'))
                                                <span class="text-danger">{{ $errors->first('phone_number') }}</span>
                                            @endif
                                        </div>
                                    </div>
                                </div>

                                <div class="mb-5">
                                    <label class="form-label" for="address">Alamat<span class="text-danger ms-1">*</span></label>
                                    <textarea type="text" class="form-control" name="address" id="address" placeholder="Masukkan alamat" rows="4" required>{{ old('address', auth()->user()->address) }}</textarea>
                                    @if ($errors->has('address'))
                                        <span class="error">{{ $errors->first('address') }}</span>
                                    @endif
                                </div>

                                <div class="float-end mb-3">
                                    <button type="submit" class="btn btn-primary">Simpan</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="tab-pane fade" id="tab-update-password" role="tabpanel">
                <div class="card card-flush shadow-sm">
                    <div class="card-header">
                        <h3 class="card-title text-primary"><i class="fas fa-key text-primary me-3"></i> Update Password</h3>
                    </div>
                    <div class="card-body py-5">
                        <form id="form-edit-password" method="post" action="{{ route('admin.profile.update.password') }}" enctype="multipart/form-data" autocomplete="off">
                            @csrf
                            <div class="mx-3 justify-content-center">
                                <div class="mb-5">
                                    <label class="form-label" for="old-password">Password Lama<span class="text-danger ms-1">*</span></label>
                                    <div class="input-group">
                                        <input type="password" class="form-control" name="old_password" id="old-password" placeholder="Masukkan password lama" required>
                                        <button type="button" class="input-group-text" id="btn-show-old-password" data-bs-toggle="tooltip" data-bs-placement="top" title="Lihat/sembunyikan password" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-dismiss-="click">
                                            <i class="fas fa-eye" id="icon-show-old-password"></i>
                                        </button>
                                    </div>
                                    @if ($errors->has('old_password'))
                                        <span class="text-danger">{{ $errors->first('old_password') }}</span>
                                    @endif
                                    @if (session()->has('error_old_password'))
                                        <span class="text-danger">{{ session()->get('error_old_password') }}</span>
                                    @endif
                                    <label name="error_old_password" class="text-danger"></label>
                                </div>
                                <div class="mb-5">
                                    <label class="form-label" for="password">Password Baru<span class="text-danger ms-1">*</span></label>
                                    <div class="input-group">
                                        <input type="password" class="form-control" name="password" id="password" placeholder="Masukkan password baru" required>
                                        <button type="button" class="input-group-text" id="btn-show-password" data-bs-toggle="tooltip" data-bs-placement="top" title="Lihat/sembunyikan password" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-dismiss-="click">
                                            <i class="fas fa-eye" id="icon-show-password"></i>
                                        </button>
                                    </div>
                                    <label name="error_password" class="text-danger"></label>
                                    @if ($errors->has('password'))
                                        <span class="text-danger">{{ $errors->first('password') }}</span>
                                    @endif
                                    @if (session()->has('error_password'))
                                        <span class="text-danger">{{ session()->get('error_password') }}</span>
                                    @endif
                                </div>
                                <div class="mb-5">
                                    <label class="form-label" for="password-confirmation">Konfirmasi Password Baru<span class="text-danger ms-1">*</span></label>
                                    <div class="input-group">
                                        <input type="password" class="form-control" name="password_confirmation" id="password-confirmation" placeholder="Masukkan konfirmasi password baru" required>
                                        <button type="button" class="input-group-text" id="btn-show-password-confirmation" data-bs-toggle="tooltip" data-bs-placement="top" title="Lihat/sembunyikan password" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-dismiss-="click">
                                            <i class="fas fa-eye" id="icon-show-password-confirmation"></i>
                                        </button>
                                    </div>
                                    <label name="error_password_confirmation" class="text-danger"></label>
                                    @if ($errors->has('password_confirmation'))
                                        <span class="text-danger">{{ $errors->first('password_confirmation') }}</span>
                                    @endif
                                    @if (session()->has('error_password_confirmation'))
                                        <span class="text-danger">{{ session()->get('error_password_confirmation') }}</span>
                                    @endif
                                </div>
                                <div class="float-end mb-3">
                                    <button type="submit" class="btn btn-primary">Simpan</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <!-- Asset -->
    <script src="{{ asset('assets/metronic/plugins/custom/jsvalidation/jquery.validate.min.js') }}"></script>
    <!-- Asset -->

    <!-- Main Script -->
    <script>
        $(document).ready( function () {
            /* Gender on Change */
            $('#gender').on('change', function() {
                $(this).valid();
            });

            /* Password on Change */
            $('#old-password').on('change, keyup', function() {
                if($(this).valid()){
                    $('label[name="error_old_password"]').text('');
                }
            });

            $('#password').on('change, keyup', function() {
                if($(this).valid()){
                    $('label[name="error_password"]').text('');
                    if($('#password-confirmation').valid()){
                        $('label[name="error_password_confirmation"]').text('');
                    }
                }
            });

            $('#password-confirmation').on('change, keyup', function() {
                if($(this).valid()){
                    $('label[name="error_password_confirmation"]').text('');
                }
            });

            /* Show Password Listener */
            $('#btn-show-old-password').on('click', function() {
                if ($('#old-password').attr('type') === "password") {
                    $('#old-password').attr('type', 'text');
                    $("#icon-show-old-password").toggleClass('fa-solid fa-eye').toggleClass('fa-solid fa-eye-slash');
                } else {
                    $('#old-password').attr('type', 'password');
                    $("#icon-show-old-password").toggleClass('fa-solid fa-eye-slash').toggleClass('fa-solid fa-eye');
                }
            });

            $('#btn-show-password').on('click', function() {
                if ($('#password').attr('type') === "password") {
                    $('#password').attr('type', 'text');
                    $("#icon-show-password").toggleClass('fa-solid fa-eye').toggleClass('fa-solid fa-eye-slash');
                } else {
                    $('#password').attr('type', 'password');
                    $("#icon-show-password").toggleClass('fa-solid fa-eye-slash').toggleClass('fa-solid fa-eye');
                }
            });

            $('#btn-show-password-confirmation').on('click', function() {
                if ($('#password-confirmation').attr('type') === "password") {
                    $('#password-confirmation').attr('type', 'text');
                    $("#icon-show-password-confirmation").toggleClass('fa-solid fa-eye').toggleClass('fa-solid fa-eye-slash');
                } else {
                    $('#password-confirmation').attr('type', 'password');
                    $("#icon-show-password-confirmation").toggleClass('fa-solid fa-eye-slash').toggleClass('fa-solid fa-eye');
                }
            });
        });
    </script>
    <!-- Main Script -->

    <!-- Validation -->
    <script>
        $(document).ready(function() {
            /* Add custom method */
            jQuery.validator.addMethod("name_rule", function(value, element) {
                return this.optional(element) || /^[a-zA-Z\s]*$/i.test(value);
            }, "Tidak boleh mengandung simbol");

            jQuery.validator.addMethod("address_rule", function(value, element) {
                return this.optional(element) || /^[A-Z0-9 _]*[A-Z0-9][A-Z0-9 _.,\r\n]*$/i.test(value);
            }, "Tidak boleh mengandung simbol");

            /* Update profile validation */
            $("#form-edit-profile").validate({
                rules: {
                    name: {
                        required: true,
                        minlength: 3,
                        maxlength: 50,
                        name_rule: true
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    phone_number: {
                        required: true,
                        minlength: 8,
                        maxlength: 15,
                        digits: true
                    },
                    address: {
                        required: true,
                        minlength: 5,
                        maxlength: 255,
                        address_rule: true
                    },
                    birth_date: {
                        required: true
                    },
                    gender: {
                        required: true
                    }
                },
                messages: {
                    name: {
                        required: "Nama wajib diisi",
                        minlength: "Nama minimal terdiri dari 3 karakter",
                        maxlength: "Nama maksimal terdiri dari 50 karakter",
                        name_rule: "Nama hanya boleh mengandung huruf"
                    },
                    email: {
                        required: "Email wajib diisi",
                        email: "Format email tidak sesuai"
                    },
                    phone_number: {
                        required: "Nomor telepon wajib diisi",
                        minlength: "Nomor telepon minimal terdiri dari 8 karakter",
                        maxlength: "Nomor telepon maksimal terdiri dari 15 karakter",
                        digits: "Nomor telepon hanya boleh mengandung angka",
                    },
                    address: {
                        required: "Alamat wajib diisi",
                        minlength: "Alamat minimal terdiri dari 5 karakter",
                        maxlength: "Alamat maksimal terdiri dari 255 karakter",
                        address_rule: "Alamat tidak boleh mengandung simbol"
                    },
                    birth_date: {
                        required: "Tanggal lahir wajib diisi"
                    },
                    gender: {
                        required: "Jenis kelamin wajib diisi"
                    }
                },
                errorPlacement: function (error, element) {
                    if(element.hasClass('form-select') && element.next('.select2-container').length) {
                        error.insertAfter(element.next('.select2-container'));
                    }else {
                        error.insertAfter(element);
                    }
                }
            });

            /* Update password validation */
            $("#form-edit-password").validate({
                rules: {
                    password: {
                        required: true,
                        minlength: 8
                    },
                    old_password: {
                        required: true,
                        minlength: 8
                    },
                    password_confirmation: {
                        required: true,
                        minlength: 8,
                        equalTo: '#password'
                    }
                },
                messages: {
                    old_password: {
                        required: "Password lama wajib diisi",
                        minlength: "Password lama minimal terdiri dari 8 karakter"
                    },
                    password: {
                        required: "Password baru wajib diisi",
                        minlength: "Password baru minimal terdiri dari 8 karakter"
                    },
                    password_confirmation: {
                        required: "Konfirmasi password baru wajib diisi",
                        minlength: "Konfirmasi Password baru minimal terdiri dari 8 karakter",
                        equalTo: "Konfirmasi password baru tidak sesuai"
                    }
                },
                errorPlacement: function (error, element) {
                    if(element.hasClass('select2') && element.next('.select2-container').length) {
                        error.insertAfter(element.next('.select2-container'));
                    }else if(element.attr('name') === 'old_password'){
                        $('label[name="error_old_password"]').text(error.text());
                    }else if(element.attr('name') === 'password'){
                        $('label[name="error_password"]').text(error.text());
                    }else if(element.attr('name') === 'password_confirmation'){
                        $('label[name="error_password_confirmation"]').text(error.text());
                    }
                    else {
                        error.insertAfter(element);
                    }
                }
            });
        });
    </script>
    <!-- Validation -->

    @if($message = Session::get('tab'))
        <script>
            $(document).ready(function(){
                $('#update-profile').removeClass('active');
                $('#tab-update-profile').removeClass('active show');
                $('#update-password').addClass('active');
                $('#tab-update-password').addClass('show active');
            });
        </script>
    @endif
@endpush