@extends('layouts.superadmin')
@section('title', __('adminWords.users'))
@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">Utilisateurs</h5>
                </div>
                <div>
                    <a class="btn btn-secondary" href="{{ url('users') }}">
                        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="text-center mb-4">
                            <div class="position-relative d-inline-block">
                                <img alt=""
                                    src="{{ $user->image != '' ? asset('media/user/' . $user->image) : asset('assets/images/users/profile.svg') }}"
                                    alt="Profile Image" id="showuserProfileImage" class="img-thumbnail rounded-circle"
                                    style="width: 150px; height: 150px; object-fit: cover;">
                                <label class="position-absolute bottom-0 end-0 gradient-btn rounded-circle p-2"
                                    style="cursor: pointer;">
                                    <i class="bi bi-camera-fill text-white"></i>
                                    <input type="file" name="user_image" class="d-none" id="basicImage"
                                        data-dimension="500x500" data-ext="['jpg','jpeg','png']" data-id="showuserProfileImage">
                                </label>
                            </div>
                            @error('user_image')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="text-muted d-block mt-2">NB : Téléversez un fichier de ratio 1:1 et de taille inférieur à 300 Ko.</small>
                        </div>
                        <hr>

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

                            <div>
                                <label class="form-label">Prénom de l'utilisateur <sup class="text-red-500">*</sup></label>
                                <input type="text" name="lastname" value="{{ $user->firstname }}"
                                    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>
                                <label class="form-label">Numéro de téléphone de l'utilisateur <sup class="text-red-500">*</sup></label>                                    
                                <input type="text" name="mobile" id="mobile"  pattern="^(?!\+|00)[0-9]+$" value="{{ $user->mobile }}" placeholder="22901XXXXXXXX"
                                    class="form-control rounded-xl"  title="Le numéro ne doit pas commencer par + ou 00 et doit contenir uniquement des chiffres"
                                     required>
                            </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>

                        @if (isset($radio))
                            <input type="hidden" name="identifiant" value="{{ $radio->id }}">
                            <div class="col-lg-6 space-y-4">

                                <div>
                                    <label class="form-label">Nom de la radio</label>
                                    <input type="text" name="radio_name" value="{{ $radio->name }}"
                                        class="form-control rounded-xl">
                                </div>

                                <div>
                                    <label class="form-label">Catégorie de radio</label>
                                    <select name="radio_category" class="form-select rounded-xl">
                                        <option value="WEB" {{ $radio->category == 'WEB' ? 'selected' : '' }}>WebRadio
                                        </option>
                                        <option value="FM" {{ $radio->category == 'FM' ? 'selected' : '' }}>Radio FM
                                        </option>
                                    </select>
                                </div>

                                <div>
                                    <label class="form-label">Description de la radio</label>
                                    <textarea name="radio_description" rows="3" class="form-control rounded-xl">{{ $radio->description }}</textarea>
                                </div>

                                <div class="form-check form-switch mt-3">
                                    <input class="form-check-input" type="checkbox" name="is_active" id="is_active"
                                        value="0" {{ isset($radio) && $radio->is_active == '0' ? '' : 'checked' }}>
                                    <label class="form-check-label" for="is_active">La radio fonctionne déjà ?</label>
                                </div>

                                <div>
                                    <label class="form-label">Email de la radio</label>
                                    <input type="email" name="radio_email" value="{{ $radio->email }}"
                                        class="form-control rounded-xl">
                                </div>

                                <div>
                                    <label class="form-label">Téléphone de la radio</label>
                                    <input type="text" name="radio_phone" value="{{ $radio->phone }}"
                                        class="form-control rounded-xl">
                                </div>

                                <div>
                                    <label class="form-label">Nombre de bannières</label>
                                    <input type="number" name="radio_nbr_bannieres" value="{{ $radio->nbr_bannieres }}"
                                        class="form-control rounded-xl">
                                </div>

                                <div>
                                    <label class="form-label">Commission</label>
                                    <input type="decimal" min="0" max="1" name="commission" value="{{ $radio->commission }}"
                                        class="form-control rounded-xl">
                                </div>

                                <div class="grid grid-cols-2 gap-3">
                                    <div>
                                        <label class="form-label">Pays</label>
                                        <select name="radio_country" class="form-select rounded-xl">
                                            @foreach ($countries as $country)
                                                <option value="{{ $country->nicename }}"
                                                    {{ $country->nicename == $radio->country ? 'selected' : '' }}>
                                                    {{ $country->nicename }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div>
                                        <label class="form-label">Département</label>
                                        <select name="radio_department" class="form-select rounded-xl">
                                            @foreach ($departments as $department)
                                                <option value="{{ $department->name }}"
                                                    {{ $radio->address && explode(', ', $radio->address)[1] == $department->name ? 'selected' : '' }}>
                                                    {{ $department->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="mt-3">
                                    <label class="form-label">Ville</label>
                                    <input type="text" name="radio_city" value="{{ $radio->city }}"
                                        class="form-control rounded-xl">
                                </div>

                                <div class="mt-3">
                                    <label class="form-label">Logo de la radio</label>
                                    <input type="file" name="logo" class="form-control rounded-xl">
                                </div>
                                <div>
                                <label class="form-label">Numéro de téléphone de reversement <sup class="text-red-500">*</sup></label>                                    
                                <input type="text" name="refund_number" id="refund_number" value="{{ $radio->refund_number }}" placeholder="22901XXXXXXXX"
                                    class="form-control rounded-xl" 
                                     required>
                            </div>

                                <div class="mt-3">
                                    <label class="form-label">Fréquence</label>
                                    <input type="text" name="radio_frequence" value="{{ $radio->frequence }}"
                                        class="form-control rounded-xl">
                                </div>

                                <div class="mt-3">
                                    <label class="form-label">URL du site</label>
                                    <input type="text" name="radio_url_site" value="{{ $radio->url_site }}"
                                        class="form-control rounded-xl">
                                </div>

                            </div>

                          

                    </div>
                    @endif
                 <div class="col-12 d-flex justify-content-end space-x-2 mt-4">
                    @if (!isset($user))
                        <button type="reset" class="btn btn-outline-secondary">
                            {{ __('adminWords.reset') }}
                        </button>
                    @endif
                    <button type="submit" class="bg-linear-gradient btn text-white">
                        {{ isset($user) ? "Mettre à jour" :  "Sauvegarder" }}
                    </button>
                </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>

<script>
    document.getElementById('mobile').addEventListener('input', function (e) {
        // Supprimer tous les caractères non numériques
        this.value = this.value.replace(/\D/g, '');

        // Empêcher "00" au début
        if (this.value.startsWith('00')) {
            this.value = this.value.substring(2);
        }
    });

    document.getElementById('basicImage').addEventListener('change', function(e) {
        const [file] = e.target.files;
        if (file) {
            const preview = document.getElementById('showuserProfileImage');
            preview.src = URL.createObjectURL(file);
        }
    });
</script>

<script>
$(document).ready(function () {
    $(document).on('change', '.updateDeliveredStatus', function () {
        let checkbox = $(this);
        let url = checkbox.data('url');
        let info = checkbox.is(':checked') ? 1 : 0;

        console.log(info)

        $.ajax({
            url: url,
            method: 'PATCH',
            data: JSON.stringify({ info: info }),
            contentType: 'application/json',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            success: function (response) {
                console.log(response)
                showToast('success', response.message || 'Statut mis à jour avec succès')
                
            },
            error: function (xhr, status, error) {
                console.error(error);
                 showToast('error','Erreur lors de la mise à jour du statut')
            }
        });
    });
});
</script>

@endsection