@extends('layouts.base')
@section('tittle', 'List Mobil')
@section('content')

    <h1 class="h3 mb-2 text-gray-800">List Data Mobil Yang sudah dipesan</h1>
    <p class="mb-4">Data ini dikelola oleh Logistic Division</p>
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">List Data Mobil Dipakai</h6>
        </div>
        <div class="card-body">
    <div class="table-responsive">
        <table class="table table-bordered" id="mytable" width="100%" cellspacing="0">
            <thead>
                <tr>
                    <th>Plat Mobil</th>
                    <th>Divisi</th>
                    <th>Pengemudi</th>
                    <th>Tanggal Pemesanan</th>
                    <th>Tanggal Pengembalian</th>
                </tr>
            </thead>
            <tbody id="tableBody">
                @include('cars.car_usage_table', ['carUsages' => $carUsages])
            </tbody>
        </table>
    </div>
    </div>
    </div>


    <script>
        $(document).ready(function() {
            // Inisialisasi DataTables dengan tombol export
            $('#mytable').DataTable({
                dom: 'Bfrtip', // 'B' untuk Buttons (tombol export), 'f' untuk filter, 'r' untuk processing, 't' untuk tabel, 'i' untuk info, 'p' untuk pagination
                buttons: [
                    {
                        extend: 'copy',
                        text: '<i class="fas fa-copy"></i> Salin', // Ikon Font Awesome + teks
                        className: 'btn btn-info btn-sm' // Kelas Bootstrap untuk warna biru muda
                    },
                    {
                        extend: 'csv',
                        text: '<i class="fas fa-file-csv"></i> CSV',
                        className: 'btn btn-success btn-sm' // Kelas Bootstrap untuk warna hijau
                    },
                    {
                        extend: 'excel',
                        text: '<i class="fas fa-file-excel"></i> Excel',
                        className: 'btn btn-primary btn-sm' // Kelas Bootstrap untuk warna biru utama
                    },
                    {
                        extend: 'pdf',
                        text: '<i class="fas fa-file-pdf"></i> PDF',
                        className: 'btn btn-danger btn-sm' // Kelas Bootstrap untuk warna merah
                    },
                    {
                        extend: 'print',
                        text: '<i class="fas fa-print"></i> Cetak',
                        className: 'btn btn-secondary btn-sm' // Kelas Bootstrap untuk warna abu-abu
                    },
                    {
                        extend: 'colvis',
                        text: '<i class="fas fa-columns"></i> Kolom',
                        className: 'btn btn-dark btn-sm' // Kelas Bootstrap untuk warna gelap
                    }
                ]
            });
        });
    </script>

@endsection