@extends('layouts.master')

@section('content')
<main id="main" class="main">
    <section class="section dashboard">
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">Edit User</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('users.index') }}">Users</a></li>
                            <li class="breadcrumb-item active">Edit User</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="row">
                <div class="col-md-12">
                    <div class="card card-primary card-outline">
                        <div class="card-body p-5">
                            @if(isset($user->image))
                                <img src="/dist/img/{{ $user->image }}" alt="User Photo" class="rounded-circle"
                                    style="max-width: 150px;">
                            @endif

                            @if(request()->is('users/profile/settings'))
                                {!! Form::model($user, ['route' => ['users.update_user_profile', $user->id], 'method' => 'put', 'files' => true, 'class' => 'formAlert', 'enctype' => 'multipart/form-data']) !!}
                            @else
                                {!! Form::model($user, ['route' => ['users.update', $user->id], 'method' => 'put', 'files' => true, 'class' => 'formAlert', 'enctype' => 'multipart/form-data']) !!}
                            @endif

                            @include('users.fields')
                            {!! Form::close() !!}
                            <!-- Display Current Balance -->
                            <div class="mt-4">
                                <h3>Current Wallet Balance: ${{ $user->wallet_balance }}</h3>
                            </div>
                            <!-- Top Up Wallet Button -->
                            <button type="button" class="btn btn-primary mt-4" data-bs-toggle="modal"
                                data-bs-target="#topUpModal">
                                Top Up Wallet
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>

<!-- Top Up Wallet Modal -->
<div class="modal fade" id="topUpModal" tabindex="-1" aria-labelledby="topUpModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="{{ route('admin.wallet.adjust', $user->id) }}" method="POST">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="topUpModalLabel">Adjust Wallet Balance</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="amount" class="form-label">Amount</label>
                        <input type="number" name="amount" id="amount" class="form-control" required min="1"
                            placeholder="Enter amount">
                    </div>
                    <div class="mb-3">
                        <label for="type" class="form-label">Type</label>
                        <select name="type" id="type" class="form-control" required>
                            <option value="credit">Credit</option>
                            <option value="debit">Debit</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Submit</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection
@section("script")



<script>
    // Get all checkboxes with class 'country'
    const checkboxes = document.querySelectorAll('.country');

    // Get the div to display selected countries
    const selectedCountriesDiv = document.getElementById('selected-countries');

    // Function to update selected countries in the HTML tag
    function updateSelectedCountries() {
        const selectedCountries = Array.from(checkboxes)
            .filter(checkbox => checkbox.checked)
            .map(checkbox => checkbox.value);
        //        selectedCountriesDiv.textContent = `Selected Countries: ${selectedCountries.join(', ')}`;
    }


    // Add event listener to each checkbox
    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', updateSelectedCountries);
    });
    // Get all continent checkboxes
    const continentCheckboxes = document.querySelectorAll('.continent-checkbox');

    // Function to handle continent checkbox change
    function handleContinentChange(event) {
        const continentName = event.target.value;
        const countryCheckboxes = document.querySelectorAll(`.country.${continentName}`);
        countryCheckboxes.forEach(checkbox => {
            checkbox.checked = event.target.checked;
            updateSelectedCountries();
        });
    }

    // Add event listener to continent checkboxes
    continentCheckboxes.forEach(checkbox => {
        checkbox.addEventListener('change', handleContinentChange);
    });
</script>
@endsection