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

        @php
            $sectionHeaderAction = '<a href="' . e(route('csr-costing.admin.items.create', [$book, $section])) . '" class="btn btn-primary btn-sm"><i class="fas fa-plus"></i> Add scheduled item</a>';
        @endphp

        <div class="row">
            <div class="col-12" id="csrExplorerSectionTableCard">
                <x-layouts.index-card
                    :showCreateButton="false"
                    :createRoute="null"
                    tableHeading="Scheduled items"
                    :headerAction="$sectionHeaderAction"
                    :headers="['Ref #', 'Description', 'Grade', 'Unit', 'Labour Rs', 'Comp. Rs', 'Actions']"
                    :pagination="''">
                    @foreach ($items as $row)
                        <tr>
                            <td class="text-left text-monospace small">{{ $row->ref_no ?: '—' }}</td>
                            <td class="text-left">{{ $row->description }}</td>
                            <td class="text-left">{{ $row->grade ?: '—' }}</td>
                            <td>{{ $row->unit }}</td>
                            <td class="text-right text-monospace small">{{ \App\Support\RatePresentation::pkr11($row->labour_rate_pkr) }}</td>
                            <td class="text-right text-monospace small">{{ \App\Support\RatePresentation::pkr11($row->composite_rate_pkr) }}</td>
                            <td class="text-right text-nowrap">
                                <a href="{{ route('csr-costing.explorer.item', [$book, $row]) }}" class="btn btn-default btn-sm mr-1" title="Open">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <a href="{{ route('csr-costing.admin.items.edit', [$book, $section, $row]) }}" class="btn btn-default btn-sm mr-1" title="Edit">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <form method="post" action="{{ route('csr-costing.admin.items.destroy', [$book, $section, $row]) }}" class="d-inline">
                                    @csrf
                                    @method('DELETE')
                                    <button type="button" class="btn btn-danger btn-sm csr-datatable-delete-btn" data-confirm="Delete this scheduled item?" title="Delete">
                                        <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: [[1, '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