@extends('layouts.candidate-main')
@section('content')
    <h2 class="main-title">My Profile</h2>
    <form method="POST" action="{{ route('profileUpdate') }}" 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">
                <div class="upload-btn position-relative tran3s ms-4 me-3">
                    Upload new photo
                    <input name="photo" type="file" 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="">Full Name*</label>
                <input type="text" value="{{Auth::user()->name}}" name="name">
            </div>
            <!-- /.dash-input-wrapper -->
            <div class="dash-input-wrapper">
                <label for="">Bio*</label>
                <textarea class="size-lg" name="about" placeholder="Write something interesting about you....">{{Auth::user()->about}}</textarea>
                <div class="alert-text">Brief description for your profile. 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" placeholder="1708" value="{{Auth::user()->zip_code ?? ''}}" 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="button-group d-inline-flex align-items-center mt-30">
            <button type="submit" href="#" 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