@extends('layouts.employer-main')
@section('content')
    <h2 class="main-title">Profile</h2>
    <form method="POST" action="{{ route('employerUpdate') }}" enctype="multipart/form-data">
        @csrf
        <div class="bg-white card-box border-20">
            <div class="user-avatar-setting d-flex align-items-center mb-30">
					<img src="{{ asset('public/images/userDp/' . (isset($userData['photo']) ? $userData['photo'] : '/avatar_02.jpg')) }}"
                    data-src="{{ asset('public/images/userDp/' . (isset($userData['photo']) ? $userData['photo'] : '/avatar_02.jpg')) }}"
                    alt="User Profile Image" class="lazy-img user-img">
                <div class="upload-btn position-relative tran3s ms-4 me-3">
                    Upload new photo
                    <input type="file" name="photo" id="uploadImg" name="uploadImg" placeholder="">
                </div>
                {{-- <button class="delete-btn tran3s">Delete</button> --}}
            </div>
            <!-- /.user-avatar-setting -->
            <div class="dash-input-wrapper mb-30">
                <label for="">Employer Name*</label>
                <input name="name" value="{{ isset($userData['name']) ? $userData['name'] : '' }}" type="text" placeholder="Zubayer Hasan">
            </div>
            <!-- /.dash-input-wrapper -->
            <div class="row">
                <div class="col-md-6">
                    <div class="dash-input-wrapper mb-30">
                        <label for="">Email*</label>
                        <input type="email" value="{{Auth::user()->email}}" readonly placeholder="companyinc@gmail.com">
                    </div>
                    <!-- /.dash-input-wrapper -->
                </div>
                <div class="col-md-6">
                    <div class="dash-input-wrapper mb-30">
                        <label for="">Website*</label>
                        <input type="text" name="website" value="{{Auth::user()->website}}" placeholder="http://somename.come">
                    </div>
                    <!-- /.dash-input-wrapper -->
                </div>
                <div class="col-md-6">
                    <div class="dash-input-wrapper mb-30">
                        <label for="">Founded Date*</label>
                        <input type="date" name="foundedDate" value="{{ isset($userData['founded_date']) ? $userData['founded_date'] : '' }}">
                    </div>
                    <!-- /.dash-input-wrapper -->
                </div>
                <div class="col-md-6">
                    <div class="dash-input-wrapper mb-30">
                        <label for="">Company Size*</label>
                        <input type="text" name="comapny" value="{{Auth::user()->comapny_size ?? ''}}" placeholder="700">
                    </div>
                    <!-- /.dash-input-wrapper -->
                </div>
                <div class="col-md-6">
                    <div class="dash-input-wrapper mb-30">
                        <label for="">Phone Number*</label>
                        <input type="tel" name="phone" value="{{Auth::user()->phone_number ?? ''}}" placeholder="+880 01723801729">
                    </div>
                    <!-- /.dash-input-wrapper -->
                </div>
                <div class="col-md-6">
                    <div class="dash-input-wrapper mb-30">
                        <label for="">Category*</label>
                        <input type="text" name="category" value="{{Auth::user()->category ?? ''}}" placeholder="Account, Finance, Marketing">
                    </div>
                    <!-- /.dash-input-wrapper -->
                </div>
            </div>
            <div class="dash-input-wrapper">
                <label for="">About Company*</label>
                <textarea  name="about" class="size-lg" placeholder="Write something interesting about you....">{{Auth::user()->about ?? ''}}
				</textarea>
                <div class="alert-text">Brief description for your company. URLs are hyperlinked.</div>
            </div>
            <!-- /.dash-input-wrapper -->
        </div>
        <!-- /.card-box -->

        <div class="bg-white card-box border-20 mt-40">
            <h4 class="dash-title-three">Social Media</h4>

            <div class="dash-input-wrapper mb-20">
                <label for="">Facebook Url</label>
                <input type="text" value="{{Auth::user()->facebook_url ?? ''}}"
                    name="facebookUrl">
            </div>
            <!-- /.dash-input-wrapper -->
            <div class="dash-input-wrapper mb-20">
                <label for="">LinkedIn Url</label>
                <input type="text" name="linkedInUrl"
                    value="{{Auth::user()->linkedin_url ?? ''}}">
            </div>
            <!-- /.dash-input-wrapper -->

        </div>
        <!-- /.card-box -->

        <div class="bg-white card-box border-20 mt-40">
            <h4 class="dash-title-three">Address & Location</h4>
            <div class="row">
                <div class="col-12">
                    <div class="dash-input-wrapper mb-25">
                        <label for="">Address*</label>
                        <input type="text" name="address" value="{{ isset($userData['address']) ? $userData['address'] : '' }}" >
                    </div>
                    <!-- /.dash-input-wrapper -->
                </div>
                <div class="col-lg-3">
                    <div class="dash-input-wrapper mb-25">
                        <label for="">Country*</label>
                        <select name="country" id="country" class="form-control">
                            @foreach($countries as  $country)
                                <option value="{{ $country->id }}" {{$country->id == Auth::user()->country_id ? 'selected' : ''}} >{{ $country->name }}</option>
                        
                            @endforeach
                        </select>
                    </div>
                    <!-- /.dash-input-wrapper -->
                </div>
                <div class="col-lg-3">
                    <div class="dash-input-wrapper mb-25">
                        <label for="">State*</label>
                        <select id="state" name="state" class="form-control">
                            <option value="">Select State</option>
                            @foreach($states as $state)
                            <option value="{{$state->id}}" {{$state->id == Auth::user()->state_id  ? 'selected' : ''}}>{{$state->name}}</option>

                         @endforeach
                        </select>
                    </div>
                    <!-- /.dash-input-wrapper -->
                </div>

                <div class="col-lg-3">
                    <div class="dash-input-wrapper mb-25">
                        <label for="">City*</label>
                        <select name="city" id="city" class="form-control">
                            <option value="">Select City</option>
                            @foreach($cities as  $value)
                            <option value="{{$value->id}}" {{$value->id  == Auth::user()->city_id ? 'selected' : ''}} >{{$value->name}}</option>
                            @endforeach
                        </select>
                    </div>
                    <!-- /.dash-input-wrapper -->
                </div>
                <div class="col-lg-3">
                    <div class="dash-input-wrapper mb-25">
                        <label for="">Zip Code*</label>
                        <input type="number" name="zipCode" value="{{Auth::user()->zip_code ?? ''}}" placeholder="1708" class="form-control">
                    </div>
                    <!-- /.dash-input-wrapper -->
                </div>
                {{-- <div class="col-12">
                    <div class="dash-input-wrapper mb-25">
                        <label for="">Map Location*</label>
                        <div class="position-relative">
                            <input type="text" placeholder="XC23+6XC, Moiran, N105">
                            <button class="location-pin tran3s"><img src="{{ asset('assets/images/lazy.svg') }}"
                                    data-src="{{ asset('assets/images-admin/icon/icon_16.svg') }}" alt=""
                                    class="lazy-img m-auto"></button>
                        </div>
                        <div class="map-frame mt-30">
                            <div class="gmap_canvas h-100 w-100">
                                <iframe class="gmap_iframe h-100 w-100"
                                    src="https://maps.google.com/maps?width=600&amp;height=400&amp;hl=en&amp;q=dhaka collage&amp;t=&amp;z=12&amp;ie=UTF8&amp;iwloc=B&amp;output=embed"></iframe>
                            </div>
                        </div>
                    </div>
                    <!-- /.dash-input-wrapper -->
                </div> --}}
            </div>
        </div>
        <!-- /.card-box -->

        {{-- <div class="bg-white card-box border-20 mt-40">
                    <h4 class="dash-title-three">Members</h4>

                    <div class="dash-input-wrapper">
						<label for="">Add & Remove Member</label>
					</div>

					<div class="accordion dash-accordion-one" id="accordionOne">
						<div class="accordion-item">
							<div class="accordion-header" id="headingOne">
								  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
									Add Member 1
								  </button>
							</div>
							<div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionOne">
								<div class="accordion-body">
									<div class="row">
										<div class="col-lg-2">
											<div class="dash-input-wrapper mb-30 md-mb-10">
												<label for="">Name*</label>
											</div>
											<!-- /.dash-input-wrapper -->
										</div>
										<div class="col-lg-10">
											<div class="dash-input-wrapper mb-30">
												<input type="text" placeholder="Product Designer (Google)">
											</div>
											<!-- /.dash-input-wrapper -->
										</div>
									</div>
									<div class="row">
										<div class="col-lg-2">
											<div class="dash-input-wrapper mb-30 md-mb-10">
												<label for="">Designation*</label>
											</div>
											<!-- /.dash-input-wrapper -->
										</div>
										<div class="col-lg-10">
											<div class="dash-input-wrapper mb-30">
												<input type="text" placeholder="Account Manager">
											</div>
											<!-- /.dash-input-wrapper -->
										</div>
									</div>
									<div class="row">
										<div class="col-lg-2">
											<div class="dash-input-wrapper mb-30 md-mb-10">
												<label for="">Email*</label>
											</div>
											<!-- /.dash-input-wrapper -->
										</div>
                                        <div class="col-lg-10">
											<div class="dash-input-wrapper mb-30">
												<input type="email" placeholder="newmmwber@gmail.com">
											</div>
											<!-- /.dash-input-wrapper -->
										</div>
									</div>

                                    <div class="d-flex justify-content-end mb-20">
                                        <a href="#" class="dash-btn-one">Remove</a>
                                    </div>
								</div>
							</div>
						</div>
						<div class="accordion-item">
							<div class="accordion-header" id="headingTwo">
								  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
									Add Member 2
								  </button>
							</div>
							<div id="collapseTwo" class="accordion-collapse collapse show" aria-labelledby="headingTwo" data-bs-parent="#accordionOne">
								<div class="accordion-body">
									<div class="row">
										<div class="col-lg-2">
											<div class="dash-input-wrapper mb-30 md-mb-10">
												<label for="">Name*</label>
											</div>
											<!-- /.dash-input-wrapper -->
										</div>
										<div class="col-lg-10">
											<div class="dash-input-wrapper mb-30">
												<input type="text" placeholder="Product Designer (Google)">
											</div>
											<!-- /.dash-input-wrapper -->
										</div>
									</div>
									<div class="row">
										<div class="col-lg-2">
											<div class="dash-input-wrapper mb-30 md-mb-10">
												<label for="">Designation*</label>
											</div>
											<!-- /.dash-input-wrapper -->
										</div>
										<div class="col-lg-10">
											<div class="dash-input-wrapper mb-30">
												<input type="text" placeholder="Account Manager">
											</div>
											<!-- /.dash-input-wrapper -->
										</div>
									</div>
									<div class="row">
										<div class="col-lg-2">
											<div class="dash-input-wrapper mb-30 md-mb-10">
												<label for="">Email*</label>
											</div>
											<!-- /.dash-input-wrapper -->
										</div>
                                        <div class="col-lg-10">
											<div class="dash-input-wrapper mb-30">
												<input type="email" placeholder="newmmwber@gmail.com">
											</div>
											<!-- /.dash-input-wrapper -->
										</div>
									</div>

                                    <div class="d-flex justify-content-end mb-20">
                                        <a href="#" class="dash-btn-one">Remove</a>
                                    </div>
								</div>
							</div>
						</div>
					</div> <!-- /.dash-accordion-one -->
					<a href="#" class="dash-btn-one"><i class="bi bi-plus"></i> Add Another Member</a>
                </div> --}}
        <!-- /.card-box -->

        <div class="button-group d-inline-flex align-items-center mt-30">
            <button type="submit" class="dash-btn-two tran3s me-3">Save</button>
            <a href="#" class="dash-cancel-btn tran3s">Cancel</a>
        </div>
    </form>
	@if ($errors->any())
	<div class="alert alert-danger mt-3">
		<ul>
			@foreach ($errors->all() as $error)
				<li>{{ $error }}</li>
			@endforeach
		</ul>
	</div>
