@extends('frontend.layout.dashboard-master')
@section('site_title', __('Profile Settings'))

@section('style')
<style>
.form-label {
    display: block;
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 600;
    color: #334155;
}
.form-input {
    width: 100%;
    height: 44px;
    border: 1px solid #d6dde6;
    border-radius: 10px;
    background: #ffffff;
    padding: 0 16px;
    font-size: 15px;
    font-weight: 500;
    color: #334155;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-input:focus {
    border-color: var(--main-color-one);
    box-shadow: 0 0 0 3px rgba(0, 116, 86, 0.12);
}

/* Select2 — match .form-input height/border/radius */
.select2-container { width: 100% !important; }
.select2-container .select2-selection--single {
    height: 44px !important;
    border: 1px solid #d6dde6 !important;
    border-radius: 10px !important;
    background: #fff !important;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--main-color-one) !important;
    box-shadow: 0 0 0 3px rgba(0,116,86,.12) !important;
    outline: none !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 44px !important;
    padding-left: 16px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #334155 !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: #94a3b8 !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px !important; right: 8px !important; }
.select2-dropdown { max-width: 100vw !important; box-sizing: border-box !important; border-color: #d6dde6 !important; border-radius: 10px !important; }
.select2-search--dropdown .select2-search__field { border-radius: 6px !important; border-color: #d6dde6 !important; }
</style>
@endsection

@section('content')
@php
    $user     = Auth::guard('web')->user();
    $feedback = \App\Models\Feedback::where('user_id', $user->id)->first();
@endphp

<div class="bg-white border border-[#d9e0e8] rounded-[12px] px-4 sm:px-6 md:px-10 lg:px-12 pt-6 sm:pt-8 pb-6">

    {{-- Header: "Your Profile" + Feedback button --}}
    <div class="flex flex-wrap items-center justify-between gap-3 mb-6">
        <h2 class="text-[16px] font-semibold text-[#1f2937]">{{ __('Your Profile') }}</h2>
        <button type="button" id="openFeedbackModal"
                data-title="{{ $feedback->title ?? '' }}"
                data-description="{{ $feedback->description ?? '' }}"
                data-rating="{{ $feedback->rating ?? '' }}"
                class="h-[34px] px-5 rounded-[7px] border border-primary text-primary text-[14px] font-semibold hover:bg-primary hover:text-white transition">
            {{ __('Feedback') }}
        </button>
    </div>

    {{-- Profile Picture --}}
    <div class="flex items-center gap-4 mb-10">
        <div class="w-[72px] h-[72px] rounded-full overflow-hidden shrink-0">
            @if(!empty($user->image))
                @if(cloudStorageExist() && in_array(Storage::getDefaultDriver(), ['s3','cloudFlareR2','wasabi']))
                    <img src="{{ render_frontend_cloud_image_if_module_exists('profile/'.$user->image, load_from: $user->load_from) }}"
                         alt="{{ __('profile') }}" class="w-full h-full object-cover">
                @else
                    <img src="{{ asset('assets/uploads/profile/'.$user->image) }}"
                         alt="{{ __('profile') }}" class="w-full h-full object-cover">
                @endif
            @else
                <img src="{{ asset('assets/static/img/author/author.jpg') }}"
                     alt="{{ __('profile') }}" class="w-full h-full object-cover">
            @endif
        </div>

        <div class="flex flex-wrap items-center gap-3">
            <button type="button" id="triggerPhotoUpload"
                    class="h-[34px] px-5 rounded-[7px] bg-primary text-white text-[14px] font-semibold hover:bg-secondary">
                {{ __('Upload New') }}
            </button>
            <button type="button"
                    class="h-[34px] px-5 rounded-[7px] bg-[#e5e7eb] text-[#475569] text-[14px] font-semibold hover:bg-[#dbe0e6]">
                {{ __('Remove Profile Picture') }}
            </button>
        </div>
    </div>

    {{-- Personal Information form --}}
    <form id="edit_profile_form" method="post" class="max-w-[830px]">
        @csrf

        <h3 class="text-[18px] sm:text-[22px] font-bold text-[#111827] mb-5 sm:mb-7">{{ __('Personal Information') }}</h3>

        <div class="error_msg_container mb-4"></div>

        {{-- First Name / Last Name --}}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
            <div>
                <label class="form-label" for="first_name">{{ __('First Name') }}</label>
                <input id="first_name" name="first_name" type="text"
                       value="{{ $user->first_name ?? '' }}"
                       class="form-input">
            </div>
            <div>
                <label class="form-label" for="last_name">{{ __('Last Name') }}</label>
                <input id="last_name" name="last_name" type="text"
                       value="{{ $user->last_name ?? '' }}"
                       class="form-input">
            </div>
        </div>

        {{-- Email --}}
        <div class="mb-6">
            <label class="form-label" for="email">{{ __('Your Email') }}</label>
            <input id="email" name="email" type="email"
                   value="{{ $user->email ?? '' }}"
                   class="form-input">
        </div>

        {{-- Country --}}
        <div class="mb-6">
            <label class="form-label" for="country_id">{{ __('Your Country') }}</label>
            <select id="country_id" name="country" class="profile-select2">
                <option value="">{{ __('Select Country') }}</option>
                @foreach(\Modules\CountryManage\Entities\Country::all_countries() as $country)
                    <option value="{{ $country->id }}" @if($country->id == $user->country_id) selected @endif>{{ $country->country }}</option>
                @endforeach
            </select>
            <span class="country_info text-[13px] text-[#F0416C] mt-1 block"></span>
        </div>

        @if(!moduleExists('CoinPaymentGateway'))
        {{-- State --}}
        <div class="mb-6">
            <label class="form-label" for="state_id">{{ __('Your State') }}</label>
            <select id="state_id" name="state" class="get_country_state profile-select2">
                <option value="">{{ __('Select State') }}</option>
                @if(!empty($user->country_id))
                    @foreach(\Modules\CountryManage\Entities\State::where('country_id', $user->country_id)->get() as $state)
                        <option value="{{ $state->id }}" @if($state->id == $user->state_id) selected @endif>{{ $state->state }}</option>
                    @endforeach
                @endif
            </select>
            <span class="state_info text-[13px] text-[#F0416C] mt-1 block"></span>
        </div>

        {{-- City --}}
        <div class="mb-6">
            <label class="form-label" for="city_id">{{ __('Your City') }}</label>
            <select id="city_id" name="city" class="get_state_city profile-select2">
                <option value="">{{ __('Select City') }}</option>
                @if(!empty($user->state_id))
                    @foreach(\Modules\CountryManage\Entities\City::where('state_id', $user->state_id)->get() as $city)
                        <option value="{{ $city->id }}" @if($city->id == $user->city_id) selected @endif>{{ $city->city }}</option>
                    @endforeach
                @endif
            </select>
            <span class="city_info text-[13px] text-[#F0416C] mt-1 block"></span>
        </div>
        @endif

        {{-- Experience Level --}}
        <div class="mb-6">
            <label class="form-label" for="level">{{ __('Experience Level') }}</label>
            <select id="level" name="level" class="profile-select2">
                <option value="">{{ __('Select') }}</option>
                <option value="junior"   @if($user->experience_level === 'junior')                             selected @endif>{{ __('Junior') }}</option>
                <option value="midlevel" @if(in_array($user->experience_level, ['midlevel', 'midLevel']))      selected @endif>{{ __('Mid Level') }}</option>
                <option value="senior"   @if($user->experience_level === 'senior')                             selected @endif>{{ __('Senior') }}</option>
            </select>
        </div>

        {{-- Buttons --}}
        <div class="flex flex-wrap items-center gap-3 pt-1">
            <button type="button" id="cancelProfile"
                    class="h-[44px] w-full sm:w-auto px-5 rounded-[7px] border border-primary text-primary text-[16px] font-semibold hover:bg-primary hover:text-white transition">
                {{ __('Cancel') }}
            </button>
            <button type="submit"
                    class="h-[44px] w-full sm:w-auto px-6 rounded-[7px] bg-primary text-white text-[16px] font-semibold hover:bg-secondary transition">
                {{ __('Update Profile') }}
            </button>
        </div>

    </form>
</div>

{{-- ── Photo upload form + preview modal ────────────────────────────────── --}}
<form id="profile_photo_change" method="post" enctype="multipart/form-data">
    @csrf
    <input type="file" id="profile_photo" name="image"
           accept="image/jpeg,image/png,image/gif,image/svg+xml" class="hidden">

    <div id="photoPreviewModal"
         class="fixed inset-0 z-[9999] hidden items-center justify-center p-4"
         style="background:rgba(0,0,0,.5)">
        <div class="bg-white rounded-[12px] shadow-2xl w-full max-w-[380px] overflow-hidden">
            <div class="flex items-center justify-between px-5 py-4 border-b border-[#d9e0e8]">
                <h2 class="text-[16px] font-semibold text-[#1f2937]">{{ __('Profile Photo Preview') }}</h2>
                <button type="button" id="closePhotoModal"
                        class="w-8 h-8 flex items-center justify-center rounded-lg text-[#64748b] hover:bg-[#f1f5f9]">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>
            <div class="px-5 py-6 flex flex-col items-center gap-3">
                <div class="error_msg_container_photo text-[13px] text-[#F0416C] w-full"></div>
                <img id="photoPreviewImg" src="" alt="preview"
                     class="w-[100px] h-[100px] rounded-full object-cover border-2 border-primary">
                <p class="text-[13px] text-[#64748b]">{{ __('Recommended size: 80×80 px') }}</p>
            </div>
            <div class="flex justify-end gap-3 px-5 py-4 border-t border-[#d9e0e8]">
                <button type="button" id="closePhotoModal2"
                        class="h-[34px] px-5 rounded-[7px] bg-[#e5e7eb] text-[#475569] text-[14px] font-semibold hover:bg-[#dbe0e6]">
                    {{ __('Cancel') }}
                </button>
                <button type="submit"
                        class="h-[34px] px-5 rounded-[7px] bg-primary text-white text-[14px] font-semibold hover:bg-secondary">
                    {{ __('Upload') }}
                </button>
            </div>
        </div>
    </div>
</form>

{{-- ── Feedback modal ──────────────────────────────────────────────────────── --}}
<div id="feedbackModal"
     class="fixed inset-0 z-[9999] hidden items-center justify-center p-4"
     style="background:rgba(0,0,0,.5)">
    <div class="bg-white rounded-[12px] shadow-2xl w-full max-w-[480px] flex flex-col max-h-[90vh]">
        <div class="flex shrink-0 items-center justify-between px-4 sm:px-5 py-4 border-b border-[#d9e0e8]">
            <h2 class="text-[16px] font-semibold text-[#1f2937]">{{ __('Submit Feedback') }}</h2>
            <button type="button" id="closeFeedbackModal"
                    class="w-8 h-8 flex items-center justify-center rounded-lg text-[#64748b] hover:bg-[#f1f5f9]">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>
        <form id="reviewForm" class="flex flex-col min-h-0">
            @csrf
            <div class="overflow-y-auto px-4 sm:px-5 py-4 sm:py-5 space-y-4">
                <div class="feedback-error-container"></div>

                <div>
                    <label class="form-label">{{ __('Title') }}</label>
                    <input type="text" id="feedbackTitle" name="title"
                           placeholder="{{ __('Enter title') }}"
                           class="form-input">
                </div>

                <div>
                    <label class="form-label">{{ __('Description') }}</label>
                    <textarea id="feedbackDescription" name="description" rows="4"
                              placeholder="{{ __('Enter description') }}"
                              class="form-input" style="height:auto;padding-top:10px;padding-bottom:10px;resize:none;"></textarea>
                </div>

                <div>
                    <label class="form-label">{{ __('Rating') }}</label>
                    <div class="flex items-center gap-1" id="starRating">
                        @for($i = 1; $i <= 5; $i++)
                        <button type="button" data-value="{{ $i }}"
                                class="star-btn text-[#d1d5db] hover:text-[#FA8C00] transition-colors focus:outline-none">
                            <svg viewBox="0 0 20 20" fill="currentColor" class="w-8 h-8">
                                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                            </svg>
                        </button>
                        @endfor
                    </div>
                    <input type="hidden" id="feedbackRating" name="rating" value="">
                </div>
            </div>

            <div class="flex shrink-0 flex-wrap justify-end gap-3 px-4 sm:px-5 py-4 border-t border-[#d9e0e8]">
                <button type="button" id="closeFeedbackModal2"
                        class="h-[34px] px-5 rounded-[7px] bg-[#e5e7eb] text-[#475569] text-[14px] font-semibold hover:bg-[#dbe0e6]">
                    {{ __('Close') }}
                </button>
                <button type="button" id="submitFeedbackBtn"
                        class="h-[34px] px-5 rounded-[7px] bg-primary text-white text-[14px] font-semibold hover:bg-secondary">
                    {{ __('Submit') }}
                </button>
            </div>
        </form>
    </div>
</div>

@endsection

@section('script')
<script>
(function ($) {
    "use strict";

    toastr.options = { closeButton: true, progressBar: true, positionClass: "toast-top-right", timeOut: 5000 };

    $(document).ready(function () {

        // Initialize Select2 on all selects
        if ($.fn.select2) {
            var s2parent = $(document.body);
            $('#country_id').select2({ dropdownParent: s2parent });
            $('#state_id').select2({ dropdownParent: s2parent });
            $('#city_id').select2({ dropdownParent: s2parent });
            $('#level').select2({ dropdownParent: s2parent, minimumResultsForSearch: Infinity });
        }

        // ── Country → State ────────────────────────────────────────────────
        $('#country_id').on('change', function () {
            $.ajax({
                method: 'post', url: "{{ route('au.state.all') }}", data: { country: $(this).val() },
                success: function (res) {
                    if (res.status === 'success') {
                        var opts = "<option value=''>{{ __('Select State') }}</option>";
                        $.each(res.states, function (i, s) { opts += "<option value='" + s.id + "'>" + s.state + "</option>"; });
                        $('#state_id').html(opts).trigger('change');
                        $('#city_id').html("<option value=''>{{ __('Select City') }}</option>").trigger('change');
                        $('.state_info').html(res.states.length === 0 ? "{{ __('No state found for selected country!') }}" : '');
                        $('.city_info').html('');
                    }
                }
            });
        });

        // ── State → City ───────────────────────────────────────────────────
        $('#state_id').on('change', function () {
            $.ajax({
                method: 'post', url: "{{ route('au.city.all') }}", data: { state: $(this).val() },
                success: function (res) {
                    if (res.status === 'success') {
                        var opts = "<option value=''>{{ __('Select City') }}</option>";
                        $.each(res.cities, function (i, c) { opts += "<option value='" + c.id + "'>" + c.city + "</option>"; });
                        $('#city_id').html(opts).trigger('change');
                        $('.city_info').html(res.cities.length === 0 ? "{{ __('No city found for selected state!') }}" : '');
                    }
                }
            });
        });

        // ── Profile form submit ────────────────────────────────────────────
        $('#edit_profile_form').on('submit', function (e) {
            e.preventDefault();
            var first_name = $('#first_name').val().trim();
            var last_name  = $('#last_name').val().trim();
            var email      = $('#email').val().trim();
            var country    = $('#country_id').val();
            var state      = $('#state_id').val() || '';
            var city       = $('#city_id').val() || '';
            var level      = $('#level').val();

            if (!first_name || !last_name || !email || !country || !level) {
                toastr["warning"]("{{ __('Except state and city all fields are required!') }}", "Warning !");
                return;
            }
            $.ajax({
                url: "{{ route('freelancer.profile.edit') }}", type: 'post',
                data: { first_name: first_name, last_name: last_name, email: email, country: country, state: state, city: city, level: level },
                success: function (res) {
                    if (res.status === 'ok') {
                        $('.error_msg_container').html('');
                        toastr["success"]("{{ __('Profile Info Successfully Updated') }}", "Success !");
                    }
                },
                error: function (xhr) {
                    var errors = (xhr.responseJSON && xhr.responseJSON.errors) ? xhr.responseJSON.errors : {};
                    var html = '<div style="font-size:14px;color:#F0416C;margin-bottom:4px;">';
                    $.each(errors, function (k, v) { html += '<p>' + v + '</p>'; });
                    html += '</div>';
                    $('.error_msg_container').html(html);
                }
            });
        });

        $('#cancelProfile').on('click', function () { window.location.reload(); });

        // ── Photo upload ───────────────────────────────────────────────────
        $('#triggerPhotoUpload').on('click', function () { $('#profile_photo').trigger('click'); });

        $('#profile_photo').on('change', function () {
            if (!this.files || !this.files[0]) return;
            var reader = new FileReader();
            reader.onload = function (e) { $('#photoPreviewImg').attr('src', e.target.result); };
            reader.readAsDataURL(this.files[0]);
            openModal('photoPreviewModal');
        });

        $('#closePhotoModal, #closePhotoModal2').on('click', function () {
            closeModal('photoPreviewModal');
            $('#profile_photo').val('');
            $('.error_msg_container_photo').html('');
        });
        $('#photoPreviewModal').on('click', function (e) {
            if (e.target === this) { closeModal('photoPreviewModal'); $('#profile_photo').val(''); }
        });

        $('#profile_photo_change').on('submit', function (e) {
            e.preventDefault();
            $.ajax({
                url: "{{ route('freelancer.profile.photo.edit') }}", method: 'post',
                data: new FormData(this), cache: false, contentType: false, processData: false,
                success: function () {
                    closeModal('photoPreviewModal');
                    toastr["success"]("{{ __('Profile Photo Successfully Changed') }}", "Success !");
                    setTimeout(function () { location.reload(); }, 1000);
                },
                error: function (xhr) {
                    var errors = (xhr.responseJSON && xhr.responseJSON.errors) ? xhr.responseJSON.errors : {};
                    var msgs = [];
                    $.each(errors, function (k, v) { msgs.push(v); });
                    $('.error_msg_container_photo').html('<p style="font-size:13px;color:#F0416C;">' + msgs.join('<br>') + '</p>');
                }
            });
        });

        // ── Feedback modal ─────────────────────────────────────────────────
        $('#openFeedbackModal').on('click', function () {
            var $btn = $(this);
            $('#feedbackTitle').val($btn.data('title') || '');
            $('#feedbackDescription').val($btn.data('description') || '');
            setStars(parseInt($btn.data('rating')) || 0);
            $('.feedback-error-container').html('');
            openModal('feedbackModal');
        });

        $('#closeFeedbackModal, #closeFeedbackModal2').on('click', function () { closeModal('feedbackModal'); });
        $('#feedbackModal').on('click', function (e) { if (e.target === this) closeModal('feedbackModal'); });

        function setStars(val) {
            $('#feedbackRating').val(val || '');
            $('#starRating .star-btn').each(function () {
                $(this).css('color', parseInt($(this).data('value')) <= val ? '#FA8C00' : '#d1d5db');
            });
        }
        $('#starRating').on('click', '.star-btn', function () { setStars(parseInt($(this).data('value'))); });

        $('#submitFeedbackBtn').on('click', function () {
            var title  = $('#feedbackTitle').val();
            var desc   = $('#feedbackDescription').val();
            var rating = $('#feedbackRating').val();
            $('.feedback-error-container').html('');
            $.ajax({
                url: "{{ route('freelancer.submit.feedback') }}", method: 'POST',
                data: { title: title, description: desc, rating: rating },
                success: function (res) {
                    if (res.status === 'success') {
                        closeModal('feedbackModal');
                        setStars(0); $('#reviewForm')[0].reset();
                        toastr["success"]("{{ __('Thanks for your feedback!') }}", "Success !");
                        $('#openFeedbackModal').data('title', title).data('description', desc).data('rating', rating);
                    } else if (res.status === 'failed') {
                        $('.feedback-error-container').html('<p style="font-size:14px;color:#F0416C;">' + (res.msg || '') + '</p>');
                    }
                },
                error: function (xhr) {
                    var errors = (xhr.responseJSON && xhr.responseJSON.errors) ? xhr.responseJSON.errors : {};
                    var html = '<div style="font-size:14px;color:#F0416C;margin-bottom:4px;">';
                    $.each(errors, function (k, v) { html += '<p>' + v + '</p>'; });
                    html += '</div>';
                    $('.feedback-error-container').html(html);
                }
            });
        });

        // Escape closes any open modal
        $(document).on('keydown', function (e) {
            if (e.key !== 'Escape') return;
            closeModal('photoPreviewModal'); $('#profile_photo').val('');
            closeModal('feedbackModal');
        });

        function openModal(id) {
            $('#' + id).removeClass('hidden').addClass('flex');
            document.body.style.overflow = 'hidden';
        }
        function closeModal(id) {
            $('#' + id).removeClass('flex').addClass('hidden');
            document.body.style.overflow = '';
        }

    });
}(jQuery));
</script>
@endsection