@extends('layouts.admin')
@section('content')
    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between bg-galaxy-transparent">
                <h4 class="mb-sm-0">Dashboard</h4>

                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);">TravelBlzr</a></li>
                        <li class="breadcrumb-item active">Dashboard</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <!-- end page title -->
    <div class="row">
        <div class="col-lg-4 col-md-6">
            <!-- card -->
            <div class="card card-animate">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1 overflow-hidden">
                            <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Total Users</p>
                        </div>
                        <!-- <div class="flex-shrink-0">
                                            <h5 class="text-success fs-14 mb-0">
                                                <i class="ri-arrow-right-up-line fs-13 align-middle"></i> +16.24 %
                                            </h5>
                                        </div> -->
                    </div>
                    <div class="d-flex align-items-end justify-content-between mt-4">
                        <div>
                            <h4 class="fs-22 fw-semibold ff-secondary mb-4">
                                <span class="counter-value" data-target="{{ $users }}">{{ $users }}</span>
                            </h4>
                            <a href="{{ route('admin.users') }}" class="text-decoration-underline">View all</a>
                        </div>
                        <div class="avatar-sm flex-shrink-0">
                                    <span class="avatar-title bg-success-subtle rounded fs-3">
                                        <i class="bx bx-user-circle text-success"></i>
                                    </span>
                        </div>
                    </div>
                </div>
                <!-- end card body -->
            </div>
            <!-- end card -->
        </div>
        <!-- end col -->
        <div class="col-lg-4 col-md-6">
            <!-- card -->
            <div class="card card-animate">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1 overflow-hidden">
                            <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Journey</p>
                        </div>
                        <!-- <div class="flex-shrink-0">
                                            <h5 class="text-danger fs-14 mb-0">
                                                <i class="ri-arrow-right-down-line fs-13 align-middle"></i> -3.57 %
                                            </h5>
                                        </div> -->
                    </div>
                    <div class="d-flex align-items-end justify-content-between mt-4">
                        <div>
                            <h4 class="fs-22 fw-semibold ff-secondary mb-4"><span class="counter-value" data-target="{{ $journey }}">{{ $journey }}</span></h4>
                            <a href="{{ route('admin.journey') }}" class="text-decoration-underline">View all</a>
                        </div>
                        <div class="avatar-sm flex-shrink-0">
                                    <span class="avatar-title bg-info-subtle rounded fs-3">
                                        <i class="bx bx-user-pin text-info"></i>
                                    </span>
                        </div>
                    </div>
                </div>
                <!-- end card body -->
            </div>
            <!-- end card -->
        </div>
        <!-- end col -->
        <div class="col-lg-4 col-md-6">
            <!-- card -->
            <div class="card card-animate">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1 overflow-hidden">
                            <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Posts</p>
                        </div>
                        <!-- <div class="flex-shrink-0">
                                            <h5 class="text-success fs-14 mb-0">
                                                <i class="ri-arrow-right-up-line fs-13 align-middle"></i> +29.08 %
                                            </h5>
                                        </div> -->
                    </div>
                    <div class="d-flex align-items-end justify-content-between mt-4">
                        <div>
                            <h4 class="fs-22 fw-semibold ff-secondary mb-4"><span class="counter-value" data-target="{{ $posts }}">$posts</span></h4>
                            <a href="{{ route('admin.posts') }}" class="text-decoration-underline">View all</a>
                        </div>
                        <div class="avatar-sm flex-shrink-0">
                                    <span class="avatar-title bg-warning-subtle rounded fs-3">
                                        <i class="ri ri-building-line text-warning"></i>
                                    </span>
                        </div>
                    </div>
                </div>
                <!-- end card body -->
            </div>
            <!-- end card -->
        </div>
        <!-- end col -->
       
    </div>

    <div class="row">
       
        <!-- end col -->

       

        <div class="col-lg-8">
            <div class="card card-height-100">
                <div class="card-header align-items-center d-flex">
                    <h4 class="card-title mb-0 flex-grow-1">Users Overview</h4>
                    <div class="flex-shrink-0">
                        <div class="dropdown card-header-dropdown">
                            <a class="text-reset dropdown-btn" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="fw-semibold text-uppercase fs-12">Sort by: </span><span class="text-muted">Current Year<i class="mdi mdi-chevron-down ms-1"></i></span>
                            </a>
                            <div class="dropdown-menu dropdown-menu-end">
                                <a class="dropdown-item" href="#">Today</a>
                                <a class="dropdown-item" href="#">Last Week</a>
                                <a class="dropdown-item" href="#">Last Month</a>
                                <a class="dropdown-item" href="#">Current Year</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end card header -->
                <div class="card-body px-0">
                    <div
                        id="revenue-expenses-chartsdashboard"
                        data-colors='["--vz-success", "--vz-danger"]'
                        data-colors-minimal='["--vz-primary", "--vz-info"]'
                        data-colors-interactive='["--vz-info", "--vz-primary"]'
                        data-colors-galaxy='["--vz-primary", "--vz-secondary"]'
                        data-colors-classic='["--vz-primary", "--vz-secondary"]'
                        dir="ltr"
                    ></div>
                </div>
            </div>
            <!-- end card -->
        </div>
        <!-- end col -->
        
        <div class="col-lg-4">
            <div class="card card-height-100">
                <div class="card-header align-items-center d-flex">
                    <h4 class="card-title mb-0 flex-grow-1">Post Type</h4>
                    <div class="flex-shrink-0">
                        <div class="dropdown card-header-dropdown">
                            <a class="text-reset dropdown-btn" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="fw-semibold text-uppercase fs-12">Sort by: </span><span class="text-muted">Current Year<i class="mdi mdi-chevron-down ms-1"></i></span>
                            </a>
                            <div class="dropdown-menu dropdown-menu-end">
                                <a class="dropdown-item" href="#">Today</a>
                                <a class="dropdown-item" href="#">Last Week</a>
                                <a class="dropdown-item" href="#">Last Month</a>
                                <a class="dropdown-item" href="#">Current Year</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end card header -->
                <div class="card-body px-0">
                    <div
                        id="myPieChart"
                        data-colors='["#00BDE2", "#1F7EDA"]'
                        data-colors-minimal='["#00BDE2", "#1F7EDA"]'
                        data-colors-interactive='["#00BDE2", "#1F7EDA"]'
                        data-colors-galaxy='["#00BDE2", "#1F7EDA"]'
                        data-colors-classic='["#00BDE2", "#1F7EDA"]'
                        
                        dir="ltr"
                    ></div>
                </div>
            </div>
            <!-- end card -->
        </div>
        <!-- end col -->
    </div>
    <!-- end row -->

    <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-header align-items-center d-flex">
                    <h4 class="card-title mb-0 flex-grow-1">Recent Posts</h4>
                    <div class="flex-shrink-0">
                        <div class="dropdown card-header-dropdown">
                            <a class="text-reset dropdown-btn" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="text-muted">02 Nov 2024 to 31 Dec 2024<i class="mdi mdi-chevron-down ms-1"></i></span>
                            </a>
                            <div class="dropdown-menu dropdown-menu-end">
                                <a class="dropdown-item" href="#!">Today</a>
                                <a class="dropdown-item" href="#!">Last Week</a>
                                <a class="dropdown-item" href="#!">Last Month</a>
                                <a class="dropdown-item" href="#!">Current Year</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end card header -->

                <div class="card-body">
                    <div class="table-responsive table-card">
                        <table id="postTable" class="table table-bordered table-hover table-wrap align-middle mb-0">
                            <thead>
                                <tr class="text-uppercase">
                                    <th>Sl No</th>
                                    <th>User</th>
                                    <th>Content</th>
                                    <th>Like</th>
                                    <th>Comment</th>
                                </tr>
                            </thead>
                            <tbody class="list form-check-all">
                
                                <!-- Sample Row 1 -->
                                <tr>
                                    <td>1</td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <img src="https://via.placeholder.com/40" alt="User" class="rounded-circle me-2" width="40" height="40">
                                            <span>John Doe</span>
                                        </div>
                                    </td>
                                    <td>"Amazing content! Keep it up!"</td>
                                    <td>120</td>
                                    <td>8</td>
                                </tr>
                
                                <!-- Sample Row 2 -->
                                <tr>
                                    <td>2</td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <img src="https://via.placeholder.com/40" alt="User" class="rounded-circle me-2" width="40" height="40">
                                            <span>Jane Smith</span>
                                        </div>
                                    </td>
                                    <td>"Loved this challenge!"</td>
                                    <td>89</td>
                                    <td>2</td>
                                    
                                </tr>
                
                                <!-- Sample Row 3 -->
                                <tr>
                                    <td>3</td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <img src="https://via.placeholder.com/40" alt="User" class="rounded-circle me-2" width="40" height="40">
                                            <span>Ali Khan</span>
                                        </div>
                                    </td>
                                    <td>"Could use more detail next time."</td>
                                    <td>54</td>
                                    <td>1</td>
                                    
                                </tr>
                
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- end card body -->
            </div>
            <!-- end card -->
        </div>
        <div class="col-xl-12">
            <div class="card">
                <div class="card-header align-items-center d-flex">
                    <h4 class="card-title mb-0 flex-grow-1">Recent Journey</h4>
                    <div class="flex-shrink-0">
                        <div class="dropdown card-header-dropdown">
                            <a class="text-reset dropdown-btn" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="text-muted">02 Nov 2024 to 31 Dec 2024<i class="mdi mdi-chevron-down ms-1"></i></span>
                            </a>
                            <div class="dropdown-menu dropdown-menu-end">
                                <a class="dropdown-item" href="#">Today</a>
                                <a class="dropdown-item" href="#">Last Week</a>
                                <a class="dropdown-item" href="#">Last Month</a>
                                <a class="dropdown-item" href="#">Current Year</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end card header -->

                <div class="card-body">
                    <div class="table-responsive table-card">
                        <table  id="challengeTable"  class="table table-bordered table-hover table-wrap align-middle mb-0">
                            <thead class="">
                            <tr class="text-uppercase">
                                <th>Sl No</th>
                                <th>User </th>
                                <th>Title</th>
                                <th>Destination</th>
                                <th>Accommodation</th>
                                <!-- <th>Company Name</th> -->
                                <th>Acc. hyperlink</th>
                                <th>Cost</th>
                                <th>Created Date</th>
                                <th class="text-nowrap">Actions</th>
                            </tr>
                        </thead>
                            

                          <tbody class="list form-check-all">
                               
                             @foreach($journeys as $key => $journey)      
                            <tr>

                                <td class="id">{{ $loop->iteration }}</td>
                                <td>{{ $journey->user->first_name ?? '' }} {{ $journey->user->last_name ?? '' }}</td>
                                <td>{{ $journey->title }}</td>
                                <td>{{ $journey->destination }} </td>
                                <td>{{ $journey->accommodation}}</td>
                              
                                <td>
                                    @if(!empty($journey->accommodation_link))
                                        <a href="{{ $journey->accommodation_link }}" target="_blank" class="btn btn-primary">
                                            View 
                                        </a>
                                    @else
                                        <span class="text-muted">No Link Available</span>
                                    @endif
                                </td>
                                <td>AED {{ $journey->total}}</td>

                                <!-- <td>-</td> -->
                                
                                <td>{{ $journey->created_at->format('d M, Y - h:i A') }}</td>  
                                <td>
                                    
                                    <div class="dropdown">
                                        <a href="#" class="btn btn-soft-secondary btn-sm" role="button" id="dropdownMenuLink5" data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="ri-more-2-fill"></i>
                                        </a>

                                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink5"> 
                                            <!-- <li><a class="dropdown-item" href="{{ route('admin.journey.edit', $journey->id) }}">Edit</a></li> -->
                                            <!-- <li><a class="dropdown-item delete-btn" href="#"  data-url="{{ route('admin.journey.destroy', ['id' => $journey->id]) }}" data-id="{{ $journey->id }}" >Delete</a></li> -->
                                            <!-- <li><a class="dropdown-item" href="{{ route('admin.journey.edit', $journey->id) }}">Itinerary</a></li>
                                            <li><a class="dropdown-item" href="{{ route('admin.journey.edit', $journey->id) }}">Checklist</a></li>
                                            <li><a class="dropdown-item" href="{{ route('admin.journey.edit', $journey->id) }}">Cost Break Down</a></li> -->
                                            <li><a class="dropdown-item" href="{{ route('admin.itinerary', $journey->id) }}">Itinerary</a></li>
                                            <li><a class="dropdown-item" href="{{ route('admin.checklist', $journey->id) }}">Checklist</a></li>
                                            <li><a class="dropdown-item" href="{{ route('admin.cost-breakdown', $journey->id) }}">Cost Breakdown</a></li>
                                           
                                            
                                        </ul>
                                    </div>
                                </td>
                                 </tr>
                                @endforeach
                           
                        </tbody>
                            <!-- end tbody -->
                        </table>
                        <!-- end table -->
                    </div>
                    <!-- end table responsive -->
                </div>
                <!-- end card body -->
            </div>
            <!-- end card -->
        </div>
        <!-- end col -->
    </div>
    <!-- end row -->
    <button id="refreshTable" class="btn btn-primary d-none">Refresh Table</button>
