@extends('layouts.app')

@section('content')
    <style>
        .container {
            max-width: 1775px;
        }

        #salesChart {
            width: 100%;
            height: 400px;
        }

        .card-chart {
            border: none;
            border-radius: 1rem;
            box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s ease, box-shadow 0.3s ease;
        }

        .card-chart:hover {
            transform: translateY(-5px);
            box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.15);
        }

        .form-control {
            background: transparent;
        }



        .card.sale-pop {
            border: none !important;
            border-radius: 1rem !important;
            background: linear-gradient(135deg, #516deb 0%, #3f57c9 100%) !important;
            color: white !important;
            box-shadow: 0 10px 20px rgba(81, 109, 235, 0.2) !important;
            /* transition: transform 0.5s ease; */
            overflow: hidden !important;
            position: relative !important;
        }

        .card.sale-pop::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            transform: scale(0);
            transition: transform 0.5s ease;
        }

        .card.sale-pop:hover {
            transform: translateY(-5px) !important;
            box-shadow: 0 15px 30px rgba(81, 109, 235, 0.3) !important;
        }

        .card.sale-pop:hover::before {
            transform: scale(3);
        }

        .card.sale-pop .card-body {
            padding: 1.5rem !important;
            z-index: 1;
            position: relative;
        }

        /* Text Styling */
        .card.sale-pop .fw-semibold {
            letter-spacing: 0.5px;
        }

        .card.sale-pop .fs-4 {
            font-weight: 700 !important;
            letter-spacing: -0.5px;
            margin-top: 0.25rem;
            font-size: 2rem !important;
        }

        /* Icon Container */
        .card.sale-pop .d-flex>div:last-child {
            background: rgba(255, 255, 255, 0.15) !important;
            border-radius: 1rem !important;
            padding: 0.75rem !important;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
            transition: all 0.3s ease !important;
        }

        .card.sale-pop:hover .d-flex>div:last-child {
            transform: rotate(5deg);
            background: rgba(255, 255, 255, 0.25) !important;
        }

        /* SVG Icon */
        .card.sale-pop svg {
            width: 24px !important;
            height: 24px !important;
            stroke-width: 2;
            transition: all 0.3s ease;
        }

        .card.sale-pop:hover svg {
            transform: scale(1.1);
        }

        /* Blockquote */
        .card.sale-pop blockquote {
            border-left: 3px solid rgba(255, 255, 255, 0.3);
            padding-left: 0.75rem;
            margin-top: 1rem !important;
        }

        .card.sale-pop blockquote p {
            font-size: 0.75rem !important;
            opacity: 0.8;
            font-weight: 500;
            letter-spacing: 0.3px;
            margin-bottom: 0;
        }



        .card.atv-pop {
            border: none !important;
            border-radius: 1rem !important;
            background: linear-gradient(135deg, #ed8751 0%, #e06f37 100%) !important;
            color: white !important;
            box-shadow: 0 10px 20px rgba(237, 135, 81, 0.2) !important;
            overflow: hidden !important;
            position: relative !important;
        }

        .card.atv-pop::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            transform: scale(0);
            transition: transform 0.5s ease;
        }

        .card.atv-pop:hover {
            transform: translateY(-5px) !important;
            box-shadow: 0 15px 30px rgba(237, 135, 81, 0.3) !important;
        }

        .card.atv-pop:hover::before {
            transform: scale(3);
        }

        .card.atv-pop .card-body {
            padding: 1.5rem !important;
            z-index: 1;
            position: relative;
        }

        /* Text Styling */
        .card.atv-pop .fw-semibold {
            letter-spacing: 0.5px;
        }

        .card.atv-pop .fs-4 {
            font-weight: 700 !important;
            letter-spacing: -0.5px;
            margin-top: 0.25rem;
            font-size: 2rem !important;
        }

        /* Icon Container */
        .card.atv-pop .d-flex>div:last-child {
            background: rgba(255, 255, 255, 0.15) !important;
            border-radius: 1rem !important;
            padding: 0.75rem !important;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
            transition: all 0.3s ease !important;
        }

        .card.atv-pop:hover .d-flex>div:last-child {
            transform: rotate(5deg);
            background: rgba(255, 255, 255, 0.25) !important;
        }

        /* SVG Icon */
        .card.atv-pop svg {
            width: 24px !important;
            height: 24px !important;
            stroke-width: 2;
            transition: all 0.3s ease;
        }

        .card.atv-pop:hover svg {
            transform: scale(1.1);
        }

        /* Blockquote */
        .card.atv-pop blockquote {
            border-left: 3px solid rgba(255, 255, 255, 0.3);
            padding-left: 0.75rem;
            margin-top: 1rem !important;
        }

        .card.atv-pop blockquote p {
            font-size: 0.75rem !important;
            opacity: 0.8;
            font-weight: 500;
            letter-spacing: 0.3px;
            margin-bottom: 0;
        }


        /* Card Styling */
        .card.upt-pop {
            border: none !important;
            border-radius: 1rem !important;
            background: linear-gradient(135deg, #14d5c8 0%, #0bb8ac 100%) !important;
            color: white !important;
            box-shadow: 0 10px 20px rgba(20, 213, 200, 0.2) !important;
            /* transition: transform 0.5s ease; */
            overflow: hidden !important;
            position: relative !important;
        }

        .card.upt-pop::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            transform: scale(0);
            transition: transform 0.5s ease;
        }

        .card.upt-pop:hover {
            transform: translateY(-5px) !important;
            box-shadow: 0 15px 30px rgba(20, 213, 200, 0.3) !important;
        }

        .card.upt-pop:hover::before {
            transform: scale(3);
        }

        .card.upt-pop .card-body {
            padding: 1.5rem !important;
            z-index: 1;
            position: relative;
        }

        /* Text Styling */
        .card.upt-pop .fw-semibold {
            letter-spacing: 0.5px;
        }

        .card.upt-pop .fs-4 {
            font-weight: 700 !important;
            letter-spacing: -0.5px;
            margin-top: 0.25rem;
            font-size: 2rem !important;
        }

        /* Icon Container */
        .card.upt-pop .d-flex>div:last-child {
            background: rgba(255, 255, 255, 0.15) !important;
            border-radius: 1rem !important;
            padding: 0.75rem !important;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
            transition: all 0.3s ease !important;
        }

        .card.upt-pop:hover .d-flex>div:last-child {
            transform: rotate(5deg);
            background: rgba(255, 255, 255, 0.25) !important;
        }

        /* SVG Icon */
        .card.upt-pop svg {
            width: 24px !important;
            height: 24px !important;
            stroke-width: 2;
            transition: all 0.3s ease;
        }

        .card.upt-pop:hover svg {
            transform: scale(1.1);
        }

        /* Blockquote */
        .card.upt-pop blockquote {
            border-left: 3px solid rgba(255, 255, 255, 0.3);
            padding-left: 0.75rem;
            margin-top: 1rem !important;
        }

        .card.upt-pop blockquote p {
            font-size: 0.75rem !important;
            opacity: 0.8;
            font-weight: 500;
            letter-spacing: 0.3px;
            margin-bottom: 0;
        }
    </style>

    <div class="dashboard-page">
        @if(!$rate)
        <div class="row justify-content-center mt-2">
            <div class="col-md-8">
                    <div x-data="npsComponent()" x-show="visible" x-transition class="row justify-content-center mb-4">
                        <div class="col-md-8 card p-4">
                            <template x-if="!submitted">
                                <div>
                                    <h5 class="text-center mb-3">Seberapa membantu dan puas Anda dengan sistem ini?</h5>
                                    <div class="d-flex justify-content-center mb-3">
                                        <template x-for="n in 11" :key="n">
                                            <button type="button" class="btn m-1"
                                                :class="{ 'btn-primary': score === (n - 1) }" @click="score = n-1">
                                                <span x-text="n-1"></span>
                                            </button>
                                        </template>
                                    </div>
                                    <div x-show="score !== null" class="mb-3">
                                        <textarea x-model="comment" class="form-control" placeholder="Berikan komentar Anda..."></textarea>
                                    </div>
                                    <div class="text-danger mb-2" x-text="error"></div>
                                    <div class="d-flex justify-content-between">
                                        <button class="btn btn-secondary" @click="skip()">Lewati</button>
                                        <button class="btn btn-success" @click="submit()">Kirim</button>
                                    </div>
                                </div>
                            </template>

                            <template x-if="submitted">
                                <div class="text-center">
                                    <h5>Terima kasih atas tanggapan Anda!</h5>
                                </div>
                            </template>
                        </div>
                    </div>

                    <script>
                        function npsComponent() {
                            return {
                                score: null,
                                comment: '',
                                submitted: false,
                                error: '',
                                visible: true,
                                skip() {
                                    this.submitted = true;
                                    setTimeout(() => {
                                        this.visible = false;
                                        this.resetForm();
                                    }, 5000);
                                    fetch('/nps-response', {
                                        method: 'POST',
                                        headers: {
                                            'Content-Type': 'application/json',
                                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                        },
                                        body: JSON.stringify({ skipped: true })
                                    });
                                },
                                submit() {
                                    if (this.score === null) {
                                        this.error = 'Silakan pilih skor terlebih dahulu.';
                                        return;
                                    }
                    
                                    // Kalau score < 8, komentar wajib
                                    if (this.score < 8 && this.comment.trim() === '') {
                                        this.error = 'Komentar wajib diisi untuk skor di bawah 8.';
                                        return;
                                    }
                    
                                    this.error = '';
                                    fetch('/nps-response', {
                                        method: 'POST',
                                        headers: {
                                            'Content-Type': 'application/json',
                                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                        },
                                        body: JSON.stringify({
                                            score: this.score,
                                            comment: this.comment // kirim apa adanya, boleh kosong kalau score >= 8
                                        })
                                    }).then(() => {
                                        this.submitted = true;
                                        setTimeout(() => {
                                            this.visible = false;
                                            this.resetForm();
                                        }, 5000);
                                    });
                                },
                                resetForm() {
                                    this.score = null;
                                    this.comment = '';
                                    this.error = '';
                                    this.submitted = false;
                                }
                            }
                        }
                    </script>
                    

                    <div class="card-body text-center">
                        <template x-if="!submitted">
                            <div>
                                <p class="card-text mb-3">
                                    Seberapa membantu sistem ini bagi Anda dan seberapa puas Anda menggunakannya?


                                </p>
                                <div class="d-flex justify-content-center flex-wrap gap-2">
                                    <template x-for="i in 11" :key="i">
                                        <button class="btn"
                                            :class="score === i - 1 ? 'btn-primary' : 'btn-outline-primary'"
                                            @click="score = i - 1" x-text="i - 1"></button>
                                    </template>
                                </div>
                                <div class="mt-3 text-muted" style="font-size: 0.9rem;">
                                    0 = Sangat Kurang &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; 10 = Sangat Bagus
                                </div>

                                <div class="mt-3" x-show="score !== null && score < 8">
                                    <textarea class="form-control" rows="3" placeholder="Apa yang bisa kami perbaiki?" x-model="comment"></textarea>
                                </div>

                                <div class="text-danger mt-2" x-show="error" x-text="error"></div>

                                <div class="mt-4 d-flex justify-content-center gap-2">
                                    <button class="btn btn-success" @click="submit">
                                        Kirim
                                    </button>
                                    <button class="btn btn-secondary" @click="skip">
                                        Lewati
                                    </button>
                                </div>
                            </div>
                        </template>

                        <template x-if="submitted">
                            <div>
                                <h5 class="text-success">Terima kasih atas tanggapan Anda! 🙏</h5>
                            </div>
                        </template>
                    </div>
                
            </div>
        </div>
        @endif


        <div class="col">
            <div class="">
                <div class="head-cashier pay-pop">
                    <div class="logo">
                        <img src="{{ asset('assets/SoftComp - Logo-01.png') }}" alt="Deskripsi Gambar">
                    </div>

                    <div class="d-flex align-items-center mb-2">
                        @php
                            $warehouseName = userWarehouse();
                            $words = explode(' ', $warehouseName);
                            $firstWord = $words[0] ?? '';
                            $remainingWords = implode(' ', array_slice($words, 1));
                        @endphp
                        @admin
                            <a href="{{ route('select-warehouse') }}" class="text-decoration-none">
                                <div class="flex-grow-1">
                                    <h5 class="mb-0 head-cashier-2" style="font-weight: 300;">{{ $firstWord }}</h5>
                                    <h2 class="head-cashier-2" style="font-weight: 600;">{{ $remainingWords }}</h2>
                                </div>
                            </a>
                        @else
                            <a class="text-decoration-none">
                                <div class="flex-grow-1">
                                    <h5 class="mb-0 head-cashier-2" style="font-weight: 300;">{{ $firstWord }}</h5>
                                    <h2 class="head-cashier-2" style="font-weight: 600;">{{ $remainingWords }}</h2>
                                </div>
                            </a>
                        @endadmin
                    </div>


                    <div class="d-flex gap-3">
                        <div class="shadow-md clock2">
                            <livewire:clock />
                        </div>
                    </div>

                </div>
                <div class="card-body" id="cashier">
                    <div class="fs-3 fw-bold">Selamat datang kembali,
                        {{ ucwords(explode('@', auth()->user()->username)[0]) }}!
                    </div>
                    <div>Tinjauan Dashboard</div>
                    <div class="d-flex gap-5 justify-content-center">
                        <div class="card col-4"
                            style="border: none; border-radius: 1rem; display: flex; justify-content: center; align-items: center; background: transparent">
                            <dotlottie-player
                                src="https://lottie.host/7d6dbde1-5f17-415a-8013-fce08d28220f/ftyIVazhzJ.lottie"
                                background="transparent" speed="1"
                                style="width: 450px; height: 450px; transform: scaleX(-1);" loop
                                autoplay></dotlottie-player>
                            {{-- <script src="https://unpkg.com/@dotlottie/player-component@2.7.12/dist/dotlottie-player.mjs" type="module"></script> --}}
                            {{-- <dotlottie-player src="https://lottie.host/de55f7cf-b123-451e-adfe-6de528308266/M7tpC1DJwu.lottie" 
                                background="transparent" 
                                speed="1" 
                                style="width: 350px; height: 350px" 
                                loop autoplay></dotlottie-player> --}}
                        </div>

                        <div class="d-flex gap-3 justify-content-center" style="align-items: center">
                            <div class="card shadow-sm sale-pop gsap-card">
                                <div class="card-body">
                                    {{-- <div class="card-body bg-card-dashboard"> --}}
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div class="">
                                            <div class="fw-semibold">Total penjualan (Rp)</div>

                                            @if (!empty($totalSales) && is_numeric($totalSales))
                                                <div class="fw-semibold fs-4" style="padding-right: 1rem">
                                                    {{ number_format($totalSales, 0, ',', '.') }}</div>
                                            @else
                                                0
                                            @endif

                                        </div>

                                        <div>
                                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                                stroke-width="2" stroke="currentColor" class="size-6">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5M9 11.25v1.5M12 9v3.75m3-6v6" />
                                            </svg>
                                        </div>
                                    </div>

                                    <blockquote class="blockquote mb-0 mt-3">
                                        <p style="font-size: 12px">Total pendapatan dari transaksi</p>
                                    </blockquote>
                                </div>
                            </div>
                            <div class="card shadow-sm atv-pop gsap-card">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div class="">
                                            <div class="fw-semibold">ATV (Rp)</div>
                                            @if (!empty($atv) && is_numeric($atv))
                                                <div class="fw-semibold fs-4" style="padding-right: 1rem">
                                                    {{ number_format($atv, 0, ',', '.') }}
                                                </div>
                                            @else
                                                0
                                            @endif

                                        </div>

                                        <div>
                                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                                stroke-width="2" stroke="currentColor" class="size-6">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5m.75-9 3-3 2.148 2.148A12.061 12.061 0 0 1 16.5 7.605" />
                                            </svg>
                                        </div>
                                    </div>

                                    <blockquote class="blockquote mb-0 mt-3">
                                        <p style="font-size: 12px">Nilai rata-rata per transaksi</p>
                                    </blockquote>
                                </div>
                            </div>

                            <div class="card shadow-sm upt-pop gsap-card">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div class="">
                                            <div class="fw-semibold">UPT</div>
                                            @if (!empty($upt) && is_numeric($upt))
                                                <div class="fw-semibold fs-4" style="padding-right: 1rem">
                                                    {{ number_format($upt, 2, ',', '.') }}</div>
                                            @else
                                                0
                                            @endif

                                        </div>

                                        <div>
                                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                                stroke-width="2" stroke="currentColor" class="size-6">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="m20.25 7.5-.625 10.632a2.25 2.25 0 0 1-2.247 2.118H6.622a2.25 2.25 0 0 1-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z" />
                                            </svg>
                                        </div>
                                    </div>

                                    <blockquote class="blockquote mb-0 mt-3">
                                        <p style="font-size: 12px">Rata-rata item per transaksi</p>
                                    </blockquote>
                                </div>
                            </div>
                        </div>
                    </div>



                    <div class="container">
                        <div class="row">
                            <div class="col-md-6 col-lg-4 mb-4">
                                <div class="card-chart shadow-sm p-3">
                                    <h5 class="mb-3">Grafik Total Penjualan</h5>
                                    <!-- Form Pilih Rentang Tanggal -->
                                    <form id="" class="row align-items-end mb-2">
                                        <div class="col-md-4">
                                            <label for="start_date_sales" class="form-label">Tanggal mulai:</label>
                                            <input type="date" id="start_date_sales" class="form-control"
                                                name="start_date_sales" value="{{ $startDateSales }}">
                                        </div>

                                        <div class="col-md-4">
                                            <label for="end_date_sales" class="form-label">Tanggal tarakhir:</label>
                                            <input type="date" id="end_date_sales" class="form-control"
                                                name="end_date_sales" value="{{ $endDateSales }}">
                                        </div>

                                        <div class="col-md-4">
                                            <button type="button" id="updateSalesBtn"
                                                class="btn btn-primary w-100">Update</button>
                                        </div>
                                    </form>

                                    <!-- Chart Container -->
                                    <div id="salesChart" style="height: 300px;"></div>
                                </div>
                            </div>

                            <div class="col-md-6 col-lg-4 mb-4">
                                <div class="card-chart shadow-sm p-3">
                                    <h5 class="mb-3">Grafik Penjualan berdasarkan Kategori</h5>
                                    <!-- Form Pilih Rentang Tanggal -->
                                    <form id="" class="row align-items-end mb-2">
                                        <div class="col-md-4">
                                            <label for="start_date_category" class="form-label">Tanggal mulai:</label>
                                            <input type="date" id="start_date_category" class="form-control"
                                                name="start_date_category" value="{{ $startDateCategory }}">
                                        </div>

                                        <div class="col-md-4">
                                            <label for="end_date_category" class="form-label">Tanggal
                                                terakhir:</label>
                                            <input type="date" id="end_date_category" class="form-control"
                                                name="end_date_category" value="{{ $endDateCategory }}">
                                        </div>

                                        <div class="col-md-4">
                                            <button type="button" id="updateCategoryBtn"
                                                class="btn btn-primary w-100">Update</button>
                                        </div>
                                    </form>

                                    <!-- Chart Container -->
                                    <div id="categoryChart" style="height: 300px;"></div>
                                </div>
                            </div>

                            <div class="col-md-6 col-lg-4 mb-4">
                                <div class="card-chart shadow-sm p-3">
                                    <h5 class="mb-3">Grafik Penjualan berdasarkan Shift</h5>
                                    <!-- Form Pilih Rentang Tanggal -->
                                    <form id="" class="row align-items-end mb-2">
                                        <div class="col-md-4">
                                            <label for="start_date_shift" class="form-label">Tanggal mulai:</label>
                                            <input type="date" id="start_date_shift" class="form-control"
                                                name="start_date_shift" value="{{ $startDateShift }}">
                                        </div>

                                        <div class="col-md-4">
                                            <label for="end_date_shift" class="form-label">Tanggal terakhir:</label>
                                            <input type="date" id="end_date_shift" class="form-control"
                                                name="end_date_shift" value="{{ $endDateShift }}">
                                        </div>

                                        <div class="col-md-4">
                                            <button type="button" id="updateShiftBtn"
                                                class="btn btn-primary w-100">Update</button>
                                        </div>
                                    </form>

                                    <!-- Chart Container -->
                                    <div id="shiftChart" style="height: 300px;"></div>
                                </div>
                            </div>

                            <div class="col-md-6 col-lg-6 mb-4">
                                <div class="card-chart shadow-sm p-3">
                                    <h5 class="mb-3">Grafik Perbadingan Penjualan dan Item Transfer</h5>

                                    <!-- Form Pilih Rentang Tanggal -->
                                    <form id="" class="row align-items-end mb-2">
                                        <div class="col-md-3">
                                            <label for="warehouseSelect">Pilih gudang:</label>
                                            <select id="warehouseSelect" class="form-select">
                                                @foreach ($itrData as $whs_code => $data)
                                                    <option value="{{ $whs_code }}">{{ $whs_code }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-3">
                                            <label for="start_date_itr" class="form-label">Tanggal mulai:</label>
                                            <input type="date" id="start_date_itr" class="form-control"
                                                name="start_date_itr" value="{{ $startDateItr }}">
                                        </div>

                                        <div class="col-md-3">
                                            <label for="end_date_itr" class="form-label">Tanggal terakhir:</label>
                                            <input type="date" id="end_date_itr" class="form-control"
                                                name="end_date_itr" value="{{ $endDateItr }}">
                                        </div>

                                        <div class="col-md-3">
                                            <button type="button" id="updateItrBtn"
                                                class="btn btn-primary w-100">Update</button>
                                        </div>
                                    </form>

                                    <!-- Chart Container -->
                                    <div id="itrChart" style="height: 300px;"></div>
                                </div>
                            </div>

                            <div class="col-md-6 col-lg-6 mb-4">
                                <div class="card-chart shadow-sm p-3">
                                    <h5 class="mb-3">Grafik Perbandingan Harga Normal dan Harga Diskon</h5>

                                    <!-- Form Pilih Rentang Tanggal -->
                                    <form id="" class="row align-items-end mb-2">
                                        <div class="col-md-3">
                                            <label for="warehouseSelectPrice">Pilih gudang:</label>
                                            <select id="warehouseSelectPrice" class="form-select">
                                                @foreach ($priceData as $whs_code => $data)
                                                    <option value="{{ $whs_code }}">{{ $whs_code }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-3">
                                            <label for="start_date_price" class="form-label">Tanggal mulai:</label>
                                            <input type="date" id="start_date_price" class="form-control"
                                                name="start_date_price" value="{{ $startDatePrice }}">
                                        </div>

                                        <div class="col-md-3">
                                            <label for="end_date_price" class="form-label">Tanggal terakhir:</label>
                                            <input type="date" id="end_date_price" class="form-control"
                                                name="end_date_price" value="{{ $endDatePrice }}">
                                        </div>

                                        <div class="col-md-3">
                                            <button type="button" id="updatePriceBtn"
                                                class="btn btn-primary w-100">Update</button>
                                        </div>
                                    </form>

                                    <!-- Chart Container -->
                                    <div id="priceChart" style="height: 300px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

    <script src="https://unpkg.com/@dotlottie/player-component@2.7.12/dist/dotlottie-player.mjs" type="module"></script>

    <script>
        // Apply animation to elements with the class 'gsap-card'
        gsap.from(".gsap-card", {
            duration: 2, // Animation duration
            y: 50, // Slide in from 50px below
            opacity: 0, // Start with 0 opacity
            stagger: 0.3, // Delay between animations for each element
            ease: "power3.out" // Smooth easing
        });
    </script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            let chart;

            // Opsi chart
            const options = {
                chart: {
                    type: 'area',
                    height: 300,
                },
                dataLabels: {
                    enabled: false,
                },
                series: [], // Series akan diisi nanti
                xaxis: {
                    categories: [], // Categories akan diisi nanti
                },
                yaxis: {
                    labels: {
                        formatter: value => new Intl.NumberFormat().format(value),
                    },
                },
                noData: {
                    text: 'No data available for the selected date range.', // Pesan yang ditampilkan saat tidak ada data
                    align: 'center',
                    verticalAlign: 'middle',
                    offsetX: 0,
                    offsetY: 0,
                    style: {
                        color: '#666',
                        fontSize: '16px',
                        fontFamily: 'Rubik',
                    },
                },
            };

            // Inisialisasi chart
            const chartSalesElement = document.querySelector("#salesChart");
            chart1 = new ApexCharts(chartSalesElement, options);
            chart1.render();

            const chartElement = document.querySelector("#categoryChart");
            chart = new ApexCharts(chartElement, options);
            chart.render();

            const chartShiftElement = document.querySelector("#shiftChart");
            chart3 = new ApexCharts(chartShiftElement, options);
            chart3.render();

            const chartItrElement = document.querySelector("#itrChart");
            chart5 = new ApexCharts(chartItrElement, options);
            chart5.render();

            const chartPriceElement = document.querySelector("#priceChart");
            chart8 = new ApexCharts(chartPriceElement, options);
            chart8.render();





            // Fungsi untuk mengambil data dan memperbarui chart
            function fetchDataAndUpdateSalesChart() {
                fetch("{{ route('welcome.get-sales-data') }}")
                    .then(response => response.json())
                    .then(data => {
                        // Jika tidak ada data
                        if (!data.success || Object.keys(data.salesData).length === 0) {
                            console.warn("No sales data available.");
                            options.series = [];
                            options.xaxis.categories = [];
                            chart1.updateOptions(options);
                            return;
                        }

                        // Jika ada data, buat series dan categories
                        const createSeries = (data) => {
                            if (!data || Object.keys(data).length === 0) {
                                return [];
                            }
                            return Object.keys(data).map(name => ({
                                name: name,
                                data: Object.values(data[name])
                            }));
                        };

                        const salesData = data.salesData;
                        const categories = Object.keys(salesData[Object.keys(salesData)[0]]);

                        // Perbarui opsi chart
                        options.series = createSeries(salesData);
                        options.xaxis.categories = categories;

                        // Perbarui chart
                        chart1.updateOptions(options);
                    })
                    .catch(error => {
                        console.error('Error fetching chart data:', error);
                    });
            }

            // Ambil data dan perbarui chart saat halaman dimuat
            fetchDataAndUpdateSalesChart();

            // Event listener untuk tombol "Update"
            document.getElementById("updateSalesBtn").addEventListener("click", function() {
                const startDate = document.getElementById("start_date_sales").value;
                const endDate = document.getElementById("end_date_sales").value;

                fetch("{{ route('welcome.update-sales-range') }}", {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/json",
                            "X-CSRF-TOKEN": "{{ csrf_token() }}"
                        },
                        body: JSON.stringify({
                            start_date_sales: startDate,
                            end_date_sales: endDate
                        }),
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            fetchDataAndUpdateSalesChart();
                        }
                    })
                    .catch(error => {
                        console.error('Error updating sales date range:', error);
                    });
            });

            // document.getElementById("updateSalesBtn").addEventListener("click", function() {
            //     const startDate = document.getElementById("start_date_sales").value;
            //     const endDate = document.getElementById("end_date_sales").value;

            //     // Hitung interval_days
            //     const start = new Date(startDate);
            //     const end = new Date(endDate);
            //     const intervalDays = Math.ceil((end - start) / (1000 * 60 * 60 * 24)); // Selisih dalam hari

            //     // Kirim data ke backend
            //     fetch("{{ route('welcome.update-sales-range') }}", {
            //         method: "POST",
            //         headers: {
            //             "Content-Type": "application/json",
            //             "X-CSRF-TOKEN": "{{ csrf_token() }}"
            //         },
            //         body: JSON.stringify({
            //             start_date_sales: startDate,
            //             end_date_sales: endDate,
            //             interval_days: intervalDays // Kirim interval_days
            //         }),
            //     })
            //         .then(response => response.json())
            //         .then(data => {
            //             if (data.success) {
            //                 fetchDataAndUpdateSalesChart();
            //                 console.log('Success updating Sales Chart!');
            //             }
            //         })
            //         .catch(error => {
            //             console.error('Error updating sales date range:', error);
            //         });
            // });



            // Fungsi untuk mengambil data dan memperbarui chart
            function fetchDataAndUpdateChart() {
                fetch("{{ route('welcome.get-category-data') }}")
                    .then(response => response.json())
                    .then(data => {
                        // Jika tidak ada data
                        if (!data.success || Object.keys(data.categorySalesData).length === 0) {
                            console.warn("No sales data available.");

                            // Atur series dan categories ke array kosong
                            options.series = [];
                            options.xaxis.categories = [];

                            // Perbarui chart
                            chart.updateOptions(options);
                            return;
                        }

                        // Jika ada data, buat series dan categories
                        const createSeries = (data) => {
                            return Object.keys(data).map(name => ({
                                name: name,
                                data: Object.values(data[name]),
                            }));
                        };

                        const categorySalesData = data.categorySalesData;
                        const categories = Object.keys(categorySalesData[Object.keys(categorySalesData)[0]]);

                        // Perbarui opsi chart
                        options.series = createSeries(categorySalesData);
                        options.xaxis.categories = categories;

                        // Perbarui chart
                        chart.updateOptions(options);
                    })
                    .catch(error => {
                        console.error('Error fetching chart data:', error);
                    });
            }

            // Ambil data dan perbarui chart saat halaman dimuat
            fetchDataAndUpdateChart();

            // Tambahkan event listener untuk tombol "Update"
            document.getElementById("updateCategoryBtn").addEventListener("click", function() {
                const startDate = document.getElementById("start_date_category").value;
                const endDate = document.getElementById("end_date_category").value;

                fetch("{{ route('welcome.update-category-range') }}", {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/json",
                            "X-CSRF-TOKEN": "{{ csrf_token() }}"
                        },
                        body: JSON.stringify({
                            start_date_category: startDate,
                            end_date_category: endDate
                        }),
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            fetchDataAndUpdateChart();
                        }
                    })
                    .catch(error => {
                        console.error('Error updating date range:', error);
                    });
            });

            // Fungsi untuk mengambil data dan memperbarui chart
            function fetchDataAndUpdateShiftChart() {
                fetch("{{ route('welcome.get-shift-data') }}")
                    .then(response => response.json())
                    .then(data => {
                        // Jika tidak ada data
                        if (!data.success || Object.keys(data.shiftSalesData).length === 0) {
                            console.warn("No sales data available.");

                            // Atur series dan categories ke array kosong
                            options.series = [];
                            options.xaxis.categories = [];

                            // Perbarui chart
                            chart3.updateOptions(options);
                            return;
                        }

                        // Fungsi untuk mengonversi data dari Laravel menjadi format yang sesuai
                        const transformShiftSalesData = (data) => {
                            return Object.keys(data).map(date => ({
                                date: date,
                                Pagi: data[date]['Pagi'] ||
                                    0, // Default ke 0 jika tidak ada data
                                Malam: data[date]['Malam'] ||
                                    0 // Default ke 0 jika tidak ada data
                            }));
                        };

                        // Fungsi untuk membuat series ApexCharts
                        const createSeries = (data) => {
                            return [{
                                    name: 'Pagi',
                                    data: data.map(item => item.Pagi) // Ambil data shift Pagi
                                },
                                {
                                    name: 'Malam',
                                    data: data.map(item => item.Malam) // Ambil data shift Malam
                                }
                            ];
                        };

                        // Transformasi data
                        const transformedData = transformShiftSalesData(data.shiftSalesData);

                        // Ambil tanggal sebagai kategori sumbu X
                        const categories = transformedData.map(item => item.date);

                        // Buat series untuk ApexCharts
                        const series = createSeries(transformedData);

                        // Perbarui opsi chart
                        options.series = series;
                        options.xaxis.categories = categories;

                        // Perbarui chart
                        chart3.updateOptions(options);
                    })
                    .catch(error => {
                        console.error('Error fetching shift chart data:', error);
                    });
            }

            // Ambil data dan perbarui chart saat halaman dimuat
            fetchDataAndUpdateShiftChart();

            // Tambahkan event listener untuk tombol "Update"
            document.getElementById("updateShiftBtn").addEventListener("click", function() {
                const startDate = document.getElementById("start_date_shift").value;
                const endDate = document.getElementById("end_date_shift").value;

                fetch("{{ route('welcome.update-shift-range') }}", {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/json",
                            "X-CSRF-TOKEN": "{{ csrf_token() }}"
                        },
                        body: JSON.stringify({
                            start_date_shift: startDate,
                            end_date_shift: endDate
                        }),
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            fetchDataAndUpdateShiftChart();
                        }
                    })
                    .catch(error => {
                        console.error('Error updating shift date range:', error);
                    });
            });

            // Fungsi untuk mengambil data dan memperbarui chart
            function fetchDataAndUpdateItrChart() {
                fetch("{{ route('welcome.get-itr-data') }}")
                    .then(response => response.json())
                    .then(data => {
                        // Jika tidak ada data
                        if (!data.success || Object.keys(data.itrData).length === 0) {
                            console.warn("No itr data available.");

                            // Atur series dan categories ke array kosong
                            options.series = [];
                            options.xaxis.categories = [];

                            // Perbarui chart
                            chart5.updateOptions(options);
                            return;
                        }

                        if (data.itrData && Object.keys(data.itrData).length > 0) {
                            const whsCode = Object.keys(data.itrData)[0]; // Ambil warehouse pertama
                            const penjualanData = data.itrData[whsCode]['PENJUALAN'] || [];
                            const itrData = data.itrData[whsCode]['ITR'] || [];

                            categories = penjualanData.map(item => item.date); // Ambil tanggal dari PENJUALAN
                            series = [{
                                    name: 'Penjualan',
                                    data: penjualanData.map(item => parseFloat(item.total_qty))
                                },
                                {
                                    name: 'ITR',
                                    data: itrData.map(item => parseFloat(item.total_qty))
                                }
                            ];
                        }

                        options.series = series;
                        options.xaxis.categories = categories;
                        chart5.updateOptions(options);
                    })
                    .catch(error => {
                        console.error('Error fetching shift chart data:', error);
                    });
            }

            document.getElementById('warehouseSelect').addEventListener('change', function() {
                const selectedWhsCode = this.value;
                updateChartForWarehouse(selectedWhsCode);
            });

            function updateChartForWarehouse(whsCode) {
                fetch("{{ route('welcome.get-itr-data') }}")
                    .then(response => response.json())
                    .then(data => {
                        if (!data.success || !data.itrData || !data.itrData[whsCode]) {
                            console.warn("No data available for selected warehouse.");
                            options.series = [];
                            options.xaxis.categories = [];
                            chart5.updateOptions(options);
                            return;
                        }

                        const penjualanData = data.itrData[whsCode]['PENJUALAN'] || [];
                        const itrData = data.itrData[whsCode]['ITR'] || [];

                        let categories = penjualanData.map(item => item.date);
                        let series = [{
                                name: 'PENJUALAN',
                                data: penjualanData.map(item => parseFloat(item.total_qty))
                            },
                            {
                                name: 'ITR',
                                data: itrData.map(item => parseFloat(item.total_qty))
                            }
                        ];

                        options.series = series;
                        options.xaxis.categories = categories;
                        chart5.updateOptions(options);
                    })
                    .catch(error => {
                        console.error('Error fetching data:', error);
                    });
            }

            // Ambil data dan perbarui chart saat halaman dimuat
            fetchDataAndUpdateItrChart();

            // Tambahkan event listener untuk tombol "Update"
            document.getElementById("updateItrBtn").addEventListener("click", function() {
                const startDate = document.getElementById("start_date_itr").value;
                const endDate = document.getElementById("end_date_itr").value;

                fetch("{{ route('welcome.update-itr-range') }}", {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/json",
                            "X-CSRF-TOKEN": "{{ csrf_token() }}"
                        },
                        body: JSON.stringify({
                            start_date_itr: startDate,
                            end_date_itr: endDate
                        }),
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            fetchDataAndUpdateItrChart();
                        }
                    })
                    .catch(error => {
                        console.error('Error updating itr date range:', error);
                    });
            });

            // Fungsi untuk mengambil data dan memperbarui chart
            function fetchDataAndUpdatePriceChart() {
                fetch("{{ route('welcome.get-price-data') }}")
                    .then(response => response.json())
                    .then(data => {
                        if (!data.success || !data.priceData || Object.keys(data.priceData).length === 0) {
                            console.warn("No price data available.");
                            options.series = [];
                            options.xaxis.categories = [];
                            chart8.updateOptions(options);
                            return;
                        }

                        const whsCode = Object.keys(data.priceData)[0]; // Ambil warehouse pertama
                        const dates = Object.keys(data.priceData[whsCode]);
                        const series = [{
                                name: "Harga Normal",
                                data: dates.map(date => data.priceData[whsCode][date].harga_normal || 0)
                            },
                            {
                                name: "Harga Discount",
                                data: dates.map(date => data.priceData[whsCode][date].harga_discount || 0)
                            }
                        ];

                        options.series = series;
                        options.xaxis.categories = dates;
                        chart8.updateOptions(options);
                    })
                    .catch(error => {
                        console.error('Error fetching price data:', error);
                    });
            }

            // Event listener untuk dropdown warehouse
            document.getElementById('warehouseSelectPrice').addEventListener('change', function() {
                const selectedWhsCode = this.value;
                updatePriceChartForWarehouse(selectedWhsCode);
            });

            function updatePriceChartForWarehouse(whsCode) {
                fetch("{{ route('welcome.get-price-data') }}")
                    .then(response => response.json())
                    .then(data => {
                        if (!data.success || !data.priceData || !data.priceData[whsCode]) {
                            console.warn("No data available for selected warehouse.");
                            options.series = [];
                            options.xaxis.categories = [];
                            chart8.updateOptions(options);
                            return;
                        }

                        const dates = Object.keys(data.priceData[whsCode]);
                        const series = [{
                                name: "Harga Normal",
                                data: dates.map(date => data.priceData[whsCode][date].harga_normal || 0)
                            },
                            {
                                name: "Harga Discount",
                                data: dates.map(date => data.priceData[whsCode][date].harga_discount || 0)
                            }
                        ];

                        options.series = series;
                        options.xaxis.categories = dates;
                        chart8.updateOptions(options);
                    })
                    .catch(error => {
                        console.error('Error fetching data:', error);
                    });
            }

            // Ambil data dan perbarui chart saat halaman dimuat
            fetchDataAndUpdatePriceChart();

            // Tambahkan event listener untuk tombol "Update"
            document.getElementById("updatePriceBtn").addEventListener("click", function() {
                const startDate = document.getElementById("start_date_price").value;
                const endDate = document.getElementById("end_date_price").value;

                fetch("{{ route('welcome.update-price-range') }}", {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/json",
                            "X-CSRF-TOKEN": "{{ csrf_token() }}"
                        },
                        body: JSON.stringify({
                            start_date_price: startDate,
                            end_date_price: endDate
                        }),
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            fetchDataAndUpdatePriceChart();
                        }
                    })
                    .catch(error => {
                        console.error('Error updating price date range:', error);
                    });
            });
        });
    </script>

    {{-- @if ($istutorials)
        <script>
            const dashboardPopup = () => {
                const driver = window.driver.js.driver;
                const driverObj = driver({
                    showProgress: true,
                    steps: [{
                            element: '.dashboard-pop',
                            popover: {
                                description: 'Selamat datang di Dashboard Statistik. Di sini, kamu bisa melihat ringkasan performa penjualanmu dengan cepat'
                            }
                        },
                        {
                            element: '.sale-pop',
                            popover: {
                                description: 'Total penjualan dari semua toko'
                            }
                        },
                        {
                            element: '.atv-pop',
                            popover: {
                                description: 'Rata-rata nilai rupiah dalam satu struk'
                            }
                        },
                        {
                            element: '.upt-pop',
                            popover: {
                                description: 'Rata-rata jumlah barang yang di beli dalam satu struk'
                            }
                        },
                        {
                            element: '.chart-pop',
                            popover: {
                                description: 'Grafik visual performa penjualan outlet anda'
                            }
                        },
                        {
                            element: '.sidebar-pop',
                            popover: {
                                description: 'akses menu "sidebar" dengan mengklik tombol ini'
                            }
                        },
                        {
                            element: '.go-setting-pop',
                            popover: {
                                description: 'Di "sidebar" kamu bisa mengelola berbagai pengaturan sistem. Pertama, silakan akses menu Pengaturan, lalu pilih submenu Gudang'
                            }
                        },
                    ],
                    onDeselected: () => {
                        $.ajax({
                            type: "POST",
                            url: '/update-status-driver',
                            data: {
                                menu: "Dashboard",
                                _token: '{{ csrf_token() }}'
                            },
                            success: function(data) {
                                console.log(data);
                            },
                            error: function(data, textStatus, errorThrown) {
                                console.log(data);
                            },
                        });

                    }
                });

                driverObj.drive();
            }
        </script>
    @endif --}}
@endsection