@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;" style="max-height: 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() !!}
                </div>
            </div>
        </div>
    </div>
</div>
    </section>
</main>
@endsection

@section('scripts')

<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