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


    <!-- main content -->
    {{-- delete modal --}}
    <div class="modal fade modal-dialog-scrollable modal-lg" id="delete-item" 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('Project.delete') }}" method="POST" class="needs-validation" novalidate>
                    @csrf

                    <input id="id" name="id" value="" hidden>
                    <div class="modal-header">
                        <h5 class="modal-title " id="staticBackdropLabel"> Projekt 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 Projekt 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>
    <div class="row">
        <div class="col">
            @include('layouts.breadcrumb', ['crumbs' => [ucfirst(Request::segment(1)), ucfirst(Request::segment(2))]])
        </div>
        @if (Auth::user()->get_employee->is_mgt)
            <div class="col float-end text-end">

                <a href="{{ route('Project.new') }}" class="btn btn-success shadow">
                    <i class="bi bi-plus-square"></i> neue
                </a>

            </div>
        @endif
    </div>
    <br>
    <div class="p-2 bg-white mb-5 rounded">
        @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

        <br>

        <div class="row">

            <div class="col">
                <a href="{{ route('Projects') }}" class="text-decoration-none text-black">
                    <div class=" p-2 border rounded ">
                        <div class="card-body">
                            <div class="col-12">
                                <h4>{{ $count_all }}</h4>
                                <h6 class="text-secondary ">Alle</h6>
                            </div>
                            <div class="col-12 bg-info border-2  rounded " style="height: 4px;">
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col">
                <a href=" /projekte/status/1" class="text-decoration-none text-black">
                    <div class="p-2 border rounded">
                        <div class="card-body">
                            <div class="col-12">
                                <h4>{{ $count_new }}</h4>
                                <h6 class="text-secondary ">Unbearbeitet</h6>
                            </div>
                            <div class="col-12 bg-secondary border-2  rounded " style="height: 4px;">
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col">
                <a href=" /projekte/status/2" class="text-decoration-none text-black">
                    <div class="p-2 border rounded">
                        <div class="card-body">
                            <div class="col-12">
                                <h4>{{ $count_inpro }}</h4>
                                <h6 class="text-secondary ">In bearabeitung</h6>
                            </div>
                            <div class="col-12 bg-primary border-2  rounded " style="height: 4px;">
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col"> <a href=" /projekte/status/3" class="text-decoration-none text-black">
                    <div class="p-2 border rounded">
                        <div class="card-body">
                            <div class="col-12">
                                <h4>{{ $count_closed }}</h4>
                                <h6 class="text-secondary ">wartet auf Versand</h6>
                            </div>
                            <div class="col-12 bg-info border-2  rounded " style="height: 4px;">
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col">
                <a href=" /projekte/status/4" class="text-decoration-none text-black">
                    <div class="p-2 border rounded">
                        <div class="card-body">
                            <div class="col-12">
                                <h4>{{ $count_com }}</h4>
                                <h6 class="text-secondary ">Versendet</h6>
                            </div>
                            <div class="col-12 bg-success border-2  rounded " style="height: 4px;">
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col border-start  border-dark"> <a href=" /projekte/status/5"
                    class="text-decoration-none text-black">
                    <div class="p-2 border rounded">
                        <div class="card-body">
                            <div class="col-12">
                                <h4>{{ $count_can }}</h4>
                                <h6 class="text-secondary ">Abgesagt</h6>
                            </div>
                            <div class="col-12 bg-danger border-2  rounded " style="height: 4px;">
                            </div>
                        </div>
                    </div>
                </a>
            </div>



        </div>
        <hr>
        <form action="{{ route('Projects') }}" method="get">

            <div class="row mt-1 mb-2">

                <div class="col-3 text-center">
                </div>
                <div class="col-6 text-center">
                    <div class="input-group   ">
                        <input type="text" class="form-control  rounded-0"
                            placeholder="suche nach Bauvorhaben Name oder Adresse" id="name" name="name">
                        <div class="input-group-append   ">
                            <button class="btn  text-white bg-primary rounded-0 " type="submit"> <i
                                    class="bi bi-search"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col-3 text-center">
                </div>

            </div>
        </form>

        <div class="">
            <div class=" ">
                <table class="table table-hover no-wrap contact-list" data-page-size="5">
                    <thead>
                        <tr class="text-info fs-6">
                            <th class="col">ID</th>
                            <th class="col">Service

                            </th>
                            <th class="col-3">Bauvorhaben

                            </th>


                            <th class="col-2">Kunde

                            </th>
                            <th class="col">Deadline


                            </th>
                            <th class="col">Status

                            </th>
                            <th class="col">Abteilung

                            </th>
                            @if (Auth::user()->get_employee->is_mgt)
                                <th class="col">Action

                                </th>
                            @endif
                        </tr>
                    </thead>
                    <tbody id="clients-td-container" class="">
                        <!--ajax content here-->
                        <!--each row-->
                        @if ($projects->count() > 0)
                            @foreach ($projects as $item)
                                <tr id="" class="fs-6">
                                    <td>
                                        {{ $item->project_id }}
                                    </td>
                                    <td>
                                        {{ $item->get_service->name }}
                                    </td>

                                    <td>
                                        <a href="/projekt/{{ $item->project_id }}"
                                            target="_blank">{{ $item->construction_project_name }}</a>
                                    </td>

                                    <td>

                                        @if (!is_null($item->get_customer))
                                            {{ $item->get_customer->name }}
                                        @endif

                                    </td>
                                    <td>
                                        {{ date('d.m.Y', strtotime($item->project_deadline)) }}
                                    </td>
                                    <td>
                                        <div class="btn btn-sm btn-{{ $item->get_status_in_company->color }}">
                                            {{ $item->get_status_in_company->name }}
                                        </div>
                                    </td>
                                    <td>
                                        <a>
                                            {{ $item->get_current_department->name }}
                                            {{-- {{ count($item->project_areas) }} --}}
                                        </a>
                                    </td>
                                    @if (Auth::user()->get_employee->is_mgt)
                                        <td class="" id="">
                                            <!--action button-->
                                            <span class="list-table-action dropdown font-size-inherit">
                                                <!--delete-->
                                                <button type="button" title="Löschen"
                                                    class="btn btn-sm btn-outline-danger delete_btn"
                                                    data-bs-toggle="modal" data-bs-target="#delete-item"
                                                    data-id="{{ $item->project_id }}">
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                                <!--edit-->
                                                <a href="/projekt/bearbeiten/{{ $item->project_id }}" type="button"
                                                    target="_blank" title="Bearbeiten"
                                                    class="btn btn-sm btn-outline-success">
                                                    <i class="bi bi-pencil-square"></i>
                                                </a>

                                                <a href="/projekt/{{ $item->project_id }}" title="Anzeigen"
                                                    target="_blank" class="btn btn-sm btn-outline-primary">
                                                    <i class="bi bi-box-arrow-up-right"></i>
                                                </a>


                                            </span>
                                            <!--action button-->

                                        </td>
                                    @endif
                                </tr>
                                <!--each row-->
                            @endforeach
                        @else
                            <tr>
                                <td class=" text-center" colspan="100%">
                                    <h6 class=" text-center ">Keine Daten</h6>
                                </td>
                            </tr>
                        @endif
                    </tbody>

                </table>
                <br>
                <div class="d-flex justify-content-center pagination pagination-lg text-dark">
                    {!! $projects->links() !!}
                </div>
            </div>
        </div>


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

        );
    </script>
    <script>
        function editItem(id) {
            $.get('/crm/kunden/' + id, function(item) {
                $("#id-edit").val(item.customer_id);
                $("#customer_category_id-edit").val(item.fk_customer_category_id);
                $("#name-edit").val(item.name);
                $("#address-edit").val(item.address);
                $("#tel-edit").val(item.tel);
                $("#mobile-edit").val(item.mobile);
                $("#fax-edit").val(item.fax);
                $("#email-edit").val(item.email);
                $("#website-edit").val(item.website);
                $("#edit-modal").modal('toggle');
            })
        }
    </script>
@endsection