@extends('layouts.frontend-master')
@section('title', 'Change Password')
@push('style')
    <style>

    </style>
@endpush
@php
    $user = auth()->user()->member;
@endphp
@section('content')
<div class="max-w-lg mx-auto mt-4">
    <h1 class="text-2xl mb-4 bg-primary-linear text-white px-2 py-2 rounded-lg font-bold">
        Change Password
    </h1>
    <form class="arco-form arco-form-layout-vertical arco-form-size-medium"
        action="{{route('update.password')}}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-vertical">
            <div class="arco-form-item-label-col">
                <label class="arco-form-item-label">Old Password
                </label>
            </div>
            <div class="arco-form-item-wrapper-col" id="name">
                <div class="arco-form-item-content-wrapper">
                    <div class="arco-form-item-content arco-form-item-content-flex">
                        <span class="arco-input-wrapper"><!----><input name="old_password"
                                class="arco-input arco-input-size-medium" type="password" required placeholder="Old Password" /><!----><!----></span>
                    </div>
                </div>
                <!--v-if--><!--v-if-->
            </div>
        </div>
        <div class="arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-vertical">
            <div class="arco-form-item-label-col">
                <label class="arco-form-item-label">New Password
                </label>
            </div>
            <div class="arco-form-item-wrapper-col" id="name">
                <div class="arco-form-item-content-wrapper">
                    <div class="arco-form-item-content arco-form-item-content-flex">
                        <span class="arco-input-wrapper"><!----><input name="password"
                                class="arco-input arco-input-size-medium" type="password" required placeholder="New Password" /><!----><!----></span>
                    </div>
                </div>
                <!--v-if--><!--v-if-->
            </div>
        </div>
        <div class="arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-vertical">
            <div class="arco-form-item-label-col">
                <label class="arco-form-item-label">Confirm Password
                </label>
            </div>
            <div class="arco-form-item-wrapper-col" id="name">
                <div class="arco-form-item-content-wrapper">
                    <div class="arco-form-item-content arco-form-item-content-flex">
                        <span class="arco-input-wrapper"><!----><input name="password_confirmation"
                                class="arco-input arco-input-size-medium" type="password" required placeholder="Confirm Password" /><!----><!----></span>
                    </div>
                </div>
                <!--v-if--><!--v-if-->
            </div>
        </div>
        
        <div class="arco-space arco-space-vertical arco-space-fill">
            <!---->
            <div class="arco-space-item">
                <button
                    class="arco-btn arco-btn-primary-linear arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal w-full"
                    type="submit">
                    <!--v-if-->Submit
                </button>
            </div>
        </div>
    </form>
</div>
{{-- @endif --}}
@endsection
@push('script')
    <script>
        $(function() {
            $('.img-placeholder').on('click', function() {
                var imgplaceholder = $(this);
                var imgElement = $(this).closest('div').find('.img'); // Cache a reference to .img
                if(imgElement.length==0){
                    imgElement=$(this).parent().parent().parent().find('.img')
                    imgplaceholder=$(this).parent().parent().find('img')
                }
                imgElement.trigger('click'); // Trigger click on the img element

                imgElement.on('change', function() {
                    var file = this.files[0];
                    var myreader = new FileReader();

                    myreader.readAsDataURL(file);

                    myreader.onload = function() {
                        var dataURL = myreader.result;
                        imgplaceholder.attr('src', dataURL); // Use imgplaceholder to set src
                    };
                });
            });
        });
    </script>
@endpush