@extends('layouts.app')

@section('content')
@php
$Authuser = auth()->user();
$canEditUser = $Authuser && $Authuser->hasPermission('users', 'edit');
$canDeleteUser = $Authuser && $Authuser->hasPermission('users', 'delete');
    $translationLanguages = $appLanguages->filter(fn ($language) => filled($language->code))->values();
    // $translationLanguages = $appLanguages->values();
    $userTranslations = $user->translations->keyBy(fn ($translation) => strtolower($translation->locale));

@endphp
<div class="page-wrapper">
    <div class="page-content">
        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
            <div class="breadcrumb-title pe-3">User Management</div>
            <div class="ps-3">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 p-0">
                        <li class="breadcrumb-item"><a href="{{ route('users.index') }}"><i class="bx bx-home-alt"></i></a></li>
                        <li class="breadcrumb-item active" aria-current="page">Edit User</li>
                    </ol>
                </nav>
            </div>
        </div>

        @if ($errors->any())
            <div class="alert alert-danger">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="card">
            <div class="card-body p-4">
                <h5 class="mb-4">Edit User</h5>
                <form class="row g-3" action="{{ route('users.update', $user->id) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')

                    <div class="col-md-6">
                        <label class="form-label">Name</label>
                        <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name', $user->name) }}" required>
                        @error('name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">Email</label>
                        <input type="email" name="email" class="form-control @error('email') is-invalid @enderror" value="{{ old('email', $user->email) }}" required>
                        @error('email')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-3">
                        <label class="form-label">Country Code</label>
                        <select name="phone_country_code" id="phone_country_code" class="form-select @error('phone_country_code') is-invalid @enderror" required>
                            <option value="">Select</option>
                            @foreach($countries as $country)
                                @php $code = $country->phonecode ? '+' . $country->phonecode : null; @endphp
                                @if($code)
                                    <option value="{{ $code }}" {{ old('phone_country_code', $user->phone_country_code) === $code ? 'selected' : '' }}>
                                        {{ $country->name }} ({{ $code }})
                                    </option>
                                @endif
                            @endforeach
                        </select>
                        @error('phone_country_code')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-3">
                        <label class="form-label">Phone No</label>
                        <input type="text" name="phone_no" class="form-control @error('phone_no') is-invalid @enderror" value="{{ old('phone_no', $user->phone_no) }}" required>
                        @error('phone_no')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-3">
                        <label class="form-label">Password (optional)</label>
                        <input type="password" name="password" class="form-control @error('password') is-invalid @enderror">
                        @error('password')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-3">
                        <label class="form-label">Confirm Password</label>
                        <input type="password" name="password_confirmation" class="form-control @error('password_confirmation') is-invalid @enderror">
                        @error('password_confirmation')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">Gender</label>
                        <select name="gender" class="form-select @error('gender') is-invalid @enderror">
                            <option value="">Select</option>
                            <option value="male" {{ old('gender', optional($user->profile)->gender) === 'male' ? 'selected' : '' }}>Male</option>
                            <option value="female" {{ old('gender', optional($user->profile)->gender) === 'female' ? 'selected' : '' }}>Female</option>
                            <option value="other" {{ old('gender', optional($user->profile)->gender) === 'other' ? 'selected' : '' }}>Other</option>
                        </select>
                        @error('gender')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">Date of Birth</label>
                        <input type="date" name="date_of_birth" class="form-control @error('date_of_birth') is-invalid @enderror" value="{{ old('date_of_birth', optional($user->profile)->date_of_birth) }}">
                        @error('date_of_birth')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    {{-- <div class="col-md-4">
                        <label class="form-label">Availability</label>
                        <select name="availability_status" class="form-select @error('availability_status') is-invalid @enderror">
                            @php $availability = old('availability_status', optional($user->profile)->availability_status ?? 'unavailable'); @endphp
                            <option value="unavailable" {{ $availability === 'unavailable' ? 'selected' : '' }}>Unavailable</option>
                            <option value="available" {{ $availability === 'available' ? 'selected' : '' }}>Available</option>
                            <option value="in_meeting" {{ $availability === 'in_meeting' ? 'selected' : '' }}>In Meeting</option>
                        </select>
                        @error('availability_status')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-12">
                        <label class="form-label">Location</label>
                        <input type="text" name="location" class="form-control @error('location') is-invalid @enderror" value="{{ old('location', optional($user->profile)->location) }}">
                        @error('location')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div> --}}

                    <div class="col-md-4">
                        <label class="form-label">Country</label>
                        <select name="country_id" class="form-select @error('country_id') is-invalid @enderror">
                            <option value="">Select Country</option>
                            @foreach($countries as $country)
                                <option value="{{ $country->id }}" {{ (string) old('country_id', optional($user->address)->country_id) === (string) $country->id ? 'selected' : '' }}>
                                    {{ $country->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('country_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">State</label>
                        <select name="state_id" id="state_id" class="form-select @error('state_id') is-invalid @enderror" data-selected="{{ old('state_id', optional($user->address)->state_id) }}">
                            <option value="">Select State</option>
                        </select>
                        @error('state_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">City</label>
                        <select name="city_id" id="city_id" class="form-select @error('city_id') is-invalid @enderror" data-selected="{{ old('city_id', optional($user->address)->city_id) }}">
                            <option value="">Select City</option>
                        </select>
                        @error('city_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                 

                    <div class="col-md-12">
                        <label class="form-label">Address</label>
                        <textarea name="address" class="form-control @error('address') is-invalid @enderror" rows="3">{{ old('address', optional($user->address)->address) }}</textarea>
                        @error('address')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">Current Latitude</label>
                        <input type="text" name="current_latitude" class="form-control @error('current_latitude') is-invalid @enderror" value="{{ old('current_latitude', optional($user->address)->current_latitude) }}">
                        @error('current_latitude')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">Current Longitude</label>
                        <input type="text" name="current_longitude" class="form-control @error('current_longitude') is-invalid @enderror" value="{{ old('current_longitude', optional($user->address)->current_longitude) }}">
                        @error('current_longitude')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">Pin Code</label>
                        <input type="text" name="pin_code" class="form-control @error('pin_code') is-invalid @enderror" value="{{ old('pin_code', optional($user->address)->pin_code) }}">
                        @error('pin_code')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-12">
                        <label class="form-label">Languages</label>
                        @php $selectedLanguages = old('languages', $user->languages->pluck('id')->toArray()); @endphp
                        <select name="languages[]" id="languages" class="form-select @error('languages') is-invalid @enderror @error('languages.*') is-invalid @enderror" multiple>
                            @foreach($languages as $language)
                                <option value="{{ $language->id }}" {{ in_array($language->id, $selectedLanguages) ? 'selected' : '' }}>
                                    {{ $language->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('languages')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                        @error('languages.*')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">Profile Image</label>
                        <input type="file" id="profile-image" name="profile_image" class="form-control @error('profile_image') is-invalid @enderror" accept="image/*">
                        @error('profile_image')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        @if($user->getFirstMediaUrl('profile'))
                            <div class="mt-2">
                                <img src="{{ $user->getFirstMediaUrl('profile', 'thumb') ?: $user->getFirstMediaUrl('profile') }}" alt="Profile" style="width: 90px; height: 90px; object-fit: cover; border-radius: 8px;">
                            </div>
                        @endif
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">Cover Photo</label>
                        <input type="file" id="cover-image" name="cover_image" class="form-control @error('cover_image') is-invalid @enderror" accept="image/*">
                        @error('cover_image')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        @if($user->getFirstMediaUrl('cover'))
                            <div class="mt-2">
                                <img src="{{ $user->getFirstMediaUrl('cover') }}" alt="Cover" style="width: 150px; height: 90px; object-fit: cover; border-radius: 8px;">
                            </div>
                        @endif
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">Gallery Images</label>
                        <input type="file" id="gallery-uploadify" name="gallery[]" class="form-control @error('gallery') is-invalid @enderror @error('gallery.*') is-invalid @enderror" accept="image/*" multiple>
                        @error('gallery')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                        @error('gallery.*')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>

                    @if($user->getMedia('album')->count())
                        <div class="col-md-12">
                            <label class="form-label">Current Gallery</label>
                            <div class="d-flex flex-wrap gap-2">
                                @foreach($user->getMedia('album') as $media)
                                    <div class="position-relative gallery-item" id="gallery-item-{{ $media->id }}">
                                        <img src="{{ $media->getUrl('album_thumb') }}" alt="Gallery" style="width: 180px; object-fit: cover; border-radius: 8px;">
                                        @if($canDeleteUser)
                                            <button
                                                type="button"
                                                class="btn btn-sm btn-danger position-absolute delete-gallery-image"
                                                data-url="{{ route('users.gallery.delete', [$user->id, $media->id]) }}"
                                                data-media-id="{{ $media->id }}"
                                                style="top: 8px; right: 8px;">
                                                Remove
                                            </button>
                                        @endif
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif

                    <div class="col-md-12">
                        <label class="form-label">Bio</label>
                        <textarea name="bio" class="form-control @error('bio') is-invalid @enderror" rows="4">{{ old('bio', optional($user->profile)->bio) }}</textarea>
                        @error('bio')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    @if($translationLanguages->count())
                        <div class="col-md-12">
                            <div class="border rounded p-3">
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <div>
                                        <h6 class="mb-1">Translations</h6>
                                        <p class="text-muted mb-0 small">Default locale is <strong>{{ strtoupper($defaultTranslationLocale) }}</strong>. Manual translations are saved first; missing locales can auto translate based on settings.</p>
                                    </div>
                                </div>

                                <ul class="nav nav-tabs nav-primary flex-nowrap overflow-auto mb-3" role="tablist">
                                    @foreach($translationLanguages as $language)
                                        @php
                                            $translationLanguageName = $language->language->name ?? ($language->data['name'] ?? strtoupper($language->code));
                                        @endphp
                                        <li class="nav-item" role="presentation">
                                            <button
                                                class="nav-link {{ $loop->first ? 'active' : '' }}"
                                                data-bs-toggle="tab"
                                                data-bs-target="#edit-translation-{{ $language->code }}"
                                                type="button"
                                                role="tab">
                                                {{ strtoupper($language->code) }}
                                            </button>
                                        </li>
                                    @endforeach
                                </ul>

                                <div class="tab-content">
                                    @foreach($translationLanguages as $language)
                                        @php
                                            $translation = $userTranslations->get(strtolower($language->code));
                                            $translationLanguageName = $language->language->name ?? ($language->data['name'] ?? strtoupper($language->code));
                                        @endphp
                                        <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}" id="edit-translation-{{ $language->code }}" role="tabpanel">
                                            <div class="row g-3">
                                                <div class="col-md-6">
                                                    <label class="form-label">
                                                        {{ $translationLanguageName }} Name
                                                        @if($language->code === $defaultTranslationLocale)
                                                            <span class="badge bg-light text-dark border ms-1">Default</span>
                                                        @endif
                                                    </label>
                                                    <input
                                                        type="text"
                                                        name="translations[{{ $language->code }}][name]"
                                                        class="form-control @error('translations.' . $language->code . '.name') is-invalid @enderror"
                                                        value="{{ old('translations.' . $language->code . '.name', $translation->name ?? null) }}">
                                                    @error('translations.' . $language->code . '.name')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>

                                                <div class="col-md-12">
                                                    <label class="form-label">{{ $translationLanguageName }} Bio</label>
                                                    <textarea
                                                        name="translations[{{ $language->code }}][bio]"
                                                        class="form-control @error('translations.' . $language->code . '.bio') is-invalid @enderror"
                                                        rows="3">{{ old('translations.' . $language->code . '.bio', $translation->bio ?? null) }}</textarea>
                                                    @error('translations.' . $language->code . '.bio')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    @endif

                    <div class="col-md-12">
                        <div class="d-md-flex d-grid align-items-center gap-3">
                            @if($canEditUser)
                                <button type="submit" class="btn btn-primary px-4">Update User</button>
                            @endif
                            <a href="{{ route('users.index') }}" class="btn btn-light px-4">Back</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@include('includes.commonjs')

<script>
$(function () {
    if ($.fn.imageuploadify) {
        $('#gallery-uploadify').imageuploadify();
        $('#gallery-uploadify').closest('form').off('submit');
    }

    if (typeof FilePond !== 'undefined') {
        if (typeof FilePondPluginImagePreview !== 'undefined') {
            FilePond.registerPlugin(FilePondPluginImagePreview);
        }

        const profileInput = document.querySelector('#profile-image');
        if (profileInput) {
            FilePond.create(profileInput, {
                allowMultiple: false,
                storeAsFile: true,
                allowImagePreview: true,
                credits: false
            });
        }

        const coverInput = document.querySelector('#cover-image');
        if (coverInput) {
            FilePond.create(coverInput, {
                allowMultiple: false,
                storeAsFile: true,
                allowImagePreview: true,
                credits: false
            });
        }
    }

    // delete gallery image 
    $(document).on('click', '.delete-gallery-image', function () {
        const $btn = $(this);
        const url = $btn.data('url');
        const mediaId = $btn.data('media-id');

        if (!url || !mediaId) {
            return;
        }

        if (!confirm('Are you sure you want to remove this gallery image?')) {
            return;
        }

        $btn.prop('disabled', true).text('Removing...');

        $.ajax({
            url: url,
            type: 'DELETE',
            data: {
                _token: "{{ csrf_token() }}"
            },
            success: function (response) {
                if (response.success) {
                    $('#gallery-item-' + mediaId).remove();
                }
            },
            error: function () {
                alert('Failed to remove image. Please try again.');
                $btn.prop('disabled', false).text('Remove');
            }
        });
    });
});
</script>
@endsection