@extends('layouts.app',[
    'class' => '',
    'folderActive' => 'demandes',
    'elementActive' => isset($_GET['status']) ? 'demande-' . $_GET['status'] : 'demandes'
])

@section('head_supplement')

@endsection

@section('content')
    <div class="app-page-title">
        <div class="page-title-wrapper">
            <div class="page-title-heading">
                <div class="page-title-icon">
                    <i class="fa fa-calendar icon-gradient bg-arielle-smile"> </i>
                </div>
                <div>
                    DEMANDES D'INSPECTIONS
                    <div class="page-title-subheading">
                        Liste des demandes
                    </div>
                </div>
            </div>
        </div>
    </div>

    @if (auth()->user()->user_type <= 5)
        <div class="form-inline row" style="margin-bottom: 1em">

            <div class="filters mb-2 mb-sm-0 col-12 col-md-3">

                <label for="exampleEmail22" class="mr-sm-2">Date de début</label>

                <input type="text" id="min_date" class="form-control date_picker"
                       value="">
            </div>

            <div class="filters mb-2 mb-sm-0 col-12 col-md-3">

                <label for="exampleEmail22" class="mr-sm-2">Date de fin</label>

                <input type="text" id="max_date" class="form-control date_picker"
                       value="">
            </div>
            @if(isset(auth()->user()->client->subcontractor) && auth()->user()->client->subcontractor->isNotEmpty())
                <div class="mb-2 mb-sm-0 col-12 col-md-3">

                    <label for="" class="mr-sm-2">Client</label>

                    <select class="form-control select_filter select2" id="client_filter">
                        <option value="">Filtrer par client</option>
                        @foreach(auth()->user()->client->subcontractor as $client)
                            <option
                                    {{(isset ($request->client) && $client->client_id==$request->client) ? 'selected' :''}} value="{{ $client->client_id }}">{{ $client->client_title }}</option>
                        @endforeach
                        <option
                                value="{{ auth()->user()->client_id }}">{{ auth()->user()->client->client_title }}</option>
                    </select>
                </div>
            @endif

            @if (auth()->user()->client_id === 0 || !isset(auth()->user()->client_id))
                <div class="mb-2 mb-sm-0 col-12 col-md-3">

                    <label for="" class="mr-sm-2">Client</label>

                    <select class="form-control select_filter select2" id="client_filter">
                        <option value="">Filtrer par client</option>
                        @foreach($clients as $client)
                            <option
                                    {{(isset ($request->client) && $client->client_id==$request->client) ? 'selected' :''}} value="{{ $client->client_id }}">{{ $client->client_title }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="filters mb-2 mb-sm-0 col-12 col-md-3">
                    <label for="exampleEmail22" class="mr-sm-2">Type d'inspection</label>

                    <select class="form-control select_filter" id="type_rapport">
                        <option value="">Filtrer par type d'inspection</option>
                        @foreach(config('types.type_rapport') as $key => $type)
                            <option
                                    {{(isset ($request->type_demande) && $key==$request->type_demande) ? 'selected' :''}} value="{{ $key }}">{{ $type }}</option>
                        @endforeach
                    </select>
                </div>

            @else
                <input type="hidden" name="client_id" value="{{ auth()->user()->client_id }}">
            @endif

            <div class="mb-2 mb-sm-0 col-12 col-md-3">

                <label for="" class="mr-sm-2">Filtrer statut de la demande</label>

                <select id="status" class="form-control">

                    <option value="-1" selected="">Tous</option>

                    <option {{(isset ($request->status) && 0==$request->status) ? 'selected' :''}} value="0">En attente
                        d'acceptation
                    </option>

                    <option {{(isset ($request->status) && 1==$request->status) ? 'selected' :''}} value="1">Accepté
                    </option>

                    <option {{(isset ($request->status) && 3==$request->status) ? 'selected' :''}} value="3">Demande
                        refusée
                    </option>

                    <option {{(isset ($request->status) && 4==$request->status) ? 'selected' :''}} value="4">Retours de
                        demandes
                    </option>

                </select>
            </div>

            <div class="mb-2 mb-sm-0 col-12 col-md-3">

                <label for="" class="mr-sm-2">Résultats/page</label>

                <select id="change_length" class="form-control">

                    <option value="10" selected>10</option>

                    <option value="25">25</option>

                    <option value="50">50</option>

                    <option value="100">100</option>

                    <option value="-1">Tout</option>

                </select>

            </div>
            <div id="cancel_filters">

                <i class="fa fa-filter"></i>

                <span class="infobulle"></span>
            </div>
        </div>
    @endif

    <div class="outside_buttons"></div>
    <!--     <input type="hidden" name="statut" id="statut" value="{{ $_GET['status'] ?? 1 }}">
 -->
    <div class="row">
        <div class="col-md-12 col-xl-12">
            <div class="col-md-12">
                <div class="main-card mb-3 card">
                    <div class="table-responsive">
                        <table id="liste_demandes" data-page-length="10"
                               class="align-middle mb-0 table table-borderless table-striped table-hover datatable">
                            <thead>
                            <tr>
                                {{--                <th>Date de la demande
                                                </th>
                                                <th>Client</th>
                                                <th style="width:10%">Propriétaire</th>
                                                <th>Adresse</th>
                                                <th>Code postal et ville</th>
                                                <th>Téléphone du contact</th>
                                                <th>Date de début de chantier</th>
                                                <th>Date de visite souhaitée</th>
                                                <th>Date du RDV planifié</th>
                                                <th>Statut</th>
                                                <th>Action</th>--}}
                            </tr>
                            </thead>
                            <tbody>

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

    <input type="hidden" name="client_id" id="client_id" value="{{ Auth::user()->client_id }}">
    <input id="filters" value="0" type="hidden">

    <script src="{{ asset('js/datatables.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"
            integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ=="
            crossorigin="anonymous"></script>
    <script type="text/javascript">

        const queryString = window.location.search;
        const urlParams = new URLSearchParams(queryString);

        document.addEventListener('DOMContentLoaded', function () {

            const type_rapport = [
                'Pré-Visite',
                'BAR-EN-101',
                'BAT-EN-101',
                'BAR-EN-102 ITE',
                'BAR-EN-102 Murs Intérieurs',
                'BAT-EN-102 ITE',
                'BAT-EN-102 Murs Intérieurs',
                'BAR-EN-103',
                'BAT-EN-103',
                'BAR-EN-160',
                'BAT-TH-146',
                'BAR-EN-161 Points singuliers Secteur tertiaire',
                'BAR-EN-155 Points singuliers Secteur Industriel',
                'BAR-TH-164',
                'PAC',
                'BAR-EN-106',
                'BAT-EN-106',
                'PAC',
                'VMC',
                'BAR-TH-101',
            ]

            let table = $('#liste_demandes').DataTable({
                "language": {
                    "sProcessing": "Traitement en cours...",
                    "sSearch": "Rechercher&nbsp;:",
                    "sLengthMenu": "Afficher _MENU_ &eacute;l&eacute;ments",
                    "sInfo": "Affichage de l'&eacute;l&eacute;ment _START_ &agrave; _END_ sur _TOTAL_ &eacute;l&eacute;ments",
                    "sInfoEmpty": "Affichage de l'&eacute;l&eacute;ment 0 &agrave; 0 sur 0 &eacute;l&eacute;ment",
                    "sInfoFiltered": "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
                    "sInfoPostFix": "",
                    "sLoadingRecords": "Chargement en cours...",
                    "sZeroRecords": "Aucun &eacute;l&eacute;ment &agrave; afficher",
                    "zeroRecords": "Aucune demandes à afficher, veuillez appliquer 1 ou plusieurs filtres",
                    "sEmptyTable": "Aucune donn&eacute;e disponible dans le tableau",
                    "oPaginate": {
                        "sFirst": "Premier",
                        "sPrevious": "Pr&eacute;c&eacute;dent",
                        "sNext": "Suivant",
                        "sLast": "Dernier"
                    }
                },
                "searching": true,
                "ordering": true,
                "sortable": true,
                "order": [0, "desc"],
                "bLengthChange": false,
                "pageLength": -1,
                // "lengthChange": true,
                // "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Tout"]],

                "ajax": {
                    "type": "GET",
                    "url": "/api/demandes/search",
                    beforeSend: function (xhr) {
                        loader.show();
                        xhr.setRequestHeader('Authorization', `Bearer ${token}`);
                    },
                    data: function (d) {
                        d.filters = $('#filters').val();
                        d.status = $('#status').val();
                        d.client_id = $('#client_filter').val();
                        d.type = $('#type_rapport').val();
                        d.search_field = $('#nom_filter').val();
                        d.start = $('#min_date').val();
                        d.end = $('#max_date').val();
                    },

                    error: function () {
                    },

                },

                "initComplete": function (settings, json) {

                },

                "drawCallback": function ( json) {
                    loader.hide();

                     var api = this.api();

                     // console.log(count_rows)

                },

                "columns": [
                    {
                        "data": "date_demande_old", 'title': 'Date de la demande',"visible":false,

                    },


                    {
                        "data": "date_demande", 'title': 'Date de la demande',
                        "render": function (data, type, row, meta) {

                            return row.date_demande +
                                "<br> par " + row.demande_firstname + " " + row.demande_lastname;
                        }
                    },
                    {
                        "data": "client_title", title: 'Client'
                    },
                    {
                        "data": "proprietaire_name", 'title': 'Propriétaire',
                        "render": function (data, type, row, meta) {
                            return "<strong>" + row.proprietaire_name + "</strong>";
                        }
                    },
                    {
                        "data": "proprietaire_adresse", 'title': 'Adresse',
                        "render": function (data, type, row, meta) {
                            return row.proprietaire_adresse;
                        }
                    },
                    {
                        "data": "cp", 'title': 'Code postal',
                        "render": function (data, type, row, meta) {
                            return row.proprietaire_cp;
                        }
                    },
                    {
                        "data": "ville", 'title': 'Ville',
                        "render": function (data, type, row, meta) {
                            return row.proprietaire_ville;
                        }
                    },
                    {
                        "data": "type_demande",
                        'title': 'Type d\'inspection',
                        'render': function (data, type, row, meta) {

                            let string = '';
                            if(row.type_demande.isArray) {
                            row.type_demande.forEach((index) => {
                                if (type_rapport[index - 1] !== undefined) {
                                    string += type_rapport[index - 1] + '<br/>';
                                }
                            })
                            }

                            return string;
                        }
                    },
                    {"data": "tel_contact", title: 'Téléphone du contact'},
                    {"data": "debut_chantier", title: 'Date de début de chantier'},
                    {"data": "date_souhaitee", title: 'Date de visite souhaitée'},
                    {
                        "data": "date_rdv",
                        'title': 'Date du RDV planifié',
                        'render': function (data, type, row, meta) {
                            if (row.rdv_annule === 1) {
                                return `<button class="btn btn-danger">RDV annulé</button>`
                            } else if ((row.statut_demande === 3 || row.statut_demande === 2) && (row.date_rdv !== '')) {
                                return row.date_rdv +
                                    " par " +
                                    row.rdv_firstname + ' ' + row.rdv_lastname
                            }
                            return '';
                        }
                    },
                    {
                        "data": "action", 'title': 'Action', 'render': function (data, type, row, meta) {

                            // return row.rapport_id+'///'+row.demande_id;

                            if(row.rapport_id>0) {
                                console.log(row.rapport_id)
                                console.log(row.rapport_statut)
                                if (row.rapport_statut < 4) {
                                    return '<a class="btn btn-info">Rapport effectué</a>';
                                } else {
                                    return '<a href="/storage/rapports/rapport_' + row.rapport_id + '/' + row.nom_rapport + '.pdf"' +
                                        'target="_blank" class="btn btn-primary">Rapport validé</a>'
                                }
                            }
                            else

                            {
                                if (row.statut_demande == 0) {
                                    return '<a href="/demandes/' + row.demande_id + '"' +
                                        'class="btn btn-danger">En attente d\'acceptation</a>'
                                }
                                 if (row.statut_demande == 1) {
                                    return '<a href="/demandes/' + row.demande_id + '"' +
                                        'class="btn btn-warning">Demande acceptée</a>'
                                }
                                 if (row.statut_demande == 2) {
                                    return '<a href="/demandes/' + row.demande_id + '"' +
                                        'class="btn btn-success">Inspection planifiée</a>'
                                }
                                 if (row.statut_demande == 3) {
                                    return '<a href="/demandes/' + row.demande_id + '"' +
                                        'class="btn btn-warning">Demande refusée</a>'
                                }
                                 if (row.statut_demande == 4) {
                                    return '<a href="/demandes/' + row.demande_id + '"' +
                                        'class="btn btn-secondary">Retour de demande</a>'
                                }

                            }

                        }
                    },
                    {
                        "data": "date_rdv", 'title': 'Statut', 'render': function (data, type, row, meta) {
                            return '<a href="/demandes/' + row.demande_id + '" class="btn btn-primary">Voir la demande</a>'
                        }
                    },
                ]
            });

            new $.fn.dataTable.Buttons(table, {
                buttons: [

                    {
                        extend: 'copy',
                        text: '<i class="fa fa-files-o"></i> Copier',
                        titleAttr: 'Copy',
                        className: 'btn btn-primary btn-sm',
                        exportOptions: {
                            columns: ':visible'
                        }
                    },
                    {
                        extend: 'csv',
                        text: '<i class="fa fa-files-o"></i> CSV',
                        titleAttr: 'CSV',
                        className: 'btn btn-primary btn-sm',
                        exportOptions: {
                            columns: ':visible'
                        }
                    },
                    {
                        extend: 'excel',
                        text: '<i class="fa fa-files-o"></i> Excel',
                        titleAttr: 'Excel',
                        className: 'btn btn-primary btn-sm',
                        exportOptions: {
                            columns: ':visible'
                        }
                    },
                    {
                        extend: 'pdf',
                        text: '<i class="fa fa-file-pdf-o"></i> PDF',
                        titleAttr: 'PDF',
                        className: 'btn btn-primary btn-sm',
                        exportOptions: {
                            columns: ':visible'
                        }
                    },
                    {
                        extend: 'print',
                        text: '<i class="fa fa-print"></i> Imprimer',
                        titleAttr: 'Print',
                        className: 'btn btn-primary btn-sm',
                        exportOptions: {
                            columns: ':visible'
                        }
                    },
                ]
            });

            table.buttons().container().appendTo('.outside_buttons');


            $('#client_filter').on('change', function () {

                if($(this).val()>0) {
                $('#filters').val(1);
                $('#client_id').val($(this).val());
                }
                // table
                //     .clear()
                //     .draw();
                 table.ajax.reload();
            });

            $('#status').on('change', function () {

                $('#filters').val(1);

                // table
                //     .clear()
                //     .draw();
                table.ajax.reload();

            })


            $('#type_rapport').on('change', function () {

                $('#filters').val(1);

                // table
                //     .clear()
                //     .draw();
                table.ajax.reload();

            })

            $('#change_length').on('change', function () {
                table.page.len($('#change_length').val()).draw();
            });

            $('#min_date').on('change', function () {
                if ($('#min_date').val() != '' && $('#max_date').val() != '') {
                    $('#filters').val(1);
                    // table
                    //     .clear()
                    //     .draw();
                    table.ajax.reload();

                }

            });
            $('#max_date').on('change', function () {
                if ($('#min_date').val() != '' && $('#max_date').val() != '') {
                    $('#filters').val(1);
                    // table
                    //     .clear()
                    //     .draw();
                    table.ajax.reload();
                }

            });


            if (urlParams.has('type_demande') || urlParams.has('client') || urlParams.has('status')) {
                $('#filters').val(1);
                table.ajax.reload();
            }

        });
    </script>
@endsection