@extends('layouts.app',[
    'class' => '',
    'folderActive' => '',
    'elementActive' => 'materiaux'
])


@section('content')
    <div class="app-page-title">
        <div class="page-title-wrapper">
            <div class="page-title-heading">
                <div class="page-title-icon">
                    <i class="fas fa-toolbox icon-gradient bg-strong-bliss"></i>
                </div>
                <div>
                    Gestion des matériaux
                    <div class="page-title-subheading">
                        <a href="/materiaux/new" class="btn btn-primary">
                            Ajouter une référence
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="row">
                    <div class="mb-2 mb-sm-0 col-12 col-md-3">
                        <div class="form-group">
                            <form class="">
                                <label for="type" class="">Type de matériaux : </label>
                                <select name="type" id="type" class="custom-select" onchange="this.form.submit()">
                                    <option value="1" {{ !isset($request->type) ? 'selected' : '' }}>Calorifugeage
                                    </option>
                                    <option
                                        value="2" {{ isset($request->type) && $request->type == 2 ? 'selected' : '' }}>
                                        Isolation 101-103
                                    </option>
                                    <option
                                        value="3" {{ isset($request->type) && $request->type == 3 ? 'selected' : '' }}>
                                        ITE
                                    </option>
                                    <option
                                        value="4" {{ isset($request->type) && $request->type == 4 ? 'selected' : '' }}>
                                        ITI
                                    </option>
                                </select>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="main-card mb-3 card">
                    <div class="card-body">
                        <h5 class="card-title">Liste des materiaux</h5>
                        <table class="mb-0 table datatable">
                            <thead>
                            <tr>
                                <th class="d-none"></th>
                                <th>#</th>
                                <th>Nom</th>
                                <th>action</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($materiaux as $materiel)
                                <tr>
                                    <td class="d-none">{{ $materiel->materiel_type }}</td>
                                    <td>{{ $materiel->materiel_id }}</td>
                                    <td>{{ $materiel->materiel_name }}</td>
                                    <td class="d-flex justify-content-center">
                                        <a class="btn btn-success mx-1 w-25"
                                           href="/materiaux/{{ $materiel->materiel_id }}/edit"
                                           data-id="{{ $materiel->materiel_id }}">
                                            <i class="fa fa-pen"></i>
                                        </a>
                                        <button class="btn btn-primary mx-1 modify w-25"
                                                data-id="{{ $materiel->materiel_id }}">
                                            Modifier
                                        </button>
                                        <form action="/materiaux/delete/{{ $materiel->materiel_id }}" method="post">
                                            @csrf
                                            @method('delete')
                                            <button class="btn btn-danger mx-1">
                                                Supprimer
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="{{ asset('js/datatables.js') }}"></script>
    @if(in_array($request->type, [2, 3, 4]))
        <script>
            const table = $('.table').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",
                        "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,
                "pageLength": -1,
                "bLengthChange": false,
                "bInfo": false,
                "bFilter": false,
                "dom": '<"top"i>rt<"bottom"p><"clear">',
                "order": []
            })

            const modify = document.querySelectorAll('.modify');
            modify.forEach((item) => {
                item.addEventListener('click', (event) => {

                    document.getElementById('materiel_id').value = item.dataset.id

                    axios.get('/api/materiaux/' + item.dataset.id + '/iso', {
                        headers: {
                            'Authorization': `Bearer ${token}`
                        },
                    }).then(response => {
                        document.querySelector('input[name="type_isolant"]').value = response.data.type ?? '';
                        document.querySelector('input[name="epaisseur"]').value = response.data.epaisseur ?? '';
                        document.querySelector('input[name="lambda"]').value = response.data.lambda ?? '';
                        $('#modify').modal('show');
                    });
                })
            });
        </script>
    @else
        <script>
            const table = $('.table').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",
                        "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,
                "pageLength": -1,
                "bLengthChange": false,
                "bInfo": false,
                "bFilter": false,
                "dom": '<"top"i>rt<"bottom"p><"clear">',
                "order": []
            })

            const modify = document.querySelectorAll('.modify');
            modify.forEach((item) => {
                item.addEventListener('click', (event) => {

                    $('#modify').modal('show');

                    document.querySelectorAll('.line_table').forEach((item) => {
                        item.remove();
                    })

                    document.getElementById('materiel_id').value = item.dataset.id

                    axios.get('/api/materiaux/' + item.dataset.id, {
                        headers: {
                            'Authorization': `Bearer ${token}`
                        },
                    }).then(axiosResponse => {

                        let data = axiosResponse.data;

                        let count = data.length;

                        data.forEach((data, key) => {
                            let value = data.split(';')
                            const html = `
                                         <tr id="line_${count + 1}" class="line_table">
                                             <td style="width:40%;font-weight:800">
                                                 <div><input class="form-control" value="${value[0]}" type="text"
                                                             name="diametre_tuyauterie[]" placeholder="Donnez un diamètre"></div>
                                             </td>
                                             <td style="width:40%;font-weight:800">
                                                 <div><input class="form-control" value="${value[1]}" type="text"
                                                             name="epaisseur_tuyauterie[]" placeholder="Donnez une épaisseur"></div>
                                             </td>
                                             <td style="width:20%;border:none;"><a
                                                         class="btn btn-danger del_epaisseur" data-id="${count + 1}">-</a></td>
                                         </tr>`;

                            $('#table_epaisseur>tbody').append(html);

                            $('.del_epaisseur').click(function () {
                                $(this).closest('tr').remove();
                            });

                            count++;
                        });
                    })
                });
            })
        </script>
    @endif
@endsection

@section('modal')
    @if(in_array($request->type, [2, 3, 4]))
        @include('modals.materiaux.modify-iso')
    @else
        @include('modals.materiaux.modify')
    @endif
@endsection