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

@section('content')
<x-frontend::utility.memberwelcome></x-frontend>
    <div class="container pt-8">
        <div class="flex lg:gap-6 mt-6">
            <div class="lg:w-60 lg:py-6 bg-glass lg:px-2">
                <livewire:frontend::menu.member-sidebar active='0' />
            </div>
            <div class="flex-1 p-4 lg:p-6 bg-glass">
                <div class="text-16 font-semibold uppercase flex items-center justify-between">
                    <h5>
                        Account Information
                    </h5>
                    <div class="xl:hidden">
                        <button class="sidebar-more-trigger">
                            <img src="{{ Module::asset('frontend:img/more.svg') }}" alt="More" class="lg:hidden w-7">
                        </button>
                    </div>
                </div>
                <div class="py-4 xl:mt-2 relative">

                        <div class="member-profile-wrapper">
                            <div class="member-profile-title">
                                <p>
                                    Name 
                                    <span class="hidden sm:inline-block">:</span>
                                </p>
                            </div>
                            <div class="member-profile-detail">
                                <p>
                                    เมฆา ฟ้าแว๊บแว๊บ
                                </p>
                            </div>
                            
                        </div>

                        <div class="member-profile-wrapper">
                            <div class="member-profile-title">
                                <p>
                                    Email
                                    <span class="hidden sm:inline-block">:</span>
                                </p>
                            </div>
                            <div class="member-profile-detail">
                                <p>
                                    mail@mail.com
                                </p>
                            </div>
                        </div>

                        <div class="member-profile-wrapper">
                            <div class="member-profile-title">
                                <p>
                                    ID Card No.
                                    <span class="hidden sm:inline-block">:</span>
                                </p>
                            </div>
                            <div class="member-profile-detail">
                                <p>
                                    1-3333-44323-23-5
                                </p>
                            </div>
                        </div>

                        <div class="member-profile-wrapper">
                            <div class="member-profile-title">
                                <p>
                                    Date of Birth
                                    <span class="hidden sm:inline-block">:</span>
                                </p>
                            </div>
                            <div class="member-profile-detail">
                                <p>
                                    12 12 1111
                                </p>
                            </div>
                        </div>

                </div>
                <hr class="opacity-10">
                <div class="py-4 mt-4 relative">

                        <div class="member-profile-wrapper">
                            <div class="member-profile-title">
                                <p>
                                    Address
                                    <span class="hidden sm:inline-block">:</span>
                                </p>
                            </div>
                            <div class="member-profile-detail">
                                <p>
                                    1 Lorem Lorwm Lorem ipsum dolor sit amet consectetur adipisicing elit.
                                </p>
                            </div>
                            <div class="member-profile-action">
                                <x-frontend::modal.basicmodal modalName="profileEdit">
                                    <x-slot:modalButton>
                                        <p class="tracking-wide text-13 text-right text-white">Edit</p>
                                    </x-slot>
                                    <x-slot:modalContent>
                                        <p class="font-medium text-center mb-4">Edit Profile</p>
                                        <form action="#" class="mx-auto max-w-sm profile-edit-modal">
                                            <div class="flex flex-wrap -mx-4">
                                                <div class="w-full px-4">
                                                    <div class="com-form-basic float form-style">
                                                        <input id="address" type="text" placeholder="address">
                                                        <label for="address">
                                                            Address
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="w-full px-4">
                                                    <div class="com-form-basic float form-style">
                                                        <select name="province" id="province">
                                                            <option value="0">Province 1</option>
                                                            <option value="1">Province 2</option>
                                                            <option value="2">Province 3</option>
                                                        </select>
                                                        <label for="province">
                                                            Province
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="w-full px-4">
                                                    <div class="com-form-basic float form-style">
                                                        <select name="district" id="district">
                                                            <option value="0">District 1</option>
                                                            <option value="1">District 2</option>
                                                            <option value="2">District 3</option>
                                                        </select>
                                                        <label for="district">
                                                            District
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="w-full px-4">
                                                    <div class="com-form-basic float form-style">
                                                        <select name="sub-district" id="sub-district">
                                                            <option value="0">Sub-District 1</option>
                                                            <option value="1">Sub-District 2</option>
                                                            <option value="2">Sub-District 3</option>
                                                        </select>
                                                        <label for="sub-district">
                                                            Sub-District
                                                        </label>
                                                    </div>
                                                </div>
                                                
                                                <div class="w-full px-4">
                                                    <div class="com-form-basic float form-style">
                                                        <input id="post" type="text" placeholder="post">
                                                        <label for="post">
                                                            Postal Code
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="w-full px-4">
                                                    <div class="com-form-basic float form-style">
                                                        <input id="phone" type="text" placeholder="phone">
                                                        <label for="phone">
                                                            Phone No.
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="w-full px-4 pt-4 text-right">
                                                    <button type="submit" class="button-secondary w-full text-white">
                                                        Submit
                                                    </button>
                                                </div>
                                            </div>
                                        </form>
                                    </x-slot>
                                </x-frontend>
                            </div>
                        </div>

                        <div class="member-profile-wrapper">
                            <div class="member-profile-title">
                                <p>
                                    Phone Number
                                    <span class="hidden sm:inline-block">:</span>
                                </p>
                            </div>
                            <div class="member-profile-detail">
                                <p>
                                    98132498324
                                </p>
                            </div>
                            <div class="member-profile-action">
                                
                            </div>
                        </div>

                </div>
            </div>
        </div>
    </div>
@endsection