@extends('layouts.main')

@section('contenu')

 {{-- @php
    print_r($users);
    exit;
@endphp --}}
    <div class="main-content">

        <div class="page-content">
            <div class="container-fluid">

                <!-- start page title -->
                <div class="row">

                    <div class="col-12">
                        <div class="page-title-box d-flex align-items-center justify-content-between">
                            <h4 class="mb-0">{{ $voiture->denomination }}</h4>



                            <div class="page-title-right">
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item"><a href="{{ route('clients.dashboard') }}">Tableau de
                                            bord</a></li>
                                    <li class="breadcrumb-item"><a href="{{ route('voiture.index') }}">Liste des
                                            voitures</a></li>
                                    <li class="breadcrumb-item active">Détails d'une voiture</li>
                                </ol>
                            </div>

                        </div>
                    </div>
                </div>
                @if (Session::get('success'))
                <div class="alert alert-success">{{ Session::get('success') }}
                </div>
            @endif
            @if (Session::get('error'))
                <div class="alert alert-danger">{{ Session::get('error') }}
                </div>
            @endif

                <div id="activateCar" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-md">

                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title mt-0" id="myModalLabel">Modifier l'image</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <form action="{{ route('voiture.updatePic', $voiture->voiture_key) }}" method="POST" enctype="multipart/form-data">

                                        @csrf
                                    <input type="hidden" name="old_cover" value="{{ $voiture->cover }}">
                                        <input type="hidden" id="v_identifiant" name="v_identifiant">
                                        <div class="mb-3">
                                            <label for="up_image" class="form-label">Image</label>
                                            <input type="file" id="cover_update" accept="image/*" name="cover_update" class="dropify"
                                                data-default-file="{{ asset($voiture->cover) }}" />
                                        </div>


                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-light waves-effect" data-dismiss="modal">Annuler</button>
                                    <button type="submit" class="btn btn-warning">Modifier</button>
                                </div>
                            </form>
                            </div>

                    </div>
                </div>



                <!-- end page title -->

                <div class="row">
                    <div class="col-xl-3">
                        <div class="card">
                            <div class="card-body">
                                <div class="dropdown float-right">
                                    <a class="text-body dropdown-toggle font-size-18 update_pic" href="#" role="button" data-v_identifiant="{{ $voiture->voiture_key }}" data-cover_update="{{ asset($voiture->cover) }}" data-toggle="modal" data-target="#activateCar" aria-haspopup="true">
                                      <i class="uil-camera"></i>
                                    </a>

                                    {{-- <div class="dropdown-menu dropdown-menu-right">
                                        <a class="dropdown-item" data-toggle="modal" data-target="#activateCar" href="javascript:void(0)"></a>

                                    </div> --}}
                                </div>

                                <div class="text-center mt-3 mb-4">
                                    <div class="avatar-xl p-2 border border-soft-primary mx-auto">
                                        <img src="{{ asset($voiture->cover) }}" alt="" class="img-fluido">
                                    </div>
                                    <h5 class="mt-4 mb-2">{{ $voiture->denomination }}</h5>
                                    <p class="text-muted"><i class="icon-xs mr-1 icon" data-feather="mo"></i>
                                        {{ $voiture->marque }} {{ $voiture->modele }}      {{ $voiture->annee }}</p>

                                    <p class="text-muted"><i class="icon-xs mr-1 icon" data-feather="mo"></i>
                                    {{ $voiture->immatriculation }}</p>

                                </div>
                            </div>
                        </div>
                        {{-- <div class="card">
                            <div class="card-body">
                                <h4 class="card-title mb-4">Autres informations</h4>

                                @foreach ($users as $user)
                                    <h6 class="mb-2">Nom : {{ $user->nom }} </h6>
                                    <h6 class="mb-2">Roles : {{ $user->role }} </h6>
                                @endforeach

                                <br>
                                <br>

                                <h6 class="mb-2">Numéro de chassis : {{ $voiture->num_chassis }} </h6>
                                <h6 class="mb-2">Carburant : {{ $voiture->carburant }} </h6>
                                <h6 class="mb-2">Carburant : {{ $voiture->transmission }} </h6>
                                <h6 class="mb-2">Infos supplémentaires:</h6>
                                <p class="text-muted">{{ $voiture->infos_sup }}</p>

                            </div>
                        </div> --}}

                    </div>

                    <div class="col-xl-9">
                        <div class="row">
                            <div class="col-xl-12">
                                <div class="card">
                                    <div class="card-body">

                                        <!-- Nav tabs -->
                                        <ul class="nav nav-tabs" role="tablist">
                                            <li class="nav-item">
                                                <a class="nav-link active" data-toggle="tab" href="#navtabs-home" role="tab">
                                                    <span class="d-block d-sm-none"><i class="fas fa-home"></i></span>
                                                    <span class="d-none d-sm-block">Activités récentes</span>
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" data-toggle="tab" href="#navtabs-profile" role="tab">
                                                    <span class="d-block d-sm-none"><i class="far fa-user"></i></span>
                                                    <span class="d-none d-sm-block">Gestionnaires</span>
                                                </a>
                                            </li>

                                        </ul>

                                        <!-- Tab panes -->
                                        <div class="tab-content p-3 text-muted">
                                            <div class="tab-pane active" id="navtabs-home" role="tabpanel">
                                                <p class="mb-0" style="text-align: center">
                                                  @include('Clients.Voiture.recentactivities')
                                                </p>
                                            </div>
                                            <div class="tab-pane" id="navtabs-profile" role="tabpanel">
                                                <p class="mb-0">
                                                    @include('Clients.Voiture.userlist')
                                                </p>
                                            </div>

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

                        </div>

                        <div class="row">
                            <div class="col-xl-12">
                                <div class="card">
                                    <div class="card-body">

                                        <h4 class="card-title mb-4">Activités à venir</h4>



                                        <div class="table-responsive">
                                            <table class="table table-nowrap mb-0">
                                                {{-- <thead>
                                                    <tr>
                                                        <th scope="col">Subject</th>
                                                        <th scope="col">Priority</th>
                                                        <th scope="col">Status</th>
                                                        <th scope="col">Date</th>
                                                    </tr>
                                                </thead> --}}
                                                <tbody>

                                                    <div class="alert alert-light" style="text-align: center">Aucune activité à venir pour le moment</div>
                                                    {{-- <tr>
                                                        <td>
                                                            <div class="custom-control custom-checkbox">
                                                                <input type="checkbox" class="custom-control-input"
                                                                    id="ordercheck1">
                                                                <label class="custom-control-label"
                                                                    for="ordercheck1">UI/UX Design</label>
                                                            </div>
                                                        </td>
                                                        <td>In Progress</td>
                                                        <td><span class="badge badge-soft-warning">Panding</span></td>
                                                        <td>01/11/2020</td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <div class="custom-control custom-checkbox">
                                                                <input type="checkbox" class="custom-control-input"
                                                                    id="ordercheck2">
                                                                <label class="custom-control-label"
                                                                    for="ordercheck2">Admin Template</label>
                                                            </div>
                                                        </td>
                                                        <td>In progress</td>
                                                        <td><span class="badge badge-soft-primary">Active</span></td>
                                                        <td>05/11/2020</td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <div class="custom-control custom-checkbox">
                                                                <input type="checkbox" class="custom-control-input"
                                                                    id="ordercheck3">
                                                                <label class="custom-control-label"
                                                                    for="ordercheck3">Landing Page</label>
                                                            </div>
                                                        </td>
                                                        <td>Done</td>
                                                        <td><span class="badge badge-soft-success">Complate</span></td>
                                                        <td>10/11/2020</td>
                                                    </tr>
 --}}

                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>



                        </div>
                    </div>
                </div>
                <!-- end row -->
            </div> <!-- container-fluid -->
        </div>

        <style>
              .img-fluido {
                width: 150px;
                height: 150px;
                object-fit: scale-down;

            }

            @media screen and (max-width: 1200px) {
                .img-fluido {
                    width: 80%;
                    height: 100%;
                    object-fit: cover;

                }
            }
        </style>

        <script>
             $(document).on('click', '.update_pic', function() {
            let v_identifiant = $(this).data('v_identifiant');
            let cover_update = $(this).data('cover_update');

            // Mise à jour des champs
            $('#v_identifiant').val(v_identifiant);

            // Réinitialisation du champ image avec la bonne image pour ce service
            $('#cover_update').val(); // Réinitialiser le champ de l'image pour s'assurer qu'il est vidé avant de le charger à nouveau

            // Réinitialisation Dropify
            let dropify = $('#cover_update').dropify({
                messages: {
                    default: 'Glissez-déposez un fichier ici ou cliquez',
                    replace: 'Glissez-déposez ou cliquez pour remplacer',
                    remove: 'Supprimer',
                    error: 'Désolé, ce fichier n\'est pas valide.'
                },
                allowedFileExtensions: ['jpg', 'jpeg', 'png', 'gif',
                    'webp'
                ], // Autoriser les fichiers .webp
            });

            dropify = dropify.data('dropify'); // Récupération de l'instance
            dropify.resetPreview(); // Réinitialiser la prévisualisation
            dropify.clearElement(); // Effacer l'ancien fichier
            dropify.settings.defaultFile = cover_update; // Définir l'image par défaut (doit être unique par service)
            dropify.destroy(); // Détruire l'instance existante
            dropify.init(); // Initialiser avec la nouvelle image par défaut
        });

        </script>
      <style>
        /* Masquer tous les contenus de tab au tout début */
        .tab-pane {
            display: none;
        }
        .tab-pane.active {
            display: block;
        }
    </style>

