@extends('layouts.dashboard-skelton')

@section('main')
    <div class="row justify-content-center" id="status_badge">
    </div>
    <div class="row justify-content-center">
        {{ $groupes->links() }}
        <div class="smtpa-table-wrapper card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span>List des Groupes</span>
                <form action="{{ route('groupes.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <button class="btn btn-sm btn-info text-white">
                        <i class="bi bi-plus-circle"></i>
                        Ajouter
                    </button>
                </form>
            </div>
            @csrf
            <table id="groupes-table" class="smtpa-table">
                <thead class="bg-gray-50">
                    <tr>
                        <th width="5%">#</th>
                        <th width="10%">Nom</th>
                        <th width="10%">Heure d'entrer</th>
                        <th width="10%">Heure de sortir</th>
                        <th width="10%">Vehicle</th>
                        <th width="10%">in place</th>
                        <th width="10%"></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($groupes as $groupe)
                        <tr>
                            <td>
                                <div>{{ $groupe->id }}</div>
                            </td>
                            <td>
                                <div>{{ $groupe->name }}</div>
                            </td>
                            <td>
                                <div>{{ $groupe->heure_entrer }}</div>
                            </td>
                            <td>
                                <div>{{ $groupe->heure_sortir }}</div>
                            </td>
                            <td>
                                <div>{{ $groupe->vehicle->matricule ?? '' }}</div>
                            </td>
                            <td>
                                <div>
                                    @if ($groupe->isHome)
                                        {{ 'à domicile' }}
                                    @else
                                        {{ 'aux points de ramassage' }}
                                    @endif
                                </div>
                            </td>
                            <td></td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
@endsection
@section('scripts')
    <script>
        $(document).ready(function() {
            $(document).on("change", "#groupes-table .tabledit-edit-mode input[type=time]", function() {
                element = $(this);
                $.ajax({
                    url: "{{ route('groupes.filter') }}",
                    type: 'GET',
                    data: element.closest('tr').find(
                            '.tabledit-identifier,.tabledit-edit-mode input[type=time]')
                        .serialize(),
                    success: function(result, data, status) {
                        select = element.closest('.tabledit-edit-mode').siblings(
                            '.tabledit-edit-mode').find('select').first();
                        select.children('option[value!=0]').remove();
                        for (const [key, value] of Object.entries(result)) {
                            select.append(`<option value="${key}">${value}</option>`);
                        }
                    }
                });
            });
            $.ajaxSetup({
                headers: {
                    'X-CSRF-Token': $("input[name=_token]").val()
                }
            });
            $('#groupes-table').Tabledit({
                url: "{{ route('groupes.update') }}",
                dataType: "json",
                columns: {
                    identifier: [0, 'id'],
                    editable: [
                        [1, 'name'],
                        [2, 'heure_entrer', '@php echo json_encode(['istime' => true]) @endphp'],
                        [3, 'heure_sortir', '@php echo json_encode(['istime' => true]) @endphp'],
                        [4, 'vehicle_id', '@php echo json_encode($vehicles) @endphp'],
                        [5, 'isHome', '{"0": "aux points de ramassage", "1": "à domicile"}']
                    ]
                },
                restoreButton: false,
                onSuccess: function(data, textStatus, jqXHR) {
                    if (data.action == 'delete') {
                        $('#' + data.id).remove();
                    }
                },
            });
        })
    </script>
@endsection