@extends('admin.layouts.app')

<x-assets.datatables />

@push('page-css')
	<!-- Datetimepicker CSS -->
	<link rel="stylesheet" href="{{asset('assets/css/bootstrap-datetimepicker.min.css')}}">
@endpush

@push('page-header')
    <div class="col-sm-7 col-auto">
        <h3 class="page-title">Gestion Installations</h3>
        <ul class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{route('dashboard')}}">Tableau de Bord</a></li>
            <li class="breadcrumb-item active">Installations</li>
        </ul>
    </div>
    @can('create-installation')
        <div class="col-sm-5 col">
            <a href="{{route('installations.create')}}" class="btn btn-primary float-right mt-2">Ajouter</a>
        </div>  
    @endcan
@endpush

@section('content')

<div class="row">
	<div class="col-md-12">

		<!-- Recent Orders -->
		<div class="card">
			<div class="card-body">
				<div class="table-responsive" >

                    <table id="installation-table" class="table table-bordered">
                        <thead>
                            <tr>
                                <th>Client</th>
                                <th>État</th>
                                <th>Équipement</th>
                                <th>Responsable</th>                
                                <th>Actions</th>
                            </tr>
						</thead>
						<tbody>


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

        <!-- Modal Générique pour afficher les détails -->
        <div class="modal fade" id="detailsModal" tabindex="-1" role="dialog" aria-labelledby="detailsModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
               
                    <div class="modal-body" id="modal-content">
                        <!-- Les détails de l'installation seront chargés ici via AJAX -->
                    </div>
                
            </div>
        </div>
@endsection
@push('page-js')

<script>
$(document).ready(function() {

    // Initialisation de DataTable
    var table = $('#installation-table').DataTable({
        processing: false,
        serverSide: false,
        ajax: '{{ route("installations.index") }}',
        columns: [
            { data: 'client', name: 'client' },
            { data: 'etat', name: 'etat' },      
            { data: 'equipement', name: 'equipement' },
            { data: 'user', name: 'user' },
            { 
                data: 'id',
                name: 'action',
                orderable: false,
                searchable: false,
                render: function(data) {
                    return `
                        <button type="button" class="btn btn-success btn-sm view-details" data-id="${data}" title="Voir">
                            <i class="fas fa-eye"></i>
                        </button>
                         </button>

                        <!-- Bouton Journées -->
                         <a href="/installations/${data}/journees" class="btn btn-info btn-sm" title="Voir les journées">
                                <i class="fas fa-calendar-day"></i>
                        </a>
                        <a href="/installations/${data}/edit">
                            <button class="btn btn-primary btn-sm edit" title="Modifier"><i class="fas fa-edit"></i></button>
                        </a>
                        <form method="POST" action="/installations/${data}" style="display:inline;">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-danger btn-sm" title="Supprimer" onclick="return confirm('Êtes-vous sûr de vouloir supprimer cette installation ?')">
                                <i class="fas fa-trash"></i>
                            </button>
                        </form>`;
                }
            }
        ]
    });
    // Affichage des détails via AJAX dans le modal
    $(document).on('click', '.view-details', function() {
        var id = $(this).data('id');
        $.ajax({
            url: '/installations/' + id,
            method: 'GET',
            success: function(response) {
                $('#modal-content').html(response);
                $('#detailsModal').modal('show');
            },
            error: function(xhr) {
                $('#modal-content').html('<p class="text-danger">Erreur lors du chargement des détails.</p>');
                $('#detailsModal').modal('show');
            }
        });
    });

});
</script>
@endpush