@include('partials.header') <!-- Include the header -->
<!-- Include necessary libraries -->
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@5.5.55/css/materialdesignicons.min.css">
<main id="ts-main">



    <br>
    <br>

    <br>
    <br>

    <br>
    <br>

    <div class="container">


        <div class="row" dir="rtl">

            <style>
                .form-control {
                    border-radius: 10px;
                    padding: 12px;
                    font-size: 1rem;
                    border: 1px solid #ddd;
                    transition: all 0.3s ease-in-out;
                }

                .form-control:focus {
                    border-color: #b45353;
                    box-shadow: 0 0 8px rgba(83, 123, 180, 0.3);
                }

                .btn-primary {

                    border: none;
                    padding: 12px;
                    font-size: 1.1rem;
                }

                .btn-primary:hover {
                    background-color: #272525;
                }
            </style>
            <div class="col-md-12 mb-4">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <h5 class="card-title text-center">المؤشرات العقارية</h5>
                        <form id="propertySearchForm" method="POST" action="{{ route('auctionviewData') }}">
                            @csrf
                            <div class="d-flex justify-content-center align-items-center vh-100">
                                <div class="col-md-8 p-4 border rounded shadow-lg bg-light">
                                    <h4 class="text-center mb-4 text-primary">🔹 تصنيف العقارات 🔹</h4>

                                    <div class="row g-3">
                                        <div class="col-md-6">
                                            <label for="propertyType" class="form-label fw-bold">نوع العقار</label>
                                            <select class="form-control rounded-pill" name="property_type_id"
                                                id="propertyType">
                                                <option value="">اختر نوع العقار</option>
                                                @foreach (App\Models\Lookups\PropertyType::all() as $data)
                                                    <option value="{{ $data->id }}">{{ $data->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col-md-6">
                                            <label for="region" class="form-label fw-bold">اختر المنطقة</label>
                                            <select class="form-control rounded-pill" name="region_id" id="region">
                                                <option value="">اختر منطقة</option>
                                                @foreach (App\Models\Lookups\Region::all() as $data)
                                                    <option value="{{ $data->id }}">{{ $data->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col-md-6">
                                            <label for="periodFrom" class="form-label fw-bold">الفترة من</label>
                                            <input type="date" class="form-control rounded-pill" id="periodFrom"
                                                name="start_date">
                                        </div>

                                        <div class="col-md-6">
                                            <label for="periodTo" class="form-label fw-bold">إلى</label>
                                            <input type="date" class="form-control rounded-pill" id="periodTo"
                                                name="end_date">
                                        </div>
                                    </div>

                                    <div class="text-center mt-4">
                                        <button type="submit" class="btn btn-primary w-50 rounded-pill fw-bold">🔍
                                            بحث</button>
                                    </div>
                                </div>
                            </div>




                    </div>

                    </form>
                </div>
            </div>
        </div>
        <div class="row">
            <!-- Sales Table -->
            <div class="col-md-6">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <h5 class="card-title text-center">نشاط المناطق في المزادات العقارية</h5>

                        <!-- Scrollable Table Container -->
                        <div class="row">
                            <!-- Scrollable Table -->

                            <div style="max-height: 400px; overflow-y: auto; padding-right: 10px;">
                                @if (!empty($property) && count($property) > 0)
                                    @php
                                        $groupedByRegion = collect($property)->groupBy('region.name');
                                        $regionNames = $groupedByRegion->keys();
                                        $auctionCounts = $groupedByRegion->map(
                                            fn($props) => $props->pluck('auction.id')->unique()->count(),
                                        );
                                    @endphp

                                    <table class="table table-striped table-bordered text-center">
                                        <thead class="table-primary">
                                            <tr>
                                                <th>المنطقة</th>
                                                <th>عدد المزادات</th>
                                                <th>عدد أنواع المزادات</th>
                                                <th>عدد العقارات</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($groupedByRegion as $regionName => $properties)
                                                <tr>
                                                    <td>{{ $regionName ?? 'غير محدد' }}</td>
                                                    <td>{{ $properties->pluck('auction.id')->unique()->count() }}</td>
                                                    <td>{{ $properties->pluck('auction.auctionType.id')->unique()->count() }}
                                                    </td>
                                                    <td>{{ $properties->count() }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                @else
                                    <div class="alert alert-warning text-center">
                                        لا توجد بيانات متاحة لعرضها.
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="col-md-6">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <div id="regionChart"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Chart Container -->

        <!-- Include ApexCharts -->

        @php
            $auctionCounts = collect([]);
            $regionNames = collect([]);
        @endphp

        @if (!empty($property) && count($property) > 0)
            @php
                $groupedByRegion = collect($property)->groupBy('region.name');
                $regionNames = $groupedByRegion->keys();
                $auctionCounts = $groupedByRegion->map(fn($props) => $props->pluck('auction.id')->unique()->count());
            @endphp
        @endif

        <script>
            document.addEventListener("DOMContentLoaded", function() {
                var options = {
                    series: [{
                        name: 'عدد المزادات',
                        data: {!! json_encode($auctionCounts->values()) !!}
                    }],
                    chart: {
                        type: 'bar',
                        height: 400
                    },
                    plotOptions: {
                        bar: {
                            horizontal: false,
                            columnWidth: '55%',
                            endingShape: 'rounded'
                        }
                    },
                    dataLabels: {
                        enabled: false
                    },
                    xaxis: {
                        categories: {!! json_encode($regionNames) !!}
                    },
                    fill: {
                        opacity: 1
                    },
                    colors: ['#537bb4']
                };

                var chart = new ApexCharts(document.querySelector("#regionChart"), options);
                chart.render();
            });
        </script>

    </div>
    </div>
    </div>

    <div class="row">
        <!-- Sales Table -->
        <div class="col-md-6">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h5 class="card-title text-center">إجمالي المبيعات حسب المنطقة</h5>

                    <div style="max-height: 400px; overflow-y: auto; padding-right: 10px;">
                        @if (!empty($property) && count($property) > 0)
                            @php
                                $groupedByRegion = collect($property)->groupBy('region.name');
                                $regionNames = $groupedByRegion->keys();
                                $salesData = $groupedByRegion->map(
                                    fn($props) => $props->sum(fn($item) => (float) ($item['sales_price'] ?? 0)),
                                );
                            @endphp

                            <table class="table table-striped table-bordered text-center">
                                <thead class="table-primary">
                                    <tr>
                                        <th>المنطقة</th>
                                        <th>إجمالي المبيعات</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($groupedByRegion as $regionName => $properties)
                                        <tr>
                                            <td>{{ $regionName ?? 'غير محدد' }}</td>
                                            <td class="sales-value" data-region="{{ $regionName }}">
                                                {{ number_format($properties->sum(fn($item) => (float) ($item['sales_price'] ?? 0)), 2) }}
                                                <img style="width: 5%" src="{{ asset('img/ry.png') }}">
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        @else
                            <div class="alert alert-warning text-center">
                                لا توجد بيانات متاحة لعرضها.
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- Chart Container -->
        <div class="col-md-6">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h5 class="card-title text-center">تحديث لحظي لإجمالي المبيعات حسب المنطقة</h5>
                    <div id="salesChart"></div>
                </div>
            </div>
        </div>
    </div>

    @php
        $salesData = collect([]);
        $regionNames = collect([]);
    @endphp

    @if (!empty($property) && count($property) > 0)
        @php
            $groupedByRegion = collect($property)->groupBy('region.name');
            $regionNames = $groupedByRegion->keys();
            $salesData = $groupedByRegion->map(fn($props) => $props->sum('sales'));
        @endphp
    @endif


    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var salesData = {!! json_encode($salesData->values()) !!};
            var regionNames = {!! json_encode($regionNames) !!};

            var options = {
                series: [{
                        name: "إجمالي المبيعات",
                        type: "column",
                        data: salesData
                    },
                    {
                        name: "متوسط المبيعات",
                        type: "line",
                        data: salesData.map(value => value / 2) // Simulated average sales data
                    },
                    {
                        name: "النمو التراكمي",
                        type: "area",
                        data: salesData.map((sum => value => sum += value)(0)) // Cumulative sales
                    }
                ],
                chart: {
                    type: "line",
                    height: 400,
                    stacked: false,
                    animations: {
                        enabled: true,
                        easing: "linear",
                        dynamicAnimation: {
                            speed: 2000
                        }
                    },
                    toolbar: {
                        show: false
                    }
                },
                stroke: {
                    width: [0, 4, 2],
                    curve: "smooth"
                },
                xaxis: {
                    categories: regionNames,
                    title: {
                        text: "المنطقة"
                    }
                },
                yaxis: {
                    title: {
                        text: "المبيعات"
                    }
                },
                colors: ["#28a745", "#ff5733", "#007bff"],
                dataLabels: {
                    enabled: false
                },
                markers: {
                    size: 5
                },
                tooltip: {
                    shared: true,
                    intersect: false
                }
            };

            var chart = new ApexCharts(document.querySelector("#salesChart"), options);
            chart.render();

            // Simulating real-time data update every 5 seconds from the table
            setInterval(function() {
                var newSalesData = [];
                document.querySelectorAll('.sales-value').forEach(cell => {
                    newSalesData.push(parseFloat(cell.innerText.replace(/,/g, '')) || 0);
                });

                chart.updateSeries([{
                        data: newSalesData
                    },
                    {
                        data: newSalesData.map(value => value / 2)
                    },
                    {
                        data: newSalesData.map((sum => value => sum += value)(0))
                    }
                ]);
            }, 5000);
        });
    </script>


    @php
        $platformAuctionCounts = collect([]);

        if (!empty($property) && count($property) > 0) {
            $groupedByPlatform = collect($property)->groupBy('auction.auctionPlatform');
            $platformAuctionCounts = $groupedByPlatform->map(fn($auctions) => $auctions->count());
        }
    @endphp

    <div class="row">
        <div class="col-md-6 mb-4">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h5 class="card-title text-center">المزادات حسب المنصة</h5>

                    <!-- Include Chart.js -->
                    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

                    <!-- Scrollable Table Container -->
                    <div style="max-height: 400px; overflow-y: auto; padding-right: 10px;">
                        @if ($platformAuctionCounts->isNotEmpty())
                            <table class="table table-striped table-bordered text-center">
                                <thead class="table-primary">
                                    <tr>
                                        <th>اسم المنصة</th>
                                        <th>عدد المزادات</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($platformAuctionCounts as $platformName => $count)
                                        <tr>
                                            <td>{{ $platformName ?? 'غير محدد' }}</td>
                                            <td>{{ $count }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        @else
                            <div class="alert alert-warning text-center">
                                لا توجد بيانات متاحة لعرضها.
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card shadow-sm">
                <div class="card-body">

                    <canvas id="auctionChart"></canvas>
                </div>
            </div>
        </div>
    </div>
    <!-- Chart Container -->


    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Prepare data for Chart.js
            const platformNames = @json($platformAuctionCounts->keys());
            const auctionCounts = @json($platformAuctionCounts->values());

            // Generate dynamic colors
            const colors = platformNames.map((_, i) => `hsl(${i * 60}, 70%, 60%)`);

            const ctx = document.getElementById("auctionChart").getContext("2d");

            new Chart(ctx, {
                type: "polarArea",
                data: {
                    labels: platformNames,
                    datasets: [{
                        label: "عدد المزادات",
                        data: auctionCounts,
                        backgroundColor: colors,
                        borderColor: "#ffffff",
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: "top",
                            labels: {
                                color: "#000",
                                font: {
                                    size: 14
                                }
                            }
                        }
                    }
                }
            });
        });
    </script>







    </div>




</main>

@include('partials.footer') <!--add  Include the footer -->