@extends('temple.layouts.app')

@section('title', 'Premium Dashboard')

@section('content')

<div class="page-header">
    <div class="page-header-left">
        <div class="page-icon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
                <path d="M12 2 9 6h6z"/>
                <path d="M7 6h10l1.2 3H5.8z"/>
                <path d="M5 9h14v2H5z"/>
                <path d="M6 11h12v9H6z"/>
                <path d="M10 20v-4h4v4"/>
            </svg>
        </div>
        <div>
            <h1 class="page-title">
                {{ $temple->temple_name ?? 'Temple' }} — Dashboard
            </h1>

            <p class="page-subtitle">
                Namaskaram, {{ Auth::user()->name ?? 'Priest/Staff' }}.
                Here's the overall temple activity summary.
            </p>
        </div>
    </div>

    <div class="page-header-actions">
        <a href="{{ route('temple.vazhipad.create') }}" class="btn btn-primary">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
                 stroke="currentColor" stroke-width="2">
                <path d="M12 5v14M5 12h14"/>
            </svg>
            New Vazhipad
        </a>
    </div>
</div>

<!-- Temple Photo Gallery -->
<div class="gallery-panel">

    @php
        $galleryImages = [];

        if ($templeImages) {

            foreach (['image1', 'image2', 'image3'] as $field) {

                if (!empty($templeImages->{$field})) {

                    $galleryImages[] = $templeImages->{$field};

                }

            }

        }
    @endphp


    @if(count($galleryImages) > 0)

        <div class="swiper temple-swiper">

            <div class="swiper-wrapper">

                @foreach($galleryImages as $imagePath)

                    @php
                        /*
                         * Current Laravel application is running from:
                         * /TempleMitra/public
                         *
                         * request()->getBaseUrl() automatically gives:
                         * /TempleMitra/public
                         *
                         * Therefore the image becomes:
                         * /TempleMitra/public/storage/filename
                         */

                        $imageUrl = request()->getBaseUrl()
                            . '/storage/' . ltrim($imagePath, '/');
                    @endphp

                    <div class="swiper-slide">

                        <img
                            src="{{ $imageUrl }}"
                            alt="Temple Image"
                            onerror="this.onerror=null;this.src='{{ request()->getBaseUrl() }}/images/temple-placeholder.jpg';"
                        >

                    </div>

                @endforeach

            </div>


            @if(count($galleryImages) > 1)

                <div class="swiper-pagination"></div>

                <div class="swiper-button-prev"></div>

                <div class="swiper-button-next"></div>

            @endif

        </div>

    @else

        <div class="swiper temple-swiper">

            <div class="swiper-wrapper">

                <div class="swiper-slide">

                    <img
                        src="{{ request()->getBaseUrl() }}/images/temple-placeholder.jpg"
                        alt="Temple"
                    >

                </div>

            </div>

        </div>

    @endif

</div>


<!-- Hundi Collection Chart -->
<div class="chart-panel">
    <div class="panel-header">
        <h2 class="panel-title">Hundi Collection — Last 7 Days</h2>
    </div>
    <div class="chart-canvas-wrap">
        <canvas id="hundiChart"></canvas>
    </div>
</div>

@endsection

@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

<style>
    /* ----- GALLERY PANEL — full bleed, no card, no padding, no header ----- */
    .gallery-panel {
        width: 100%;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        overflow: visible;
    }

    .gallery-panel .panel-header {
        display: none;
    }

    .temple-swiper {
        width: 100%;
        height: 480px;
        margin: 0;
        padding: 0;
        border-radius: 0;
        overflow: hidden;
    }

    .temple-swiper .swiper-slide {
        position: relative;
        overflow: hidden;
        background: #111;
    }

    .temple-swiper .swiper-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .temple-swiper .slide-caption {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 14px 20px;
        background: linear-gradient(to top, rgba(0,0,0,0.65), rgba(0,0,0,0));
        color: #fff;
        font-size: 15px;
        font-weight: 500;
        letter-spacing: 0.3px;
    }

    .temple-swiper .swiper-button-prev,
    .temple-swiper .swiper-button-next {
        color: #fff;
        text-shadow: 0 1px 4px rgba(0,0,0,0.6);
        width: 44px;
        height: 44px;
    }

    .temple-swiper .swiper-button-prev::after,
    .temple-swiper .swiper-button-next::after {
        font-size: 24px;
        font-weight: 700;
    }

    .temple-swiper .swiper-pagination {
        bottom: 14px;
    }

    .temple-swiper .swiper-pagination-bullet {
        background: #fff;
        opacity: 0.6;
        width: 10px;
        height: 10px;
    }

    .temple-swiper .swiper-pagination-bullet-active {
        opacity: 1;
        background: #d4a437;
        width: 26px;
        border-radius: 6px;
    }

    /* ----- CHART PANEL ----- */
    .chart-panel {
        width: 100%;
        margin-top: 24px;
        padding: 20px;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    }

    .chart-panel .panel-title {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 16px;
        color: #2b2b2b;
    }

    .chart-canvas-wrap {
        position: relative;
        height: 320px;
        width: 100%;
    }

    /* Responsive heights */
    @media (max-width: 900px) {
        .temple-swiper {
            height: 380px;
        }
    }

    @media (max-width: 640px) {
        .temple-swiper {
            height: 260px;
        }
        .temple-swiper .slide-caption {
            font-size: 13px;
            padding: 10px 14px;
        }
        .temple-swiper .swiper-button-prev,
        .temple-swiper .swiper-button-next {
            width: 34px;
            height: 34px;
        }
        .temple-swiper .swiper-button-prev::after,
        .temple-swiper .swiper-button-next::after {
            font-size: 18px;
        }
        .chart-canvas-wrap {
            height: 240px;
        }
    }
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>

<script>
    // ---------------------------------------------------------
    // Temple gallery swiper — full-bleed, swipe/drag, auto-advance,
    // prev/next arrows, pagination dots.
    // ---------------------------------------------------------
    if (document.querySelector('.temple-swiper')) {
        new Swiper('.temple-swiper', {
            loop: true,
            autoplay: {
                delay: 4000,
                disableOnInteraction: false,
            },
            speed: 500,
            grabCursor: true,
            pagination: {
                el: '.temple-swiper .swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.temple-swiper .swiper-button-next',
                prevEl: '.temple-swiper .swiper-button-prev',
            },
        });
    }

    // ---------------------------------------------------------
    // Hundi Collection chart
    // BUG FIX: `ctx` was previously referenced without being
    // defined anywhere, and there was no <canvas> element for
    // it to bind to — this silently threw a JS error and the
    // chart never rendered.
    // ---------------------------------------------------------
    const hundiCanvas = document.getElementById('hundiChart');

    if (hundiCanvas) {
        const ctx = hundiCanvas.getContext('2d');

        const chartLabels = @json($chartLabels ?? []);
        const chartValues = @json($chartValues ?? []);

        new Chart(ctx, {
            type: 'line',
            data: {
                labels: chartLabels,
                datasets: [{
                    label: 'Hundi Collection',
                    data: chartValues,
                    borderColor: '#63151f',
                    backgroundColor: 'rgba(99, 21, 31, 0.08)',
                    fill: true,
                    tension: 0.35,
                    pointBackgroundColor: '#63151f',
                    pointRadius: window.innerWidth < 640 ? 2 : 3,
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            callback: function (v) {
                                return '₹' + (v / 1000) + 'k';
                            }
                        },
                        grid: {
                            color: '#ecdfc4'
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        },
                        ticks: {
                            maxRotation: 0,
                            autoSkip: true
                        }
                    }
                }
            }
        });
    }
</script>
@endpush