489 lines
27 KiB
PHP
489 lines
27 KiB
PHP
@extends('admin.layouts.master')
|
|
|
|
@section('title', 'Edit Landing Admin')
|
|
@section('page-title', 'Edit Landing Page')
|
|
|
|
@section('content')
|
|
|
|
|
|
<div class="container mx-auto p-6 space-y-12">
|
|
{{-- HERO SLIDES --}}
|
|
<section>
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h2 class="text-3xl font-extrabold">Slide</h2>
|
|
<button onclick="openModal('heroAddModal')"
|
|
class="px-5 py-2 bg-blue-600 text-white rounded-xl shadow-lg hover:bg-blue-700 transition">
|
|
+ Add Hero Slide
|
|
</button>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
@foreach ($heroSlides as $slide)
|
|
<div class="bg-white rounded-2xl shadow-md overflow-hidden">
|
|
<div class="h-40 bg-gray-100">
|
|
@if ($slide->image_path)
|
|
<img src="{{ asset('storage/' . $slide->image_path) }}" alt="{{ $slide->title }}"
|
|
class="object-cover w-full h-full">
|
|
@endif
|
|
</div>
|
|
<div class="p-4">
|
|
<h3 class="text-xl font-semibold">{{ $slide->title }}</h3>
|
|
@if ($slide->subtitle)
|
|
<p class="text-gray-600 mt-1">{{ $slide->subtitle }}</p>
|
|
@endif
|
|
<div class="flex items-center justify-between mt-4">
|
|
<span class="text-sm text-gray-500">Urutan: {{ $slide->order }}</span>
|
|
<div class="space-x-2">
|
|
<button onclick="openModal('heroEditModal-{{ $slide->id }}')"
|
|
class="px-3 py-1 bg-green-500 text-white rounded-lg hover:bg-green-600 transition">
|
|
Edit
|
|
</button>
|
|
<form action="{{ route('admin.hero-slides.destroy', $slide->id) }}" method="POST"
|
|
class="inline">
|
|
@csrf @method('DELETE')
|
|
<button type="submit"
|
|
class="px-3 py-1 bg-red-500 text-white rounded-lg hover:bg-red-600 transition">
|
|
Delete
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Edit Modal -->
|
|
<div id="heroEditModal-{{ $slide->id }}"
|
|
class="fixed inset-0 bg-black bg-opacity-40 flex items-center justify-center hidden">
|
|
<div class="bg-white rounded-xl shadow-xl w-11/12 sm:w-3/4 md:w-1/2 lg:w-1/3 p-6 relative">
|
|
<button onclick="closeModal('heroEditModal-{{ $slide->id }}')"
|
|
class="absolute top-3 right-3 text-gray-500 hover:text-gray-800">
|
|
<i class="bi bi-x-lg text-2xl"></i>
|
|
</button>
|
|
<h3 class="text-2xl font-bold mb-4">Edit Hero Slide</h3>
|
|
<form action="{{ route('admin.hero-slides.update', $slide->id) }}" method="POST"
|
|
enctype="multipart/form-data" class="space-y-4">
|
|
@csrf @method('PUT')
|
|
<input type="text" name="title" value="{{ $slide->title }}"
|
|
class="border rounded-lg p-3 w-full" placeholder="Title" required>
|
|
<input type="text" name="subtitle" value="{{ $slide->subtitle }}"
|
|
class="border rounded-lg p-3 w-full" placeholder="Subtitle">
|
|
<input type="file" name="image_path" class="border rounded-lg p-2 w-full">
|
|
<input type="text" name="button_text" value="{{ $slide->button_text }}"
|
|
class="border rounded-lg p-3 w-full" placeholder="Button Text">
|
|
<input type="text" name="button_url" value="{{ $slide->button_url }}"
|
|
class="border rounded-lg p-3 w-full" placeholder="Button URL">
|
|
<input type="number" name="order" value="{{ $slide->order }}"
|
|
class="border rounded-lg p-3 w-full" placeholder="Urutan">
|
|
<div class="text-right">
|
|
<button type="submit"
|
|
class="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition">
|
|
Update
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Add Modal -->
|
|
<div id="heroAddModal" class="fixed inset-0 bg-black bg-opacity-40 flex items-center justify-center hidden">
|
|
<div class="bg-white rounded-xl shadow-xl w-11/12 sm:w-3/4 md:w-1/2 lg:w-1/3 p-6 relative">
|
|
<button onclick="closeModal('heroAddModal')"
|
|
class="absolute top-3 right-3 text-gray-500 hover:text-gray-800">
|
|
<i class="bi bi-x-lg text-2xl"></i>
|
|
</button>
|
|
<h3 class="text-2xl font-bold mb-4">Add Hero Slide</h3>
|
|
<form action="{{ route('admin.hero-slides.store') }}" method="POST" enctype="multipart/form-data"
|
|
class="space-y-4">
|
|
@csrf
|
|
<input type="text" name="title" class="border rounded-lg p-3 w-full" placeholder="Title" required>
|
|
<input type="text" name="subtitle" class="border rounded-lg p-3 w-full" placeholder="Subtitle">
|
|
<input type="file" name="image_path" class="border rounded-lg p-2 w-full">
|
|
<input type="text" name="button_text" class="border rounded-lg p-3 w-full" placeholder="Button Text">
|
|
<input type="text" name="button_url" class="border rounded-lg p-3 w-full" placeholder="Button URL">
|
|
<input type="number" name="order" class="border rounded-lg p-3 w-full" placeholder="Order">
|
|
<div class="text-right">
|
|
<button type="submit"
|
|
class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
|
|
Save
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function openModal(id) {
|
|
document.getElementById(id).classList.remove('hidden');
|
|
}
|
|
|
|
function closeModal(id) {
|
|
document.getElementById(id).classList.add('hidden');
|
|
}
|
|
</script>
|
|
|
|
|
|
{{-- PURPOSES --}}
|
|
<section>
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h2 class="text-3xl font-extrabold">Tujuan</h2>
|
|
<button onclick="openModal('purposeAddModal')"
|
|
class="px-5 py-2 bg-blue-600 text-white rounded-xl shadow-lg hover:bg-blue-700 transition">
|
|
+ Add Purpose
|
|
</button>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
@foreach ($purposes as $p)
|
|
<div class="bg-white rounded-2xl shadow-md overflow-hidden flex flex-col">
|
|
<div class="flex items-center justify-center h-24 bg-gray-100">
|
|
@if ($p->icon_path)
|
|
<img src="{{ asset('storage/' . $p->icon_path) }}" alt="{{ $p->title }}"
|
|
class="object-contain h-16 w-16">
|
|
@else
|
|
<i class="bi bi-lightbulb-fill text-gray-400 text-4xl"></i>
|
|
@endif
|
|
</div>
|
|
<div class="p-4 flex-1 flex flex-col">
|
|
<h3 class="text-xl font-semibold">{{ $p->title }}</h3>
|
|
<p class="text-gray-600 mt-2 flex-1">{{ $p->description }}</p>
|
|
<div class="flex items-center justify-between mt-4">
|
|
<span class="text-sm text-gray-500">Order: {{ $p->order }}</span>
|
|
<div class="space-x-2">
|
|
<button onclick="openModal('purposeEditModal-{{ $p->id }}')"
|
|
class="px-3 py-1 bg-green-500 text-white rounded-lg hover:bg-green-600 transition">
|
|
Edit
|
|
</button>
|
|
<form action="{{ route('admin.purposes.destroy', $p->id) }}" method="POST"
|
|
class="inline">
|
|
@csrf @method('DELETE')
|
|
<button type="submit"
|
|
class="px-3 py-1 bg-red-500 text-white rounded-lg hover:bg-red-600 transition">
|
|
Delete
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Edit Modal -->
|
|
<div id="purposeEditModal-{{ $p->id }}"
|
|
class="fixed inset-0 bg-black bg-opacity-40 flex items-center justify-center hidden">
|
|
<div class="bg-white rounded-xl shadow-xl w-11/12 sm:w-3/4 md:w-1/2 lg:w-1/3 p-6 relative">
|
|
<button onclick="closeModal('purposeEditModal-{{ $p->id }}')"
|
|
class="absolute top-3 right-3 text-gray-500 hover:text-gray-800">
|
|
<i class="bi bi-x-lg text-2xl"></i>
|
|
</button>
|
|
<h3 class="text-2xl font-bold mb-4">Edit Purpose</h3>
|
|
<form action="{{ route('admin.purposes.update', $p->id) }}" method="POST"
|
|
enctype="multipart/form-data" class="space-y-4">
|
|
@csrf @method('PUT')
|
|
<input type="text" name="title" value="{{ $p->title }}"
|
|
class="border rounded-lg p-3 w-full" placeholder="Title" required>
|
|
<textarea name="description" class="border rounded-lg p-3 w-full" placeholder="Description" required>{{ $p->description }}</textarea>
|
|
<input type="file" name="icon_path" class="border rounded-lg p-2 w-full">
|
|
<input type="number" name="order" value="{{ $p->order }}"
|
|
class="border rounded-lg p-3 w-full" placeholder="Order">
|
|
<div class="text-right">
|
|
<button type="submit"
|
|
class="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition">
|
|
Update
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</section>
|
|
|
|
{{-- REQUIREMENTS --}}
|
|
<section>
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h2 class="text-3xl font-extrabold">Persyaratan</h2>
|
|
<button onclick="openModal('reqAddModal')"
|
|
class="px-5 py-2 bg-blue-600 text-white rounded-xl shadow-lg hover:bg-blue-700 transition">
|
|
+ Add Requirement
|
|
</button>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
@foreach ($requirements as $r)
|
|
<div class="bg-white rounded-2xl shadow-md p-6 flex flex-col justify-between">
|
|
<div>
|
|
<p class="text-lg font-medium text-gray-800">{{ $r->text }}</p>
|
|
</div>
|
|
<div class="mt-4 flex items-center justify-between">
|
|
<span class="text-sm text-gray-500">Order: {{ $r->order }}</span>
|
|
<div class="space-x-2">
|
|
<button onclick="openModal('reqEditModal-{{ $r->id }}')"
|
|
class="px-3 py-1 bg-green-500 text-white rounded-lg hover:bg-green-600 transition">
|
|
Edit
|
|
</button>
|
|
<form action="{{ route('admin.requirements.destroy', $r->id) }}" method="POST"
|
|
class="inline">
|
|
@csrf @method('DELETE')
|
|
<button type="submit"
|
|
class="px-3 py-1 bg-red-500 text-white rounded-lg hover:bg-red-600 transition">
|
|
Delete
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Edit Modal -->
|
|
<div id="reqEditModal-{{ $r->id }}"
|
|
class="fixed inset-0 bg-black bg-opacity-40 flex items-center justify-center hidden">
|
|
<div class="bg-white rounded-xl shadow-xl w-11/12 sm:w-3/4 md:w-1/2 lg:w-1/3 p-6 relative">
|
|
<button onclick="closeModal('reqEditModal-{{ $r->id }}')"
|
|
class="absolute top-3 right-3 text-gray-500 hover:text-gray-800">
|
|
<i class="bi bi-x-lg text-2xl"></i>
|
|
</button>
|
|
<h3 class="text-2xl font-bold mb-4">Edit Requirement</h3>
|
|
<form action="{{ route('admin.requirements.update', $r->id) }}" method="POST"
|
|
class="space-y-4">
|
|
@csrf @method('PUT')
|
|
<input type="text" name="text" value="{{ $r->text }}"
|
|
class="border rounded-lg p-3 w-full" placeholder="Requirement text" required>
|
|
<input type="number" name="order" value="{{ $r->order }}"
|
|
class="border rounded-lg p-3 w-full" placeholder="Order">
|
|
<div class="text-right">
|
|
<button type="submit"
|
|
class="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition">
|
|
Update
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
<!-- Add Modal -->
|
|
|
|
</section>
|
|
|
|
|
|
{{-- SCHEDULES --}}
|
|
<section>
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h2 class="text-3xl font-extrabold">Jadwal</h2>
|
|
<button onclick="openModal('schedAddModal')"
|
|
class="px-5 py-2 bg-blue-600 text-white rounded-xl shadow-lg hover:bg-blue-700 transition">
|
|
+ Add Schedule
|
|
</button>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
@foreach ($schedules as $s)
|
|
<div class="bg-white rounded-2xl shadow-md overflow-hidden flex flex-col">
|
|
<div class="p-6 flex-1">
|
|
<h3 class="text-xl font-semibold">{{ $s->activity }}</h3>
|
|
<p class="text-gray-600 mt-2">{{ $s->time }}</p>
|
|
</div>
|
|
<div class="bg-gray-50 px-6 py-4 flex items-center justify-between">
|
|
<span class="text-sm text-gray-500">Order: {{ $s->order }}</span>
|
|
<div class="space-x-2">
|
|
<button onclick="openModal('schedEditModal-{{ $s->id }}')"
|
|
class="px-3 py-1 bg-green-500 text-white rounded-lg hover:bg-green-600 transition">
|
|
Edit
|
|
</button>
|
|
<form action="{{ route('landing-page.schedules.destroy', $s->id) }}" method="POST"
|
|
class="inline">
|
|
@csrf @method('DELETE')
|
|
<button type="submit"
|
|
class="px-3 py-1 bg-red-500 text-white rounded-lg hover:bg-red-600 transition">
|
|
Delete
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Edit Modal -->
|
|
<div id="schedEditModal-{{ $s->id }}"
|
|
class="fixed inset-0 bg-black bg-opacity-40 flex items-center justify-center hidden">
|
|
<div class="bg-white rounded-xl shadow-xl w-11/12 sm:w-2/3 md:w-1/2 lg:w-1/3 p-6 relative">
|
|
<button onclick="closeModal('schedEditModal-{{ $s->id }}')"
|
|
class="absolute top-3 right-3 text-gray-500 hover:text-gray-800">
|
|
<i class="bi bi-x-lg text-2xl"></i>
|
|
</button>
|
|
<h3 class="text-2xl font-bold mb-4">Edit Schedule</h3>
|
|
<form action="{{ route('landing-page.schedules.update', $s->id) }}" method="POST"
|
|
class="space-y-4">
|
|
@csrf @method('PUT')
|
|
<input type="text" name="activity" value="{{ $s->activity }}"
|
|
class="border rounded-lg p-3 w-full" placeholder="Activity" required>
|
|
<input type="date" name="date_from"
|
|
value="{{ \Carbon\Carbon::parse($s->date_from)->format('Y-m-d') }}"
|
|
class="border rounded-lg p-3 w-full" required>
|
|
<input type="date" name="date_to"
|
|
value="{{ \Carbon\Carbon::parse($s->date_to)->format('Y-m-d') }}"
|
|
class="border rounded-lg p-3 w-full" required>
|
|
<input type="number" name="order" value="{{ $s->order }}"
|
|
class="border rounded-lg p-3 w-full" placeholder="Order">
|
|
<div class="text-right">
|
|
<button type="submit"
|
|
class="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition">
|
|
Update
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
<!-- Add Modal -->
|
|
<div id="schedAddModal" class="fixed inset-0 bg-black bg-opacity-40 flex items-center justify-center hidden">
|
|
<div class="bg-white rounded-xl shadow-xl w-11/12 sm:w-2/3 md:w-1/2 lg:w-1/3 p-6 relative">
|
|
<button onclick="closeModal('schedAddModal')"
|
|
class="absolute top-3 right-3 text-gray-500 hover:text-gray-800">
|
|
<i class="bi bi-x-lg text-2xl"></i>
|
|
</button>
|
|
<h3 class="text-2xl font-bold mb-4">Add Schedule</h3>
|
|
<form action="{{ route('landing-page.schedules.store') }}" method="POST" class="space-y-4">
|
|
@csrf
|
|
<input type="text" name="activity" class="border rounded-lg p-3 w-full"
|
|
placeholder="Activity" required>
|
|
<input type="date" name="date_from" class="border rounded-lg p-3 w-full" required>
|
|
<input type="date" name="date_to" class="border rounded-lg p-3 w-full" required>
|
|
<input type="number" name="order" class="border rounded-lg p-3 w-full" placeholder="Order">
|
|
<div class="text-right">
|
|
<button type="submit"
|
|
class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
|
|
Save
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- ADD Modals -->
|
|
<div id="heroAddModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
|
|
<div class="bg-white rounded-lg p-6 w-1/2 relative">
|
|
<button onclick="closeModal('heroAddModal')"
|
|
class="absolute top-2 right-2 text-gray-500 hover:text-gray-800"><i class="bi bi-x-lg"></i></button>
|
|
<h3 class="text-xl font-bold mb-4">Add Hero Slide</h3>
|
|
<form action="{{ route('admin.hero-slides.store') }}" method="POST" enctype="multipart/form-data"
|
|
class="space-y-4">
|
|
@csrf
|
|
<input type="text" name="title" placeholder="Title" class="border rounded p-2 w-full" required />
|
|
<input type="text" name="subtitle" placeholder="Subtitle" class="border rounded p-2 w-full" />
|
|
<input type="file" name="image_path" class="border rounded p-2 w-full" />
|
|
<input type="text" name="button_text" placeholder="Button Text" class="border rounded p-2 w-full" />
|
|
<input type="text" name="button_url" placeholder="Button URL" class="border rounded p-2 w-full" />
|
|
<input type="number" name="order" placeholder="Order" class="border rounded p-2 w-full" />
|
|
<div class="text-right"><button type="submit"
|
|
class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Save</button></div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add Modal -->
|
|
<div id="purposeAddModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
|
|
<div class="bg-white rounded-lg p-6 w-1/3 relative">
|
|
<button onclick="closeModal('purposeAddModal')"
|
|
class="absolute top-2 right-2 text-gray-500 hover:text-gray-800">
|
|
<i class="bi bi-x-lg"></i>
|
|
</button>
|
|
<h3 class="text-xl font-bold mb-4">Add Purpose</h3>
|
|
<form action="{{ route('admin.purposes.store') }}" method="POST" enctype="multipart/form-data"
|
|
class="space-y-4">
|
|
@csrf
|
|
<label class="block">
|
|
Title
|
|
<input type="text" name="title" class="border rounded p-2 w-full" required>
|
|
</label>
|
|
<label class="block">
|
|
Description
|
|
<textarea name="description" class="border rounded p-2 w-full" required></textarea>
|
|
</label>
|
|
<label class="block">
|
|
Icon
|
|
<input type="file" name="icon_path" class="border rounded p-2 w-full">
|
|
</label>
|
|
<label class="block">
|
|
Order
|
|
<input type="number" name="order" class="border rounded p-2 w-full">
|
|
</label>
|
|
<div class="text-right">
|
|
<button type="submit"
|
|
class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Save</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="reqAddModal" class="fixed inset-0 bg-black bg-opacity-40 flex items-center justify-center hidden">
|
|
<div class="bg-white rounded-xl shadow-xl w-11/12 sm:w-3/4 md:w-1/2 lg:w-1/3 p-6 relative">
|
|
<button onclick="closeModal('reqAddModal')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800">
|
|
<i class="bi bi-x-lg text-2xl"></i>
|
|
</button>
|
|
<h3 class="text-2xl font-bold mb-4">Add Requirement</h3>
|
|
<form action="{{ route('admin.requirements.store') }}" method="POST" class="space-y-4">
|
|
@csrf
|
|
<input type="text" name="text" class="border rounded-lg p-3 w-full" placeholder="Requirement text"
|
|
required>
|
|
<input type="number" name="order" class="border rounded-lg p-3 w-full" placeholder="Order">
|
|
<div class="text-right">
|
|
<button type="submit"
|
|
class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
|
|
Save
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
// Sidebar dropdown state
|
|
function toggleDropdown(dropdownId) {
|
|
const dropdown = document.getElementById(dropdownId);
|
|
const icon = document.getElementById('dataAlternatifIcon');
|
|
const isHidden = dropdown.classList.contains('hidden');
|
|
if (isHidden) {
|
|
dropdown.classList.remove('hidden');
|
|
icon.classList.add('rotate-180');
|
|
sessionStorage.setItem(dropdownId, 'open');
|
|
} else {
|
|
dropdown.classList.add('hidden');
|
|
icon.classList.remove('rotate-180');
|
|
sessionStorage.setItem(dropdownId, 'closed');
|
|
}
|
|
}
|
|
|
|
function keepDropdownOpen(dropdownId) {
|
|
sessionStorage.setItem(dropdownId, 'open');
|
|
}
|
|
|
|
function restoreDropdownState(dropdownId) {
|
|
const dropdown = document.getElementById(dropdownId);
|
|
const icon = document.getElementById('dataAlternatifIcon');
|
|
if (sessionStorage.getItem(dropdownId) === 'open') {
|
|
dropdown.classList.remove('hidden');
|
|
icon.classList.add('rotate-180');
|
|
}
|
|
}
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
restoreDropdownState('dataAlternatifDropdown');
|
|
});
|
|
|
|
function openModal(id) {
|
|
document.getElementById(id).classList.remove('hidden');
|
|
}
|
|
|
|
function closeModal(id) {
|
|
document.getElementById(id).classList.add('hidden');
|
|
}
|
|
</script>
|
|
|
|
@endsection
|