@extends('layouts.main', ['title' => 'Data Setor'])
@push('styles')
    <link href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css" rel="stylesheet" type="text/css">
    <script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" type="text/javascript"></script>
@endpush

@push('scripts')
    <script>
        const dataTable = new simpleDatatables.DataTable("#myTable");
    </script>
@endpush

@section('content')
    <section class="section main-section">

        <div class="card ">
            <header class="card-header">
                <div class="card-header-title">
                    <span class="icon"><i class="mdi mdi-account-multiple"></i></span>
                    Setor

                </div>
                @if (auth()->user()->level != 'bendahara')
                    <div class="p-4">
                        <a href="{{ route('setor.create') }}"
                            class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 rounded"><i
                                class="mdi mdi-plus"></i> Tambah Data</a>
                    </div>
                @endif
            </header>
            <div class="card-content">
                <table id="myTable">
                    <thead>
                        <tr>

                            <th>Kode Setor</th>
                            <th>User</th>
                            <th>Detail Pagu</th>
                            <th>Jumlah</th>
                            <th>Dibuat Pada</th>
                            <th>Status</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($datas as $data)
                            <tr>


                                <td data-label="Name">
                                    <a href="{{ route('setor.show', $data->id) }}">{{ $data->kode_setor }}</a>
                                </td>
                                <td data-label="Nama">
                                    {{ $data->user->nama }}
                                </td>
                                <td data-label="Pagu">
                                    {{ $data->komponen_akun_detail->keterangan }}
                                </td>
                                <td>
                                    {{ number_format($data->nominal_setor, 0, ',', '.') }}
                                </td>

                                <td data-label="Created">
                                    {{ $data->created_at->diffForHumans() }}
                                </td>
                                <td>
                                    @switch($data->status_setor)
                                        @case('pending')
                                            <span
                                                class="bg-yellow-500 py-1 px-2 text-white rounded-lg ">{{ strtoupper($data->status_setor) }}</span>
                                        @break

                                        @case('rejected')
                                            <span
                                                class="bg-red-500 py-1 px-2 rounded-lg text-white">{{ strtoupper($data->status_setor) }}</span>
                                        @break

                                        @default
                                            <span
                                                class="bg-green-500 py-1 px-2  text-white rounded-lg ">{{ strtoupper($data->status_setor) }}</span>
                                    @endswitch
                                </td>
                                <td class="actions-cell">
                                    @if (auth()->user()->level != 'bendahara')
                                        <div class="buttons right nowrap">
                                            <a href="{{ route('setor.edit', $data->id) }}"
                                                class="button small bg-orange-500" data-target="sample-modal-2"
                                                type="button">
                                                <span class="icon"><i class="mdi mdi-pencil text-white"></i></span>
                                            </a>
                                            <button class="button small red --modal-delete"
                                                data-form="delete-data-{{ $data->id }}" data-target="modal-delete"
                                                type="button">
                                                <span class="icon"><i class="mdi mdi-trash-can"></i></span>
                                            </button>
                                            <form action="{{ route('setor.destroy', $data->id) }}" method="POST"
                                                id="delete-data-{{ $data->id }}">
                                                @csrf
                                                @method('DELETE')
                                            </form>
                                        </div>
                                    @else
                                        <a href="{{ route('setor.show', $data->id) }}"
                                            class="button small bg-blue-500" type="button">
                                            <span class="icon"><i class="mdi mdi-eye text-white"></i></span>
                                        </a>
                                    @endif
                                </td>
                            </tr>
                        @endforeach

                    </tbody>

                </table>

            </div>

        </div>
    </section>
@endsection