@extends('layouts.app')
@section('content')

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<div class="content-wrapper">

    <div class="page-header">
        <h3 class="page-title">Host Dashboard</h3>
    </div>

    <!-- ================= KPI CARDS ================= -->
    <div class="row dashboardCard">
        
        <div class="col-md-3 grid-margin stretch-card">
            <a class="w-100" href="{{route('host.listings.all')}}">
                <div class="card bg-card-2 text-white">
                    <div class="card-body">
                        <h4>Featured Listings</h4>
                        <h2>{{ $featuredListings }}</h2>
                    </div>
                </div>
            </a>
        </div>
       
        <div class="col-md-3 grid-margin stretch-card">
            <a class="w-100" href="{{route('host.inquiry.list')}}">
                <div class="card bg-card-2 text-white">
                    <div class="card-body">
                        <h4>Total Inquiry</h4>
                        <h2>{{ $totalInquiry }}</h2>
                    </div>
                </div>
            </a>
        </div>

        <div class="col-md-3 grid-margin stretch-card">
            <a class="w-100" href="{{route('host.listings.all')}}">
                <div class="card bg-card-2 text-white">
                    <div class="card-body">
                        <h4>Total Listing</h4>
                        <h2>{{ $totalListings }}</h2>
                    </div>
                </div>
            </a>
        </div>

        <div  class="col-md-3 grid-margin stretch-card">
            <a class="w-100" href="{{route('host.package')}}">
                <div class="card bg-card-2 text-white">
                    <div class="card-body">
                        <h4>Active Subscriptions</h4>
                        <h2>{{ $activeSubscriptions }}</h2>
                    </div>
                </div>
            </a>
        </div>

    </div>

    <!-- ================= TABLES ================= -->
    <div class="row">

        <!-- Listing Table -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    Listing Table
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="listingTable" class="table table-striped table-bordered">
                            <thead class="table-light">
                                <tr>
                                    <th>ID</th>
                                    <th>Title</th>
                                    <th>Category</th>
                                    <th>Price</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($listings as $listing)
                                <tr>
                                    <td>{{ $listing->id }}</td>
                                    <td>{{ $listing->title }}</td>
                                    <td>{{ $listing->category->name ?? '-' }}</td>
                                    <td>{{ config('app.currency_symbol') }} {{ number_format($listing->price) }}</td>
                                    <td>
                                        <span class="badge
                                            @if($listing->status == 'active') bg-success
                                            @elseif($listing->status == 'pending') bg-warning
                                            @elseif($listing->status == 'sold') bg-danger
                                            @else bg-secondary
                                            @endif">
                                            {{ ucfirst($listing->status) }}
                                        </span>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="5" class="text-center">No listings found</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Inquiry Table -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header bg-success text-white">
                    Inquiry Table
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="inquiryTable" class="table table-striped table-bordered">
                            <thead class="table-light">
                                <tr>
                                    <th>ID</th>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Phone</th>
                                    <th>Date</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($inquiries as $inquiry)
                                <tr>
                                    <td>{{ $inquiry->id }}</td>
                                    <td>{{ $inquiry->name }}</td>
                                    <td>{{ $inquiry->email }}</td>
                                    <td>{{ $inquiry->phone_no }}</td>
                                    <td>{{ $inquiry->created_at->format('Y-m-d') }}</td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="5" class="text-center">No inquiries found</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!-- ================= CHARTS ================= -->
    <div class="row mt-4">

        <!-- Listing Statistics -->
        <div class="col-md-6 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Listing Statistics</h4>
                    <canvas id="listing-chart" class="mt-4"></canvas>
                </div>
            </div>
        </div>

        <!-- Inquiry Statistics -->
        <div class="col-md-6 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Inquiry Statistics</h4>
                    <div class="d-flex justify-content-center">
                        <canvas id="inquiry-chart" width="250" height="250"></canvas>
                    </div>
                </div>
            </div>
        </div>

    </div>

</div>

<!-- ================= CHART SCRIPT ================= -->
<script>
document.addEventListener("DOMContentLoaded", function () {

    new Chart(document.getElementById('listing-chart'), {
        type: 'bar',
        data: {
            labels: @json($months),
            datasets: [
                {
                    label: 'Active',
                    data: @json($activeData),
                    backgroundColor: '#4B49AC'
                },
                {
                    label: 'Pending',
                    data: @json($pendingData),
                    backgroundColor: '#FFC100'
                },
                {
                    label: 'Sold',
                    data: @json($soldData),
                    backgroundColor: '#FF4747'
                }
            ]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true,
                    min: 0,
                    max: 20,
                    ticks: {
                        stepSize: 2
                    }
                }
            },
            plugins: {
                legend: {
                    position: 'top'
                }
            }
        }
    });

    // Inquiry Doughnut Chart
    new Chart(document.getElementById('inquiry-chart'), {
        type: 'doughnut',
        data: {
            labels: ['New', 'Responded', 'Closed'],
            datasets: [{
                data: [{{ $newInquiry }}, {{ $responded }}, {{ $closed }}],
                backgroundColor: ['#36A2EB','#4BC0C0','#FF6384']
            }]
        },
        options: {
            responsive: true,
            cutout: '65%',
            plugins: { legend: { display: true } }
        }
    });

});
</script>

<!-- ================= DATATABLE SCRIPT ================= -->
<script>
$(document).ready(function () {
    $('#listingTable').DataTable({
        pageLength: 5,
        responsive: true
    });

    $('#inquiryTable').DataTable({
        pageLength: 5,
        responsive: true
    });
});
</script>

@endsection