@extends('layouts.default1400-profile', ['title' => 'مرحله ۳'])

@section('content')
<div x-data="{ currentTab: '{{ $currentTab ?? 'basic' }}' }">
    <div class="md:flex justify-between border-gray-100 border-b-2 text-sm items-center truncate overflow-hidden">
        <div class="md:flex justify-start">
            <button class="flex px-4 py-2 mx-1 justify-start hover:bg-blue-100 border-b-4"
                x-bind:class="{ 'border-blue-500': currentTab == 'basic', 'border-gray-100': currentTab != 'basic'  }"
                x-on:click="currentTab='basic'">
                اطلاعات کاربر
            </button>

            @if($utype=='legal')
            <button class=" flex px-4 py-2 mx-1 justify-start hover:bg-blue-100  border-b-4"
                x-bind:class="{ 'border-blue-500': currentTab == 'legal', 'border-gray-100': currentTab != 'legal'  }"
                x-on:click="currentTab='legal'">
                اطلاعات تماس و آدرس
            </button>
            @endif

            @if($type=='pro' || $utype=='legal')
            <button class=" flex px-4 py-2 mx-1 justify-start hover:bg-blue-100  border-b-4"
                x-bind:class="{ 'border-blue-500': currentTab == 'file', 'border-gray-100': currentTab != 'file'  }"
                x-on:click="currentTab='file'">
                مدارک
            </button>
            @endif

            <a class="flex px-4 py-2 mx-1 justify-start hover:bg-blue-100 border-b-4 border-gray-100"
                href="{{ route('user.profile.address') }}">
                آدرس‌ها
            </a>
        </div>

        <a href="{{ route('user.profile.wizard', ['step' => 'user-edit', 'type'=> $type, 'utype'=> $utype]) }}"
            class="inline-block my-2 md:my-0 bg-green-500 hover:bg-green-600 ml-36 py-2 px-4 rounded-lg text-white text-sm">ویرایش</a>

    </div>

    <div class="m-4">
        <!-- row 1 -->

        <div x-show="currentTab=='basic'">
            <p class="font-bold mb-2 text-black rounded-xl px-3 py-1"> اطلاعات حساب:</p>

            <div class="px-6">
                <div class="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 md:gap-1">
                    <div class="flex py-3">
                        <label class="text-sm font-bold mx-2"> تلفن همراه: </label>
                        <label class="text-sm  mx-2"> {{ $user->mobile }} </label>
                    </div>
                    <div class="flex py-3">
                        <label class="text-sm font-bold mx-2"> کاربری: </label>
                        <label class="text-sm  mx-2"> {{ $user->activity_type_title }} </label>
                    </div>
                    <div class="flex py-3">
                        <label class="text-sm font-bold mx-2"> شخصیت : </label>
                        <label class="text-sm  mx-2"> {{ $user->user_type_title }} </label>
                    </div>
                </div>
            </div>




            <!-- row 2 -->

            <p class="font-bold mb-2 text-black rounded-xl px-3 py-1 mt-6"> اطلاعات هویتی:</p>

            <div class="px-6">
                <div class="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 md:gap-1">
                    <div class="flex py-3">
                        <label class="text-sm font-bold mx-2"> نام : </label>
                        <label class="text-sm"> {{ $user->first_name }} </label>
                    </div>
                    <div class="flex py-3">
                        <label class="text-sm font-bold mx-2"> نام خانوادگی: </label>
                        <label class="text-sm "> {{ $user->last_name }} </label>
                    </div>
                    <div class="flex py-3">
                        <label class="text-sm font-bold mx-2"> جنسیت : </label>
                        <label class="text-sm"> {{ $user->gender_title }} </label>
                    </div>
                    <div class="flex py-3">
                        <label class="text-sm font-bold mx-2"> کدملی : </label>
                        <label class="text-sm "> {{ $user->pcode }} </label>
                    </div>

                    @if ($type=='pro' && $utype=='natural')

                    <div class="flex py-3">
                        <label class="text-sm font-bold mx-2">زمینه فعالیت:</label>
                        <label class="text-sm "> {{ $user->field_activity }} </label>
                    </div>
                    @endif

                    @if($type == 'pro' && $utype == 'natural')

                    <div class="flex py-3">
                        <label class="text-sm font-bold mx-2"> نظام پزشکی/دانشجویی : </label>
                        <label class="text-sm "> {{ $user->medical_number }} </label>
                    </div>

                    @endif



                    @if($user->email!='')
                    <div class="flex py-3">
                        <label class="text-sm font-bold mx-2"> ایمیل : </label>
                        <label class="text-sm "> {{ $user->email }} </label>
                    </div>
                    @endif
                </div>
            </div>



            <p class="font-bold mb-2 text-black rounded-xl px-3 py-1 mt-6"> اطلاعات فاکتور:</p>
            <div class="px-6">
                <div class="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 md:gap-1">

                    <div class="flex py-3">
                        <label class="text-sm font-bold mx-2"> شماره تماس: </label>
                        <label class="text-sm  mx-2"> {{ $user->phone }} </label>
                    </div>
                    <div class="flex py-3">
                        <label class="text-sm font-bold mx-2"> کدپستی : </label>
                        <label class="text-sm  mx-2"> {{ $user->zipcode }} </label>
                    </div>


                </div>
                <div>

                    <div class="flex py-3">
                        <label class="text-sm  mx-2"> {{ $user->GnafData?->fulladdress }} </label>
                    </div>
                </div>
            </div>


        </div>

        <!-- row 3 -->

        {{-- <p class="font-bold mb-2 m-2 mt-5 text-black rounded-xl px-3 py-1"> اطلاعات حرفه ایی:</p>
        <div class="md:flex justify-around">
            <div class="flex">
                <label class="text-sm font-bold mx-2"> زمینه فعالیت : </label>
                <label class="text-sm"> دندانپزشک </label>
            </div>
            <div class="flex">
                <label class="text-sm font-bold mx-2"> شماره نظام پزشکی / دانشجویی / پرسنلی : </label>
                <label class="text-sm "> 0020124 </label>
            </div>

        </div> --}}

        <!-- row 4 -->


        <div x-show="currentTab=='legal'">

            <p class="font-bold mb-2 text-black rounded-xl px-3 py-1">
                @if ($type=='pro' && $utype== 'natural')
                اطلاعات محل خدمت:
                @elseif ($type=='pro' && $utype== 'legal')
                اطلاعات حقوقی کلینیک / بیمارستان / دانشگاه:
                @else
                اطلاعات حقوقی:
                @endif

            </p>
            <div class="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 md:gap-1">
                <div class="flex py-3">
                    <label class="text-sm font-bold mx-2 mb-3">
                        @if($type=='pro' && $utype=='natural')
                        عنوان:
                        @elseif ($type=='pro' && $utype== 'legal')
                        نام کلینیک/شرکت:
                        @else
                        نام شرکت:
                        @endif
                    </label>
                    <label class="text-sm"> {{ $user->company }} </label>
                </div>

                @if ($user->company_phone != '')
                <div class="flex py-3">
                    <label class="text-sm font-bold mx-2">تلفن ثابت:</label>
                    <label class="text-sm "> {{ $user->company_phone }} </label>
                </div>
                @endif

                @if ($user->registration_number != '')
                <div class="flex py-3">
                    <label class="text-sm font-bold mx-2">شماره ثبت:</label>
                    <label class="text-sm"> {{ $user->registration_number }} </label>
                </div>
                @endif

                @if ($user->national_id != '')
                <div class="flex">
                    <label class="text-sm font-bold mx-2">شناسه ملی:</label>
                    <label class="text-sm"> {{ $user->national_id }} </label>
                </div>
                @endif

                @if ($user->eco_code != '')
                <div class="flex py-3">
                    <label class="text-sm font-bold mx-2"> کد اقتصادی: </label>
                    <label class="text-sm"> {{ $user->eco_code }} </label>
                </div>
                @endif

                @if ($user->company_zipcode != '')
                <div class="flex py-3">
                    <label class="text-sm font-bold mx-2"> کدپستی: </label>
                    <label class="text-sm"> {{ $user->company_zipcode }} </label>
                </div>
                @endif

                @if($user->address_details!='')
                <div class="flex py-3">
                    <label class="text-sm font-bold mx-2"> توضیحات آدرس: </label>
                    <label class="text-sm"> {{ $user->address_details }} </label>
                </div>
                @endif

            </div>

        </div>

        <!-- row 5 -->

        <div x-show="currentTab=='file'">


            <div class="lg:flex justify-center">

                @if($type == 'pro' && $utype=='natural')
                <div class="border rounded-lg m-4 lg:w-1/2 ">
                    <div class="bg-blue-100 text-center p-2 rounded-t-lg">
                        تصویر کارت نظام پزشکی / دانشجویی
                    </div>

                    <div class="flex justify-center p-4">
                        @if($user->image_medical != '')
                        <a href="/img/users/docs/{{ $user->image_medical }}" target="_blank">
                            <img class="border w-24" src="/img/users/docs/{{ $user->image_medical }}" alt="">
                        </a>
                        @endif
                    </div>
                </div>
                @endif


                @if( $user->pcode_verified == false)
                <div class="border rounded-lg m-4 lg:w-1/2 ">
                    <div class="bg-blue-100 text-center p-2 rounded-t-lg">
                        @if ($type=='pro' && $utype== 'natural')
                        تصویر کارت ملی
                        @else
                        تصویر کارت ملی نماینده
                        @endif
                    </div>

                    <div class="flex justify-center ">
                        @if($user->image_pcode != '')
                        <a href="/img/users/docs/{{ $user->image_pcode }}" target="_blank">
                            <img class="border w-24 m-4" src="/img/users/docs/{{ $user->image_pcode }}"
                                style="height: 80px;" alt="">
                        </a>
                        @endif
                    </div>
                </div>
                @endif



                @if( ($type=='pro' && $utype=='natural' && $user->pcode_verified == false) ||
                !($type=='pro' && $utype=='natural') )

                <div class="border rounded-lg m-4 lg:w-1/2 ">
                    <div class="bg-blue-100 text-center p-2 rounded-t-lg">
                        @if ($type=='pro' && $utype== 'natural')
                        تصویر معرفی نامه موبایل
                        @elseif ($type=='pro' && $utype== 'legal')
                        تصویر معرفی نامه نماینده / مسئول خرید کلینیک
                        @else
                        تصویر معرفی نامه نماینده / مسئول خرید
                        @endif
                    </div>
                    <div class="flex justify-center ">
                        @if($user->image_present_mobile != '')
                        <a href="/img/users/docs/{{ $user->image_present_mobile }}" target="_blank">
                            <img class="border w-24 m-4" src="/img/users/docs/{{ $user->image_present_mobile }}" alt="">
                        </a>
                        @endif
                    </div>
                </div>
                @endif


                @if($type == 'pro' )
                <div class="border rounded-lg m-4 lg:w-1/2 ">
                    <div class="bg-blue-100 text-center p-2 rounded-t-lg">
                        @if($utype == 'legal')
                        تصویر پروانه کلینیک
                        @else
                        تصویر پروانه مطب / کلینیک
                        @endif
                    </div>
                    <div class="flex justify-center ">
                        @if($user->image_business_license != '')
                        <a href="/img/users/docs/{{ $user->image_business_license }}" target="_blank">
                            <img class="border w-24 m-4" src="/img/users/docs/{{ $user->image_business_license }}"
                                alt="">
                        </a>
                        @endif

                    </div>
                </div>
                @endif


            </div>

        </div>

        {{-- <p class="font-bold mb-2 m-2 mt-5 text-black rounded-xl px-3 py-1"> اطلاعات نماینده:</p>
        <div class="md:flex justify-around">
            <div class="flex">
                <label class="text-sm font-bold mx-2"> نام : </label>
                <label class="text-sm"> علی </label>
            </div>
            <div class="flex">
                <label class="text-sm font-bold mx-2"> نام خانوادگی: </label>
                <label class="text-sm "> کرمی </label>
            </div>
            <div class="flex">
                <label class="text-sm font-bold mx-2"> کدملی : </label>
                <label class="text-sm "> 01122512122 </label>
            </div>
            <div class="flex">
                <label class="text-sm font-bold mx-2"> جنسیت : </label>
                <label class="text-sm"> مرد </label>
            </div>
        </div> --}}
    </div>
</div>


@stop

@section('scripts')

@stop