@extends('layouts.app')
@section('title', $pageTitle ?? 'CSR Costing')

@push('stylesheets')
<link rel="stylesheet" href="{{ asset('assets/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/plugins/datatables-buttons/css/buttons.bootstrap4.min.css') }}">
<style>
    #csrExplorerBookTableCard .table-responsive { overflow-x: visible; overflow-y: visible; }
    #csrExplorerBookTableCard .table-responsive table td:last-child { position: relative; white-space: nowrap; }
    #csrExplorerBookTableCard .dropdown .dropdown-menu { position: absolute !important; }
    @media (max-width: 768px) {
        #csrExplorerBookTableCard .table-responsive { overflow-x: auto; }
    }
</style>
@endpush

@section('contents')
<section class="content">
    <div class="container-fluid">
        <nav aria-label="breadcrumb" class="mb-3">
            <ol class="breadcrumb mb-0 bg-light rounded border">
                <li class="breadcrumb-item"><a href="{{ route('csr-costing.explorer.index') }}">CSR books</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ $book->name }}</li>
            </ol>
        </nav>

        <div class="row">
            <div class="col-12" id="csrExplorerBookTableCard">
                <x-layouts.index-card
                    :showCreateButton="false"
                    :createRoute="null"
                    tableHeading="Chapters"
                    :headers="['Chapter', 'Actions']"
                    :pagination="''">
                    @foreach ($chapters as $ch)
                        <tr>
                            <td class="text-left font-weight-bold" data-order="{{ (int) $ch->chapter_no }}">
                                <a href="{{ route('csr-costing.explorer.chapter', [$book, $ch]) }}" class="text-dark">
                                    Ch. {{ $ch->chapter_no }} — {{ $ch->name }}
                                </a>
                            </td>
                            <td class="text-right text-nowrap">
                                <a href="{{ route('csr-costing.admin.chapters.edit', [$book, $ch]) }}" class="btn btn-default btn-sm" title="Edit chapter">
                                    <i class="fas fa-edit"></i> Edit chapter
                                </a>
                            </td>
                        </tr>
                    @endforeach
                </x-layouts.index-card>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script src="{{ asset('assets/plugins/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables-buttons/js/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables-buttons/js/buttons.bootstrap4.min.js') }}"></script>
<script src="{{ asset('assets/plugins/jszip/jszip.min.js') }}"></script>
<script src="{{ asset('assets/plugins/pdfmake/pdfmake.min.js') }}"></script>
<script src="{{ asset('assets/plugins/pdfmake/vfs_fonts.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables-buttons/js/buttons.html5.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables-buttons/js/buttons.print.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables-buttons/js/buttons.colVis.min.js') }}"></script>
<script>
    $(function () {
        if ($('#example1').length) {
            $('#example1').DataTable({
                responsive: true,
                lengthChange: false,
                autoWidth: false,
                order: [[0, 'asc']],
                buttons: ['copy', 'csv', 'excel', 'pdf', 'print', 'colvis'],
            }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');
        }
    });
</script>
@endpush