@extends('layouts.index')
@section('contacts_active')
    nav-item active
@endsection
@section('page_title')
    Contacts
@endsection
@section('headaddons')
    <link href="{{ asset('assets/vendor/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet">
@endsection
@section('pg_name')
    Contact Requests
@endsection
@section('content')
    <!-- Content Row -->

    @if (count($errors) > 0)
        <div class="col-12" id="div__Error">
            @foreach ($errors->all() as $error)
                <div class="zoomIn col-12 alert alert-danger">
                    {{ $error }}
                </div>
            @endforeach
        </div>

        <script>
            let messageeDiv = document.getElementById('div__Error')
            setInterval(function() {
                messageeDiv.classList.add('zoomOut');
                setTimeout(function() {
                    messageeDiv.style.display = "none";
                }, 400);
            }, 2000);
        </script>
    @endif

    <!-- Tabs Section -->
<div class="container-fluid">


<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#contacts" onclick="markAsSeen('contacts')">
            Contacts 
            <span 
                class="badge {{ $unseenContactsCount > 0 ? 'badge-success' : 'badge-danger' }}" 
                id="unseenContacts">
                {{ $unseenContactsCount }}
            </span>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#projects" onclick="markAsSeen('projects')">
            Projects 
            <span 
                class="badge {{ $unseenProjectsCount > 0 ? 'badge-success' : 'badge-danger' }}" 
                id="unseenProjects">
                {{ $unseenProjectsCount }}
            </span>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#units" onclick="markAsSeen('units')">
            Units 
            <span 
                class="badge {{ $unseenUnitsCount > 0 ? 'badge-success' : 'badge-danger' }}" 
                id="unseenUnits">
                {{ $unseenUnitsCount }}
            </span>
        </a>
    </li>
</ul>



<div class="tab-content" id="myTabContent">
        <!-- Contacts Tab -->
        <div class="tab-pane fade show active" id="contacts" role="tabpanel" aria-labelledby="contacts-tab">
            <div class="col-xl-12 col-lg-12 = mt-4">
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">Contacts</h6>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered" id="dataTableContacts" width="100%" cellspacing="0">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Phone</th>
                                        <th>Email</th>
                                        <th>City</th>
                                        <th>Message</th>
                                        <th>Time</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($allContacts as $contact)
                                        <tr>
                                            <td>{{ $contact->name }}</td>
                                            <td>{{ $contact->phone }}</td>
                                            <td>{{ $contact->email }}</td>
                                            <td>{{ $contact->city }}</td>
                                            <td>{{ $contact->message }}</td>
                                            <td>{{ $contact->created_at }}</td>
                                            <td><button id='{{ $contact->id }}' data-message="{{ $contact->message }}"
                                                    onclick="showMessage({{ $contact->id }})" data-toggle="modal"
                                                    data-target="#questionModal"
                                                    class="p-2 btn btn-success">Show Message</button></td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Projects Tab -->
        <div class="tab-pane fade" id="projects" role="tabpanel" aria-labelledby="projects-tab">
            <div class="col-xl-12 col-lg-12 = mt-4">
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">Projects</h6>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered" id="dataTableProjects" width="100%" cellspacing="0">
                                <thead>
                                    <tr>
                                        <th>Client Name</th>
                                        <th>Phone Number</th>
                                        <th>Project ID</th>
                                        <th>Time</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($allProjects as $project)
                                        <tr>
                                            <td>{{ $project->client_name }}</td>
                                            <td>{{ $project->phone_number }}</td>
                                            <td><a href="http://localhost:5173/projectDetails/{{$project->project_id }}">{{ $project->phone_number }}</a></td>
                                            <td>{{ $project->created_at }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Units Tab -->
        <div class="tab-pane fade" id="units" role="tabpanel" aria-labelledby="units-tab">
            <div class="col-xl-12 col-lg-12 = mt-4">
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">Units</h6>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered" id="dataTableUnits" width="100%" cellspacing="0">
                                <thead>
                                    <tr>
                                        <th>Client Name</th>
                                        <th>Phone Number</th>
                                        <th>Unit ID</th>
                                        <th>Time</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($allUnits as $unit)
                                        <tr>
                                            <td>{{ $unit->clientName }}</td>
                                            <td>{{ $unit->phoneNumber }}</td>
                                            <td>{{ $unit->unitId }}</td>
                                            <td>{{ $unit->created_at }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Message Modal -->
    <div class="modal fade" id="questionModal" tabindex="-1" role="dialog" aria-labelledby="questionModalTitle"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Message</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div id="modalBodymessage" class="modal-body"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>

    <script>
        function showMessage(e) {
            let message = document.getElementById(e).dataset.message;
            document.getElementById('modalBodymessage').innerHTML = message;
        }
    </script>





<script>
    function markAsSeen(type) {
        fetch(`/mark-as-seen/${type}`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json',
            },
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                let badge = null;

                if (type === 'contacts') {
                    badge = document.getElementById('unseenContacts');
                } else if (type === 'projects') {
                    badge = document.getElementById('unseenProjects');
                } else if (type === 'units') {
                    badge = document.getElementById('unseenUnits');
                }

                if (badge) {
                    badge.innerText = 0;
                    badge.classList.remove('badge-danger');
                    badge.classList.add('badge-success');
                }
            }
        })
        .catch(error => console.error('Error:', error));
    }
</script>


@endsection