@php
$breadcrumbs = [
        'Division List' => ''
    ];
@endphp

@extends('layouts.master')

@section('title')
    Division Management
@endsection

@section('style')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
<style>
    .division-card { border-radius: 12px; border: 1px solid #d1d9e6; background-color: #ffffff; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important; }

    #division-table thead th { font-weight: 700; color: #000; border-bottom: 2px solid #e5e9f2; }
    #division-table tbody tr { background-color: #f8f9fc; }
    #division-table tbody td { vertical-align: middle; }

    .btn-circle { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; }
    .btn-circle-edit { background-color: #3f78e0; color: #fff; }
    .btn-circle-edit:hover { background-color: #305fc0; color: #fff; }
    .btn-circle-delete { background-color: #e6394a; color: #fff; }
    .btn-circle-delete:hover { background-color: #c92c3c; color: #fff; }

    div.dataTables_wrapper div.dataTables_filter { text-align: right; }
    div.dataTables_wrapper div.dataTables_filter input { margin-left: 0.5em; border-radius: 6px; border: 1px solid #cbd5e0; }
</style>
@endsection

@section('content')

<section class="wrapper bg-light">
    <div class="container py-10">
        <div class="row">
            <div class="col-lg-12 col-xl-10 mx-auto">

                <br><br>

                <div class="card division-card mb-6">
                    <div class="card-body p-6 p-lg-8">

                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <h2 style="font-size: 1.3rem; color: #000;">Division List</h2>
                            <a href="{{ url('/division_getedit/0') }}" class="btn btn-dark rounded-pill px-6 py-2">
                                <i class="uil uil-plus me-1"></i> Add Division
                            </a>
                        </div>

                        <div class="table-responsive">
                            <table id="division-table" class="table table-hover align-middle w-100">
                                <thead>
                                    <tr>
                                        <th style="width: 60px;">No.</th>
                                        <th>Division Name</th>
                                        <th>Shortname</th>
                                        <th class="text-center" style="width: 120px;">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($division as $index => $item)
                                        <tr>
                                            <td>{{ $index + 1 }}</td>
                                            <td>{{ $item->division_name }}</td>
                                            <td>{{ $item->division_shortname }}</td>
                                            <td class="text-center">
                                                <a href="{{ url('/division_getedit/'.$item->division_id) }}" class="btn btn-circle btn-circle-edit" title="Edit">
                                                    <i class="uil uil-edit-alt"></i>
                                                </a>
                                                <button type="button" class="btn btn-circle btn-circle-delete js-btn-delete-division" data-id="{{ $item->division_id }}" title="Delete">
                                                    <i class="uil uil-trash-alt"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    @empty
                                    @endforelse
                                </tbody>
                            </table>
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </div>
</section>

<br><br>

@endsection

@section('script')
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
<script>
    window.APP_BASE_URL = "{{ url('/') }}";

    $(document).ready(function() {

        $('#division-table').DataTable({
            language: {
                emptyTable: "ยังไม่มีข้อมูลแผนก",
                zeroRecords: "ไม่พบข้อมูลที่ค้นหา",
                search: "Search:",
                paginate: { previous: "Previous", next: "Next" },
            },
            columnDefs: [
                { orderable: false, targets: -1 }
            ],
            order: [[0, 'asc']],
        });

        @if(session('success'))
            if (window.Swal) {
                window.Swal.fire({ title: '{{ session('success') }}', icon: 'success', timer: 1500, showConfirmButton: false });
            }
        @endif

        @if(session('error'))
            if (window.Swal) {
                window.Swal.fire({ title: 'ผิดพลาด', text: '{{ session('error') }}', icon: 'error' });
            }
        @endif

        $('#division-table').on('click', '.js-btn-delete-division', function() {
            const id = $(this).data('id');

            if (window.Swal) {
                window.Swal.fire({
                    title: 'ยืนยันการลบ?',
                    text: 'ต้องการลบข้อมูลแผนกนี้ใช่หรือไม่',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'ลบ',
                    cancelButtonText: 'ยกเลิก',
                }).then(function(result) {
                    if (result.isConfirmed) {
                        window.location.href = window.APP_BASE_URL + '/division_delete/' + id;
                    }
                });
            } else if (confirm('ต้องการลบข้อมูลแผนกนี้ใช่หรือไม่')) {
                window.location.href = window.APP_BASE_URL + '/division_delete/' + id;
            }
        });

    });
</script>
@endsection