@extends('layout.dashboard_layout')

@section('content')
    <div class="pw-container">
        {{-- ── Flash Messages ── --}}
        @if (session('success'))
            <div class="pw-alert pw-alert-success">
                <i class="bi bi-check-circle-fill"></i>
                {{ session('success') }}
            </div>
        @endif
        @if (session('error'))
            <div class="pw-alert pw-alert-danger">
                <i class="bi bi-x-circle-fill"></i>
                {{ session('error') }}
            </div>
        @endif
        {{-- ── Header ── --}}
        <div class="pw-header">
            <div class="pw-header-left">
                <h4>Data Blok</h4>
                <p>Kelola data blok perkebunan pada sistem</p>
            </div>
            <div class="pw-header-right">
                <a href="{{ route('blocks.create') }}" class="pw-btn pw-btn-primary">
                    <i class="bi bi-plus-lg"></i>
                    Tambah
                </a>
            </div>
        </div>
        {{-- ── Table Card ── --}}
        <div class="pw-card">
            <div id="blocksTableToolbar"></div>
            <div style="overflow-x:auto">
                <table id="blocksTable" class="table w-100">
                    <thead>
                        <tr>
                            <th width="50">No</th>
                            <th>AFD</th>
                            <th>HS</th>
                            <th> Nama Blok</th>
                            <th width="100" class="text-center">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($blocks as $block)
                            <tr>
                                <td></td>
                                <td>
                                    <span class="pw-badge badge-afd">
                                        {{ $block->afd }}
                                    </span>
                                </td>
                                <td>
                                    <span class="pw-badge badge-code">
                                        {{ $block->hs }}
                                    </span>
                                </td>
                                {{-- Nama Blok --}}
                                <td>
                                    <div class="td-name-wrap">
                                        <span class="td-avatar">
                                            {{ strtoupper(substr($block->block_name, 0, 2)) }}
                                        </span>
                                        <span class="td-name">

                                            {{ $block->block_name }}
                                        </span>
                                    </div>
                                </td>
                                {{-- Acion --}}
                                <td>
                                    <div class="td-actions">
                                        <a href="{{ route('blocks.edit', $block->id) }}" class="act-btn act-edit"
                                            title="Edit {{ $block->block_name }}">

                                            <i class="bi bi-pencil"></i>
                                        </a>
                                        <form action="{{ route('blocks.destroy', $block->id) }}" method="POST"
                                            class="d-inline delete-form">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="act-btn act-del"
                                                title="Hapus {{ $block->block_name }}">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div id="blocksTableFooter"></div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            let table = $('#blocksTable').DataTable({
                processing: true,
                responsive: true,
                autoWidth: false,
                pageLength: 10,
                lengthMenu: [
                    10,
                    25,
                    50,
                    100
                ],
                language: {
                    lengthMenu: "Tampilkan _MENU_ data",
                    search: "",
                    searchPlaceholder: "Cari AFD, HS atau blok...",
                    info: "Menampilkan _START_–_END_ dari _TOTAL_ data",
                    infoEmpty: "Tidak ada data",
                    zeroRecords: "Data tidak ditemukan",
                    paginate: {
                        previous: "‹",
                        next: "›"
                    }
                },
                columnDefs: [{
                    targets: 0,
                    searchable: false,
                    orderable: false
                }],
                order: [
                    [3, 'asc']
                ],
                dom: '<"pw-toolbar"lf>' +
                    't' +
                    '<"pw-footer"ip>',
            });

            table.on(
                'draw.dt',
                function() {
                    let info = table.page.info();

                    table.column(
                        0, {
                            page: 'current'
                        }
                    ).nodes().each(
                        function(cell, i) {

                            cell.innerHTML =
                                i + 1 + info.start;
                        });
                }).draw();

            $(document).on(
                'submit',
                '.delete-form',
                function(e) {
                    e.preventDefault();
                    const form = this;
                    Swal.fire({
                        title: 'Hapus data ini?',
                        text: 'Data yang dihapus tidak dapat dikembalikan.',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#DC2626',
                        cancelButtonColor: '#6B7280',
                        confirmButtonText: '<i class="bi bi-trash me-1"></i> Ya, Hapus',
                        cancelButtonText: 'Batal',
                        reverseButtons: true,
                        focusCancel: true,
                        customClass: {
                            popup: 'swal-popup-custom',
                            confirmButton: 'swal-confirm-custom',
                            cancelButton: 'swal-cancel-custom',
                        }
                    }).then(result => {

                        if (result.isConfirmed) {

                            form.submit();
                        }
                    });
                });
        });
    </script>

    <style>
        .swal-popup-custom {
            border-radius: 14px !important;
            font-family: 'Plus Jakarta Sans', sans-serif !important;
        }

        .swal-confirm-custom,
        .swal-cancel-custom {
            border-radius: 8px !important;
            font-size: .8125rem !important;
            padding: 8px 18px !important;
            font-family: 'Plus Jakarta Sans', sans-serif !important;
        }
    </style>
@endpush