@extends('mainlayout.layout')


@section('title')
@endsection


@section('content')

<!-- start page title -->
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-flex align-items-center justify-content-between">
            <h4 class="mb-0 font-size-18">View Land Uses</h4>
        </div>
    </div>
</div>
<!-- end page title -->


<div class="row">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-body">

                <div class="d-flex align-items-center justify-content-between mb-3">
                    <p class="text-muted mb-0">List of land uses in operation</p>
                    <a href="/landuse/add" class="btn btn-primary">Add Land Use</a>
                </div>

                <div class="table-responsive">

                    <table id="datatable-buttons" class="table table-striped table-bordered dt-responsive nowrap"
                        style="border-collapse: collapse; border-spacing: 0; width: 100%;">

                        <thead>
                            <tr>
                                <th>DB ID</th>
                                <th>Land Use (English)</th>
                                <th>Land Use (Swahili)</th>
                                <th>Plots Using This Land Use</th>
                                <th>Created in</th>
                                <th></th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>

                            @foreach($landuses as $index => $landuse)
                            <tr>
                                <td>{{ $landuse->id }}</td>
                                <td>{{ $landuse->use_en }}</td>
                                <td>{{ $landuse->use_sw }}</td>
                                <td>{{ $landuse->plots_count }}</td>
                                <td>{{ optional($landuse->created_at)->format('Y-m-d') }}</td>
                                <td>
                                    <a href="/landuse/edit/@encrypt($landuse->id)" class="text-success p-1">
                                        <i class="bx bxs-edit-alt"></i>
                                    </a>
                                </td>
                                <td>
                                    @if($landuse->plots_count == 0)
                                    <a href="/landuse/delete/@encrypt($landuse->id)" class="text-danger p-1">
                                        <i class="bx bxs-trash"></i>
                                    </a>
                                    @endif
                                </td>
                            </tr>
                            @endforeach

                        </tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>
</div>


@endsection

@push('scripts')
<style>
    #datatable-buttons_wrapper .dt-buttons .btn {
        background-color: #000 !important;
        color: #fff !important;
        border-color: #000 !important;
    }
    #datatable-buttons_wrapper .dt-buttons .btn:hover {
        background-color: #333 !important;
        border-color: #333 !important;
    }
</style>
<script src="{{ asset('/web/assets/libs/datatables.net/js/jquery.dataTables.min.js')}}"></script>
<script src="{{ asset('/web/assets/libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js')}}"></script>
<script src="{{ asset('/web/assets/libs/datatables.net-buttons/js/dataTables.buttons.min.js')}}"></script>
<script src="{{ asset('/web/assets/libs/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js')}}"></script>
<script src="{{ asset('/web/assets/libs/jszip/jszip.min.js')}}"></script>
<script src="{{ asset('/web/assets/libs/pdfmake/build/pdfmake.min.js')}}"></script>
<script src="{{ asset('/web/assets/libs/pdfmake/build/vfs_fonts.js')}}"></script>
<script src="{{ asset('/web/assets/libs/datatables.net-buttons/js/buttons.html5.min.js')}}"></script>
<script src="{{ asset('/web/assets/libs/datatables.net-buttons/js/buttons.print.min.js')}}"></script>

<script>
    $(document).ready(function () {
        var table = $('#datatable-buttons').DataTable({
            destroy: true,
            lengthChange: false,
            dom: 'Bfrtip',
            buttons: [
                { extend: 'excelHtml5', className: 'btn btn-sm', text: 'Excel' },
                { extend: 'pdfHtml5',   className: 'btn btn-sm', text: 'PDF'   },
                { extend: 'csvHtml5',   className: 'btn btn-sm', text: 'CSV'   },
                { extend: 'print',      className: 'btn btn-sm', text: 'Print' }
            ]
        });

        table.buttons().container().appendTo('#datatable-buttons_wrapper .col-md-6:eq(0)');
    });
</script>
@endpush