@extends('layouts.admin')

@section('content')
<style type="text/css">
    .pass-group .toggle-password, .pass-group .toggle-passworda {
        top: 70%!important;
    }
    .form-check {
        margin-bottom: 10px;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
        background-color: #f9f9f9;
    }

    .form-check-label {
        margin-left: 10px;
    }

    .form-check-input {
        margin-left: 5px;
    }
</style>
<div class="page-wrapper">
    <div class="content">
        <div class="page-header">
            <div class="add-item d-flex">
                <div class="page-title">
                    <h4>{{ __('messages.Add new user') }}</h4>
                </div>
            </div> 
        </div> 
         
         <div class="card table-list-card">
            <div class="card-body">
                <div class="row table-top">
                    <form action="{{ route('users.update', $user->id) }}" method="post">
                    @csrf
                    @method('PATCH')
                    @include('layouts.errors')
                        <div class="row mb-3">
                            <div class="col-md-4 form-group">
                                <label for="first_name">{{ __('messages.First Name') }}</label>
                                <input type="text" class="form-control" name="first_name" id="first_name" value="{{ $user->first_name }}" required>
                            </div>
                            <div class="col-md-4 form-group">
                                <label for="last_name">{{ __('messages.Last Name') }}</label>
                                <input type="text" class="form-control" name="last_name" id="last_name" value="{{ $user->last_name }}" required>
                            </div>
                            <div class="col-md-4 form-group">
                                <label for="email">{{ __('messages.Email Address') }}</label>
                                <input type="email" class="form-control" name="email" id="email" value="{{ $user->email }}" required>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-6 form-group pass-group"> 
                                <label for="password">{{ __('messages.Password') }}</label>
                                <input id="password" type="password" class="pass-input form-control" name="password">

                                <span class="fas toggle-password fa-eye-slash"></span>
                            </div>

                            <div class="col-md-6 form-group pass-group">
                                <label for="password-confirm">{{ __('messages.Confirm Password') }}</label>
                                <input id="password-confirm" type="password" class="pass-inputa form-control" name="password_confirmation">
                                <span class="fas toggle-passworda fa-eye-slash"></span>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6 form-group pass-group">
                                <label for="country">{{ __('messages.Country') }}</label>
                                <br>
                                <!-- Radio buttons for country selection -->
                                <div class="form-check form-check-inline">
                                    <input id="country_ca" class="form-check-input" type="radio" name="country" value="ca" {{ $user->reg_country == 'ca' ? 'checked' : '' }}>
                                    <label class="form-check-label" for="country_ca">Canada</label>
                                </div>

                                <div class="form-check form-check-inline">
                                    <input id="country_usa" class="form-check-input" type="radio" name="country" value="us" {{ $user->reg_country == 'us' ? 'checked' : '' }}>
                                    <label class="form-check-label" for="country_usa">USA</label>
                                </div>

                                <!-- Additional fields that will be shown based on country selection -->
                                <div id="canada-options" class="country-options" style="display: {{ $user->reg_country == 'ca' ? '' : 'none' }};">
                                    <!-- Canada-specific options here, styled as checkboxes -->
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" id="tax_manager_ca" name="plans[]" value="14"
                                        {{ (in_array(14, $plans_ids)  && $user->reg_country == 'ca') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="tax_manager_ca">TAX MANAGER</label>
                                    </div>
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" id="uber_gst_qst_ca" name="plans[]" value="15"
                                        {{ (in_array(15, $plans_ids)  && $user->reg_country == 'ca') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="uber_gst_qst_ca">UBER GST/QST REPORTING (QUEBEC ONLY)</label>
                                    </div>
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" id="rental_property_manager_ca" name="plans[]" value="16" {{ (in_array(16, $plans_ids)  && $user->reg_country == 'ca') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="rental_property_manager_ca">RENTAL PROPERTY MANAGER</label>
                                    </div>
                                </div>

                                <div id="usa-options" class="country-options" style="display: {{ $user->reg_country == 'us' ? '' : 'none' }};;">
                                    <!-- USA-specific options here, styled as checkboxes -->
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" id="tax_manager_us" name="plans[]" value="14"
                                        {{ (in_array(14, $plans_ids) && $user->reg_country == 'us') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="tax_manager_us">TAX MANAGER</label>
                                    </div>
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" id="rental_property_manager_us" name="plans[]" value="16" {{ (in_array(16, $plans_ids) && $user->reg_country == 'us') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="rental_property_manager_us">RENTAL PROPERTY MANAGER</label>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div class="row mb-2">
                            <div class="col-md-6 form-group">
                                <button type="submit" class="btn btn-primary">{{ __('messages.Submit') }}</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- jQuery to toggle the display of country-specific options -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        // Handle country selection changes
        $('input[name="country"]').on('change', function() {
            if ($('#country_ca').is(':checked')) {
                $('#canada-options').show();  // Show Canada options
                $('#usa-options').hide();     // Hide USA options
            } else if ($('#country_usa').is(':checked')) {
                $('#usa-options').show();     // Show USA options
                $('#canada-options').hide();  // Hide Canada options
            }
        });
    });
</script>

@endsection