@php
    $dde = $item->client_dde;
    $client_id = $item->client_id;
    $name = $item->client_name;
    $birth = $item->client_birth;
    $birth_place = $item->client_birth_adresse;
    $civility = $item->client_civility;
    $nationality = $item->client_nationality;
    $phone = $item->client_phone;
    $address = $item->client_adresse;
    $code = $item->usr_nb_court;
    $profession= $item->client_profession;
    $doc = $item->client_doc_name;
    $doc_id = $item->client_doc_id;
    $code = $item->client_no;
    $password = $item->password;
    $status = $item->client_status;
    $intitule = $item->intitule->int_name ?? null;
    $admin = $item->admin->ad_name ?? null;
    $date_reg = $item->client_date;
    $affairs = $item->affairs ?? [];

    $birth_format = DateTime::createFromFormat('d-m-Y', $birth);

    if ($birth_format !== false) {
        $birth_format = $birth_format->format('Y-m-d');
    } else {
        $birth_format = now()->format('Y-m-d');
    }
    //dd($birth);

    $solde_all = 0;
    $cur = 0;
@endphp
@extends('master.master_back')
@section('title')
    Details des informations de {{ $name }}
@endsection
@section("style-up")
<link rel="stylesheet" href="{{ asset('assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css') }}" />
<link rel="stylesheet" href="{{ asset('assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css') }}" />
@endsection
@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
    <div class="row page-titles mx-0">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('get.backend.dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('get.backend.list.usagers') }}">Liste des Usagers</a></li>
            <li class="breadcrumb-item active"><a href="javascript:void(0)">Details des informations de {{ $name }} </a></li>
        </ol>
    </div>
    <!-- row -->
    <div class="row">
        <div class="col-lg-12">
            <div class="profile card card-body px-3 pt-3 pb-0">
                <div class="profile-head">
                    <div class="profile-info text-white">
                        <div class="profile-details">
                            <div class="px-3 pt-2">
                                <h4 class="mb-0">{{ $civility.' '.$name }}</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xl-12">
            <div class="card h-auto">
                <div class="card-body">
                    <div class="profile-tab">
                        <div class="custom-tab-1">
                            <ul class="nav nav-tabs">

                                <li class="nav-item"><a href="#infos" data-bs-toggle="tab" class="nav-link active show">Informations</a>
                                </li>
                                <li class="nav-item"><a href="#edit-infos" data-bs-toggle="tab" class="nav-link">Modifier les Informations</a>
                                </li>
                                <li class="nav-item"><a href="#affairs" data-bs-toggle="tab" class="nav-link">Affaires</a>
                                </li>
                            </ul>
                            <div class="tab-content">
                                <div id="infos" class="tab-pane fade active show">
                                    <div class="profile-personal-info pt-4">
                                        <h3 class="text-primary mb-4">Details des Informations</h3>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="row mb-2">
                                                    <div class="col-sm-3 col-5">
                                                        <h5 class="f-w-500">Nom Complet <span class="pull-end">:</span>
                                                        </h5>
                                                    </div>
                                                    <div class="col-sm-9 col-7"><span>{{ $name }}</span>
                                                    </div>
                                                </div>
                                                <div class="row mb-2">
                                                    <div class="col-sm-3 col-5">
                                                        <h5 class="f-w-500">N° Téléphone <span class="pull-end">:</span>
                                                        </h5>
                                                    </div>
                                                    <div class="col-sm-9 col-7"><span>{{ $phone }}</span>
                                                    </div>
                                                </div>
                                               
                                                <div class="row mb-2">
                                                    <div class="col-sm-3 col-5">
                                                        <h5 class="f-w-500">Date de Naiss... <span class="pull-end">:</span>
                                                        </h5>
                                                    </div>
                                                    <div class="col-sm-9 col-7"><span>{{ $birth }}</span>
                                                    </div>
                                                </div>
                                                <div class="row mb-2">
                                                    <div class="col-sm-3 col-5">
                                                        <h5 class="f-w-500">Lieu de Naiss... <span class="pull-end">:</span></h5>
                                                    </div>
                                                    <div class="col-sm-9 col-7">
                                                        <span>
                                                            {{ $birth_place }}
                                                        </span>
                                                    </div>
                                                </div>
                                               
                                                <div class="row mb-2">
                                                    <div class="col-sm-3 col-5">
                                                        <h5 class="f-w-500">Adresse <span class="pull-end">:</span></h5>
                                                    </div>
                                                    <div class="col-sm-9 col-7"><span>{{ $address }}</span>
                                                    </div>
                                                </div>
                                                <div class="row mb-2">
                                                    <div class="col-sm-3 col-5">
                                                        <h5 class="f-w-500">Profession <span class="pull-end">:</span></h5>
                                                    </div>
                                                    <div class="col-sm-9 col-7"><span>{{ $profession }}</span>
                                                    </div>
                                                </div>
                                                <div class="row mb-2">
                                                    <div class="col-sm-3 col-5">
                                                        <h5 class="f-w-500">Statut <span class="pull-end">:</span></h5>
                                                    </div>
                                                    <div class="col-sm-9 col-7">
                                                        @if ($status == 1)
                                                        <span class="badge badge-success">
                                                            Active
                                                        </span>
                                                        @elseif($status == 0)
                                                        <span class="badge badge-danger">
                                                            Inactive
                                                        </span>
                                                        @elseif($status == 2)
                                                        <span class="badge badge-danger">
                                                            Rejete
                                                        </span>
                                                        @endif
                                                    </div>
                                                </div>

                                            </div>
                                            <div class="col-md-6">
                                               
                                                <div class="row mb-2">
                                                    <div class="col-sm-3 col-5">
                                                        <h5 class="f-w-500">Nationalité <span class="pull-end">:</span>
                                                        </h5>
                                                    </div>
                                                    <div class="col-sm-9 col-7"><span>{{ $nationality }}</span>
                                                    </div>
                                                </div>
                                                <div class="row mb-2">
                                                    <div class="col-sm-3 col-5">
                                                        <h5 class="f-w-500">Document <span class="pull-end">:</span>
                                                        </h5>
                                                    </div>
                                                    <div class="col-sm-9 col-7"><span>{{ $doc }}</span>
                                                    </div>
                                                </div>
                                                <div class="row mb-2">
                                                    <div class="col-sm-3 col-5">
                                                        <h5 class="f-w-500">N° Document<span class="pull-end">:</span>
                                                        </h5>
                                                    </div>
                                                    <div class="col-sm-9 col-7"><span>{{ $doc_id }}</span>
                                                    </div>
                                                </div>
                                                <div class="row mb-2">
                                                    @if ($status == 1)
                                                        <button class="btn btn-warning w-auto" onclick="changeStatus(1,'{{ route('post.backend.change.status', $code) }}')">
                                                            Désactiver
                                                        </button>
                                                    @else
                                                        <button class="btn btn-warning w-auto" onclick="changeStatus(0,'{{ route('post.backend.change.status', $code) }}')">
                                                            Activer
                                                        </button>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                        
                                    </div>
                                </div>
                                <div id="edit-infos" class="tab-pane fade">
                                    <div class="pt-4">
                                        <div class="settings-form">
                                            <h3 class="text-primary mb-4">Modification des Informations</h3>
                                            <form id="edit_client" method="post" action="{{ route('post.backend.edit.usagers', $client_id) }}" onsubmit="SendDataAnimation(event,'edit_client')">
                                                <div class="row">
                                                    <div class="mb-3 col-md-4">
                                                        <label class="form-label">Civilité</label>
                                                        <select class="form-control text-uppercase default-select wide" id="inputState" name="civility">
                                                            <option value="M" {{ $civility == "M" ? "selected" : "" }}>Monsieur</option>
                                                            <option value="Mme" {{ $civility == "Mme" ? "selected" : "" }}>Madame</option>
                                                        </select>
                                                    </div>
                                                    <div class="mb-3 col-md-8">
                                                        <label class="form-label">Nom complet</label>
                                                        <input type="text" placeholder="Nom" name="name" value="{{ $name }}" class="form-control text-uppercase">
                                                    </div>
                                                   
                                                </div>
                                                <div class="row">
                                                    <div class="mb-3 col-md-4">
                                                        <label class="form-label">Date de naissance</label>
                                                        <input type="date" name="birth" value="{{ $birth_format }}" class="form-control text-uppercase">
                                                    </div>
                                                    <div class="mb-3 col-md-4">
                                                        <label class="form-label">Lieu de Naissance</label>
                                                        <input type="text" placeholder="Lieu de Naissance" name="place_birth" value="{{ $birth_place }}" class="form-control text-uppercase">
                                                    </div>
                                                    <div class="mb-3 col-md-4">
                                                        <label class="form-label">Adresse</label>
                                                        <input type="text" name="address" value="{{ $address }}" placeholder="Ngousso" class="form-control text-uppercase">
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="mb-3 col-md-4">
                                                        <label class="form-label">N° Téléphone</label>
                                                        <input type="text" name="phone" id="phone" value="{{ $phone }}" class="form-control text-uppercase">
                                                    </div>
                                                    
                                                    <div class="mb-3 col-md-4">
                                                        <label class="form-label">Nationalité</label>
                                                        <select name="country" id="countrySelect" class="form-control text-uppercase wide mh-auto select2" data-country="{{ $nationality }}">
                                                        </select>
                                                    </div>
                                                    <div class="mb-3 col-md-4">
                                                        <label class="form-label">Profession</label>
                                                        <input type="text" name="profession" id="profession" value="{{ $profession }}" class="form-control text-uppercase">
                                                    </div>
                                                </div>
                                                
                                                <div class="row">
                                                    <div class="mb-3 col-md-4">
                                                        <label class="form-label">Document</label>
                                                        <select class="form-control text-uppercase default-select wide" id="doc" name="document">
                                                            <option value="CNI" {{ $doc == "CNI" ? "selected" : "" }}>CNI</option>
                                                            <option value="RECEPISSE" {{ $doc == "RECEPISSE" ? "selected" : "" }}>RECEPISSE</option>
                                                            <option value="PASSEPORT" {{ $doc == "PASSEPORT" ? "selected" : "" }}>PASSEPORT</option>
                                                        </select>
                                                    </div>
                                                    <div class="mb-3 col-md-4">
                                                        <label class="form-label">N° Document</label>
                                                        <input type="text" name="document_id" id="document_id" value="{{ $doc_id }}" class="form-control text-uppercase">
                                                    </div>
                                                </div>
                                                <div class="mb-3">
                                                    <div class="form-check custom-checkbox">
                                                        <input type="checkbox" class="form-check-input" name="accept" id="gridCheck" autocomplete="off">
                                                        <label class="form-check-label form-label" for="gridCheck"> Accepter Vous de modifier les informations ci-dessus</label>
                                                    </div>
                                                </div>
                                                <button class="btn btn-primary btn-sm" type="submit">
                                                    Valider
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                <div id="affairs" class="tab-pane fade">
                                    <div class="my-post-content pt-4">
                                        <h3 class="text-primary mb-4">Affaires</h3>
                                        <div class="row">
                                            <div class="card-body">
                                                <div class="table-responsive ticket-table">
                                                    <table id="example" class="table display dataTable table-responsive-xl" style="min-width: 845px">
                                                        <thead>
                                                            <tr>
                                                                <th>
                                                                    <div class="form-check custom-checkbox ms-2">
                                                                        <input type="checkbox" class="form-check-input" id="checkAll">
                                                                        <label class="form-check-label" for="checkAll"></label>
                                                                    </div>
                                                                </th>
                                                                <th>N°</th>
                                                                <th>Nom Complet</th>
                                                                <th>Nature.</th>
                                                                <th>Description</th>
                                                                <th>Status</th>
                                                                <th>Date Enreg</th>
                                                                <th>Actions</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                            
                                                            @if (isset($affairs) && COUNT($affairs) > 0)
                                                            @foreach ($affairs as $key => $value)
                                                            @php
                                                                $value_id = $value->ca_id;
                                                                $name= $value->customer->client_name ?? null;
                                                                $phone= $value->customer->client_phone ?? null;
                                                                $description = $value->ca_desc;
                                                                $status = $value->ca_status;
                                                                $nature = $value->nature->na_name ?? null;
                                                                $date_reg = $value->ca_date;
                                                                $details = $value->details ?? [];
                                                            @endphp
                                                            <tr>
                                                                <td>
                                                                    <div class="form-check custom-checkbox ms-2">
                                                                        <input type="checkbox" class="form-check-input" name="value[{{ $key }}]" value="{{ $value_id }}" id="customCheckBox{{ $value_id }}" autocomplete="off">
                                                                        <label class="form-check-label" for="customCheckBox{{ $value_id }}"></label>
                                                                    </div>
                                                                </td>
                                                                <td class="whitesp-no">{{ $key + 1  }}</td>
                                                                <td class="whitesp-no p-0">
                                                                    <div class="">
                                                                        <div>
                                                                            <h6 class="font-w500 fs-16 mb-0">{{ $name }}</h6>
                                                                        </div>
                                                                        <small class="fs-12 text-muted"> <span class="font-weight-normal1">{{ $phone }}</span></small>
                                                                    </div>
                                                                </td>
                                                                {{-- <td class="whitesp-no">{{ isset($value->admin) ? $value->admin->ad_name : "" }}</td> --}}
                                                                <td class="whitesp-no">{{ $nature }}</td>
                                                                <td class="whitesp-no">{{ $description }}</td>
                                                                <td>
                                                                    @if($status == 0)
                                                                        <span class="badge bg-label-danger">{{ "NON" }}</span>
                                                                    @else
                                                                        <span class="badge bg-label-success">{{ "OUI" }}</span>
                                                                    @endif
                                                                </td>
                                                                <td>{{ $date_reg }}</td>
                                                                <td>
                                                                    <div class="dropdown">
                                                                        <button type="button" class="btn light sharp" data-bs-toggle="dropdown">
                                                                            <svg width="20px" height="20px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"/><circle fill="#000000" cx="5" cy="12" r="2"/><circle fill="#000000" cx="12" cy="12" r="2"/><circle fill="#000000" cx="19" cy="12" r="2"/></g></svg>
                                                                        </button>
                                                                        <div class="dropdown-menu">
                                                                            <a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#modal_client{{ $value_id }}" href="javascript:void(0);">
                                                                                Details
                                                                            </a>
                                                                            {{-- <a class="dropdown-item" href="{{ route('get.backend.details.Clients', $value->usr_id) }}"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                                <path opacity="0.4" d="M18.3337 9.99984C18.3337 14.6032 14.6028 18.3332 10.0003 18.3332C5.39783 18.3332 1.66699 14.6032 1.66699 9.99984C1.66699 5.39817 5.39783 1.6665 10.0003 1.6665C14.6028 1.6665 18.3337 5.39817 18.3337 9.99984Z" fill="#FF9F00"/>
                                                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M10.7249 10.5256C10.7249 10.9272 10.3974 11.2547 9.99577 11.2547C9.5941 11.2547 9.2666 10.9272 9.2666 10.5256V6.84225C9.2666 6.44058 9.5941 6.11308 9.99577 6.11308C10.3974 6.11308 10.7249 6.44058 10.7249 6.84225V10.5256ZM9.27077 13.1696C9.27077 12.7679 9.5966 12.4404 9.99577 12.4404C10.4066 12.4404 10.7333 12.7679 10.7333 13.1696C10.7333 13.5712 10.4066 13.8987 10.0041 13.8987C9.59993 13.8987 9.27077 13.5712 9.27077 13.1696Z" fill="#FF9F00"/>
                                                                                </svg>
                                                                                Details des informations
                                                                            </a>                                     --}}
                                                                        </div>
                                                                    </div>
                                                                </td>
                            
                                                            </tr>
                                                            <!-- Modal -->
                                                            <div class="modal fade" id="modal_client{{ $value_id }}">
                                                                <div class="modal-dialog modal-dialog-centered" role="document">
                                                                    <div class="modal-content">
                                                                        <div class="modal-header">
                                                                            <h5 class="modal-title">{{ $name }}</h5>
                                                                            <button type="button" class="btn-close" data-bs-dismiss="modal">
                                                                            </button>
                                                                        </div>
                                                                        <div class="modal-body">
                                                                            <ul class="list-group mb-3">
                                                                                <h5>Details</h5>
                                                                                @if(isset($details))
                                                                                    @foreach ($details as $detail)
                                                                                    <li class="list-group-item d-flex justify-content-between lh-condensed">
                                                                                        <div>
                                                                                            <h6 class="my-0">Conclusion</h6>
                                                                                        </div>
                                                                                        <span class="text-dark">{{ $detail->ma_conclusion }}</span>
                                                                                    </li>
                                                                                    <li class="list-group-item d-flex justify-content-between lh-condensed">
                                                                                        <div>
                                                                                            <h6 class="my-0">description</h6>
                                                                                        </div>
                                                                                        <span class="text-dark">{{ $detail->ma_desc }}</span>
                                                                                    </li>
                                                                                    <li class="list-group-item d-flex justify-content-between lh-condensed">
                                                                                        <div>
                                                                                            <h6 class="my-0">Prochaine Date</h6>
                                                                                        </div>
                                                                                        <span class="text-dark">{{ $detail->ma_date_prog }}</span>
                                                                                    </li>
                                                                                    @endforeach                                                        
                                                                                @endif                                                                                        
                                                                            </ul>
                                                                        </div>
                                                                        <div class="modal-footer">
                                                                            <button type="button" class="btn btn-danger light btn-sm" data-bs-dismiss="modal">Close</button>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            @endforeach
                                                            @endif
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                            </div>
                        </div>
                        <!-- Modal -->

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

@endsection
@section('script-down')
<link href="{{ asset('backend/vendor/sweetalert2/dist/sweetalert2.min.css') }}?t={{time()}}" rel="stylesheet">
<script src="{{ asset('backend/vendor/sweetalert2/dist/sweetalert2.min.js') }}"></script>
<script src="{{ asset('assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js') }}"></script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const countrySelect = document.getElementById('countrySelect');
        const defaultCountry = countrySelect.getAttribute('data-country');

        // Appel à l'API pour obtenir la liste de tous les pays
        fetch('https://restcountries.com/v3.1/all')
            .then(response => response.json())
            .then(data => {
            data.sort((a, b) => a.name.common.localeCompare(b.name.common));

            data.forEach(country => {
                const option = document.createElement('option');
                option.value = country.name.common.toUpperCase() ;
                option.textContent = country.name.common.toUpperCase() ;

                if (defaultCountry === country.name.common.toUpperCase() ) {
                    option.setAttribute('selected', 'selected');
                }

                countrySelect.appendChild(option);
            });

            // Définir la valeur par défaut après avoir rempli le menu déroulant
            countrySelect.value = defaultCountry;
            // alert(defaultCountry)
            })
            .catch(error => {
                console.error('Erreur lors de la récupération des données :', error);
            });
    });
    // Fonction pour mettre à jour la source de l'image dans le modal
    function afficherImage(url, id) {
        var imageElement = $('#imageDetail' + id);
        imageElement.off('error');
        // Gestion de l'événement de chargement de l'image
        imageElement.on('load', function() {
            // Réactiver les autres boutons après que l'image s'est affichée
            $('.btn_view_image').not('[data-id=' + id + ']').prop('disabled', false);
            $('.btn_view_image[data-id=' + id + ']').prop('disabled', false);
        });

        imageElement.show().attr('src', url);

        imageElement.on('error', function() {
            $('.btn_view_image').prop('disabled', false);
            alert("La ressource n'existe pas !!!");
            console.log("Erreur de chargement de l'image.");
        });
    }
    $(document).ready(function () {
        
        // Écouteurs d'événements pour les boutons
        $('.btn_view_image').on('click', function () {
            // Désactiver tous les autres boutons
            $('.btn_view_image').prop('disabled', true);
            var url = $(this).data('url');
            var folder_id = $(this).data('id');
            var date_deliv = $(this).data('deliv');
            var date_exp = $(this).data('exp');
            var status = $(this).data('status');
            $("#date_deliv"+folder_id).text("Délivrance : "+date_deliv);
            $("#date_exp"+folder_id).text("Expiration : "+date_exp);
            if(status == 0){
                $(".change_color"+folder_id).addClass('d-block').addClass('badge-danger').removeClass('badge-success').removeClass('d-none').text("Expiré");
                $(".icon_color"+folder_id).addClass('text-danger');
            }else{
                $(".change_color"+folder_id).addClass('d-block').addClass('badge-success').removeClass('badge-danger').removeClass('d-none').text("Valide");
                $(".icon_color"+folder_id).addClass('text-success');
            }
            //alert(user_id)
            afficherImage(url, folder_id);
        });
    });
</script>
@endsection