@extends('layouts.user_type.auth')

@section('content')

<div>
    <div class="container-fluid py-4">
        <div class="card">
            <div class="card-header pb-0 px-3">
                <h6 class="mb-0">{{ __('Add Address') }}</h6>
            </div>
            <div class="card-body pt-4 p-3">
                <form action="{{ route('address.store') }}" method="POST" role="form text-left">
                    @csrf
                    @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="customer" class="form-control-label">{{ __('Customer') }}</label>
                                <div class="@error('address.customer')border border-danger rounded-3 @enderror">
                                    <select class="form-control" name="customer" id="customer" required>
                                        <option value="">Select Customer</option>
                                        @foreach($userdata as $user)
                                            <option value="{{ $user->id }}">{{ $user->name }} ({{ $user->email }})</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="address" class="form-control-label">{{ __('Address') }}</label>
                                <div class="@error('address.address')border border-danger rounded-3 @enderror">
                                    <input class="form-control" type="tel" placeholder="Address" id="address" name="address" value="" required>
                                        @error('address')
                                            <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="country" class="form-control-label">{{ __('Country') }}</label>
                                <select class="form-control" name="location" id="location" required>
                                    <option value="">Select Country</option>
                                    @foreach($countries as $country)
                                        <option value="{{ $country->id }}">{{ $country->name }}</option>
                                    @endforeach
                                </select>
                                @error('location')
                                    <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="state" class="form-control-label">{{ __('State') }}</label>
                                <select class="form-control" name="state" id="state">
                                    <option value="">Select a State/Province</option>
                                </select>
                                @error('state')
                                    <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                @enderror
                            </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('address.city') border border-danger rounded-3 @enderror">
                                    <input class="form-control" type="text" placeholder="City" id="city" name="city" value="">
                                </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('address.street')border border-danger rounded-3 @enderror">
                                    <input class="form-control" type="tel" placeholder="Suits/Street" id="street" name="street" value="" 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('address.postalcode') border border-danger rounded-3 @enderror">
                                    <input class="form-control" type="text" placeholder="ZIP/Postal Code" id="postalcode" name="postalcode" value="">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="phone" class="form-control-label">{{ __('phone') }}</label>
                                <div class="@error('address.phone')border border-danger rounded-3 @enderror">
                                    <input class="form-control" type="tel" placeholder="Phone EX:9800097000" id="phone" name="phone" value="" 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">{{ 'Save' }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Store states data in a JavaScript variable
        const states = @json($states);

        document.getElementById('location').addEventListener('change', function() {
            const countryId = this.value;
            const stateSelect = document.getElementById('state');

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

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

            filteredStates.forEach(state => {
                const option = document.createElement('option');
                option.value = state.name;
                option.textContent = state.name;
                stateSelect.appendChild(option);
            });
        });
    });
</script>
@endsection