@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 */
.profile-select2 + .select2-container,
.select2-container.profile-s2 { 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(); @endphp

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

    <h2 class="text-[16px] font-semibold text-[#1f2937] mb-6">{{ __('Your Profile') }}</h2>

    {{-- Profile Picture --}}
    <div class="flex items-center gap-4 mb-10">
        <div class="w-[72px] h-[72px] rounded-full overflow-hidden shrink-0" id="display_client_profile_photo">
            @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>
        </div>
    </div>

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

        <h3 class="text-[22px] font-bold text-[#111827] 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

        {{-- Buttons --}}
        <div class="flex items-center gap-3 pt-1">
            <button type="button" id="cancelProfile"
                    class="h-[44px] 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] 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>

@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 — dropdownParent:body keeps
        // window.scrollY as the positioning reference (not body.scrollTop).
        if ($.fn.select2) {
            var s2parent = $(document.body);
            $('#country_id').select2({ dropdownParent: s2parent });
            $('#state_id').select2({ dropdownParent: s2parent });
            $('#city_id').select2({ dropdownParent: s2parent });
        }

        // 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').length ? $('#state_id').val() : '') || '';
            var city       = ($('#city_id').length ? $('#city_id').val() : '') || '';

            if (!first_name || !last_name || !email || !country) {
                toastr["warning"]("{{ __('Except state and city all fields are required!') }}", "Warning !");
                return;
            }
            $.ajax({
                url: "{{ route('client.profile.edit') }}", type: 'post',
                data: { first_name: first_name, last_name: last_name, email: email, country: country, state: state, city: city },
                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('client.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>');
                }
            });
        });

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

        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