@extends('frontend.layouts.app')
@section('content')
    @php
        $breadCrump2 = 'My Profile';
        use Carbon\Carbon; // Import Carbon once
    @endphp


    <!--Job alerts start -->
    <!--Job alerts start -->
    <div class="wrapper-inner">
        <div class="container">
            <div class="profile-dash">
                @include('frontend.employer.sidebar')
                <div class="profile-dash-rt">
                    <div class="my-profile-inner">
                        <div class="headingBlock">
                            <h4>My Profile</h4>
                        </div>
                        <form method="post" action="{{ route('employer.profile.update') }}" id="profile-form">
                            @csrf
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="required">Company Name</label>
                                        <div class="form-group-input">
                                            <input type="text" class="form-control" name="company_name"
                                                placeholder="Company Name" minlength="3" maxlength="150" required
                                                value="{{ auth()->guard('employer')->user()->userInformations->company_name ?? '' }}">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="required">Email Address</label>
                                        <div class="form-group-input">
                                            <input type="text" class="form-control" name="email" readonly
                                                value="{{ auth()->guard('employer')->user()->email }}">
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="required">Mobile Number</label>
                                        <div class="form-group-input">
                                            <input type="text" class="form-control" name="mobile"
                                                value="{{ auth()->guard('employer')->user()->mobile ?? '' }}" placeholder="Mobile Number" minlength="7"
                                                maxlength="15" required>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label>Business Registration Number</label>
                                        <div class="form-group-input">
                                            <input type="text" class="form-control" name="business_registration_number"
                                                placeholder="0123456789"
                                                value="{{ auth()->guard('employer')->user()->userInformations->business_registration_number ?? '' }}">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="required">Industry</label>
                                        <div class="form-group-input">
                                            <select class="form-control" name="industry_id" required>
                                                <option value="">Select</option>
                                                @foreach ($industries as $industry)
                                                    <option value="{{ $industry->id }}"
                                                        {{ (auth()->guard('employer')->user()->userInformations->industry_id ?? '') == $industry->id ? 'selected' : '' }}>
                                                        {{ $industry->title }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="required">Company Size</label>
                                        <div class="form-group-input">
                                            <input type="number" class="form-control" placeholder="Company Size"
                                                name="company_size"
                                                value="{{ auth()->guard('employer')->user()->userInformations->company_size ?? '' }}">
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>About Us</label>
                                        <textarea name="about_us" rows="4" cols="20" placeholder="Company overview and mission" class="form-control"
                                            minlength="5" maxlength="1000">{{ auth()->guard('employer')->user()->userInformations->about_us ?? '' }}</textarea>
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="agency-underline"></div>
                                </div>

                                <div class="col-md-12">
                                    <h5>Location</h5>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label class="required">Address Line</label>
                                                <div class="form-group-input">
                                                    <input type="text" class="form-control" name="address"
                                                        placeholder="132, My Street, Kingston, New York" required
                                                        value="{{ auth()->guard('employer')->user()->userInformations->address ?? '' }}">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="required">Country</label>
                                                <div class="form-group-input">
                                                    <select class="form-control" name="country_id" id="country_id" required>
                                                        <option value="">Select</option>
                                                        @foreach ($countries as $country)
                                                            <option value="{{ $country->id }}"
                                                                {{ (auth()->guard('employer')->user()->userInformations->country_id ?? '') == $country->id ? 'selected' : '' }}>
                                                                {{ $country->name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="required">State</label>
                                                <select class="form-control" name="state_id" id="state_id" required>
                                                    <option value="">Select</option>
                                                    <!-- Add state options here and use similar logic for selected -->
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="required">City</label>
                                                <select class="form-control" name="city_id" id="city_id" required>
                                                    <option value="">Select</option>
                                                    <!-- Add city options here and use similar logic for selected -->
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label for="post_code">Post Code</label>
                                                <input type="text" class="form-control" name="post_code"
                                                    placeholder="012345"
                                                    value="{{ auth()->guard('employer')->user()->userInformations->post_code ?? '' }}">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="agency-underline"></div>
                                </div>

                                <div class="col-md-12">
                                    <h5>Contact Person</h5>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="required">Name</label>
                                                <div class="form-group-input">
                                                    <input type="text" class="form-control" name="contact_person_name"
                                                        placeholder="Lorem" minlength="3" maxlength="150" required
                                                        value="{{ auth()->guard('employer')->user()->userInformations->contact_person_name ?? '' }}">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="required">Position</label>
                                                <div class="form-group-input">
                                                    <input type="text" class="form-control"
                                                        name="contact_person_position" placeholder="Enter Position"
                                                        minlength="3" maxlength="150" required
                                                        value="{{ auth()->guard('employer')->user()->userInformations->contact_person_position ?? '' }}">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="agency-underline"></div>
                                </div>

                                <div class="col-md-12">
                                    <div class="row skill-bx">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>LinkedIn</label>
                                                <div class="form-group-input">
                                                    <input type="text" class="form-control" name="linkedin"
                                                        placeholder="https://www.linkedin.com/in/your-profile"
                                                        value="{{ auth()->guard('employer')->user()->userInformations->linkedin ?? '' }}">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Career Page URL</label>
                                                <div class="form-group-input">
                                                    <input type="text" class="form-control" name="career_page_url"
                                                        placeholder="URL"
                                                        value="{{ auth()->guard('employer')->user()->userInformations->career_page_url ?? '' }}">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="profile-btn">
                                        <button type="submit" class="btn-custom">Submit</button>
                                    </div>
                                </div>
                            </div>
                        </form>


                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
@push('front-script')
    <script>
        $(document).ready(function() {
            // jQuery validation rules
            $("#profile-form").validate({
                rules: {
                    company_name: {
                        required: true,
                        minlength: 3,
                        maxlength: 150
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    mobile: {
                        required: true,
                        minlength: 7,
                        maxlength: 15
                    },
                    business_registration_number: {
                        minlength: 3,
                        maxlength: 150
                    },
                    industry: {
                        required: true
                    },
                    company_size: {
                        required: true
                    },
                    about_us: {
                        minlength: 5,
                        maxlength: 1000
                    },
                    address: {
                        required: true,
                        minlength: 3,
                        maxlength: 150
                    },
                    city: {
                        required: true
                    },
                    state: {
                        required: true
                    },
                    post_code: {
                        postalCodeRequired:true,
                        minlength: 3,
                        maxlength: 10
                    },
                    contact_person_name: {
                        required: true,
                        minlength: 3,
                        maxlength: 150
                    },
                    contact_person_position: {
                        required: true,
                        minlength: 3,
                        maxlength: 150
                    },
                    linkedin: {
                        url: true
                    },
                    career_page_url: {
                        url: true
                    }
                },
                messages: {
                    company_name: {
                        required: "Please enter your company name.",
                        minlength: "Company name must be at least 3 characters long.",
                        maxlength: "Company name cannot exceed 150 characters."
                    },
                    email: {
                        required: "Please enter your email address.",
                        email: "Please enter a valid email address."
                    },
                    mobile: {
                        required: "Please enter your mobile number.",
                        minlength: "Mobile number must be at least 7 characters long.",
                        maxlength: "Mobile number cannot exceed 15 characters."
                    },
                    // Add custom messages for other fields similarly
                },
                submitHandler: function(form) {
                    form.submit();
                }
            });
        });

        $(document).ready(function() {
            function loadStates(countryId) {
                $.ajax({
                    url: '{{ route('stateList') }}', // Named route
                    type: 'GET',
                    data: {
                        country_id: countryId
                    },
                    success: function(response) {
                        if (response.status === 'success') {
                            var stateSelect = $('#state_id');
                            stateSelect.empty();
                            stateSelect.append('<option value="">Select State</option>');

                            $.each(response.data, function(index, state) {
                                stateSelect.append('<option value="' + state.id + '">' + state
                                    .name + '</option>');
                            });

                            // Preselect the user's state if it exists
                            @if (isset(auth()->guard('employer')->user()->userInformations) && auth()->guard('employer')->user()->userInformations->state)
                                stateSelect.val({{ auth()->guard('employer')->user()->userInformations->state->id }});
                            @endif
                        }
                    },
                    error: function(xhr) {
                        console.error('Request failed:', xhr);
                    }
                });
            }

            // Load cities based on the selected state
            function loadCities(stateId) {
                $.ajax({
                    url: '{{ route('cityList') }}', // Named route
                    type: 'GET',
                    data: {
                        state_id: stateId
                    },
                    success: function(response) {
                        if (response.status === 'success') {
                            var citySelect = $('#city_id');
                            citySelect.empty();
                            citySelect.append('<option value="">Select City</option>');

                            $.each(response.data, function(index, city) {
                                citySelect.append('<option value="' + city.id + '">' + city
                                    .name + '</option>');
                            });

                            // Preselect the user's city if it exists
                            @if (isset(auth()->guard('employer')->user()->userInformations) && auth()->guard('employer')->user()->userInformations->city)
                                citySelect.val({{ auth()->guard('employer')->user()->userInformations->city->id }});
                            @endif
                        }
                    },
                    error: function(xhr) {
                        console.error('Request failed:', xhr);
                    }
                });
            }

            // Load states when the country is selected
            $('#country_id').change(function() {
                var countryId = $(this).val();
                loadStates(countryId);
            });

            // Load cities when the state is selected
            $('#state_id').change(function() {
                var stateId = $(this).val();
                loadCities(stateId);
            });

            // Initial load based on user's country
            var initialCountryId = "{{ old('country_id', optional(auth()->guard('employer')->user()->userInformations)->country_id) }}";
            if (initialCountryId) {
                loadStates(initialCountryId);
            }

            // Initial load for cities if the state is already selected
            var initialStateId = "{{ old('state_id', optional(auth()->guard('employer')->user()->userInformations)->state_id) }}";
            if (initialStateId) {
                loadCities(initialStateId);
            }

            $(document).on('change', '#country_id', function() {
                $('#state_id').empty().append('<option value="">Select State</option>');
                $('#city_id').empty().append('<option value="">Select City</option>');
                var countryId = $(this).val();
                $.ajax({
                    url: '{{ route('stateList') }}', // Named route
                    type: 'GET',
                    data: {
                        country_id: countryId
                    }, // Replace with the actual country ID
                    success: function(response) {
                        if (response.status === 'success') {
                            var stateSelect = $('#state_id');
                            stateSelect.empty(); // Clear the existing options
                            stateSelect.append(
                            '<option value="">Select State</option>'); // Add the default option

                            $.each(response.data, function(index, state) {
                                stateSelect.append('<option value="' + state.id + '">' +
                                    state.name + '</option>');
                            });
                        } else {
                            alert('No states found for the selected country.');
                        }
                    },
                    error: function(xhr) {
                        console.error('Request failed:', xhr);
                    }
                });
            });

            $(document).on('change', '#state_id', function() {

                $('#city_id').empty().append('<option value="">Select City</option>');
                var stateId = $(this).val();
                $.ajax({
                    url: '{{ route('cityList') }}', // Named route
                    type: 'GET',
                    data: {
                        state_id: stateId
                    }, // Replace with the actual country ID
                    success: function(response) {
                        if (response.status === 'success') {
                            var citySelect = $('#city_id');
                            citySelect.empty(); // Clear the existing options
                            citySelect.append(
                            '<option value="">Select City</option>'); // Add the default option

                            $.each(response.data, function(index, city) {
                                citySelect.append('<option value="' + city.id + '">' +
                                    city.name + '</option>');
                            });
                        } else {
                            alert('No city found for the selected country.');
                        }
                    },
                    error: function(xhr) {
                        console.error('Request failed:', xhr);
                    }
                });
            });
        });
    </script>
@endpush
