@extends('frontend.layouts.app')
@section('title', 'Digital Blood Hub - Profile')
@section('content')

    <div class="overlay"></div>
    <div class="loader"></div>

    <div class="checkout-wrapper space-top space-extra-bottom">
        <div class="container">
            @include('frontend.layouts.include.message')
            <form action="{{ route('account.profileupdate') }}" method="POST" class="woocommerce-checkout" id="registrationForm">
                @csrf
                <div class="row gx-60 gy-60">
                    <div class="col-lg-12">
                        <div class="registerformwrapper">
                            <div class="row gx-60 gy-60">
                                <div class="col-lg-12">
                                    <div class="row">
                                        <div class="formheader mb-5 text-center">
                                            <h3>EDIT PROFILE</h3>
                                        </div>
                                        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4">
                                            <label>Name<span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" placeholder="Enter Name"
                                                name="name" value="{{ old('name', $user->name) }}">
                                            <input type="hidden" 
                                                name="user_id" value="{{ $user->id }}">
                                            @error('name')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4">
                                            <label>Email ID (Disabled)<span class="text-danger">*</span></label>
                                            <input type="email" class="form-control" readonly placeholder="Email"
                                                name="email" value="{{ $user->email }}">
                                        </div>
                                        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4">
                                            <label>Phone No.<span class="text-danger">*</span></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 class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4">
                                            <label>Address<span class="text-danger">*</span></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 class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4">
                                            <label>Gender<span class="text-danger">*</span></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 class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4">
                                            <label>Blood Group<span class="text-danger">*</span></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 class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4">
                                            <label for="dob">Date of Birth<span class="text-danger">*</span></label>
                                            <input type="date" class="form-control" placeholder="Date Of Birth"
                                                max="" name="dob" value="{{ old('dob', $user->dob) }}">
                                            @error('dob')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>

                                        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4">
                                            <label>Place of Birth<span class="text-danger">*</span></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 class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4">
                                            <label>Organization<span class="text-danger">*</span></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>
                                            @error('organization_id')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4">
                                            <label>Nationality<span class="text-danger">*</span></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 class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4">
                                            <label>Country of Stay<span class="text-danger">*</span></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 class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4">
                                            <label>City of Stay<span class="text-danger">*</span></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 class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4">
                                            <label>Password<span class="text-danger">*</span></label>
                                            <input type="password" class="form-control" placeholder="Password"
                                                name="password" autocomplete="off">
                                            @error('password')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4">
                                            <label>Confirm Password<span class="text-danger">*</span></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 class="row">
                                            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group">
                                                <div class="woocommerce-checkout-payment">
                                                    <div class="form-row place-order">
                                                        <button type="submit" class="btn">
                                                            <span class="link-effect">
                                                                <span class="effect-1">SUBMIT</span>
                                                                <span class="effect-1">SUBMIT</span>
                                                            </span>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
            </form>

            <div class="mt-lg-3 mb-30">
                <div class="woocommerce-checkout-payment">


                </div>
            </div>
        </div>
    </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