@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>
    #csrExplorerChapterTableCard .table-responsive { overflow-x: visible; overflow-y: visible; }
    #csrExplorerChapterTableCard .table-responsive table td:last-child { position: relative; white-space: nowrap; }
    #csrExplorerChapterTableCard .dropdown .dropdown-menu { position: absolute !important; }
    @media (max-width: 768px) {
        #csrExplorerChapterTableCard .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"><a href="{{ route('csr-costing.explorer.book', $book) }}">{{ $book->name }}</a></li>
                <li class="breadcrumb-item active" aria-current="page">Ch. {{ $chapter->chapter_no }} {{ $chapter->name }}</li>
            </ol>
        </nav>

        @if ($chapter->workType)
            <p class="text-muted small mb-3">Work type: <strong class="text-primary">{{ $chapter->workType->name }}</strong></p>
        @endif

        @php
            $chapterHeaderAction = '<a href="' . e(route('csr-costing.admin.chapters.edit', [$book, $chapter])) . '" class="btn btn-default btn-sm mr-2"><i class="fas fa-edit"></i> Edit chapter</a>'
                . '<a href="' . e(route('csr-costing.admin.sections.create', [$book, $chapter])) . '" class="btn btn-primary btn-sm"><i class="fas fa-plus"></i> Add section</a>';
        @endphp

        <div class="row">
            <div class="col-12" id="csrExplorerChapterTableCard">
                <x-layouts.index-card
                    :showCreateButton="false"
                    :createRoute="null"
                    tableHeading="Sections"
                    :headerAction="$chapterHeaderAction"
                    :headers="['Section', 'Actions']"
                    :pagination="''">
                    @foreach ($sections as $sec)
                        <tr>
                            <td class="text-left font-weight-bold">
                                <a href="{{ route('csr-costing.explorer.section', [$book, $chapter, $sec]) }}" class="text-dark">{{ $sec->name }}</a>
                            </td>
                            <td class="text-right text-nowrap">
                                <a href="{{ route('csr-costing.admin.items.create', [$book, $sec]) }}" class="btn btn-primary btn-sm mr-1" title="Add item">
                                    <i class="fas fa-plus"></i> Add item
                                </a>
                                <a href="{{ route('csr-costing.admin.sections.edit', [$book, $chapter, $sec]) }}" class="btn btn-default btn-sm mr-1" title="Edit section">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <form method="post" action="{{ route('csr-costing.admin.sections.destroy', [$book, $chapter, $sec]) }}" class="d-inline">
                                    @csrf
                                    @method('DELETE')
                                    <button type="button" class="btn btn-danger btn-sm csr-datatable-delete-btn" data-confirm="Delete this section and all scheduled items?" title="Delete section">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            </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)');
        }
        $(document).on('click', '.csr-datatable-delete-btn', function (e) {
            e.preventDefault();
            var form = $(this).closest('form');
            if (!form.length) return;
            var msg = $(this).data('confirm') || 'Are you sure you want to delete this row?';
            Swal.fire({
                title: 'Are you sure?',
                text: msg,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Yes, delete it!',
            }).then(function (result) {
                if (result.isConfirmed) form.submit();
            });
        });
    });
</script>
@endpush