@extends('layouts.app')

@section('title', 'Add User')


@push('css')
    <link rel="stylesheet" href="{{ asset('assets/css/custom/user.css') }}">
    <style>
        .form-control {
            padding-right: 2.5rem;
            /* Ensure space for the eye icon */
        }
    </style>
@endpush


@section('content')
    <x-content-body>

        <x-breadcrumbs :breadcrumbs="$breadcrumbs" />

        <x-row-card>

            <x-slot:title>
                <h4 class="card-title">Add New User</h4>
            </x-slot:title>
            <x-form id="add-user-form">

                <div class="row">
                    <h4 class="text-primary mb-3">Personal Information</h4>
                    <div class="mb-3 col-md-3">
                        <x-input-label for="f_name" :value="__('First Name')" :required="true" />
                        <x-text-input id="f_name" type="text" placeholder="Enter First Name" name="f_name" />
                    </div>
                    <div class="mb-3 col-md-3">
                        <x-input-label for="m_name" :value="__('Middle Initial')" />
                        <x-text-input id="m_name" type="text" placeholder="Enter Middle Initial" name="m_name" />
                    </div>
                    <div class="mb-3 col-md-3">
                        <x-input-label for="l_name" :value="__('Last Name')" :required="true" />
                        <x-text-input id="l_name" type="text" placeholder="Enter Last Name" name="l_name" />
                    </div>
                    <div class="mb-3 col-md-3">
                        <x-input-label for="n_name" :value="__('Nick Name')" />
                        <x-text-input id="n_name" type="text" placeholder="Enter Nick Name" name="n_name" />
                    </div>
                </div>
                <div class="row">
                    <div class="mb-3 col-md-3">
                        <x-input-label for="email" :value="__('Email')" :required="true" />
                        <x-text-input id="email" type="text" placeholder="Enter Email" name="email" />
                    </div>
                    <!-- Password Field -->
                    <div class="col-md-3 mb-3 position-relative">
                        <x-input-label for="password" :value="__('Password')" :required="true" />
                        <x-text-input id="password" type="password" name="password" placeholder="********"
                            autocomplete="new-password" />
                        <span class="eye-icon position-absolute toggle-password"
                            style="right: 22px; top: 34px; cursor: pointer;" id="togglePassword1">
                            <i class="fa fa-eye"></i>
                        </span>
                        <span id="password-error" class="text-danger"></span>
                    </div>

                    <!-- Confirm Password Field -->
                    <div class="mb-3 col-md-3 position-relative">
                        <x-input-label for="password_confirmation" :value="__('Confirm Password')" :required="true" />
                        <x-text-input id="password2" type="password" name="password_confirmation" placeholder="********"
                            autocomplete="new-password" />
                        <span class="eye-icon position-absolute toggle-password"
                            style="right: 22px; top: 34px; cursor: pointer;" id="togglePassword2">
                            <i class="fa fa-eye"></i>
                        </span>
                    </div>
                    <div class="mb-3 col-md-3">
                        <x-input-label for="role" :value="__('Account Type')" />
                        <select id="role" name="role" class="form-select form-select-sm"
                            style="border-radius: 0.625rem !important; border: 1px solid #E6E6E6; height: 33px;">
                            <option selected value="">Select role</option>
                            @foreach ($roles as $role)
                                <option value="{{ $role['id'] }}">{{ $role['name'] }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3 col-md-3">
                        <x-input-label for="title" :value="__('Title')" />
                        <x-text-input id="title" type="text" placeholder="Enter Title" name="title" />
                    </div>
                   <div class="mb-3 col-md-3">
                        <x-input-label for="d_o_b" :value="__('Date of Birth')" />
                         {{-- <x-text-input id="d_o_b" type="date" placeholder="Select Date of Birth" name="d_o_b" /> --}}
                         {{-- <x-text-input name="documentation_effective_listing_date" type="date" /> --}}
                         <input type="date"  name="d_o_b" class="form-control form-control-sm" placeholder="Select Date of Birth" />
                    </div> 
                   
                  
                    
                    

                </div>
                <div class="row">
                    <h4 class="text-primary mb-3 mt-4">License Information</h4>
                    <div class="mb-3 col-md-3">
                        <x-input-label for="state_of_license" :value="__('State of License')" :required="true" />
                        <select name="state_of_license" class="state_of_license form-control form-control-sm">
                            @foreach ($states as $abbr => $state)
                                <option value="{{ $abbr }}">{{ $state }}</option>
                            @endforeach
                        </select>

                    </div>
                    <div class="mb-3 col-md-3">
                        <x-input-label for="state_license_number" :value="__('State License Number')" />
                        <x-text-input id="state_license_number" type="text" placeholder="Enter State License Number"
                            name="state_license_number" id="state_license_number" />
                    </div>
                    <div class="mb-3 col-md-3">
                        <x-input-label for="industry_recognized_memberships" :value="__('Industry Recognized Memberships')" />
                        <select id="" multiple="multiple"
                            class="default-select form-control form-control-sm wide industry_recognized_memberships"
                            name="industry_recognized_memberships[]" id="industry_recognized_memberships">
                        </select>
                    </div>
                    <div class="mb-3 col-md-3">
                        <x-input-label for="industry_recognized_designations" :value="__('Industry Recognized Designations')" />
                        <select id="" multiple="multiple"
                            class="default-select form-control form-control-sm wide industry_recognized_designations"
                            name="industry_recognized_designations[]" id="industry_recognized_designations">
                        </select>
                    </div>
                </div>
                <div class="row">
                    <h4 class="text-primary mb-3 mt-3">Additional Information</h4>
                    <div class="mb-3 col-md-3">
                        <x-input-label for="cell_phone" :value="__('Cell Phone')" :required="true" />
                        <x-text-input class="phone_number_formate" id="cell_phone" type="text" placeholder="Enter Cell Phone Number"
                            name="cell_phone" id="cell_phone" />
                    </div>
                    <div class="mb-3 col-md-3">
                        <x-input-label for="website" :value="__('Personal Website')" />
                        <x-text-input id="website" type="text"
                            placeholder="Enter Personal Website or Landing Page URL" name="website" id="website" />
                    </div>
                    <div class="mb-3 col-md-3">
                        <x-input-label for="in_business_since_year" :value="__('In Business Since (Year):')" />
                        <x-text-input id="in_business_since_year" type="text"
                            placeholder="Enter Year Business Started" name="in_business_since_year"
                            id="in_business_since_year" />
                    </div>
                    <div class="mb-3 col-md-3">
                        <x-input-label for="speciality" :value="__('Speciality')" />
                        <select id="" multiple="multiple"
                            class="default-select form-control form-control-sm wide specialty" name="speciality[]"
                            id="specialty">
                            <option value="Tax Sales">Tax Sales</option>
                            <option value="Foreclosures">Foreclosures</option>
                            <option value="Short Sales">Short Sales</option>
                            <option value="REO (Real Estate Owned) Properties">REO (Real Estate Owned) Properties</option>
                            <option value="Commercial Real Estate">Commercial Real Estate</option>
                            <option value="Luxury Real Estate">Luxury Real Estate</option>
                            <option value="Investment Properties">Investment Properties</option>
                            <option value="New Construction Sales">New Construction Sales</option>
                            <option value="Property Management">Property Management</option>
                            <option value="Land Sales">Land Sales</option>
                            <option value="Acquisition and Development">Acquisition and Development</option>
                            <option value="Senior Housing Real Estate">Senior Housing Real Estate</option>
                            <option value="First-Time Home Buyers">First-Time Home Buyers</option>
                            <option value="Vacation and Second Homes">Vacation and Second Homes</option>
                            <option value="Industrial Real Estate">Industrial Real Estate</option>
                            <option value="Retail Real Estate">Retail Real Estate</option>
                            <option value="Relocation Services">Relocation Services</option>
                            <option value="Lease Negotiation">Lease Negotiation</option>
                            <option value="Real Estate Consulting">Real Estate Consulting</option>
                            <option value="Auction Properties">Auction Properties</option>
                            <option value="Multi-Family Properties">Multi-Family Properties</option>
                            <option value="Corporate Real Estate Services">Corporate Real Estate Services</option>
                            <option value="Agricultural Real Estate">Agricultural Real Estate</option>
                            <option value="Green and Sustainable Real Estate">Green and Sustainable Real Estate</option>
                            <option value="Historic Property Sales">Historic Property Sales</option>
                            <option value="Affordable Housing">Affordable Housing</option>
                            <option value="Estate Liquidation">Estate Liquidation</option>
                            <option value="Asset Management">Asset Management</option>
                            <option value="Real Estate Investment Trusts (REITs)">Real Estate Investment Trusts (REITs)</option>
                            <option value="Distressed Property Sales">Distressed Property Sales</option>
                            <option value="Condo and Co-Op Sales">Condo and Co-Op Sales</option>
                            <option value="Manufactured and Mobile Home Sales">Manufactured and Mobile Home Sales</option>
                            <option value="Leasing Specialist">Leasing Specialist</option>
                            <option value="Real Estate Analytics and Research">Real Estate Analytics and Research</option>
                            <option value="Real Estate Technology Specialist">Real Estate Technology Specialist</option>
                            <option value="Title and Escrow Services">Title and Escrow Services</option>
                            <option value="FHA/VA Loan Specialist">FHA/VA Loan Specialist</option>
                            <option value="Commercial Leasing">Commercial Leasing</option>
                        </select>
                    </div>
                    <div class="mb-3 col-md-12">
                        <x-input-label for="profile_description" :value="__('Profile Description')" />
                        <textarea id="profile_description" class="form-control form-control-sm" rows="3"
                            placeholder="Enter Profile Description" name="profile_description"></textarea>
                    </div>
                </div>
                <div class="mt-4 text-end">
                    <x-primary-button class="submit"> {{ __('Add User') }} </x-primary-button>
                </div>
            </x-form>
        </x-row-card>
    </x-content-body>
@endsection

{{-- custom js --}}
@once
    @push('js')
        <script>
            const userStoreRoute = @json(route('settings.user-management.users.store'));
            const userIndexRoute = @json(route('settings.user-management.users.index'));
        </script>
        <script src="{{ asset('assets/js/custom/user.js') }}"></script>
    @endpush
@endonce