@extends('layout.app')

@section('title', 'Projects')

@section('content')
    <style>
        div[data-role="btn-follow"] i {
            transition: 0.2s ease-in-out;
        }

        div[data-role="btn-follow"]:hover i {
            color: #d01212;
        }

        div[data-role="btn-follow"] i[data-follow] {
            display: none;
            color: #d01212;
        }

        div[data-role="btn-follow"].followed i[data-unfollow] {
            display: none;
        }

        div[data-role="btn-follow"].followed i[data-follow] {
            display: block;
        }
    </style>

    <div class="container-fluid mt-5">
        <div class="row my-2">
            <div class="col-12 mb-4">
                <div class="block">
                    <div>
                        <div class="d-flex justify-content-between align-items-center">
                            <h4 class="page-title mb-0">Projects</h4>
                            <button class="btn btn-primary">Create</button>
                        </div>
                        <div class="d-flex justify-content-end mt-4">
                            <div class="input-group mx-1" style="width: 200px;">
                                <input type="text" class="form-control" placeholder="Search by name">
                                <span class="input-group-text"><i class="bi bi-search"></i></span>
                            </div>
                            <select class="form-select mx-1" style="width: 150px;">
                                <option>Status</option>
                                <option>Open</option>
                                <option>Building</option>
                                <option>Completed</option>
                            </select>
                            {{--                            <select class="form-select mx-1" style="width: 150px;">--}}
                            {{--                                <option>Project type</option>--}}
                            {{--                                <option value="">Select option</option>--}}
                            {{--                                <option value="apartment">Apartment building</option>--}}
                            {{--                                <option value="villa">Ground villa</option>--}}
                            {{--                            </select>--}}
                        </div>

                        <table class="table table-hover mt-5" id="table-data">
                            <thead>
                            <tr>
                                <th scope="col">ID</th>
                                <th scope="col">Name</th>
                                {{--                                <th scope="col">Project type</th>--}}
                                <th scope="col">Project classification</th>
                                <th scope="col">Address</th>
                                <th scope="col">Inventory</th>
                                <th scope="col">Follow</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($projects as $project)
                                <tr class="cursor-pointer"
                                    data-url-click="{{ url('/projects/' . $project->id) }}">
                                    <td>{{ $project->id }}</td>
                                    <td>{{ $project->name }}</td>
                                    {{--                                    <td>{{ $project->type }}</td>--}}
                                    <td>{{ $project->classification }}</td>
                                    <td>{{ $project->address }}</td>
                                    <td class="fw-bold"><span
                                            style="color: #14d79d">{{ $project->sold_units }}</span>/<span>{{ $project->number_of_units }}</span>
                                    </td>
                                    <td>
                                        <div
                                            class="fs-18px d-flex align-items-center h-full {{ $project->is_following ? 'followed' : '' }}"
                                            data-role="btn-follow"
                                            data-project-id="{{ $project->id }}">
                                            <i class="bi bi-heart" data-unfollow></i>
                                            <i class="bi bi-heart-fill" data-follow></i>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>

                        <nav aria-label="Page navigation example" class="d-flex justify-content-end">
                            <ul class="pagination">
                                <li class="page-item">
                                    <a class="page-link" href="#" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                <li class="page-item"><a class="page-link" href="#">1</a></li>
                                <li class="page-item"><a class="page-link" href="#">2</a></li>
                                <li class="page-item"><a class="page-link" href="#">3</a></li>
                                <li class="page-item">
                                    <a class="page-link" href="#" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div> <!-- end card-->
            </div> <!-- end col-->
        </div>
        <!-- end row-->

    </div> <!-- container -->

@endsection

@section('script')
    <script type="text/javascript">
        const listBtnFollow = document.querySelectorAll('div[data-role="btn-follow"]');
        listBtnFollow.forEach(el => {
            el.addEventListener('click', (event) => {
                event.stopPropagation();

                const id = el.getAttribute('data-project-id');
                const isFollowed = el.classList.contains('followed');

                fetch(`/api/admin/projects/${id}`, {
                    method: 'PUT',
                    headers: {
                        "Content-Type": "application/json"
                    },
                    body: JSON.stringify({is_following: isFollowed ? 0 : 1})
                }).then(res => res.json()).then((data) => {
                    if (isFollowed) {
                        el.classList.remove('followed');
                    } else {
                        el.classList.add('followed');
                    }
                })
            })
        })
    </script>
@endsection