@extends('admin.layouts.app')


<x-assets.datatables />

@push('page-css')


    <style>
        body {
            text-align: center;
        }
        .Container{
            height: 100%;
            width: 100%;
            overflow-y: auto;
            background-color: rgb(255, 255, 255);
            border-radius: 5px;
            margin: 0 auto;
            padding: 25px;
        }

        .Content{
            width: 1000px;
            color: rgb(0, 0, 0);
            text-align: center;
        }

        .Flipped, .Flipped .Content{
            transform: rotateX(180deg);
        }

        /* Designing for scroll-bar */
        ::-webkit-scrollbar {
            width: 5px;
        }

        /* Track */
        ::-webkit-scrollbar-track {
            background: gainsboro;
            border-radius: 5px;
        }

        /* Handle */
        ::-webkit-scrollbar-thumb {
            background: #00080f;
            border-radius: 5px;
        }

        /* Handle on hover */
        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
        .page-title {
            text-align: left; /* Assurez-vous que le texte est aligné à gauche */
        }

        /* css etat final */
        .custom-red-light {
        background-color: rgba(255, 99, 132, 1);
        color: white;
        }

        .custom-red-dark {
        background-color: rgba(255, 0, 0, 1);
        color: white;
        }

        .custom-yellow-light {
        background-color: rgb(236, 170, 4);
        color: black;
        }

        .custom-purple-light {
        background-color: rgba(153, 102, 255, 1);
        color: white;
        }

        .custom-green-light {
        background-color: rgba(75, 192, 192, 1);
        color: black;
        }

        .custom-blue-light {
        background-color: rgba(54, 162, 235, 1);
        color: white;
        }

        .custom-green-dark {
        background-color: rgba(75, 192, 192, 1);
        color: white;
        }
        .custom-orange-dark {
        background-color: rgb(255, 132, 0);
        color: white;
        }
        .custom-red1-light {
        background-color: rgb(231, 71, 71);
        color: white;
        }
        .custom-grey-light {
        background-color: rgba(128, 128, 128, 1); /* Light grey color */
        color: white;
        }
    </style>

@endpush

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

@section('content')
<div class="row">
    <div class="col-md-12">

        <div class="card">
            <div class="card-body">
                <div class="table-responsive">

    <div class="Container Flipped">
        <div class="Content">
                    <table id="intervention-table" class="table table-bordered table-hover">
                        <thead>
                            <tr class="text-uppercase">
                                <th>ETAT</th>
                                <th>CLIENT</th>
                                <th>EQUIPEMENT</th>
                                <th>EQUIPEMENT AVANT VISITE</th>
                                <th>INTERVENANT(s)</th>
                                <th>DESCRIPTION PANNE</th>
                                <th>Priorité</th>
                                <th>Date début</th>
                                <th>Equipement après visite</th>
                                <th >Rapport </th>
                                <th class="action-btn">Action</th>

                            </tr>
                        </thead>
                        <tbody>
                            <div id="spinner" class="spinner-border text-primary" role="status"
                                style="display: none;
                                position: absolute;
                                inset-block-start: 50%;
                                inset-inline-start: 50%;">
                                <span class="sr-only">en cours...</span>
                            </div>
                        </tbody>
                    </table>
                </div>
            </div>
                </div>
            </div>
        </div>

    </div>
</div>
@endsection

@push('page-js')
<script>
    $('#intervention-table').on('processing.dt', function(e, settings, processing) {
        if (processing) {
            $('#spinner').show();
        } else {
            $('#spinner').hide();
        }
    });

    $(document).ready(function() {
    var table = $('#intervention-table').DataTable({
        processing: false,
        serverSide: false,
        ajax: "{{route('interventions.index')}}",
        columns: [
            {data: 'etat_final_global', name: 'etat_final_global'},
            {data: 'client', name: 'client'},
            {data: 'equipement', name: 'equipement'},
            {data: 'etat_initial', name: 'etat_initial'},
            {
            data: 'destinateur',
            name: 'destinateur',
            render: function(data, type, row) {
                // Si 'destinateur' est null ou vide, afficher le sous-traitant
                if (!data || data === "null") {
                    // Vérifie si le sous-traitant est présent
                    return row.soustraitant ? row.soustraitant.name : 'Pas de sous-traitant';
                }
                return data; // Afficher la valeur du 'destinateur' si elle existe
                }
            },

            {data: 'description_panne', name: 'description_panne'},
            {data: 'priorite', name: 'priorite'},
            {
                data: 'date_debut',
                name: 'date_debut',
                render: function(data, type, row) {
                    if (data) {
                        var date = moment(data, 'YYYY-MM-DD HH:mm:ss');
                        return date.format('DD-MM-YYYY hh:mm A');
                    }
                    return '';
                }
            }, 
            {data: 'etat_final', name: 'etat_final'},
            {
                data: 'rapport',
                name: 'rapport',
                orderable: false,
                searchable: false,
                render: function(data, type, row) {
                    return `<a href="/admin/interventions?rapport_id=${row.id}" target="_blank" class="btn btn-primary">Voir Rapport</a>`;
                }
            },
            {data: 'action', name: 'action', orderable: false, searchable: false},
        ]
    });

    $.getScript('https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js', function() {
        moment.locale('fr');
    });
});

</script>
@endpush