MIF_E31210515/BackEnd/laravel-pos-ecommerce-backend/resources/views/admin/promo/index.blade.php

156 lines
7.7 KiB
PHP

@extends('layouts.main')
@section('content')
<div class="d-flex justify-content-between mt-1 p-3">
<button class="btn btn-primary mt-3" type="button" data-bs-toggle="modal" data-bs-target="#addNew">
<i class="mdi mdi-library-plus"></i>
tambah promo baru</button>
</div>
<div class="table mt-2 p-3 table-responsive">
<table class="table table-bordered table-striped" id="table-blog">
<thead>
<tr>
<th>No</th>
<th>Judul</th>
<th class="deskripsi">Deskripsi</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
@foreach ($promos as $item)
<tr>
<td>{{ $loop->iteration }}</td>
<td>{{ $item->judul }}</td>
<td class="deskripsi">{{ $item->deskripsi }}</td>
<td>
<div class="d-flex align-items-center gap-1">
<a href="" class="btn btn-warning" style="color: white;" data-bs-toggle="modal"
data-bs-target="#edit{{ $item->id }}">
<i class="mdi mdi-table-edit"></i> Edit</a>
<form action="/admin/promo/{{ $item->id }}" method="post" class="delete-form m-0">
@method('DELETE')
@csrf
<input type="hidden" name="id" value="{{ $item->id }}">
<button class="btn btn-danger delete-buttons" style="box-sizing: 0" type="submit">
<i class="mdi mdi-delete"></i> Hapus</button>
</form>
</div>
</td>
</tr>
<!-- edit Modal -->
<div class="modal fade" id="edit{{ $item->id }}" tabindex="-1" aria-labelledby="exampleModalLabel"
aria-hidden="true" data-bs-backdrop="static">
<div class="modal-dialog bg-white">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel"> <i class="mdi mdi-table-edit"></i>
Edit
promo</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
<form action="/admin/promo/{{ $item->id }}" method="post"
enctype="multipart/form-data">
@csrf
@method('PUT')
<div class="mb-3">
<label for="judul" class="mb-1">Judul</label>
<input type="text" class="form-control" id="judul" name="judul"
value="{{ $item->judul }}">
</div>
<div class="mb-3">
<label for="deskripsi" class="mb-1">Deskripsi</label>
<textarea name="deskripsi" id="deskripsi" cols="30" rows="3" class="form-control">{{ $item->deskripsi }}</textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-bs-dismiss="modal">Batal</button>
<button type="submit" class="btn btn-primary">Simpan</button>
</div>
</form>
</div>
</div>
</div>
</div>
@endforeach
<script>
const deleteButtons = document.querySelectorAll('.delete-buttons');
deleteButtons.forEach(button => {
button.addEventListener('click', function(event) {
event.preventDefault();
const id = this.parentNode.querySelector('input[name="id"]').value;
Swal.fire({
title: 'Hapus Data?',
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#d33',
cancelButtonColor: '#3085d6',
confirmButtonText: 'Hapus',
cancelButtonText: 'Batal',
showCloseButton: false,
allowOutsideClick: false,
allowEscapeKey: false,
customClass: {
container: 'my-swal'
}
}).then((result) => {
if (result.isConfirmed) {
this.parentNode.action = '/admin/promo/' + id;
this.parentNode.submit();
}
});
});
});
</script>
</tbody>
</table>
</div>
@endsection
{{-- modal add new blog --}}
<div class="modal fade" id="addNew" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"
data-bs-backdrop="static">
<div class="modal-dialog">
<div class="modal-content" style="background-color: white">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel"><i class="mdi mdi-library-plus"></i> Tambah Promo
Baru
</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form action="/admin/savePromo" method="post">
@csrf
<div class="mb-3">
<label for="judul" class="mb-1">Judul</label>
<input type="text" class="form-control" id="judul" name="judul"
placeholder="input judul promo ">
</div>
<div class="mb-3">
<label for="deskripsi" class="mb-1">Deskripsi</label>
<textarea name="deskripsi" id="deskripsi" cols="30" rows="3" class="form-control"
placeholder="input deskripsi"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
<button type="submit" class="btn btn-primary">Simpan</button>
</div>
</form>
</div>
</div>
</div>
</div>
@push('script')
<script>
$(document).ready(function() {
$('#table-blog').DataTable();
});
</script>
@endpush