@extends('frontend.accounts.layouts.app')
@section('title', 'Account - Profile')
@section('page', 'Profile')
@section('content')
<div class="main-panel">
   @include('frontend.accounts.layouts.header')
   <div class="overlay"></div>
   <div class="loader"></div>
   <div class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="header">
                        <h4 class="title">Edit Profile</h4>
                    </div>
                    <div class="content">
                        @include('frontend.layouts.include.message')
                        <form action="{{ route('account.profileupdate') }}" method="POST">
                            @csrf
                            <div class="row">
                                <!-- First Name -->
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>First Name</label>
                                        <input type="text" class="form-control" placeholder="First Name" name="first_name" value="{{ old('first_name', $user->first_name) }}">
                                        <input type="hidden" name="user_id" value="{{ $user->id }}">
                                        @error('first_name')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                
                                <!-- Last Name -->
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label>Last Name</label>
                                        <input type="text" class="form-control" placeholder="Last Name" name="last_name" value="{{ old('last_name', $user->last_name) }}">
                                        @error('last_name')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                        
                                <!-- Email -->
                                <div class="col-md-5">
                                    <div class="form-group">
                                        <label>Email (disabled)</label>
                                        <input type="email" class="form-control" readonly placeholder="Email" name="email" value="{{ $user->email }}">
                                    </div>
                                </div>
                            </div>
                        
                            <div class="row">
                                <!-- Phone -->
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Phone</label>
                                        <input type="text" class="form-control" placeholder="Phone" name="phone" value="{{ old('phone', $user->phone) }}">
                                        @error('phone')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                        
                                <!-- Gender -->
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Gender</label>
                                        <select class="form-control" name="gender">
                                            <option value="Male" {{ $user->gender == 'male' ? 'selected' : '' }}>Male</option>
                                            <option value="Female" {{ $user->gender == 'female' ? 'selected' : '' }}>Female</option>
                                            <option value="Other" {{ $user->gender == 'other' ? 'selected' : '' }}>Other</option>
                                        </select>
                                        @error('gender')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                
                            </div>
                        
                            <div class="row">
                                <!-- Place Of Birth -->
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>Place Of Birth</label>
                                        <input type="text" class="form-control" placeholder="Place Of Birth" name="pob" value="{{ old('pob', $user->pob) }}">
                                        @error('pob')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                        
                                <!-- Date Of Birth -->
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label>Date Of Birth</label>
                                        <input type="date" class="form-control" placeholder="Date Of Birth" name="dob" value="{{ old('dob', $user->dob) }}">
                                        @error('dob')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                        
                                <!-- Organization -->
                                <div class="col-md-5">
                                    <div class="form-group">
                                        <label>Organization</label>
                                        <select class="form-control" name="organization_id" id="organization_id">
                                            @foreach($organizations as $organization)
                                                <option class="form-control p-4" value="{{ $organization->id }}" {{ $user->organization_id == $organization->id ? 'selected' : '' }}>
                                                    {{ $organization->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                
                            </div>
                        
                            <div class="row">
                                <!-- Address -->
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Address</label>
                                        <input type="text" class="form-control" placeholder="Home Address" name="address" value="{{ old('address', $user->address) }}">
                                        @error('address')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                        
                                <!-- Blood Group -->
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Blood Group</label>
                                        <select class="form-control" name="blood_group_id">
                                            @foreach($blood_groups as $blood_group)
                                                <option value="{{ $blood_group->id }}" {{ $user->blood_group_id == $blood_group->id ? 'selected' : '' }}>
                                                    {{ $blood_group->title }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('blood_group_id')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        
                            <div class="row">
                                <!-- City -->
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label>City</label>
                                        <select class="form-control" name="city_id" id="city_id">
                                            @foreach($cities as $city)
                                                <option value="{{ $city->id }}" {{ $user->city_id == $city->id ? 'selected' : '' }}>
                                                    {{ $city->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('city_id')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                        
                                <!-- Country -->
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label>Country</label>
                                        <select class="form-control" name="country_stay_id" id="country_stay_id">
                                            @foreach($countries as $country)
                                                <option value="{{ $country->id }}" {{ $user->country_stay_id == $country->id ? 'selected' : '' }}>
                                                    {{ $country->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('country_stay_id')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                        
                                <!-- Nationality -->
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label>Nationality</label>
                                        <select class="form-control" name="nationality_id">
                                            @foreach($nationalities as $nationality)
                                                <option value="{{ $nationality->id }}" {{ $user->nationality_id == $nationality->id ? 'selected' : '' }}>
                                                    {{ $nationality->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('nationality_id')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        
                            <div class="row">
                                <!-- Password -->
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Password</label>
                                        <input type="password" class="form-control" placeholder="Password" name="password" autocomplete="off">
                                        @error('password')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                        
                                <!-- Confirm Password -->
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Confirm Password</label>
                                        <input type="password" class="form-control" placeholder="Confirm Password" name="confirm_password">
                                        @error('confirm_password')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        
                            <button type="submit" class="btn btn-danger btn-fill pull-right">Update Profile</button>
                            <div class="clearfix"></div>
                        </form>
                        
                        
                        
                        
                        
                        
                        
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

    @include('frontend.accounts.layouts.footer')

</div>
@endsection
@section('customJs')
    <script>
        $(document).ready(function() {
            $('#organization_id').select2({
                tags: true,
                ajax: {
                    url: '{{ route('front.organization') }}',
                    dataType: 'json',
                    type: 'POST',
                    delay: 250,  // Adjusted delay for smoother UX
                    data: function(params) {
                        return {
                            q: params.term // search term
                        };
                    },
                    processResults: function(data) {
                        return {
                            results: data.items.map(function(item) {
                                return {
                                    id: item.id,
                                    text: item.name
                                };
                            })
                        };
                    },
                    cache: true
                },
                placeholder: "Select or add an institute",
                minimumInputLength: 1,
                createTag: function(params) {
                    return {
                        id: params.term,
                        text: params.term,
                        newOption: true
                    };
                },
                templateResult: function(data) {
                    var $result = $("<span></span>");
                    $result.text(data.text);
                    if (data.newOption) {
                        $result.append(" <em>(new)</em>");
                    }
                    return $result;
                }
            });
            $('#country_stay_id').change(function() {
                var country_id = $(this).val();
                $('.overlay').show();
                $('.loader').show();
    
                if (country_id !== "") {
                    $.ajax({
                        url: '{{ route('getCities') }}',
                        type: 'GET',
                        data: {
                            country_id: country_id
                        },
                        dataType: 'json',
                        success: function(data) {
                            setTimeout(function() {
                                $('#city_id').prop('disabled', false).empty().append(
                                    '<option value="">Select City</option>');
                                $.each(data, function(key, value) {
                                    $('#city_id').append('<option value="' + value
                                        .id + '">' + value.name + '</option>');
                                });
                                $('.overlay').hide();
                                $('.loader').hide();
                            }, 2000);
                        },
                        error: function(xhr) {
                            console.error(xhr.responseText);
                            $('.overlay').hide();
                            $('.loader').hide();
                        }
                    });
                } else {
                    $('.overlay').hide();
                    $('.loader').hide();
                    $('#city_id').empty().prop('disabled', true).append('<option value="" >Select City</option>');
                }
            });
        });
        
    </script>
@endsection