@php
    $maxDate = now()->subDay()->format('Y-m-d');
@endphp
<x-yas_admin::layouts>

    <x-slot:title>
        @lang('member::app.member.edit.title')
    </x-slot>


    <!-- member Edit Form -->
    <x-yas_admin::form
        :action="route('yas_admin.member.update', $member->id)"
        enctype="multipart/form-data"
        method="PUT">

        <div class="flex items-center justify-between gap-4 max-sm:flex-wrap">
            <p class="text-xl font-bold text-gray-800 dark:text-white">
                @lang('member::app.member.edit.title')
            </p>

            <div class="flex items-center gap-x-2.5">
                <!-- Back Button -->
                <a
                    href="{{ route('yas_admin.member.index') }}"
                    class="transparent-button hover:bg-gray-200 dark:text-white dark:hover:bg-gray-800"
                >
                    @lang('member::app.member.edit.back-btn')
                </a>

                <!-- Save Button -->
                <button
                    type="submit"
                    class="primary-button"
                >
                    @lang('member::app.member.edit.save-btn')
                </button>
            </div>
        </div>


        <!-- Full Pannel -->
        <div class="mt-3.5 flex gap-2.5 max-xl:flex-wrap">

            <div class="flex flex-1 flex-col gap-2 max-xl:flex-auto">

                <div class="box-shadow rounded bg-white p-4 dark:bg-gray-900">

                    <!-- first name & last name -->
                    <div class="flex gap-4 max-sm:flex-wrap">
                        <!-- First Name -->
                        <x-yas_admin::form.control-group class="mb-2.5 w-full">
                            <x-yas_admin::form.control-group.label class="required">
                                @lang('member::app.member.index.create.first-name')
                            </x-yas_admin::form.control-group.label>

                            <x-yas_admin::form.control-group.control
                                type="text"
                                id="first_name"
                                name="first_name"
                                rules="required|max:50"
                                value="{{ old('first_name') ?? ($member->first_name ?? '') }}"
                                :label="trans('member::app.member.index.create.first-name')"
                                :placeholder="trans('member::app.member.index.create.first-name')"
                            />

                            <x-yas_admin::form.control-group.error control-name="first_name" />
                        </x-yas_admin::form.control-group>

                        <!-- Last Name -->
                        <x-yas_admin::form.control-group class="mb-2.5 w-full">
                            <x-yas_admin::form.control-group.label class="required">
                                @lang('member::app.member.index.create.last-name')
                            </x-yas_admin::form.control-group.label>

                            <x-yas_admin::form.control-group.control
                                type="text"
                                id="last_name"
                                name="last_name"
                                rules="required|max:50"
                                value="{{ old('last_name') ?? ($member->last_name ?? '') }}"
                                :label="trans('member::app.member.index.create.last-name')"
                                :placeholder="trans('member::app.member.index.create.last-name')"
                            />

                            <x-yas_admin::form.control-group.error control-name="last_name" />
                        </x-yas_admin::form.control-group>
                    </div>

                    <!-- Status -->
                    <x-yas_admin::form.control-group class="!mb-0">
                            <x-yas_admin::form.control-group.label>
                                @lang('member::app.member.edit.status')
                            </x-yas_admin::form.control-group.label>

                            @php $selectedValue = old('member') ?: $member->status @endphp

                            <!-- Status-->

                            <x-yas_admin::form.control-group.control
                                type="switch"
                                class="cursor-pointer"
                                name="status"
                                value="1"
                                :label="trans('member::app.member.edit.status')"
                                :checked="(boolean) $selectedValue"
                            />
                    </x-yas_admin::form.control-group>

                    <!-- Password -->
                    <x-yas_admin::form.control-group >

                        <x-yas_admin::form.control-group.label >
                            @lang('yas_theme::app.customers.login-form.password')
                        </x-yas_admin::form.control-group.label>

                        <x-yas_admin::form.control-group.control type="password"  id="password" name="password" rules="min:8|max:20" value="" :label="trans('yas_theme::app.customers.login-form.password')" :placeholder="trans('yas_theme::app.customers.login-form.password')" :aria-label="trans('yas_theme::app.customers.login-form.password')" aria-required="true" />

                        <x-yas_admin::form.control-group.error control-name="password" />
                    </x-yas_admin::form.control-group>

                    <!-- Email -->
                    <x-yas_admin::form.control-group>
                        <x-yas_admin::form.control-group.label class="required">
                            @lang('member::app.member.index.create.email')
                        </x-yas_admin::form.control-group.label>

                        <x-yas_admin::form.control-group.control
                            type="email"
                            id="email"
                            name="email"
                            rules="required|email"
                            value="{{ old('email') ?? ($member->email ?? '') }}"
                            :label="trans('member::app.member.index.create.email')"
                            placeholder="email@example.com"
                        />

                        <x-yas_admin::form.control-group.error control-name="email" />
                    </x-yas_admin::form.control-group>

                    <x-yas_admin::form.control-group >
                        <x-yas_admin::form.control-group.label>
                            @lang('member::app.member.index.create.additional_data')
                        </x-yas_admin::form.control-group.label>

                        <x-yas_admin::form.control-group.control
                            type="textarea"
                            id="additional_data"
                            name="additional_data"
                            value="{{ old('additional_data') ?? ($member->additional_data ?? '') }}"
                            :label="trans('member::app.member.index.create.additional_data')"
                            :placeholder="trans('member::app.member.index.create.additional_data')"
                        />

                        <x-yas_admin::form.control-group.error control-name="additional_data" />
                    </x-yas_admin::form.control-group>

                    <!-- Contact Number -->
                    <x-yas_admin::form.control-group>
                        <x-yas_admin::form.control-group.label>
                            @lang('member::app.member.index.create.contact-number')
                        </x-yas_admin::form.control-group.label>

                        <x-yas_admin::form.control-group.control
                            type="text"
                            id="phone"
                            name="phone"
                            rules="phone|min:8|max:12"
                            value="{{ old('phone') ?? ($member->phone ?? '') }}"
                            :label="trans('member::app.member.index.create.contact-number')"
                            :placeholder="trans('member::app.member.index.create.contact-number')"
                        />

                        <x-yas_admin::form.control-group.error control-name="phone" />
                    </x-yas_admin::form.control-group>

                    <!-- date of birth -->
                    <x-yas_admin::form.control-group>
                        <x-yas_admin::form.control-group.label>
                            @lang('member::app.member.index.create.date-of-birth')
                        </x-yas_admin::form.control-group.label>

                        <x-yas_admin::form.control-group.control
                            type="date"
                            id="dob"
                            name="date_of_birth"
                            value="{{ old('date_of_birth') ?? ($member->date_of_birth ?? '') }}"
                            :label="trans('member::app.member.index.create.date-of-birth')"
                            :placeholder="trans('member::app.member.index.create.date-of-birth')"
                            min="2000-01-01"
                            max="{{ $maxDate }}"
                        />

                        <x-yas_admin::form.control-group.error control-name="date_of_birth" />
                    </x-yas_admin::form.control-group>

                    <!-- Gender -->
                    <x-yas_admin::form.control-group class="w-full">
                        <x-yas_admin::form.control-group.label class="required">
                            @lang('member::app.member.index.create.gender')
                        </x-yas_admin::form.control-group.label>

                        <x-yas_admin::form.control-group.control
                            type="select"
                            id="gender"
                            name="gender"
                            rules="required"
                            value="{{ old('gender') ?? ($member->gender ?? '') }}"
                            :label="trans('member::app.member.index.create.gender')"
                        >
                            <option value="">
                                @lang('member::app.member.index.create.select-gender')
                            </option>

                            <option value="Male">
                                @lang('member::app.member.index.create.male')
                            </option>

                            <option value="Female">
                                @lang('member::app.member.index.create.female')
                            </option>

                            <option value="Other">
                                @lang('member::app.member.index.create.other')
                            </option>
                        </x-yas_admin::form.control-group.control>

                        <x-yas_admin::form.control-group.error control-name="gender" />
                    </x-yas_admin::form.control-group>

                    <!-- yas-role -->
                    <x-yas_admin::form.control-group class="w-full">
                        <x-yas_admin::form.control-group.label class="required">
                            @lang('member::app.member.index.create.yas-role')
                        </x-yas_admin::form.control-group.label>

                        <x-yas_admin::form.control-group.control
                            type="select"
                            id="yasrole"
                            name="yas_role_id"
                            value="{{ old('yas_role_id') ?? ($member->yas_role_id ?? '') }}"
                            :label="trans('member::app.member.index.create.yas-role')"
                            
                        >
                            <!-- <option 
                                v-for="yasrole in yasroles" 
                                :value="yasrole.id"
                                selected
                            > 
                                @{{ yasrole.name }} 
                            </option> -->
                            <!-- Options -->
                            <option value="">
                            @lang('member::app.member.index.create.select-yasrole')
                            </option>
                            @foreach ($yasroles as $yasrole)
                                @if ($member->yas_role_id == $yasrole->id)
                                    <option value="{{ $yasrole->id }}" selected>
                                @else
                                    <option value="{{ $yasrole->id }}">
                                @endif
                                    {{ $yasrole->name }}
                                </option>
                            @endforeach
                        </x-yas_admin::form.control-group.control>

                        <x-yas_admin::form.control-group.error control-name="yas_role_id" />
                    </x-yas_admin::form.control-group>
                    
                </div>
            </div>
        </div>

    </x-yas_admin::form>

    <v-member-view>
    </v-member-view>
        

    @pushOnce('scripts')
    <script
            type="text/x-template"
            id="v-member-view-template">

            <!-- Content -->

                <template v-if="! member.address">
                     <!-- Addresses listing-->
                     <x-yas_admin::accordion>
                        <x-slot:header>
                            <div class="flex w-full">
                                <!-- Address Title -->
                                <p class="w-full p-2.5 text-base font-semibold text-gray-800 dark:text-white">
                                    @{{ "@lang('member::app.member.edit.address')" }}
                                </p>

                                <!-- Address edit component -->
                                @include('yas_member::admin.member.address.create')
                            </div>
                        </x-slot>

                        <x-slot:content>
                            <!-- Empty Address Container -->
                            <div class="flex items-center gap-5 py-2.5">
                                <img
                                    src="{{ bagisto_asset('images/settings/address.svg') }}"
                                    class="h-20 w-20 dark:mix-blend-exclusion dark:invert"
                                />

                                <div class="flex flex-col gap-1.5">
                                    <p class="text-base font-semibold text-gray-400">
                                        @lang('yas_admin::app.customers.customers.view.empty-title')
                                    </p>

                                    <p class="text-gray-400">
                                        @lang('yas_admin::app.customers.customers.view.empty-description')
                                    </p>
                                </div>
                            </div>
                           
                        </x-slot>
                    </x-yas_admin::accordion>
                </template>

                <template v-else>
                    <!-- Addresses listing-->
                    <x-yas_admin::accordion>
                        <x-slot:header>
                            <div class="flex w-full">
                                <!-- Address Title -->
                                <p class="w-full p-2.5 text-base font-semibold text-gray-800 dark:text-white">
                                    @{{ "@lang('member::app.member.edit.address')" }}
                                </p>

                                <!-- Address edit component -->
                                @include('yas_member::admin.member.address.edit')
                            </div>
                        </x-slot>

                        <x-slot:content>
                            <template v-if="member.address">
                                <div
                                    class="grid gap-y-2.5"
                                    v-if="member.address"
                                    
                                >

                                    <p class="font-semibold text-gray-800 dark:text-white">
                                        @{{ `${member.address.first_name} ${member.address.last_name}` }}

                                        <template v-if="member.address.company_name">
                                            (@{{ member.address.company_name }})
                                        </template>
                                    </p>

                                    <p class="text-gray-600 dark:text-gray-300">
                                        <template v-if="member.address.address">
                                            @{{ member.address.address.split('\n').join(', ') }},
                                        </template>

                                        <template v-if="member.address.city">
                                            @{{ member.address.city }},
                                        </template>
                                        <template v-if="member.address.state">
                                            @{{ member.address.state }},
                                        </template>
                                        
                                        @{{ member.address.country }},
                                        @{{ member.address.postcode }}
                                    </p>


                                </div>
                            </template>

                            <template v-else>
                                <!-- Empty Address Container -->
                                <div class="flex items-center gap-5 py-2.5">
                                    <img
                                        src="{{ bagisto_asset('images/settings/address.svg') }}"
                                        class="h-20 w-20 dark:mix-blend-exclusion dark:invert"
                                    />

                                    <div class="flex flex-col gap-1.5">
                                        <p class="text-base font-semibold text-gray-400">
                                            @lang('yas_admin::app.customers.customers.view.empty-title')
                                        </p>

                                        <p class="text-gray-400">
                                            @lang('yas_admin::app.customers.customers.view.empty-description')
                                        </p>
                                    </div>
                                </div>
                            </template>
                        </x-slot>
                    </x-yas_admin::accordion>
                </template>

                   
                
            
        </script>
    <script type="module">
            app.component('v-member-view', {
                template: '#v-member-view-template',

                data() {
                    return {
                        member: @json($member),
                    };
                },
                mounted() {
                    
                },
                methods: {
                    addressCreated(newAddress) {
                     
                        this.member.address = {
                            ...newAddress,
                            address: newAddress.address.join('\n'),
                        };
                    },

                    addressUpdated(updatedAddress) {
                        console.log(updatedAddress);
                        this.member.address = {
                            ...updatedAddress,
                            address: updatedAddress.address.join('\n'),
                        };
 
                    },
                },

            });
        </script>
    @endPushOnce
</x-yas_admin::layouts>