@extends('layouts.front_end')
@section('title', 'Seller Account Create')
@section('content')
    <div>
        <style>
            #headerOneCheckOut,
            #sticky-header,
            #headerThreeCheckout,
            #footerOneCheckOut {
                display: none;
            }
            .cus_hover_btn{
                border-radius:10px;
                background-color:#ff5c00;
                padding:5px 10px;
                font-size:15px;
                color:#fff;
                width: 100px;
                height:40px;
            }
            .cus_hover_btn:hover{
                background-color: #000;
                color:#fff;
            }
            .cus_hover_seler_btn{
                border-radius:10px;
                background-color:#ff5c00;
                padding:5px 10px;
                font-size:15px;
                color:#fff;
                width: 150px;
                height:40px;
            }
            .cus_hover_seler_btn:hover{
                background-color: #000;
                color:#fff;
            }
        </style>
        <!-- main-area -->
        <main>
            <div class="text-center py-2 rounded" style="background-color: black;position: fixed;width: 100%;z-index: 2;">
                <a href="{{ route('home') }}" class="float-left">
                    <i class="fas fa-arrow-left pl-1" style="color: white;font-size: 20px;"></i>
                </a>
                <span class="mt-1" style="color: white;font-weight: bold; font-size: 20px;">
                    সেলার রেজিষ্ট্রেশন
                </span>
            </div>

            <!-- my-account-area -->
            <section class="my-account-area pattern-bg pt-20 pb-20"
                data-background="{{ URL::asset('venam/') }}/img/bg/pattern_bg.jpg">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-xl-8 col-lg-10">
                            <div class="my-account-bg" data-background="{{ URL::asset('venam/') }}/img/bg/my_account_bg.png">
                                <div class="my-account-content">
                                    <div class="row">
                                        <div class="col-md-12 text-center">
                                            <p style="color: #ff5c00;">আপনাকে স্বাগতম পাইকারী ইলেকট্রনিক্স অ্যাপে</p>
                                        </div>
                                        <div class="col-md-12 text-center">
                                            <a href="{{ url('sign-in') }}" class="cus_hover_btn" style="">সেলার লগইন</a>
                                        </div>
                                    </div>
                                    <div class="direct-login">
                                        {{-- <a class="btn-hover" href="{{route('sign-in')}}"
                                    style="background-color: red;font-weight: bold;"><i
                                        class="form-grp-btn"></i>লগইন</a> --}}
                                        {{-- <a href="#" class="xing"><i class="fab fa-xing"></i>Login with xing</a> --}}
                                    </div>
                                    {{-- <x-jet-authentication-card> --}}
                                    <x-slot name="logo">
                                        {{-- <x-jet-authentication-card-logo /> --}}
                                        {{-- <img cqlass="img-fluid border shadow-xl rounded-full" src="./icon.png" alt="" style="width:100px;height:100px;"> --}}
                                    </x-slot>

                                    @if (session()->has('success'))
                                        <div class="alert alert-success">
                                            {{ session()->get('success') }}
                                        </div>
                                    @endif

                                    <x-jet-validation-errors class="mb-4" />
                                    <form method="POST" action="{{ route('seller-create') }}" class="login-form" id="my-form">
                                        @csrf
                                        <div class="form-grp">
                                            <x-jet-label for="name" value="আপনার নাম" />
                                            <x-jet-input id="name" class="block mt-1 w-full" type="text"
                                                name="name" :value="old('name')" required
                                                placeholder="আপনার নাম লিখুন" />
                                            @error('name')
                                                <span class="error text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>

                                        <div class="form-grp">
                                            <x-jet-label for="business_name" value="দোকানের নাম" />
                                            <x-jet-input id="business_name" class="block mt-1 w-full" type="text"
                                                name="business_name" :value="old('business_name')" required
                                                 placeholder="আপনার দোকানের নাম লিখুন" />
                                            @error('business_name')
                                                <span class="error text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>

                                        <div class="form-grp">
                                            <x-jet-label for="mobile" value="মোবাইল নাম্বার (Only 11 Digit)" />
                                            <x-jet-input id="mobile" class="block mt-1 w-full" type="text" maxlength="11"
                                                name="mobile" :value="old('mobile')" required placeholder="আপনার ১১ ডিজিটের মোবাইল নাম্বার লিখুন" />
                                            @error('mobile')
                                                <span class="error text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>

                                        <div class="form-grp">
                                            <x-jet-label for="email" value="ইমেইল আইডি" />
                                            <x-jet-input id="email" class="block mt-1 w-full" type="email"
                                                name="email" :value="old('email')" required placeholder="আপনার ইমেইল লিখুন" />
                                            @error('email')
                                                <span class="error text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>

                                        <div class="form-grp">
                                            <x-jet-label for="address" value="জেলা" />
                                            <select class="custom-select district" name="district_id" required>
                                                <option value="">--Select District--</option>
                                                @foreach ($districts as $zilla)
                                                    <option value="{{ $zilla->id }}"
                                                        class="district-items division_id_{{ $zilla->division_id }} "
                                                        style="color:black;"
                                                        @if ($zilla->name == 'Dhaka') selected @endif>
                                                        {{ $zilla->name }}
                                                    </option>
                                                @endforeach
                                                @error('district_id')
                                                    <span class="error text-danger">{{ $message }}</span>
                                                @enderror
                                            </select>
                                        </div>

                                        <div class="form-grp">
                                            <x-jet-label for="address" value="আপনার ঠিকানা" />
                                            <x-jet-input id="address" class="block mt-1 w-full" type="text"
                                                name="address" :value="old('address')" required placeholder="আপনার ঠিকানা লিখুন" />
                                            @error('address')
                                                <span class="error text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>

                                        <div class="form-grp">
                                            <x-jet-label for="business_location" value="দোকানের ঠিকানা" />
                                            <x-jet-input id="business_location" class="block mt-1 w-full" type="text"
                                                name="business_location" :value="old('business_location')" required
                                                autocomplete="business_location" placeholder="এখানে আপনার দোকানের পূর্ণ ঠিকানা লিখুন" />
                                            @error('business_location')
                                                <span class="error text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>

                                        <div class="form-grp">
                                            <x-jet-label for="password" value="পাসওয়ার্ড" />
                                            <x-jet-input id="password" class="block mt-1 w-full" type="password"
                                                name="password" required
                                                placeholder="সর্বনিম্ন ৪ সংখ্যার পার্সওয়ার্ড লিখুন" />
                                                <i class="far fa-eye" aria-hidden="true" onclick="visibility()"></i>
                                            @error('password')
                                                <span class="error text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>

                                        <div class="form-grp">
                                            <x-jet-label for="password" value="কনফার্ম পাসওয়ার্ড " />
                                            <x-jet-input id="second_password" class="block mt-1 w-full" type="password"
                                                name="password_confirmation" required
                                                placeholder="একই পাসওয়ার্ড আবার লিখুন" />
                                                <i class="far fa-eye" aria-hidden="true" onclick="second_visibility()"></i>
                                            @error('password_confirmation')
                                                <span class="error text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>

                                        {{-- <div class="form-grp">
                                        <x-jet-label for="trade_license" value="{{ __('Trade License') }}" />
                                        <x-jet-input id="trade_license" class="block mt-1 w-full" type="text"
                                            name="trade_license" :value="old('trade_license')" required autofocus
                                            autocomplete="trade_license" placeholder="Trade License" />
                                    </div>
                                    <div class="form-grp">
                                        <x-jet-label for="trn_number" value="{{ __('TRN Number') }}" />
                                        <x-jet-input id="trn_number" class="block mt-1 w-full" type="text"
                                            name="trn_number" :value="old('trn_number')" required autofocus
                                            autocomplete="trn_number" placeholder="TRN Number" />
                                    </div> --}}

                                        <div class="form-grp">
                                            <x-jet-label for="about_vendor" value="সেলার সম্পর্কে..."/>
                                            <x-jet-input id="" class="block mt-1 w-full" type="text"
                                                name="about_vendor" :value="old('about_vendor')" required
                                                autocomplete="about_vendor" placeholder="আপনি কি ধরনের প্রডাক্ট সেল করেন?" />
                                            @error('about_vendor')
                                                <span class="error text-danger">দুঃখিত! আপনি সর্বোচ্চ ১০০ ক্যারেক্টার লিখতে পারবেন!</span>
                                            @enderror
                                        </div>

                                        <div class="form-grp">
                                            <x-jet-label for="account_type" value="সাপ্লায়ারের ধরন" />
                                            <select class="form-control" name="account_type" required>
                                                <option value="">--Type--</option>
                                                <option value="Importer" selected>Importer</option>
                                                <option value="Broker">Broker</option>
                                                <option value="Manufacturer">Manufacturer</option>
                                            </select>
                                            @error('account_type')
                                                <span class="error text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                        {{--
                                        <div class="form-grp">
                                            <x-jet-label for="referral_number" value="{{ __('রেফারেল নাম্বার (যদি থাকে)') }}" />
                                            <x-jet-input id="referral_number" class="block mt-1 w-full" type="text" name="referral_number"
                                                :value="old('referral_number')" placeholder="রেফারেল নাম্বার লিখুন" />
                                        </div> --}}

                                        {{-- <div class="form-grp">
                                                    <x-jet-label for="password_confirmation"
                                                        value="{{ __('কনফার্ম পাসওয়ার্ড') }}" />
                                                <x-jet-input id="password_confirmation" class="block mt-1 w-full" type="password"
                                                    name="password_confirmation" required autocomplete="new-password"
                                                    placeholder="কনফার্ম পাসওয়ার্ড" />
                                        </div> --}}

                                        <div class="form-grp-bottom">
                                            {{-- <div class="remember">
                                                <input type="checkbox" id="check" checked>
                                                <label for="check">I agree to the <a href="{{route('privacy-policy')}}">Privacy
                                            Policy</a> and <a href="{{route('terms-conditios')}}"> Terms & Conditions
                                            </a> of Paikari Electronics.</label>
                                        </div> --}}
                                            {{-- <div class="forget-pass">
                                                <a href="#">forgot password</a>
                                            </div> --}}
                                        </div>
                                        <div class="form-grp-btn text-center">
                                            <button type="submit" class="cus_hover_seler_btn" id="btn-submit">সেলার রেজিস্ট্রার</button>
                                            {{-- <x-jet-button class="ml-4" type="submit">
                                                        {{ __('Register') }}
                                            </x-jet-button> --}}
                                        </div>
                                    </form>
                                    {{-- </x-jet-authentication-card> --}}
                                </div>
                            </div>
                        </div>
            </section>
            <!-- my-account-area-end -->
        </main>
        <!-- main-area-end -->
    </div>

    <script>
        function visibility() {
      var x = document.getElementById("password");
      if (x.type === "password") {
        x.type = "text";
      } else {
        x.type = "password";
      }
    }

    function second_visibility() {
      var x = document.getElementById("second_password");
      if (x.type === "password") {
        x.type = "text";
      } else {
        x.type = "password";
      }
    }

    $('#my-form').submit(function(){
        $('#btn-submit').attr('disabled', true);
    })

    </script>
@endsection