@extends('layouts.superadmin')
@section('title', 'Collaborateurs')
@section('style')
    <link href="{{ asset('assets/plugins/datepicker/datepicker.min.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('assets/plugins/select2/select2.min.css') }}" rel="stylesheet" type="text/css">
@endsection
@section('content')

    <div class="container py-4">
        <div class="card rounded-5 rounded shadow-sm border-0">
            <div class="card-header rounded-top-5 d-flex justify-content-between align-items-center">
                <div>
                    <h5 class="mb-0 text-lg font-semibold">Collaborateurs</h5>
                </div>
                <div>
                    <a class="btn btn-secondary" href="{{ url('/my-collabos') }}">
                        Retour
                    </a>
                </div>
            </div>

            <div class="card-body">
                <form method="POST"
                    action="{{ isset($user) ? route('updateUser', $user->id) : route('updateUser', 'add') }}"
                    enctype="multipart/form-data" {{ isset($user) ? 'id=updateUser' : 'data-reset=1' }}
                    data-redirect="{{ url('/users') }}">
                    @csrf

                    <div class="row g-4">

                        <div class="col-lg-6 space-y-4">
                            <div>
                                <label class="form-label">Nom d'utilisateur <sup class="text-red-500">*</sup></label>
                                <input type="text" name="name" value="{{ $user->name }}"
                                    class="form-control rounded-xl" required>
                            </div>

                            <div>
                                <label class="form-label">Email de l'utilisateur <sup class="text-red-500">*</sup></label>
                                <input type="email" name="email" value="{{ $user->email }}"
                                    class="form-control rounded-xl" required>
                            </div>

                            <div>
                                <label class="form-label">Mot de passe de l'utilisateur</label>
                                <input type="password" name="password" class="form-control rounded-xl">
                            </div>

                            <div class="form-check form-switch mt-3">
                                <input class="form-check-input" type="checkbox" name="status" value="1" id="status"
                                    {{ isset($user) && $user->status == 0 ? '' : 'checked' }}>
                                <label class="form-check-label" for="status">{{ __('adminWords.status') }}</label>
                            </div>
                        </div>

                    </div>
                </form>
            </div>
        </div>
    </div>


@endsection
@section('script')
    <script src="{{ asset('assets/plugins/datepicker/datepicker.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datepicker/i18n/datepicker.en.js') }}"></script>
    <script src="{{ asset('assets/plugins/select2/select2.min.js') }}"></script>
    <script src="{{ asset('assets/js/musioo-custom.js') }}"></script>

    <script>
        function onChangeCountry() {
            var country = document.getElementById('radio_country').value;

            // console.log(`${country}`);

            $.ajax({
                url: '/getDepartments?country_name=' + country,
                type: 'GET',
                data: {},

                success: function(resp) {

                    // console.log(resp);

                    document.getElementById('radio_department').innerHTML = "";

                    if (resp.success == true) {

                        var departments = resp.departments;

                        // console.log(departments);

                        departments.forEach(element => {
                            document.getElementById('radio_department').innerHTML += "<option value='" +
                                element.name + "'>" + element.name + "</option>";
                        });

                    }
                },
                error: function(err) {
                    console.error(err);
                },
            });

        }
    </script>

@endsection