@extends('user.layout.master')

@section('head-tag')
    <title> افزودن کسب و کار </title>
@endsection

@section('content')

    <div class="px-4 mx-auto mt-10">

        <div class="container">
            <x-core.divider mt="mt-10" title="  افزودن کسب و کار  " />
        </div>

        <div class="container flex items-start gap-4">

            @include('user.layout.panel-sidebar')

            <!-- Services List -->
            <div class="w-full lg:w-[75%] flex flex-col gap-4 justify-center items-center">

                <div class="w-full flex flex-col gap-4 justify-center items-center px-3 py-3 transition-colors duration-150 rounded-lg cursor-pointer bg-slate-100 alert-show-business-form">
                    <h4 class="font-semibold text-md">آیا تصمیم دارید حساب کاربری شما به حالت کسب و کار ارتقا یابد؟</h4>

                    <div class="flex items-center gap-2">
                        <a  href="{{ route('user.favorites') }}" class="btn bg-red-600 text-white hover:bg-red-700 py-[5px] px-[20px] rounded-lg">خیر</a>
                        <button class="btn bg-green-600 text-white hover:bg-green-700 py-[5px] px-[20px] rounded-lg showBusinessFormBtn">بله</button>
                    </div>
                </div>

                <div class="w-full flex flex-col gap-4 justify-center items-center px-3 py-3 transition-colors duration-150 rounded-lg cursor-pointer bg-slate-100 businessForm" style="display: none">
                    <h4 class="font-semibold text-md">لطفا فرم زیر را تکمیل کنید</h4>

                    <form action="{{ route('change-to-businessman') }}" method="post" class="w-full" enctype="multipart/form-data">
                        @csrf
                        <div class="w-full flex justify-center gap-5">
                            <div class="max-w-[300px] w-full">
                                <input type="text" name="first_name" value="{{ $user->first_name ?? '' }}" placeholder="نام" class="bg-white text-gray-900 text-sm rounded-lg focus:ring-1 focus:ring-indigo-400 focus:border-indigo-400 block w-full p-2.5 focus:outline-none focus-visible:outline-none py-2 pl-4 border-gray-300 border">
                            </div>

                            <div class="max-w-[300px] w-full">
                                <input type="text" name="last_name" value="{{ $user->last_name ?? '' }}" placeholder="نام خانوادگی" class="bg-white text-gray-900 text-sm rounded-lg focus:ring-1 focus:ring-indigo-400 focus:border-indigo-400 block w-full p-2.5 focus:outline-none focus-visible:outline-none py-2 pl-4 border-gray-300 border">
                            </div>
                        </div>

                        <div class="w-full flex justify-center gap-5 mt-5">
                            <div class="max-w-[300px] w-full">
                                <input type="text" name="site" value="{{ $user->site ?? '' }}" placeholder="سایت" class="bg-white text-gray-900 text-sm rounded-lg focus:ring-1 focus:ring-indigo-400 focus:border-indigo-400 block w-full p-2.5 focus:outline-none focus-visible:outline-none py-2 pl-4 border-gray-300 border">
                            </div>

                            <div class="max-w-[300px] w-full">
                                <input type="text" disabled value="{{ $user->phone }}" placeholder="شماره تلفن" class="bg-white text-gray-900 text-sm rounded-lg focus:ring-1 focus:ring-indigo-400 focus:border-indigo-400 block w-full p-2.5 focus:outline-none focus-visible:outline-none py-2 pl-4 border-gray-300 border">
                            </div>
                        </div>

                        <div class="w-full flex justify-center gap-5 mt-5">
                            <button class="btn bg-green-600 text-white hover:bg-green-700 py-[10px] px-[20px] rounded-lg">ارسال اطلاعات</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('script')
    <script>
        $('.showBusinessFormBtn').on('click',function (){
            $('.businessForm').show();
            $('.alert-show-business-form').hide();
        })
    </script>
@endsection