<script>
    (function() {
        try {
            const activeTab = localStorage.getItem('activeTab');
            if (activeTab) {
                document.addEventListener('readystatechange', function() {
                    if (document.readyState === 'interactive') {
                        document.querySelectorAll('.nav-link, .tab-pane').forEach(el => {
                            el.classList.remove('active', 'show');
                        });

                        const tabLink = document.querySelector(`a[href="${activeTab}"]`);
                        if (tabLink) tabLink.classList.add('active');

                        const tabContent = document.querySelector(activeTab);
                        if (tabContent) {
                            tabContent.classList.add('active', 'show');
                        }

                        localStorage.removeItem('activeTab');
                    }
                });
            }
        } catch (e) {
            console.error(e);
        }
    })();

    document.addEventListener('DOMContentLoaded', function() {
        // On sauvegarde seulement après une vraie action
        document.querySelectorAll('.save-tab-action').forEach(function(button) {
            button.addEventListener('click', function() {
                var activeTabHref = $('.nav-link.active').attr('href');
                if (activeTabHref) {
                    localStorage.setItem('activeTab', activeTabHref);
                }
            });
        });
    });





</script>



<script>
        function selectRole(select) {
    var r_identifiant = select.value;
    var v_identifiant = "{{ $voiture->voiture_key }}";
    var ma_identifiant = select.getAttribute('data-ma-identifiant');


    $.ajax({
        url: '{{ route('voiture.updateRole') }}',
        method: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            r_identifiant: r_identifiant,
            v_identifiant: v_identifiant,
            ma_identifiant: ma_identifiant
        },
        success: function(data) {

           console.log(data.message);


    document.getElementById('successMessageContainer').innerHTML =
        '<div style="width:100%; padding:15px; margin:0" class="alert alert-success">' + data.message + '</div>';
},

        error: function(xhr) {
          
        }
    });
}

</script>

    @endsection