@extends('layouts.web')

@section('content')
    <div class="mb-3 text-end">

    </div>
    <div class="container">
        <ul class="nav nav-tabs">

            @foreach ($area as $key => $item)
                <li class="nav-item">
                    <a href="#tab-{{ $item->id }}" class="nav-link @if ($key == 0) active @endif"
                        data-bs-toggle="tab">{{ $item->area }}</a>
                </li>
            @endforeach
        </ul>
        <div class="tab-content">
            @foreach ($area as $key => $item)
                <div class="tab-pane fade show p-4 @if ($key == 0) active @endif" id="tab-{{ $item->id }}">
                    <div class="table-responsive small">
                        <table class="table table-striped table-bordered datatable">
                            <thead>
                                <tr>
                                    
                                    <th class="bg-secondary text-white fw-normal text-uppercase text-center" scope="col">
                                        Nama</th>
                                    <th class="bg-secondary text-white fw-normal text-uppercase text-center" scope="col">
                                        Stock</th>
                                    <th class="bg-secondary text-white fw-normal text-uppercase text-center" scope="col">
                                        Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($data[$item->id] as $key => $item)
                                    <tr>
                                        <td>{{ $item->prize }}</td>
                                        <td>{{ $item->stock }}</td>
                                        <td class="text-center">
                                            <a href="{{ url('admin/raffle/stock/edit/' . $item->id) }}" class="me-2">Edit</a> |
                                            <a href="{{ url('admin/raffle/stock/delete/' . $item->id) }}" class="ms-2">Delete</a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
@endsection


@push('scripts')
    <link
        href="https://cdn.datatables.net/v/bs5/jszip-3.10.1/dt-1.13.8/b-2.4.2/b-colvis-2.4.2/b-html5-2.4.2/b-print-2.4.2/r-2.5.0/datatables.min.css"
        rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
        integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
    <script
        src="https://cdn.datatables.net/v/bs5/jszip-3.10.1/dt-1.13.8/b-2.4.2/b-colvis-2.4.2/b-html5-2.4.2/b-print-2.4.2/r-2.5.0/datatables.min.js">
    </script>
    <script>
        $('.datatable').DataTable({
            // dom: 'Bfrtip',
            // buttons: [
            //     'copy', 'excel',
            //     {
            //         extend: 'pdfHtml5',
            //         orientation: 'portrait',
            //         pageSize: 'A4',
            //         exportOptions: {
            //             columns: [0, 1, 2, 3, 4]
            //         },
            //         customize: function(doc) {
            //             doc.content[1].table.widths = ['5%', '35%', '40%', '10%', '10%']
            //         }
            //     },
            //     {
            //         extend: 'print',
            //         orientation: 'portrait',
            //         pageSize: 'A4',
            //         exportOptions: {
            //             columns: [0, 1, 2, 3, 4]
            //         },
            //         customize: function(doc) {
            //             doc.content[1].table.widths = ['5%', '35%', '40%', '10%', '10%']
            //         }
            //     },
            // ]
        });
    </script>
@endpush