@extends('navbar')
@section('content')

<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Dashboard - Skyrent Studio</title>

    <!-- Bootstrap CSS -->
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <link href="https://cdn.tailwindcss.com" rel="stylesheet">
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">

    <!-- FullCalendar CSS & JS -->
    <link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/locales-all.min.js"></script>


    <style>
    .gradient-bg {
        background: linear-gradient(
            135deg,
            rgba(255, 192, 203, 0.1),  /* Pink muda transparan */
            rgba(173, 216, 230, 0.64)   /* Biru muda transparan */
        );
    }
    #calendar-container {
        max-width: 800px;
        /* Batasi lebar maksimal */
        margin: 0 auto;
        /* Agar berada di tengah */
        padding: 20px;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    #calendar {
        max-width: 100%;
        max-height: 500px; /* misalnya */
    }


    .fc-daygrid-day-number {
        color: black !important;
        /* Mengubah warna teks tanggal menjadi hitam */
        text-decoration: none !important;
        /* Menghapus garis bawah */
    }

    thead .fc-col-header-cell a {
        color: black !important;
        text-decoration: none !important;
        font-size: 12px !important;
        /* Ubah ukuran teks */
        font-weight: none !important;
    }

    .fc-event-title {
        color: black !important;
    }

    .fc-day-today {
        background-color: rgba(229, 229, 229, 0.25) !important;
        /* Warna abu-abu */
    }


    .fc-event-time {
        display: none !important;
    }
    </style>
</head>

