437 lines
18 KiB
PHP
437 lines
18 KiB
PHP
@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 |