@extends('frontend::layouts.master')

@section('content')
    <div class="bg-top-sub-gradient">
        <div class="container pt-5 pb-12 md:pb-16">
            <div class="flex flex-col lg:flex-row lg:gap-6 pt-2 lg:pt-0">
                <x-frontend::member.member-navigation.template active="0"></x-frontend>
                <x-frontend::member.member-content-area.template title="Account information">
                    <x-slot:content>
                        <div class="py-1">
                            <x-frontend::member.member-information.template title="Name" content="Saijai Kohmahasanook">
                                <x-slot:action>
                                    <x-frontend::overlays.modal.modal-button name="member-name" class="">
                                        <x-slot:button>
                                            <p class="tracking-wide text-13 font-bold text-right dark:text-white">แก้ไข</p>
                                        </x-slot>
                                    </x-frontend>
                                    <x-frontend::overlays.modal.template name="member-name" title="Edit Name">
                                        <x-slot:content>
                                            <form action="#" class="mx-auto max-w-sm profile-edit-modal">
                                                <div class="flex flex-wrap -mx-2">
                                                    <div class="w-1/2 px-2">
                                                        <div class="com-form-basic float form-style line-style">
                                                            <input id="edit-f-name" type="text" placeholder="First name">
                                                            <label for="edit-f-name">
                                                                First name
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="w-1/2 px-2">
                                                        <div class="com-form-basic float form-style line-style">
                                                            <input id="edit-l-name" type="text" placeholder="Last name">
                                                            <label for="edit-l-name">
                                                                Last name
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="flex items-center justify-end gap-2 mt-4" aria-label="Close" data-hs-overlay="#member-name">
                                                    <button type="button" class="button-secondary !bg-opacity-50">ยกเลิก</button>
                                                    <button type="submit" class="button-secondary">ยืนยัน</button>
                                                </div>
                                            </form>
                                        </x-slot>
                                    </x-frontend>
                                </x-slot:action>
                            </x-frontend::member.member-information.template>
                        </div>
                        <div class="py-1">
                            <x-frontend::member.member-information.template title="Date of birth" content="10 Dec 1995">
                                <x-slot:action>
                                    <x-frontend::overlays.modal.modal-button name="member-date" class="">
                                        <x-slot:button>
                                            <p class="tracking-wide text-13 font-bold text-right dark:text-white">แก้ไข</p>
                                        </x-slot>
                                    </x-frontend>
                                    <x-frontend::overlays.modal.template name="member-date" title="Edit date of birth">
                                        <x-slot:content>
                                            <form action="#" class="mx-auto max-w-sm profile-edit-modal">
                                                <div class="flex flex-wrap -mx-2">
                                                    <div class="w-full px-2">
                                                        <div class="com-form-basic float form-style line-style">
                                                            <input id="edit-date" type="date" placeholder="Date of birth">
                                                            <label for="edit-date">
                                                                Date of birth
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="flex items-center justify-end gap-2 mt-4" aria-label="Close" data-hs-overlay="#member-date">
                                                    <button type="button" class="button-secondary !bg-opacity-50">ยกเลิก</button>
                                                    <button type="submit" class="button-secondary">ยืนยัน</button>
                                                </div>
                                            </form>
                                        </x-slot>
                                    </x-frontend>
                                </x-slot:action>
                            </x-frontend::member.member-information.template>
                        </div>
                        <div class="py-1">
                            <x-frontend::member.member-information.template title="Email" content="example@gmail.com">
                                
                            </x-frontend::member.member-information.template>
                        </div>
                        <div class="py-1">
                            <x-frontend::member.member-information.template title="Password" content="************">
                                <x-slot:action> 
                                    <a href="change-password" class="tracking-wide font-bold text-13 text-right dark:text-white">เปลี่ยนรหัสผ่าน</a>
                                </x-slot:action>
                            </x-frontend::member.member-information.template>
                        </div>
                    </x-slot:content>
                </x-frontend>
            </div>
        </div>
    </div>
@endsection