<body>

    <!-- Carousel wrapper -->
    <div id="carouselMaterialStyle" class="carousel slide carousel-fade" data-bs-ride="carousel">
        <!-- Indicators -->
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#carouselMaterialStyle" data-bs-slide-to="0" class="active"
                aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#carouselMaterialStyle" data-bs-slide-to="1"
                aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#carouselMaterialStyle" data-bs-slide-to="2"
                aria-label="Slide 3"></button>
        </div>

        <!-- Inner -->
        <div class="carousel-inner rounded-5 shadow-4-strong">
            <!-- Slide 1 -->
            <div class="carousel-item active">
                <img src="{{ asset('images/carousel1.jpg') }}" class="d-block w-100" alt="Maternity" />
                <div class="carousel-caption d-none d-md-block">
                    <h5>Foto Studio</h5>
                    <p>Kenangan bersama yang tak terlupakan.</p>
                </div>
            </div>

            <!-- Slide 2 -->
            <div class="carousel-item">
                <img src="{{ asset('images/carousel2.jpg') }}" class="d-block w-100" alt="Group" />
                <div class="carousel-caption d-none d-md-block">
                    <h5>Foto Wedding</h5>
                    <p>Momen yang tak terlupakan dengan skyrent.</p>
                </div>
            </div>

            <!-- Slide 3 -->
            <div class="carousel-item">
                <img src="{{ asset('images/background.jpg') }}" class="d-block w-100" alt="Self Photo" />
                <div class="carousel-caption d-none d-md-block">
                    <h5>Foto Event</h5>
                    <p>Ekspresikan gaya unik Anda dengan sesi foto event.</p>
                </div>
            </div>
        </div>
        <!-- Inner -->

        <!-- Controls -->
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselMaterialStyle"
            data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselMaterialStyle"
            data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>

    <div class="max-w-6xl mx-auto px-4 py-8">
        <div class="bg-white shadow-md rounded-lg p-6 grid grid-cols-1 md:grid-cols-2 gap-4 items-center">
            <!-- Gambar Kiri -->
            <div class="flex justify-center">
                <img src="{{ asset('images/gambar4.jpg') }}" alt="Skyrent Photo" class="w-full max-w-xs rounded-md shadow hover:scale-105 transition-transform duration-300">
            </div>

            <!-- Penjelasan Kanan -->
            <div class="text-gray-700 text-sm space-y-3">
                <h2 class="text-xl font-semibold text-gray-800 mb-2">Tentang <span class="text-red-500">Skyrent Photo</span></h2>
                <p>
                    Skyrent Photo adalah jasa layanan fotografi terpercaya.
                </p>
                <p>
                    Kami melayani sesi <span class="font-medium">Studio, Wedding, Event</span>
                <p>
                    Dengan tim profesional dan alat berkualitas, kami siap bantu abadikan momen terbaikmu.
                </p>
            </div>
        </div>
    </div>

    <div class="container-fluid my-5 px-0 mx-0 gradient-bg">
        <div class="row align-items-center justify-content-center">
            <!-- Kolom Kiri: Teks -->
            <div class="col-lg-5 col-md-6 text-center text-md-start ps-5">
                <h1 class="fw-bold text-danger">Jadwal Pemotretan</h1>
                <h3 class="text-secondary">Lihat dan atur jadwal pemotretan Anda di sini.</h3>
                <p class="text-muted">Pesan studio dengan mudah dan sesuaikan jadwal sesuai kebutuhan Anda.</p>
            
                <!-- Legenda -->
                <div class="mt-4">
                    <h6 class="fw-bold">Legenda:</h6>
                    <div class="d-flex align-items-center mb-2">
                        <span class="me-2 rounded-circle d-inline-block" style="width: 16px; height: 16px; background-color: #dc3545;"></span>
                        <span>Sesi Pemotretan</span>
                    </div>
                    <div class="d-flex align-items-center mb-2">
                        <span class="me-2 rounded-circle d-inline-block" style="width: 16px; height: 16px; background-color: #ffc107;"></span>
                        <span>Booking Pending</span>
                    </div>
                    <div class="d-flex align-items-center">
                        <span class="me-2 rounded-circle d-inline-block border" style="width: 16px; height: 16px; background-color: #ffffff;"></span>
                        <span>Hari Kosong</span>
                    </div>
                </div>
            </div>

            <!-- Kolom Kanan: Kalender -->
            <div class="col-lg-6 col-md-6 px-4 pt-4">
                <div id="calendar-container" class="p-4 bg-white rounded shadow pb-4">
                    <div id="calendar"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="rounded-xl w-full max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 mt-10">
    @php
        $steps = [
            ['title' => 'Registrasi', 'desc' => 'Buat akun baru dengan memasukkan data diri. Pastikan email Anda valid.', 'icon' => 'mdi:account-plus'],
            ['title' => 'Login', 'desc' => 'Masuk menggunakan email dan password Anda.', 'icon' => 'mdi:login'],
            ['title' => 'Booking', 'desc' => 'Pilih produk & paket, lalu tentukan tanggal pemotretan.', 'icon' => 'mdi:calendar-check'],
            ['title' => 'Bayar DP', 'desc' => 'Lakukan pembayaran untuk mengamankan jadwal Anda.', 'icon' => 'mdi:credit-card-check'],
            ['title' => 'Pemotretan', 'desc' => 'Datang sesuai jadwal dan lakukan sesi foto.', 'icon' => 'mdi:camera'],
            ['title' => 'Unduh Foto', 'desc' => 'Dapatkan token & akses hasil foto Anda.', 'icon' => 'mdi:download'],
        ];
    @endphp

    <div class="bg-white shadow rounded-xl overflow-hidden grid grid-cols-1 md:grid-cols-2 gap-6 relative">
        <!-- Kiri: Carousel Langkah -->
        <div class="relative h-96 overflow-hidden">

<!-- Tombol Navigasi Kiri -->
<button id="prevBtn" class="absolute left-2 top-1/2 transform -translate-y-1/2 z-20 text-red-600 hover:text-red-800 transition">
    <span class="iconify w-10 h-10" data-icon="mdi:chevron-left-circle"></span>
</button>

<!-- Tombol Navigasi Kanan -->
<button id="nextBtn" class="absolute right-2 top-1/2 transform -translate-y-1/2 z-20 text-red-600 hover:text-red-800 transition">
    <span class="iconify w-10 h-10" data-icon="mdi:chevron-right-circle"></span>
