@extends('layouts.app')

@section('content')
@php
    // $canCreateUser = auth()->check() && auth()->user()->hasPermission('users', 'create');
    $translationLanguages = $appLanguages->filter(fn ($language) => filled($language->code))->values();
  
@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">Create 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">Create User</h5>
                <form class="row g-3" action="{{ route('users.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf

                    <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') }}" 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') }}" 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') === $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') }}" required>
                        @error('phone_no')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-3">
                        <label class="form-label">Password</label>
                        <input type="password" name="password" class="form-control @error('password') is-invalid @enderror" required>
                        @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" required>
                        @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') === 'male' ? 'selected' : '' }}>Male</option>
                            <option value="female" {{ old('gender') === 'female' ? 'selected' : '' }}>Female</option>
                            <option value="other" {{ old('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') }}">
                        @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">
                            <option value="unavailable" {{ old('availability_status') === 'unavailable' ? 'selected' : '' }}>Unavailable</option>
                            <option value="available" {{ old('availability_status') === 'available' ? 'selected' : '' }}>Available</option>
                            <option value="in_meeting" {{ old('availability_status') === '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') }}">
                        @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') === (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">
                            <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">
                            <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') }}</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') }}">
                        @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') }}">
                        @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') }}">
                        @error('pin_code')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-12">
                        <label class="form-label">Languages</label>
                        <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, old('languages', [])) ? '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
                    </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
                    </div>
{{-- id="gallery-uploadify"  --}}
                    <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>

                    <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') }}</textarea>
                        @error('bio')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
{{-- <div class="col-md-12">
    <div class="card border">
        <div class="card-body">
            <h5 class="mb-3">Bank Details</h5>

            <div class="row g-3">

                <div class="col-md-6">
                    <label class="form-label">Account Holder Name</label>
                    <input type="text" name="bank[account_holder_name]" class="form-control"
                        value="{{ old('bank.account_holder_name') }}">
                </div>

                <div class="col-md-6">
                    <label class="form-label">Bank Name</label>
                    <input type="text" name="bank[bank_name]" class="form-control"
                        value="{{ old('bank.bank_name') }}">
                </div>

                <div class="col-md-6">
                    <label class="form-label">Branch Name</label>
                    <input type="text" name="bank[branch_name]" class="form-control"
                        value="{{ old('bank.branch_name') }}">
                </div>

                <div class="col-md-6">
                    <label class="form-label">Account Number</label>
                    <input type="text" name="bank[account_number]" class="form-control"
                        value="{{ old('bank.account_number') }}">
                </div>

                <div class="col-md-6">
                    <label class="form-label">IBAN</label>
                    <input type="text" name="bank[iban]" class="form-control"
                        value="{{ old('bank.iban') }}">
                </div>

                <div class="col-md-6">
                    <label class="form-label">SWIFT Code</label>
                    <input type="text" name="bank[swift_code]" class="form-control"
                        value="{{ old('bank.swift_code') }}">
                </div>

                <div class="col-md-6">
                    <label class="form-label">Routing Number</label>
                    <input type="text" name="bank[routing_number]" class="form-control"
                        value="{{ old('bank.routing_number') }}">
                </div>

                <div class="col-md-6">
                    <label class="form-label">IFSC Code</label>
                    <input type="text" name="bank[ifsc_code]" class="form-control"
                        value="{{ old('bank.ifsc_code') }}">
                </div>

                <div class="col-md-6">
                    <label class="form-label">Currency</label>
                    <input type="text" name="bank[currency]" class="form-control"
                        value="{{ old('bank.currency') }}"
                        placeholder="USD, EUR, DKK, INR">
                </div>

           

            </div>
        </div>
    </div>
</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">Admin can enter manual translations. Default locale is <strong>{{ strtoupper($defaultTranslationLocale) }}</strong>. Missing locales will 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="#create-translation-{{ $language->code }}"
                                                type="button"
                                                role="tab">
                                                {{ strtoupper($language->code) }}
                                            </button>
                                        </li>
                                    @endforeach
                                </ul>

                                <div class="tab-content">
                                    @foreach($translationLanguages as $language)
                                        @php
                                            $translationLanguageName = $language->language->name ?? ($language->data['name'] ?? strtoupper($language->code));
                                        @endphp
                                        <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}" id="create-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') }}">
                                                    @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') }}</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">
                             <button type="submit" class="btn btn-primary px-4">Create User</button>
                            {{-- @if($canCreateUser)
                                <button type="submit" class="btn btn-primary px-4">Create 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
            });
        }
        // const galleryInput = document.querySelector('#gallery-uploadify');
        // if (galleryInput) {
        //     FilePond.create(galleryInput, {
        //         allowMultiple: true,
        //         storeAsFile: true,
        //         allowImagePreview: true,
        //         credits: false
        //     });
        // }
    }
});
</script>

@endsection