@endsection
@section('script')
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
          
            var table = $('#postTable').DataTable();
            $('#refreshTable').on('click', function () {
                table.draw();
            });

            
        });
        
        $(document).ready(function () {
          
            var table = $('#challengeTable').DataTable();
            $('#refreshTable').on('click', function () {
                table.draw();
            });

            
        });
    </script>

    <script>
    function getChartColorsArray(id) {
        const el = document.getElementById(id);
        if (!el) return [];

        const theme = document.documentElement.getAttribute("data-theme");
        const attr = "data-colors" + (theme ? "-" + theme : "");
        let colors = el.getAttribute(attr) || el.getAttribute("data-colors");

        try {
            colors = JSON.parse(colors.replace(/'/g, '"'));
        } catch (e) {
            console.warn("Invalid color format", e);
            return [];
        }

        return colors.map(color => {
            const trimmed = color.trim();
            if (!trimmed.includes(",")) {
                return getComputedStyle(document.documentElement).getPropertyValue(trimmed) || trimmed;
            }
            const [base, alpha] = trimmed.split(",");
            return `rgba(${getComputedStyle(document.documentElement).getPropertyValue(base).trim()},${alpha})`;
        });
    }

    document.addEventListener("DOMContentLoaded", function () {
        const chartColors = getChartColorsArray("revenue-expenses-chartsdashboard");

        const options = {
            series: [
                {
                    name: "Active Customers",
                    data: @json($monthlyStats['users'])
                },
                {
                    name: "Journeys",
                    data: @json($monthlyStats['journeys'])
                },
            ],
            chart: {
                height: 290,
                type: "area",
                toolbar: { show: false }
            },
            dataLabels: { enabled: false },
            stroke: { curve: "smooth", width: 2 },
            xaxis: {
                categories: @json($monthlyStats['months'])
            },
            colors: chartColors,
            fill: {
                opacity: 0.06,
                colors: chartColors,
                type: "solid"
            }
        };

        const chart = new ApexCharts(document.querySelector("#revenue-expenses-chartsdashboard"), options);
        chart.render();
    });
</script>
<script>

document.addEventListener("DOMContentLoaded", function () {
    const chartColors1 = getChartColorsArray("myPieChart") || ['#1F7EDA', '#00BDE2']; // Fallback colors

    const options = {
        series: [78.56, 105.02],
        labels: ["Posts", "Journeys"],
        chart: {
            type: "pie",
            height: 290
        },
        colors: chartColors1, // 👈 Set chart colors here
        plotOptions: {
            pie: {
                size: 100,
                donut: {
                    size: "76%"
                }
            }
        },
        dataLabels: {
            enabled: false
        },
        legend: {
            show: true,
            position: "bottom",
            horizontalAlign: "center",
            offsetX: 0,
            offsetY: 0,
            markers: {
                width: 20,
                height: 6,
                radius: 2
            },
            itemMargin: {
                horizontal: 12,
                vertical: 0
            }
        },
        stroke: {
            width: 0
        }
    };

    const pchart = new ApexCharts(document.querySelector("#myPieChart"), options);
    pchart.render();
});

</script>

@endsection