@extends('admin.layouts.default')
@section('style')
    <style>
        .border-left-right {
            border-left: 1px solid black;
            border-right: 1px solid black;
        }

        label {
            font-weight: 600;
        }
    </style>
@endsection
@section('content')
    <div class="content-box">
        <div class="element-wrapper">
            <div class="element-box">
                <i class="fa fa-caret-square-o-up pull-right" aria-hidden="true" id="btnShowFilter"
                    style="cursor: pointer;"></i>
                <h5 class="form-header">
                    Informations projets
                </h5>
                <div id="filters">
                    <form id="filterForm">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="purchaseDateFrom">Date achat - De :</label>
                                    <input type="date" class="form-control" id="purchaseDateFrom" name="purchaseDateFrom"
                                        lang="fr">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="purchaseDateTo">À :</label>
                                    <input type="date" class="form-control" id="purchaseDateTo" name="purchaseDateTo"
                                        lang="fr">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="beginDateFrom">Date début - De :</label>
                                    <input type="date" class="form-control" id="beginDateFrom" name="beginDateFrom"
                                        lang="fr">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="beginDateTo">À :</label>
                                    <input type="date" class="form-control" id="beginDateTo" name="beginDateTo"
                                        lang="fr">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="endDateFrom">Date fin - De :</label>
                                    <input type="date" class="form-control" id="endDateFrom" name="endDateFrom"
                                        lang="fr">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="endDateTo">À :</label>
                                    <input type="date" class="form-control" id="endDateTo" name="endDateTo"
                                        lang="fr">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="designer">Designer retenu :</label>
                                    <select required class="form-control" required="" id="designer" name="designer">
                                        <option value="">Sélectionnez un designer</option>
                                        @foreach ($all_designers as $d)
                                            <option value="{{ $d->prenom . ' ' . $d->nom . '.' }}">
                                                {{ $d->prenom . ' ' . $d->nom }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="forfait_esq">Forfait esquisse :</label>
                                    <select required class="form-control" required="" id="forfait_esq"
                                        name="forfait_esq">
                                        <option value="">Sélectionnez un forfait</option>
                                        <option value="Essentiel">Essentiel</option>
                                        <option value="Incontournable">Incontournable</option>
                                        <option value="Fantastique">Fantastique</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="forfait_conc">Forfait conception :</label>
                                    <select required class="form-control" required="" id="forfait_conc"
                                        name="forfait_conc">
                                        <option value="">Sélectionnez un forfait</option>
                                        <option value="Essentiel">Essentiel</option>
                                        <option value="Incontournable">Incontournable</option>
                                        <option value="Fantastique">Fantastique</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="piece">Pièce :</label>
                                    <select required class="form-control" required="" id="piece" name="piece">
                                        <option value="">Sélectionnez une pièce</option>
                                        @foreach ($spaces as $s)
                                            <option value="{{ $s }}">
                                                {{ $s }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="type">Type :</label>
                                    <select required class="form-control" required="" id="type" name="type">
                                        <option value="">Sélectionnez un type</option>
                                        <option value="Maison">Maison</option>
                                        <option value="Studio">Studio</option>
                                        <option value="Pro">Pro</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="eval">Éval :</label>
                                    <select required class="form-control" required="" id="eval" name="eval">
                                        <option value="">Sélectionnez une évaluation</option>
                                        <option value="1">1</option>
                                        <option value="2">2</option>
                                        <option value="3">3</option>
                                        <option value="4">4</option>
                                        <option value="5">5</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row" id="averageRow">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="averageProjects">Nº projets:</label>
                                    <input type="text" class="form-control" id="averageProjects" readonly>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="averageDuration">Durée moyenne (hors projets en cours):</label>
                                    <input type="text" class="form-control" id="averageDuration" readonly>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="averageConceptions">Moyenne des conceptions:</label>
                                    <input type="text" class="form-control" id="averageConceptions" readonly>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 d-flex justify-content-end">
                                <button type="button" class="btn btn-primary" onclick="applyFilters()">Filtrer</button>
                                <button type="button" class="btn btn-secondary ml-2"
                                    onclick="resetFilters()">Réinitialiser</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="element-box">
                <div class="pull-right">
                    {{-- <a href="{{route('admin.detailsProjets.export')}}" class="btn btn-primary">Exporter</a> --}}
                </div>
                <div class="table-responsive">
                    <table id="dataTableInfosProjet" class="table table-striped table-lightfont">
                        <thead>
                            <tr>
                                <th class="text-center font-weight-bold" style="vertical-align: middle;">ID</th>
                                <th class="text-center font-weight-bold"
                                    style="vertical-align: middle; width: 30px !important;">Pièce</th>
                                <th class="text-center font-weight-bold" style="vertical-align: middle;">Client</th>
                                <th class="text-center font-weight-bold" style="vertical-align: middle;">Type</th>
                                <th class="text-center font-weight-bold" style="vertical-align: middle;">Date achat</th>
                                <th class="text-center font-weight-bold" style="vertical-align: middle;">Forfait Esq
                                </th>
                                <th class="text-center font-weight-bold" style="vertical-align: middle;">Forfait
                                    Conc</th>
                                <th class="text-center font-weight-bold" style="vertical-align: middle;">Designers</th>
                                <th class="text-center font-weight-bold" style="vertical-align: middle;">Date début</th>
                                <th class="text-center font-weight-bold" style="vertical-align: middle;">Date fin</th>
                                <th class="text-center font-weight-bold" style="vertical-align: middle;">Durée</th>
                                <th class="text-center font-weight-bold" style="vertical-align: middle;">Éval</th>
                                <th class="text-center font-weight-bold" style="vertical-align: middle;">Concº</th>
                                <th class="text-center font-weight-bold" style="vertical-align: middle;">Prodº</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($result as $item)
                                <tr class="text-center">
                                    <td> <a target="_blank"
                                            href="{{ route('admin.projets.details', $item['projet_id']) }}">{{ $item['projet_id'] }}</a>
                                    </td>
                                    <td>{{ $item['piece'] }}</td>
                                    <td>{{ ucwords(strtolower($item['client'])) }}</td>
                                    <td>{{ ucfirst($item['type']) }}</td>
                                    <td>{{ $item['date_achat'] }}</td>
                                    <td>{{ ucfirst($item['forfait']) }}</td>
                                    <td>{{ ucfirst($item['forfait_conception']) }}</td>
                                    <td>{!! $item['designers'] !!}</td>
                                    <td>{{ $item['date_debut'] }}</td>
                                    <td>{{ $item['date_fin'] }}</td>
                                    <td class="border-left-right font-weight-bold">{{ $item['duree'] }}</td>
                                    <td class="border-left-right">{{ $item['eval'] }}</td>
                                    <td class="border-left-right">{{ $item['conceptions'] }}</td>
                                    <td class="border-left-right">{{ $item['produits'] }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js"
        integrity="sha256-+C0A5Ilqmu4QcSPxrlGpaZxJ04VjsRjKu+G82kl5UJk=" crossorigin="anonymous"></script>
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.bootstrap3.min.css"
        integrity="sha256-ze/OEYGcFbPRmvCnrSeKbRTtjG4vGLHXgOqsyLFTRjg=" crossorigin="anonymous" />
    <script>
        $(document).ready(function() {
            if ($('#dataTableInfosProjet').length) {
                $('#dataTableInfosProjet').DataTable({
                    "order": [
                        [8, "desc"]
                    ],
                    "paging": false,
                    language: {
                        "sProcessing": "Traitement en cours...",
                        "sSearch": "Rechercher&nbsp;:",
                        "sInfo": "Total des projets : _TOTAL_",
                        "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",
                        "sEmptyTable": "Aucune donn&eacute;e disponible dans le tableau",
                        "oAria": {
                            "sSortAscending": ": activer pour trier la colonne par ordre croissant",
                            "sSortDescending": ": activer pour trier la colonne par ordre d&eacute;croissant"
                        }
                    }
                });
            }
            $('#btnShowFilter').click(function(event) {
                $('#filters').toggleClass('d-none');
                $(this).toggleClass('fa-caret-square-o-up fa-caret-square-o-down');
            });
        });
        $(document).ready(function() {
            $('#designer').selectize({});
        });

        function applyFilters() {

            var purchaseDateFrom = document.getElementById('purchaseDateFrom').value;
            var purchaseDateTo = document.getElementById('purchaseDateTo').value;
            var beginDateFrom = document.getElementById('beginDateFrom').value;
            var beginDateTo = document.getElementById('beginDateTo').value;
            var endDateFrom = document.getElementById('endDateFrom').value;
            var endDateTo = document.getElementById('endDateTo').value;
            var designer = document.getElementById('designer').value.toLowerCase();
            var forfait_esq = document.getElementById('forfait_esq').value.toLowerCase();
            var forfait_conc = document.getElementById('forfait_conc').value.toLowerCase();
            var piece = document.getElementById('piece').value.toLowerCase();
            var type = document.getElementById('type').value.toLowerCase();
            var eval = document.getElementById('eval').value.toLowerCase();

            var totalDuree = 0; // Initialize total duration
            var count = 0; // Initialize count of rows with valid duration
            var totalConceptions = 0;
            var countProjectConceptions = 0;
            var totalDisplayed = 0;

            // Filter the table rows based on the selected criteria
            var rows = document.querySelectorAll('#dataTableInfosProjet tbody tr');
            rows.forEach(function(row) {

                var spaceProject = row.querySelector('td:nth-child(2)').textContent.trim().toLowerCase();
                var typeProject = row.querySelector('td:nth-child(4)').textContent.trim().toLowerCase();
                var datePurchase = row.querySelector('td:nth-child(5)').textContent.trim();
                var forfaitEsquisseType = row.querySelector('td:nth-child(6)').textContent.trim().toLowerCase();
                var forfaitConceptionType = row.querySelector('td:nth-child(7)').textContent.trim().toLowerCase();
                var designerName = row.querySelector('td:nth-child(8)').textContent.trim().toLowerCase();
                var dateDebut = row.querySelector('td:nth-child(9)').textContent.trim();
                var dateFin = row.querySelector('td:nth-child(10)').textContent.trim();
                var duree = row.querySelector('td:nth-child(11)').textContent.trim();
                var evalProject = row.querySelector('td:nth-child(12)').textContent.trim().toLowerCase();
                var conceptions = row.querySelector('td:nth-child(13)').textContent.trim().toLowerCase();
                var showRow = true;

                if ((purchaseDateFrom && datePurchase < purchaseDateFrom) || (purchaseDateTo && datePurchase >
                        purchaseDateTo)) {
                    showRow = false;
                }

                if ((beginDateFrom && dateDebut < beginDateFrom) || (beginDateTo && dateDebut > beginDateTo)) {
                    showRow = false;
                }

                if ((endDateFrom && dateFin < endDateFrom) || (endDateTo && dateFin > endDateTo)) {
                    showRow = false;
                }

                if (designer && !designerName.includes(designer)) {
                    showRow = false;
                }

                if (forfait_esq && forfait_esq !== forfaitEsquisseType) {
                    showRow = false;
                }

                if (forfait_conc && forfait_conc !== forfaitConceptionType) {
                    showRow = false;
                }

                if (piece && piece !== spaceProject) {
                    showRow = false;
                }

                if (type && type !== typeProject) {
                    showRow = false;
                }

                if (eval && eval !== evalProject) {
                    showRow = false;
                }

                if (showRow && duree) {
                    totalDuree += parseFloat(duree);
                    count++;
                }

                if (showRow && conceptions) {
                    totalConceptions += parseFloat(conceptions);
                    countProjectConceptions++;
                }

                if (showRow) {
                    row.style.display = '';
                    totalDisplayed++;
                } else {
                    row.style.display = 'none';
                }
            });

            document.getElementById('averageProjects').value = totalDisplayed;
            if (count > 0) {
                var averageDuree = (totalDuree / count).toFixed(3);
                document.getElementById('averageDuration').value = averageDuree;
            } else {
                document.getElementById('averageDuration').value = '';
            }

            if (countProjectConceptions > 0) {
                var averageConceptions = (totalConceptions / countProjectConceptions).toFixed(3);
                document.getElementById('averageConceptions').value = averageConceptions;
            } else {
                document.getElementById('averageConceptions').value = '';
            }
        }

        function resetFilters() {
            document.getElementById('purchaseDateFrom').value = '';
            document.getElementById('purchaseDateTo').value = '';
            document.getElementById('beginDateFrom').value = '';
            document.getElementById('beginDateTo').value = '';
            document.getElementById('endDateFrom').value = '';
            document.getElementById('endDateTo').value = '';


            var selectize = $('#designer')[0].selectize;
            selectize.setValue(null);
            document.getElementById('forfait_esq').selectedIndex = 0;
            document.getElementById('forfait_conc').selectedIndex = 0;
            document.getElementById('piece').selectedIndex = 0;
            document.getElementById('type').selectedIndex = 0;
            document.getElementById('eval').selectedIndex = 0;
            document.getElementById('averageDuration').value = '';
            document.getElementById('averageConceptions').value = '';
            document.getElementById('averageProjects').value = '';
            // Show all rows
            var rows = document.querySelectorAll('#dataTableInfosProjet tbody tr');
            rows.forEach(function(row) {
                row.style.display = '';
            });
        }
    </script>
@endsection