</button>


            @foreach ($steps as $index => $step)
            <div class="carousel-step absolute inset-0 transition-opacity duration-500 ease-in-out px-6 py-8 {{ $index === 0 ? 'opacity-100 z-10' : 'opacity-0 z-0' }}" data-step="{{ $index }}">
                <div class="h-full flex flex-col justify-center space-y-4 text-center md:text-left">
                    <div class="w-14 h-14 flex items-center justify-center mx-auto md:mx-0">
                        <span class="iconify w-12 h-12 text-red-600" data-icon="{{ $step['icon'] }}"></span>
                    </div>
                    <h4 class="text-xl font-semibold text-gray-800">
                        Langkah {{ $index + 1 }}: {{ $step['title'] }}
                    </h4>
                    <p class="text-sm text-gray-600">{{ $step['desc'] }}</p>
                </div>
            </div>
        @endforeach
        </div>

        <!-- Kanan: Penjelasan Umum -->
        <div class="flex items-center justify-center px-6 py-8">
            <div class="text-center md:text-left">
                <h2 class="text-2xl font-bold text-gray-800 mb-4">Langkah Mudah Booking di Skyrent Photo</h2>
                <p class="text-gray-600 text-sm leading-relaxed">
                    Ikuti langkah-langkah sederhana mulai dari registrasi hingga mendapatkan foto hasil pemotretan Anda. Semua proses dibuat mudah dan cepat untuk kenyamanan Anda!
                </p>
            </div>
        </div>
    </div>
</div>

<!-- CDN Iconify untuk ikon -->
<script src="https://code.iconify.design/3/3.1.0/iconify.min.js"></script>
<script>
    let stepIndex = 0;
    let steps;

    function updateStep() {
        steps.forEach((step, index) => {
            step.classList.toggle('opacity-100', index === stepIndex);
            step.classList.toggle('z-10', index === stepIndex);
            step.classList.toggle('opacity-0', index !== stepIndex);
            step.classList.toggle('z-0', index !== stepIndex);
        });
    }

    function nextStep() {
        stepIndex = (stepIndex + 1) % steps.length;
        updateStep();
    }

    function prevStep() {
        stepIndex = (stepIndex - 1 + steps.length) % steps.length;
        updateStep();
    }

    document.addEventListener('DOMContentLoaded', () => {
        steps = document.querySelectorAll('.carousel-step');
        updateStep();

        document.getElementById('nextBtn').addEventListener('click', nextStep);
        document.getElementById('prevBtn').addEventListener('click', prevStep);

        setInterval(() => {
            nextStep();
        }, 8000);
    });
