@extends('layouts/admin')

@section('content')
    <div class="mb-3 text-end">
        <a href="{{ route('admin.sub_area.new') }}" class="btn btn-primary">Add New</a>
    </div>
    <div class="table-responsive small">
        <table class="table table-striped table-bordered" id="datatable">
            <thead>
                <tr>
                    <th class="bg-secondary text-white fw-normal text-uppercase text-center" style="width:30px" scope="col">No</th>
                    <th class="bg-secondary text-white fw-normal text-uppercase text-center" scope="col">Area</th>
                    <th class="bg-secondary text-white fw-normal text-uppercase text-center" scope="col">Sub Area</th>
                    <th class="bg-secondary text-white fw-normal text-uppercase text-center" scope="col">info</th>
                    <th class="bg-secondary text-white fw-normal text-uppercase text-center" scope="col">Profiling</th>
                    <th class="bg-secondary text-white fw-normal text-uppercase text-center" scope="col">Selling</th>
                    <th class="bg-secondary text-white fw-normal text-uppercase text-center" style="width: 80px" scope="col">Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($data as $key => $item)
                    <tr>
                        <td class="text-center">{{ $key + 1 }}</td>
                        <td>{{ $item->area }}</td>
                        <td>{{ $item->sub_area }}</td>
                        <td>{{ $item->info }}</td>
                        <td>{{ $item->sampling }}</td>
                        <td>{{ $item->selling }}</td>
                        <td class="text-center">
                            <a href="{{url('admin/sub_area/edit/' . $item->id) }}" class="text-primary me-2"><svg class="bi"><use xlink:href="#edit"></use></svg></a>
                            <a href="{{url('admin/sub_area/delete/' . $item->id) }}" class="text-danger"><svg class="bi"><use xlink:href="#trash"></use></svg></a>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </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,5]
                    },
                    customize: function ( doc ) {
                        doc.content[1].table.widths = ['5%','15%','20%','40%', '10%', '10%']
                    }
                }, 
                {
                    extend: 'print',
                    orientation: 'portrait',
                    pageSize: 'A4',
                    exportOptions : {
                        columns : [0,1,2,3,4,5]
                    },
                    customize: function ( doc ) {
                        doc.content[1].table.widths = ['5%','15%','20%','40%', '10%', '10%']
                    }
                },
            ]
        });
    </script>
@endpush