@endif
    </div>
    </div>
    <!-- /.dashboard-body -->
	<script>
        $(document).ready(function() {

            // Populate states based on the selected country
            $('#country').change(function() {
                var countryId = $(this).val();
                if (countryId) {
                    var url = "{{ route('getStates', ['countryId' => ':countryId']) }}";
                    url = url.replace(':countryId', countryId);
                    $.ajax({
                        type: 'GET',
                        url: url,
                        success: function(data) {
                            $('#state').html(data);
                            $('#state').siblings('.nice-select').remove();
                            $('#state').niceSelect('update');
                            $('#city').empty(); // Clear the city dropdown
                        }
                    });
                } else {
                    $('#state').empty();
                    $('#state').siblings('.nice-select').remove();
                    $('#state').niceSelect('update');
                    $('#city').empty();
                }
            });

            // Populate cities based on the selected state
            $('#state').change(function() {
                var stateId = $(this).val();
                if (stateId) {
                    var url = "{{ route('getCities', ['stateId' => ':stateId']) }}";
                    url = url.replace(':stateId', stateId);
                    $.ajax({
                        type: 'GET',
                        url: url, // Replace with your route
                        success: function(data) {
                            $('#city').html(data);
                            $('#city').siblings('.nice-select').remove();
                            $('#city').niceSelect('update');
                        }
                    });
                } else {
                    $('#city').empty();
                    $('#city').siblings('.nice-select').remove();
                    $('#city').niceSelect('update');
                }
            });
        });
    </script>
@endsection