</script>


    <div class="container ">
        <div class="subtitle">Hasil Maksimal, Harga Rasional</div>
        <h2 class="title">Kami nggak cuma jepret. Kami bercerita lewat gambar!</h2>
        <div class="gradient-line"></div>
    </div>

   <!-- <div class="container flex gap-10">
        <a href="{{ route('booking.create') }}" class="card-link">
            <div class="card">
                <div class="image-container card">
                    <img src="https://d1muf25xaso8hp.cloudfront.net/https%3A%2F%2F8cd0e2413faa671f51d0d6225eebc079.cdn.bubble.io%2Ff1728228539571x839101691141364000%2FKV_RStudio_Section3-1.webp?w=384&h=288&auto=compress&dpr=1&fit=max"
                        alt="Beragam Template">
                </div>
                <div class="title">Booking Pemotretan</div>
                <div class="description">Dari profesional hingga kasual, pilih template yang sesuai dengan kepribadian
                    dan kebutuhan Anda.</div>
            </div>
        </a>

        <a href="{{ route('customer.photos') }}" class="card-link">
            <div class="card">
                <div class="image-container card">
                    <img src="https://d1muf25xaso8hp.cloudfront.net/https%3A%2F%2F8cd0e2413faa671f51d0d6225eebc079.cdn.bubble.io%2Ff1728228548867x700974689973925800%2FKV_RStudio_Section3-2.webp?w=384&h=288&auto=compress&dpr=1&fit=max"
                        alt="Gaya Foto Kustom">
                </div>
                <div class="title">Unduh Foto Kamu</div>
                <div class="description">Deskripsikan gaya foto, angle, dan ukuran foto sesuai request, buat gaya unik
                    yang benar-benar mencerminkan diri Anda.</div>
            </div>
        </a>

        <a href="{{ route('customer.photos') }}" class="card-link">
            <div class="card">
                <div class="image-container card">
                <img src="{{ asset('images/TES.jpg') }}" alt="Gaya Foto Kustom">
                </div>
                <div class="title">Lihat Galeri Kita</div>
                <div class="description">Deskripsikan gaya foto, angle, dan ukuran foto sesuai request, buat gaya unik
                    yang benar-benar mencerminkan diri Anda.</div>
            </div>
        </a>
    </div> -->
    
    <div class="p-10 flex justify-center">
  <!-- Container semua card horizontal -->
  <div class="flex flex-wrap gap-6 justify-center">
    <!-- Card 1 -->
    <a href="{{ route('booking.create') }}">
    <div class="w-72 rounded overflow-hidden shadow-lg bg-white" >
      <img class="w-full h-48 object-cover" src="{{ asset('images/card1.jpg') }}" alt="Mountain">
      <div class="px-4 py-3">
        <div class="font-bold text-lg mb-2">Pesan Pemotretan Sekarang</div>
        <p class="text-gray-700 text-sm">
        Tidak perlu bingung memilih tanggal pemotretan kamu. Skyrent menyediakan layanan pemesanan online</p>
      </div>
    
    </div>
    </a>

    <!-- Card 2 -->
    <a href="{{ route('customer.photos') }}">
    <div class="w-72 rounded overflow-hidden shadow-lg bg-white">
      <img class="w-full h-48 object-cover" src="{{ asset('images/card2.jpg') }}" alt="Mountain">
      <div class="px-4 py-3">
        <div class="font-bold text-lg mb-2">Unduh Foto Kamu</div>
        <p class="text-gray-700 text-sm">
        Lihat dan unduh hasil pemotretan kamu dengan kualitas terbaik, kami menjaga privasi foto anda.
        </p>
      </div>
    </div>
    </a>
    

    <!-- Card 3 -->
    <a href="{{ route('customer.contact') }}">
    <div class="w-72 rounded overflow-hidden shadow-lg bg-white">
      <img class="w-full h-48 object-cover" src="{{ asset('images/TES.jpg') }}" alt="Mountain">
      <div class="px-4 py-3">
        <div class="font-bold text-lg mb-2">Lihat Galeri Kita</div>
        <p class="text-gray-700 text-sm">
        Tidak perlu diragukan lagi kemampuan fotografer kami, Dapatkan pelayanan terbaik dari Skyrent.
        </p>
      </div>
    </div>
    </a>
    
  </div>
</div>

<!--SCRIPT-->
    <script>
    document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');

            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                locale: 'id', // Bahasa Indonesia
                events: '/bookings', // Ambil data dari API
                eventClick: function(info) {
                    alert('Jadwal: ' + info.event.title + '\nTanggal: ' + info.event.start
                        .toLocaleDateString());
                },
                eventRender: function(info) {
                    // Set warna event berdasarkan status
                    var status = info.event.extendedProps.status; // Mengambil status
                    var color = '#007bff'; // Warna default (accepted)
                    
                    if (status === 'approved') {
                        color = '#dc3545'; // Merah untuk status accepted
                    } else if (status === 'pending') {
                        color = '#ffc107'; // Kuning untuk status pending
                    } else if (status === 'declined') {
                        return false; // Jangan tampilkan event jika status declined
                    }

                    info.el.style.backgroundColor = color; // Set background color
                    info.el.style.borderColor = color; // Set border color
                }
            });

            calendar.render();

            setTimeout(() => {
                document.querySelector('.fc-prev-button').classList.remove('fc-button-primary');
                document.querySelector('.fc-prev-button').classList.add('fc-button-secondary');

                document.querySelector('.fc-next-button').classList.remove('fc-button-primary');
                document.querySelector('.fc-next-button').classList.add('fc-button-secondary');
            }, 100);

            setTimeout(() => {
                let todayButton = document.querySelector('.fc-today-button');
                if (todayButton) {
                    todayButton.classList.remove('fc-button-primary');
                    todayButton.classList.add('fc-button-outline-primary');
                }
            }, 100);
        });
    </script>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>

</body>

</html>
@endsection