@extends('layout.app')
@section('content')
    <style>
        .custom-file-label {
            display: inline-block;
            padding: 7px 44px;
            background-color: #eee;
            border: 1px solid #ccc;
            border-radius: 4px;
            cursor: pointer;
        }

        .file-name-placeholder {
            margin-left: 10px;
            font-style: italic;
            color: #777;
        }
    </style>
    @php
        $showSignUp = old('_form') === 'signup';
    @endphp
    <section class="sign-sec">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <div class="sign-wrap">
                        <div class="sign-content">
                            <h2><span>404</span> Chats</h2>
                            <div class="seperator"></div>
                            <p>The one stop hub for the IT professional</p>
                        </div>
                        <figure class="sign-img">
                            <img src="{{asset('images/sign.png')}}" alt="">
                        </figure>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="sign-in-and-sign-up-wrap">
                        <ul class="nav nav-pills mb-3 justify-content-end sign-tabs" id="pills-tab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link {{ !$showSignUp ? 'active' : '' }}" id="pills-signin-tab"
                                        data-toggle="pill"
                                        data-target="#pills-signin" type="button" role="tab"
                                        aria-controls="pills-signin" aria-selected="true">signin
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link {{ $showSignUp ? 'active' : '' }}" id="pills-signup-tab"
                                        data-toggle="pill"
                                        data-target="#pills-signup" type="button" role="tab"
                                        aria-controls="pills-signup" aria-selected="false">signup
                                </button>
                            </li>
                        </ul>
                        <div class="tab-content" id="pills-tabContent">
                            <div class="tab-pane fade {{ !$showSignUp ? 'show active' : '' }}" id="pills-signin"
                                 role="tabpanel"
                                 aria-labelledby="pills-signin-tab">
                                <div class="sign-tab-content">
                                    <h3>Sign In</h3>
                                    <div class="seperator"></div>
                                    @error('username')
                                    <label class="text-danger">{{$message}}</label>
                                    @enderror
                                    @error('password')
                                    <label class="text-danger">{{$message}}</label>
                                    @enderror
                                    <form action="{{route('login.form')}}" class="sign-in-form" method="post">
                                        @csrf

                                        <div class="form-field">
                                            <input type="text" placeholder="Username" name="username"
                                                   value="{{old('username')}}" required>
                                            <i class="fal fa-user"></i>

                                        </div>
                                        <div class="form-field">
                                            <input type="password" placeholder="Password" name="password" required>
                                            <i class="fal fa-lock"></i>

                                        </div>
                                        <div class="flex-between-center">
                                            <div>
                                                <label for="remember"><input type="checkbox" name="remember"> Remember
                                                    me</label>
                                            </div>
                                            <div>
                                                <a href="#">forgot password?</a>
                                            </div>
                                        </div>
                                        <div class="sign-in-btn">
                                            <button type="submit" class="themeBtn">Sign In</button>
                                        </div>
                                    </form>
                                    <h5>Login via social account</h5>
                                    <ul class="login-via-social">
                                        <li>
                                            <button><i class="fab fa-facebook-f"></i> Login Via Facebook</button>
                                        </li>
                                        <li>
                                            <button><i class="fab fa-twitter"></i> Login Via Twitter</button>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                            <div class="tab-pane fade {{ $showSignUp ? 'show active' : '' }}" id="pills-signup"
                                 role="tabpanel"
                                 aria-labelledby="pills-signup-tab">
                                <div class="sign-tab-content">
                                    <h3>Sign Up</h3>
                                    <div class="seperator"></div>
                                    @error('name')
                                    <label class="text-danger">{{$message}}</label>
                                    @enderror
                                    @error('email')
                                    <label class="text-danger">{{$message}}</label>
                                    @enderror
                                    @error('email_confirmation')
                                    <label class="text-danger">{{$message}}</label>
                                    @enderror
                                    @error('profile_image')
                                    <label class="text-danger">{{$message}}</label>
                                    @enderror
                                    @error('title')
                                    <label class="text-danger">{{$message}}</label>
                                    @enderror
                                    @error('password')
                                    <label class="text-danger">{{$message}}</label>
                                    @enderror
                                    @error('password_confirmation')
                                    <label class="text-danger">{{$message}}</label>
                                    @enderror
                                    <form action="{{route('registration.form')}}" class="sign-in-form" method="post"
                                          enctype="multipart/form-data">
                                        @csrf
                                        <input type="hidden" name="_form" value="signup">
                                        <div class="form-field">
                                            <input type="text" placeholder="First Name" value="{{ old('f_name') }}"
                                                   name="f_name" id="f_name" required>
                                            <i class="fal fa-user"></i>
                                        </div>
                                        <div class="form-field">
                                            <input type="text" placeholder="Last Name" value="{{ old('l_name') }}"
                                                   name="l_name" id="l_name" required>
                                            <i class="fal fa-user"></i>
                                        </div>
                                        <div class="form-field">
                                            <select name="gender" required class="form-control"
                                                    style="padding: 0.375rem 2.75rem!important;">
                                                <option value="" selected disabled>Select Gender</option>
                                                <option value="male">Male</option>
                                                <option value="female">Female</option>
                                            </select>
                                            <i class="fal fa-user"></i>
                                        </div>
                                        <div class="form-field">
                                            <input type="text" placeholder="Username" value="{{ old('username') }}"
                                                   name="username" id="username" required>
                                            <i class="fal fa-user"></i>
                                        </div>
                                        <div class="form-field">
                                            <input type="email" placeholder="Email" value="{{ old('email') }}"
                                                   name="email" required>
                                            <i class="fal fa-envelope"></i>
                                        </div>
                                        <div class="form-field">
                                            <select name="title" required class="form-control"
                                                    style="padding: 0.375rem 2.75rem!important;">
                                                <option value="">Select Occupation</option>
                                                <option value="AIML Engineer">AI/ML Engineer</option>
                                                <option value="Business Development">Business Development</option>
                                                <option value="Cloud Architect">Cloud Architect</option>
                                                <option value="Cybersecurity Analyst">Cybersecurity Analyst</option>
                                                <option value="Data Analyst">Data Analyst</option>
                                                <option value="Data Scientist">Data Scientist</option>
                                                <option value="DevOps Engineer">DevOps Engineer</option>
                                                <option value="Database Administrator">Database Administrator</option>
                                                <option value="IT Project Manager">IT Project Manager</option>
                                                <option value="IT Support Specialist">IT Support Specialist</option>
                                                <option value="Network Administrator">Network Administrator</option>
                                                <option value="Software Developer">Software Developer</option>
                                                <option value="Sales">Sales</option>
                                                <option value="Systems Engineer">Systems Engineer</option>
                                                <option value="UX/UI Designer">UX/UI Designer</option>
                                                <option value="Web Developer">Web Developer</option>
                                                <option value="Other">Other</option>
                                            </select>
                                            <i class="fal fa-plus"></i>
                                        </div>
                                        <div class="form-field">
                                            <select name="country" id="country" required class="form-control"
                                                    style="padding: 0.375rem 2.75rem!important;">
                                                <option value="">Select Country</option>
                                                <option value="United States">United States</option>
                                                <option value="Afghanistan">Afghanistan</option>
                                                <option value="Albania">Albania</option>
                                                <option value="Algeria">Algeria</option>
                                                <option value="American Samoa">American Samoa</option>
                                                <option value="Andorra">Andorra</option>
                                                <option value="Angola">Angola</option>
                                                <option value="Anguilla">Anguilla</option>
                                                <option value="Antarctica">Antarctica</option>
                                                <option value="Antigua and Barbuda">Antigua and Barbuda</option>
                                                <option value="Argentina">Argentina</option>
                                                <option value="Armenia">Armenia</option>
                                                <option value="Australia">Australia</option>
                                                <option value="Austria">Austria</option>
                                                <option value="Azerbaijan">Azerbaijan</option>
                                                <option value="Bahamas">Bahamas</option>
                                                <option value="Bahrain">Bahrain</option>
                                                <option value="Bangladesh">Bangladesh</option>
                                                <option value="Barbados">Barbados</option>
                                                <option value="Belarus">Belarus</option>
                                                <option value="Belgium">Belgium</option>
                                                <option value="Belize">Belize</option>
                                                <option value="Benin">Benin</option>
                                                <option value="Bhutan">Bhutan</option>
                                                <option value="Bolivia">Bolivia</option>
                                                <option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
                                                <option value="Botswana">Botswana</option>
                                                <option value="Brazil">Brazil</option>
                                                <option value="Brunei Darussalam">Brunei Darussalam</option>
                                                <option value="Bulgaria">Bulgaria</option>
                                                <option value="Burkina Faso">Burkina Faso</option>
                                                <option value="Burundi">Burundi</option>
                                                <option value="Cambodia">Cambodia</option>
                                                <option value="Cameroon">Cameroon</option>
                                                <option value="Canada">Canada</option>
                                                <option value="Cape Verde">Cape Verde</option>
                                                <option value="Cayman Islands">Cayman Islands</option>
                                                <option value="Central African Republic">Central African Republic
                                                </option>
                                                <option value="Chad">Chad</option>
                                                <option value="Chile">Chile</option>
                                                <option value="China">China</option>
                                                <option value="Christmas Island">Christmas Island</option>
                                                <option value="Cocos (Keeling) Islands">Cocos (Keeling) Islands</option>
                                                <option value="Colombia">Colombia</option>
                                                <option value="Comoros">Comoros</option>
                                                <option value="Congo">Congo</option>
                                                <option value="Congo (Democratic Republic)">Congo (Democratic
                                                    Republic)
                                                </option>
                                                <option value="Cook Islands">Cook Islands</option>
                                                <option value="Costa Rica">Costa Rica</option>
                                                <option value="Croatia">Croatia</option>
                                                <option value="Cuba">Cuba</option>
                                                <option value="Cyprus">Cyprus</option>
                                                <option value="Czech Republic">Czech Republic</option>
                                                <option value="Denmark">Denmark</option>
                                                <option value="Djibouti">Djibouti</option>
                                                <option value="Dominica">Dominica</option>
                                                <option value="Dominican Republic">Dominican Republic</option>
                                                <option value="Ecuador">Ecuador</option>
                                                <option value="Egypt">Egypt</option>
                                                <option value="El Salvador">El Salvador</option>
                                                <option value="Equatorial Guinea">Equatorial Guinea</option>
                                                <option value="Eritrea">Eritrea</option>
                                                <option value="Estonia">Estonia</option>
                                                <option value="Ethiopia">Ethiopia</option>
                                                <option value="Falkland Islands (Malvinas)">Falkland Islands
                                                    (Malvinas)
                                                </option>
                                                <option value="Faroe Islands">Faroe Islands</option>
                                                <option value="Fiji">Fiji</option>
                                                <option value="Finland">Finland</option>
                                                <option value="France">France</option>
                                                <option value="French Guiana">French Guiana</option>
                                                <option value="French Polynesia">French Polynesia</option>
                                                <option value="French Southern Territories">French Southern
                                                    Territories
                                                </option>
                                                <option value="Gabon">Gabon</option>
                                                <option value="Gambia">Gambia</option>
                                                <option value="Georgia">Georgia</option>
                                                <option value="Germany">Germany</option>
                                                <option value="Ghana">Ghana</option>
                                                <option value="Gibraltar">Gibraltar</option>
                                                <option value="Greece">Greece</option>
                                                <option value="Greenland">Greenland</option>
                                                <option value="Grenada">Grenada</option>
                                                <option value="Guam">Guam</option>
                                                <option value="Guatemala">Guatemala</option>
                                                <option value="Guernsey">Guernsey</option>
                                                <option value="Guinea">Guinea</option>
                                                <option value="Guinea-Bissau">Guinea-Bissau</option>
                                                <option value="Guyana">Guyana</option>
                                                <option value="Haiti">Haiti</option>
                                                <option value="Heard Island and McDonald Islands">Heard Island and
                                                    McDonald Islands
                                                </option>
                                                <option value="Honduras">Honduras</option>
                                                <option value="Hong Kong">Hong Kong</option>
                                                <option value="Hungary">Hungary</option>
                                                <option value="Iceland">Iceland</option>
                                                <option value="India">India</option>
                                                <option value="Indonesia">Indonesia</option>
                                                <option value="Iran">Iran</option>
                                                <option value="Iraq">Iraq</option>
                                                <option value="Ireland">Ireland</option>
                                                <option value="Israel">Israel</option>
                                                <option value="Italy">Italy</option>
                                                <option value="Ivory Coast">Ivory Coast</option>
                                                <option value="Jamaica">Jamaica</option>
                                                <option value="Japan">Japan</option>
                                                <option value="Jersey">Jersey</option>
                                                <option value="Jordan">Jordan</option>
                                                <option value="Kazakhstan">Kazakhstan</option>
                                                <option value="Kenya">Kenya</option>
                                                <option value="Kiribati">Kiribati</option>
                                                <option value="Korea (North)">Korea (North)</option>
                                                <option value="Korea (South)">Korea (South)</option>
                                                <option value="Kuwait">Kuwait</option>
                                                <option value="Kyrgyzstan">Kyrgyzstan</option>
                                                <option value="Laos">Laos</option>
                                                <option value="Latvia">Latvia</option>
                                                <option value="Lebanon">Lebanon</option>
                                                <option value="Lesotho">Lesotho</option>
                                                <option value="Liberia">Liberia</option>
                                                <option value="Libya">Libya</option>
                                                <option value="Liechtenstein">Liechtenstein</option>
                                                <option value="Lithuania">Lithuania</option>
                                                <option value="Luxembourg">Luxembourg</option>
                                                <option value="Macau">Macau</option>
                                                <option value="Macedonia">Macedonia</option>
                                                <option value="Madagascar">Madagascar</option>
                                                <option value="Malawi">Malawi</option>
                                                <option value="Malaysia">Malaysia</option>
                                                <option value="Maldives">Maldives</option>
                                                <option value="Mali">Mali</option>
                                                <option value="Malta">Malta</option>
                                                <option value="Marshall Islands">Marshall Islands</option>
                                                <option value="Martinique">Martinique</option>
                                                <option value="Mauritania">Mauritania</option>
                                                <option value="Mauritius">Mauritius</option>
                                                <option value="Mayotte">Mayotte</option>
                                                <option value="Mexico">Mexico</option>
                                                <option value="Micronesia">Micronesia</option>
                                                <option value="Moldova">Moldova</option>
                                                <option value="Monaco">Monaco</option>
                                                <option value="Mongolia">Mongolia</option>
                                                <option value="Montserrat">Montserrat</option>
                                                <option value="Morocco">Morocco</option>
                                                <option value="Mozambique">Mozambique</option>
                                                <option value="Myanmar">Myanmar</option>
                                                <option value="Namibia">Namibia</option>
                                                <option value="Nauru">Nauru</option>
                                                <option value="Nepal">Nepal</option>
                                                <option value="Netherlands">Netherlands</option>
                                                <option value="Netherlands Antilles">Netherlands Antilles</option>
                                                <option value="New Caledonia">New Caledonia</option>
                                                <option value="New Zealan">New Zealand</option>
                                                <option value="Nicaragua">Nicaragua</option>
                                                <option value="Niger">Niger</option>
                                                <option value="Nigeria">Nigeria</option>
                                                <option value="Niue">Niue</option>
                                                <option value="Norfolk Island">Norfolk Island</option>
                                                <option value="Northern Mariana Islands">Northern Mariana Islands
                                                </option>
                                                <option value="Norway">Norway</option>
                                                <option value="Oman">Oman</option>
                                                <option value="Pakistan">Pakistan</option>
                                                <option value="Palau">Palau</option>
                                                <option value="Palestinian Territory">Palestinian Territory</option>
                                                <option value="Panama">Panama</option>
                                                <option value="Papua New Guinea">Papua New Guinea</option>
                                                <option value="Paraguay">Paraguay</option>
                                                <option value="Peru">Peru</option>
                                                <option value="Philippines">Philippines</option>
                                                <option value="Pitcairn">Pitcairn</option>
                                                <option value="Poland">Poland</option>
                                                <option value="Portugal">Portugal</option>
                                                <option value="Puerto Rico">Puerto Rico</option>
                                                <option value="Qatar">Qatar</option>
                                                <option value="Réunion">Réunion</option>
                                                <option value="Romania">Romania</option>
                                                <option value="Russia">Russia</option>
                                                <option value="Rwanda">Rwanda</option>
                                                <option value="Saint Barthélemy">Saint Barthélemy</option>
                                                <option value="Saint Helena">Saint Helena</option>
                                                <option value="Saint Kitts and Nevis">Saint Kitts and Nevis</option>
                                                <option value="Saint Lucia">Saint Lucia</option>
                                                <option value="Saint Martin (French part)">Saint Martin (French part)
                                                </option>
                                                <option value="Saint Pierre and Miquelon">Saint Pierre and Miquelon
                                                </option>
                                                <option value="Saint Vincent and the Grenadines">Saint Vincent and the
                                                    Grenadines
                                                </option>
                                                <option value="Samoa">Samoa</option>
                                                <option value="San Marino">San Marino</option>
                                                <option value="Sao Tome and Principe">Sao Tome and Principe</option>
                                                <option value="Saudi Arabia">Saudi Arabia</option>
                                                <option value="Senegal">Senegal</option>
                                                <option value="Serbia">Serbia</option>
                                                <option value="Seychelles">Seychelles</option>
                                                <option value="Sierra Leone">Sierra Leone</option>
                                                <option value="Singapore">Singapore</option>
                                                <option value="Sint Maarten (Dutch part)">Sint Maarten (Dutch part)
                                                </option>
                                                <option value="Slovakia">Slovakia</option>
                                                <option value="Slovenia">Slovenia</option>
                                                <option value="Solomon Islands">Solomon Islands</option>
                                                <option value="Somalia">Somalia</option>
                                                <option value="South Africa">South Africa</option>
                                                <option value="South Georgia and the South Sandwich Islands">South
                                                    Georgia and the South Sandwich Islands
                                                </option>
                                                <option value="South Sudan">South Sudan</option>
                                                <option value="Spain">Spain</option>
                                                <option value="Sri Lanka">Sri Lanka</option>
                                                <option value="Sudan">Sudan</option>
                                                <option value="Suriname">Suriname</option>
                                                <option value="Svalbard and Jan Mayen">Svalbard and Jan Mayen</option>
                                                <option value="Eswatini (Swaziland)">Eswatini (Swaziland)</option>
                                                <option value="Sweden">Sweden</option>
                                                <option value="Switzerland">Switzerland</option>
                                                <option value="Syria">Syria</option>
                                                <option value="Taiwan">Taiwan</option>
                                                <option value="Tajikistan">Tajikistan</option>
                                                <option value="Tanzania">Tanzania</option>
                                                <option value="Thailand">Thailand</option>
                                                <option value="Timor-Leste">Timor-Leste</option>
                                                <option value="Togo">Togo</option>
                                                <option value="Tokelau">Tokelau</option>
                                                <option value="Tonga">Tonga</option>
                                                <option value="Trinidad and Tobago">Trinidad and Tobago</option>
                                                <option value="Tunisia">Tunisia</option>
                                                <option value="Turkey">Turkey</option>
                                                <option value="Turkmenistan">Turkmenistan</option>
                                                <option value="Turks and Caicos Islands">Turks and Caicos Islands
                                                </option>
                                                <option value="Tuvalu">Tuvalu</option>
                                                <option value="Uganda">Uganda</option>
                                                <option value="Ukraine">Ukraine</option>
                                                <option value="United Arab Emirates">United Arab Emirates</option>
                                                <option value="United Kingdom">United Kingdom</option>

                                                <option value="Uruguay">Uruguay</option>
                                                <option value="Uzbekistan">Uzbekistan</option>
                                                <option value="Vanuatu">Vanuatu</option>
                                                <option value="Vatican City">Vatican City</option>
                                                <option value="Venezuela">Venezuela</option>
                                                <option value="Vietnam">Vietnam</option>
                                                <option value="Wallis and Futuna">Wallis and Futuna</option>
                                                <option value="Western Sahara">Western Sahara</option>
                                                <option value="Yemen">Yemen</option>
                                                <option value="Zambia">Zambia</option>
                                                <option value="Zimbabwe">Zimbabwe</option>
                                            </select>
                                            <i class="fal fa-flag"></i>
                                        </div>

                                        <div class="form-field">
                                            <input type="text" name="state" id="state" placeholder="State"
                                                   value="{{ old('state') }}" required>
                                            <i class="fal fa-map"></i>
                                        </div>

                                        <div class="form-field">
                                            <input type="text" name="city" id="city" placeholder="City"
                                                   value="{{ old('city') }}" required>
                                            <i class="fal fa-city"></i>
                                        </div>
                                        <div class="form-field">
                                            <input type="password" placeholder="Password" name="password" required>
                                            <i class="fal fa-lock"></i>
                                        </div>
                                        <div class="form-field">
                                            <input type="password" placeholder="Confirm Password"
                                                   name="password_confirmation" required>
                                            <i class="fal fa-lock"></i>
                                        </div>
                                        <div class="form-field custom-file-field">
                                            <input type="file" name="profile_image" id="profile_image"
                                                   class="custom-file-input" hidden>
                                            <label for="profile_image" class="custom-file-label">
                                                <i class="fal fa-image"></i> Select Profile Image
                                            </label>
                                            <span id="file-name" class="file-name-placeholder">No file chosen</span>
                                        </div>
                                        <div class="flex-between-center">
                                            <div>
                                                <label for="remember"><input type="checkbox"> Remember me</label>
                                            </div>
                                        </div>
                                        <div class="sign-in-btn" style="display: flex; justify-content: flex-end;">
                                            <button type="submit" class="themeBtn">Sign Up</button>
                                        </div>

                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@push('script')
    <script>
        document.getElementById('profile_image').addEventListener('change', function (e) {
            const fileName = e.target.files[0]?.name || "No file chosen";
            document.getElementById('file-name').textContent = fileName;
        });

        document.addEventListener("DOMContentLoaded", function () {
            const firstName = document.getElementById("f_name");
            const lastName = document.getElementById("l_name");
            const userName = document.getElementById("username");


            function generateUserName() {
                let f = firstName.value.trim().toLowerCase();
                let l = lastName.value.trim().toLowerCase();
                if (f || l) {
                    userName.value = f + l;
                }
            }

            firstName.addEventListener("input", generateUserName);
            lastName.addEventListener("input", generateUserName);
        })
    </script>
@endpush