From ad2644f57e8791fdaf3ea6083570bb1e2e497a62 Mon Sep 17 00:00:00 2001
From: Daeng Deni Mardaeni <ddeni05@gmail.com>
Date: Fri, 15 Nov 2024 09:49:34 +0700
Subject: [PATCH] Tambah halaman untuk pembuatan dan daftar hari libur

Telah ditambahkan halaman baru untuk pembuatan (create.blade.php) dan daftar (index.blade.php) hari libur. Halaman pembuatan mencakup form untuk menambah atau mengedit hari libur, sementara halaman daftar mendukung fitur pencarian dan penghapusan data hari libur.
---
 .../views/holidaycalendar/create.blade.php    |  73 ++++++++
 .../views/holidaycalendar/index.blade.php     | 158 ++++++++++++++++++
 2 files changed, 231 insertions(+)
 create mode 100644 resources/views/holidaycalendar/create.blade.php
 create mode 100644 resources/views/holidaycalendar/index.blade.php

diff --git a/resources/views/holidaycalendar/create.blade.php b/resources/views/holidaycalendar/create.blade.php
new file mode 100644
index 0000000..46dc095
--- /dev/null
+++ b/resources/views/holidaycalendar/create.blade.php
@@ -0,0 +1,73 @@
+@extends('layouts.main')
+
+@section('breadcrumbs')
+    {{ Breadcrumbs::render(request()->route()->getName()) }}
+@endsection
+
+@section('content')
+    <div class="w-full grid gap-5 lg:gap-7.5 mx-auto">
+        @if(isset($holidayCalendar->id))
+            <form action="{{ route('basicdata.holidaycalendar.update', $holidayCalendar->id) }}" method="POST">
+                <input type="hidden" name="id" value="{{ $holidayCalendar->id }}">
+                @method('PUT')
+        @else
+            <form method="POST" action="{{ route('basicdata.holidaycalendar.store') }}">
+        @endif
+                @csrf
+                <div class="card pb-2.5">
+                    <div class="card-header" id="basic_settings">
+                        <h3 class="card-title">
+                            {{ isset($holidayCalendar->id) ? 'Edit' : 'Tambah' }} Hari Libur
+                        </h3>
+                        <div class="flex items-center gap-2">
+                            <a href="{{ route('basicdata.holidaycalendar.index') }}" class="btn btn-xs btn-info"><i class="ki-filled ki-exit-left"></i> Back</a>
+                        </div>
+                    </div>
+                    <div class="card-body grid gap-5">
+                        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                            <label class="form-label max-w-56">
+                                Tanggal
+                            </label>
+                            <div class="flex flex-wrap items-baseline w-full">
+                                <input class="input @error('date') border-danger bg-danger-light @enderror" type="date" name="date" value="{{ $holidayCalendar->date ?? '' }}">
+                                @error('date')
+                                <em class="alert text-danger text-sm">{{ $message }}</em>
+                                @enderror
+                            </div>
+                        </div>
+                        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                            <label class="form-label max-w-56">
+                                Deskripsi
+                            </label>
+                            <div class="flex flex-wrap items-baseline w-full">
+                                <input class="input @error('description') border-danger bg-danger-light @enderror" type="text" name="description" value="{{ $holidayCalendar->description ?? '' }}">
+                                @error('description')
+                                <em class="alert text-danger text-sm">{{ $message }}</em>
+                                @enderror
+                            </div>
+                        </div>
+                        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                            <label class="form-label max-w-56">
+                                Tipe
+                            </label>
+                            <div class="flex flex-wrap items-baseline w-full">
+                                <select class="select @error('type') border-danger bg-danger-light @enderror" name="type">
+                                    <option value="">Pilih Tipe</option>
+                                    <option value="national_holiday" {{ (isset($holidayCalendar) && $holidayCalendar->type == 'national_holiday') ? 'selected' : '' }}>Nasional</option>
+                                    <option value="collective_leave" {{ (isset($holidayCalendar) && $holidayCalendar->type == 'collective_leave') ? 'selected' : '' }}>Cuti Bersama</option>
+                                </select>
+                                @error('type')
+                                <em class="alert text-danger text-sm">{{ $message }}</em>
+                                @enderror
+                            </div>
+                        </div>
+                        <div class="flex justify-end">
+                            <button type="submit" class="btn btn-primary">
+                                Save
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </form>
+    </div>
+@endsection
diff --git a/resources/views/holidaycalendar/index.blade.php b/resources/views/holidaycalendar/index.blade.php
new file mode 100644
index 0000000..de480b0
--- /dev/null
+++ b/resources/views/holidaycalendar/index.blade.php
@@ -0,0 +1,158 @@
+@extends('layouts.main')
+
+@section('breadcrumbs')
+    {{ Breadcrumbs::render('basicdata.holidaycalendar') }}
+@endsection
+
+@section('content')
+    <div class="grid">
+        <div class="card card-grid min-w-full" data-datatable="false" data-datatable-page-size="5" data-datatable-state-save="false" id="holiday-calendar-table" data-api-url="{{ route('basicdata.holidaycalendar.datatables') }}">
+            <div class="card-header py-5 flex-wrap">
+                <h3 class="card-title">
+                    Daftar Hari Libur
+                </h3>
+                <div class="flex flex-wrap gap-2 lg:gap-5">
+                    <div class="flex">
+                        <label class="input input-sm"> <i class="ki-filled ki-magnifier"> </i>
+                            <input placeholder="Cari Hari Libur" id="search" type="text" value="">
+                        </label>
+                    </div>
+                    <div class="flex flex-wrap gap-2.5">
+                        <div class="h-[24px] border border-r-gray-200"></div>
+                        <a class="btn btn-sm btn-light" href="{{ route('basicdata.holidaycalendar.export') }}"> Export to Excel </a>
+                        <a class="btn btn-sm btn-primary" href="{{ route('basicdata.holidaycalendar.create') }}"> Tambah Hari Libur </a>
+                    </div>
+                </div>
+            </div>
+            <div class="card-body">
+                <div class="scrollable-x-auto">
+                    <table class="table table-auto table-border align-middle text-gray-700 font-medium text-sm" data-datatable-table="true">
+                        <thead>
+                        <tr>
+                            <th class="w-14">
+                                <input class="checkbox checkbox-sm" data-datatable-check="true" type="checkbox"/>
+                            </th>
+                            <th class="min-w-[150px]" data-datatable-column="date">
+                                <span class="sort"> <span class="sort-label"> Tanggal </span>
+                                    <span class="sort-icon"> </span> </span>
+                            </th>
+                            <th class="min-w-[250px]" data-datatable-column="description">
+                                <span class="sort"> <span class="sort-label"> Deskripsi </span>
+                                    <span class="sort-icon"> </span> </span>
+                            </th>
+                            <th class="min-w-[150px]" data-datatable-column="type">
+                                <span class="sort"> <span class="sort-label"> Tipe </span>
+                                    <span class="sort-icon"> </span> </span>
+                            </th>
+                            <th class="min-w-[50px] text-center" data-datatable-column="actions">Action</th>
+                        </tr>
+                        </thead>
+                    </table>
+                </div>
+                <div class="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium">
+                    <div class="flex items-center gap-2">
+                        Show
+                        <select class="select select-sm w-16" data-datatable-size="true" name="perpage"> </select> per page
+                    </div>
+                    <div class="flex items-center gap-4">
+                        <span data-datatable-info="true"> </span>
+                        <div class="pagination" data-datatable-pagination="true">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+@endsection
+
+@push('scripts')
+    <script type="text/javascript">
+        function deleteData(data) {
+            Swal.fire({
+                title: 'Are you sure?',
+                text: "You won't be able to revert this!",
+                icon: 'warning',
+                showCancelButton: true,
+                confirmButtonColor: '#3085d6',
+                cancelButtonColor: '#d33',
+                confirmButtonText: 'Yes, delete it!'
+            }).then((result) => {
+                if (result.isConfirmed) {
+                    $.ajaxSetup({
+                        headers: {
+                            'X-CSRF-TOKEN': '{{ csrf_token()  }}'
+                        }
+                    });
+
+                    $.ajax(`basic-data/holiday-calendar/${data}`, {
+                        type: 'DELETE'
+                    }).then((response) => {
+                        swal.fire('Deleted!', 'Holiday has been deleted.', 'success').then(() => {
+                            window.location.reload();
+                        });
+                    }).catch((error) => {
+                        console.error('Error:', error);
+                        Swal.fire('Error!', 'An error occurred while deleting the holiday.', 'error');
+                    });
+                }
+            })
+        }
+    </script>
+    <script type="module">
+        const element = document.querySelector('#holiday-calendar-table');
+        const searchInput = document.getElementById('search');
+
+        const apiUrl = element.getAttribute('data-api-url');
+        const dataTableOptions = {
+            apiEndpoint: apiUrl,
+            pageSize: 5,
+            columns: {
+                select: {
+                    render: (item, data, context) => {
+                        const checkbox = document.createElement('input');
+                        checkbox.className = 'checkbox checkbox-sm';
+                        checkbox.type = 'checkbox';
+                        checkbox.value = data.id.toString();
+                        checkbox.setAttribute('data-datatable-row-check', 'true');
+                        return checkbox.outerHTML.trim();
+                    },
+                },
+                date: {
+                    title: 'Tanggal',
+                    render: (item, data) => {
+                        return window.formatTanggalIndonesia(data.date)
+                    },
+                },
+                description: {
+                    title: 'Deskripsi',
+                },
+                type: {
+                    title: 'Tipe',
+                    render: (item, data) => {
+                        return `<span class="capitalize badge badge-sm badge-${data.type === 'national_holiday' ? 'primary' : 'info'}">${data.type.replace('_', ' ')}</span>`;
+                    },
+                },
+                actions: {
+                    title: 'Action',
+                    render: (item, data) => {
+                        return `<div class="flex flex-nowrap justify-center">
+                            <a class="btn btn-sm btn-icon btn-clear btn-info" href="basic-data/holiday-calendar/${data.id}/edit">
+                                <i class="ki-outline ki-notepad-edit"></i>
+                            </a>
+                            <a onclick="deleteData(${data.id})" class="delete btn btn-sm btn-icon btn-clear btn-danger">
+                                <i class="ki-outline ki-trash"></i>
+                            </a>
+                        </div>`;
+                    },
+                }
+            },
+        };
+
+        let dataTable = new KTDataTable(element, dataTableOptions);
+        // Custom search functionality
+        searchInput.addEventListener('input', function () {
+            const searchValue = this.value.trim();
+            dataTable.search(searchValue, true);
+        });
+    </script>
+@endpush