@extends('layouts.app', ['title' => 'ToDo - Listemitglieder'])
@section('content')

    {{-- delete list --}}
    <div class="modal fade modal-dialog-scrollable  modal-lg" id="emp-del" data-bs-backdrop="static" data-bs-keyboard="false"
        tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">

        <div class="modal-dialog">
            <div class="modal-content">
                <form action="{{ route('todo.list.del_emp') }}" method="POST" class="needs-validation" novalidate>
                    @csrf

                    <input id="list_id" name="list_id" value="{{ $list->list_id }}" hidden>
                    <input id="emp_id" name="emp_id" value="" hidden>
                    <div class="modal-header">
                        <h5 class="modal-title " id=""> Listemitglieder löschen </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <div class="modal-body">

                        <div class="row mt-2">
                            <div class="col">
                                <h4 class="text-center">Möchten Sie den Listemitglieder löschen ? </h4>
                            </div>

                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                        <button type="submit" class="btn btn-danger">Löschen</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- main content -->
    <div class="container-fluid">
        <div class="row d-flex justify-content-center">
            <div class="col-3">
                <small>Besitzer: {{ $owner->first_name }} {{ $owner->last_name }}</small>

            </div>
            <div class="col-6 text-center">

                liste : <b> {{ $list->title }}</b>
            </div>
            <div class="col-3">

            </div>




        </div>

        <div class="  mb-5">
            @if (session('msg'))
                <div class="alert alert-success alert-dismissible" id="success-alert">
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>

                    <p class="text-center"> {{ session('msg') }}</p>

                </div>
                <script>
                    $("#success-alert").fadeTo(2000, 500).slideUp(500, function() {
                        $("#success-alert").slideUp(1000);
                    });
                </script>
            @endif


            @foreach ($list_emp as $item)
                @if (Auth::user()->get_employee->employee_id == $item->fk_owner_employee_id)
                    <hr>
                    <form action="{{ route('todo.list.add_emp') }}" class="form-control" method="post">
                        @csrf
                        <input type="hidden" name="list_id" id="list_id" value="{{ $list->list_id }}">
                        <div class="row  m-2 p-2 align-items-center">
                            <div class="col-6 ">
                                <label for="">Mitarbeiter :</label>
                                <select class="form-select form-select-sm w-50" id="emp_id" name="emp_id" required>
                                    @foreach ($emps as $itemc)
                                        @if (!$list_emp->contains('fk_employee_id', $itemc->employee_id))
                                            <option value="{{ $itemc->employee_id }}">
                                                {{ $itemc->get_department->name }} Abteilung - {{ $itemc->first_name }}
                                                {{ $itemc->last_name }}
                                            </option>
                                        @endif
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-2 "> <button type="submit" class="btn btn-primary"> hinzufügen</button> </div>
                        </div>

                    </form>
                @break
            @endif
        @endforeach

        @if (!empty($list_emp))
            <hr>
            <div class=" bg-light">
                <div class="row border m-2 p-2">
                    <b class="col-6 "> Mitglieder </b>

                    <b class="col-2 "> </b>
                </div>
                @foreach ($list_emp as $item)
                    <div class="row border m-2 p-2 bg-white">
                        <div class="col-6 "> {{ $item->employee->get_department->name }} Abteilung -
                            {{ $item->employee->first_name }}
                            {{ $item->employee->last_name }} </div>

                        <div class="col-2 ">
                            @if ($item->fk_employee_id == $item->fk_owner_employee_id)
                                <h5>Besitzer</h5>
                            @else
                                @if (Auth::user()->get_employee->employee_id == $item->fk_owner_employee_id)
                                    <button type="button" title="Löschen"
                                        class="btn btn-sm  btn-outline-danger emp_delete_btn small "
                                        data-bs-toggle="modal" data-bs-target="#emp-del"
                                        data-id="{{ $item->fk_employee_id }}">
                                        <i class="bi bi-trash "></i> Löschen
                                    </button>
                                @else
                                    <h6>Mitglieder</h6>
                                @endif
                            @endif

                        </div>

                    </div>
                @endforeach

            </div>
        @else
            <div class="row">
                <h6>Keine Daten </h6>
            </div>
        @endif

    </div>

    <script>
        $(document).on('click', '.emp_delete_btn', function() {
                let id = $(this).attr('data-id');
                $('#emp_id').val(id);
                // document.getElementById('ptitle').innerHTML = "You pressed ";
            }

        );
    </script>
@endsection