@extends('layouts.user_type.auth')

@section('content')

<div>
    <div class="container-fluid py-4">
        <div class="card">
            <div class="card-body pt-4 p-3">
                <form action="{{ route('update-customer', $user->id) }}" method="POST" role="form text-left">
                    @csrf
                    @method('PUT')
                    @if($errors->any())
                        <div class="mt-3 alert alert-primary alert-dismissible fade show" role="alert">
                            <span class="alert-text text-white">
                            {{$errors->first()}}</span>
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                                <i class="fa fa-close" aria-hidden="true"></i>
                            </button>
                        </div>
                    @endif
                    @if(session('success'))
                        <div class="m-3  alert alert-success alert-dismissible fade show" id="alert-success" role="alert">
                            <span class="alert-text text-white">
                            {{ session('success') }}</span>
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                                <i class="fa fa-close" aria-hidden="true"></i>
                            </button>
                        </div>
                    @endif
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="cust-name" class="form-control-label">{{ __('Full Name') }}</label>
                                <div class="@error('user.name')border border-danger rounded-3 @enderror">
                                    <input class="form-control" value="{{ $user->name }}" type="text" placeholder="Name" id="cust-name" name="name" required>
                                        @error('name')
                                            <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                        @enderror
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="cust-email" class="form-control-label">{{ __('Email') }}</label>
                                <div class="@error('email')border border-danger rounded-3 @enderror">
                                    <input class="form-control" value="{{ $user->email }}" type="email" placeholder="@example.com" id="cust-email" name="email" disabled>
                                    <input type="hidden" name="email" value="{{ $user->email }}">
                                    @error('email')
                                        <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="password" class="form-control-label">{{ __('Password') }}</label>
                                <div class="@error('user.location') border border-danger rounded-3 @enderror">
                                    <input class="form-control" type="password" placeholder="Password" id="password" name="password" value="{{ base64_decode($user->mypass) }}" required>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="address" class="form-control-label">{{ __('Address') }}</label>
                                <div class="@error('user.address')border border-danger rounded-3 @enderror">
                                    <input class="form-control" type="tel" placeholder="Address" id="address" name="address" value="{{ $user->address }}" required>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="location" class="form-control-label">{{ __('Country') }}</label>
                                <div class="@error('user.location')border border-danger rounded-3 @enderror">
                                    <select class="form-control" name="location" id="location" required>
                                        <option value="">Select a Country</option>
                                        @foreach ($countries as $country)
                                            <option value="{{ $country->id }}" {{ $country->id == old('user.location', $user->location) ? 'selected' : '' }}>
                                                {{ $country->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="state" class="form-group-control">{{ __('State') }}</label>
                                <div class="@error('user.state')border border-danger rounded-3 @enderror">
                                    <select class="form-control" name="state" id="state">
                                        <option value="">Select a State/Province</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="city" class="form-control-label">{{ __('City') }}</label>
                                <div class="@error('user.city')border border-danger rounded-3 @enderror">
                                    <input class="form-control" type="text" placeholder="City" id="city" name="city" value="{{ $user->city }}" required>
                                        @error('city')
                                            <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                        @enderror
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="street" class="form-control-label">{{ __('Suits/Street') }}</label>
                                <div class="@error('user.street')border border-danger rounded-3 @enderror">
                                    <input class="form-control" type="text" placeholder="Suits/Street" id="street" name="street" value="{{ $user->street }}" required>
                                        @error('street')
                                            <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                        @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="postalcode" class="form-control-label">{{ __('ZIP/Postal Code') }}</label>
                                <div class="@error('user.postalcode')border border-danger rounded-3 @enderror">
                                    <input class="form-control" type="text" placeholder="ZIP/Postal Code" id="postalcode" name="postalcode" value="{{ $user->postalcode }}" required>
                                        @error('postalcode')
                                            <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                        @enderror
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="number" class="form-control-label">{{ __('Phone') }}</label>
                                <div class="@error('user.phone')border border-danger rounded-3 @enderror">
                                    <input class="form-control" type="tel" placeholder="9898741023" id="number" name="phone" value="{{ $user->phone }}" required>
                                    @error('phone')
                                        <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex justify-content-end">
                        <button type="submit" class="btn bg-gradient-dark btn-md mt-4 mb-4">{{ 'Update' }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const countrySelect = document.getElementById('location');
        const stateSelect = document.getElementById('state');
        const states = @json($states);

        countrySelect.addEventListener('change', function() {
            const countryId = this.value;

            const filteredStates = states.filter(state => state.country_id == countryId);

            stateSelect.innerHTML = '<option value="">Select a State/Province</option>';

            filteredStates.forEach(state => {
                const option = document.createElement('option');
                option.value = state.name;
                option.text = state.name;
                stateSelect.add(option);
            });

            @if(old('user.state', $user->state))
                stateSelect.value = "{{ old('user.state', $user->state) }}";
            @endif
        });

        if (countrySelect.value) {
            countrySelect.dispatchEvent(new Event('change'));
        }
    });
</script>
@endsection