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

    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">List Data Mobil</h1>
            <p class="mb-0">Data ini dikelola oleh Logistic Division</p>
        </div>
        <div>
            <a href="{{ route('addcars') }}" class="btn btn-info btn-icon-split" style="font-size: 1.5rem;">
                <span class="icon text-white-50"><i class="fas fa-plus"></i></span> <span class="text">Tambah Mobil</span>
            </a>
        </div>
    </div>

    <div class="table-responsive">
        <table class="table table-bordered" id="mytable" width="100%" cellspacing="0">
            <thead>
                <tr>
                    <th>Nama Mobil</th>
                    <th>PLAT NOMER</th>
                    @if (Auth::user()->role_id == 2)
                        <th hidden>AKSI</th>
                    @elseif (Auth::user()->role_id == 1)
                        <th>AKSI</th>
                    @endif
                </tr>
            </thead>
            <tbody id="tableBody">
                @include('cars.cars_table_data', ['cars' => $cars])
            </tbody>
        </table>
    </div>

    <script>
        $(document).ready(function() {
            // Inisialisasi DataTables dengan tombol export dan kustomisasi warna
            $('#mytable').DataTable({
                dom: 'Bfrtip', // 'B' untuk Buttons (tombol export)
                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
                    }
                ]
            });

            $(document).on('click', '.delete-btn', function() {
                var id = $(this).data('id');
                $('#confirmDelete').data('id', id);
            });

            $('#confirmDelete').click(function() {
                var id = $(this).data('id');
                $.ajax({
                    type: "POST",
                    url: "{{ route('deletecars', ['id' => 'placeholder']) }}".replace('placeholder', id),
                    data: {
                        "_token": "{{ csrf_token() }}"
                    },
                    success: function(data) {
                        $('#deleteModal').modal('hide');
                        if (data.success) {
                            // Cek apakah ada elemen alert success di halaman sebelum menampilkan
                            if ($('#ajaxSuccessAlert').length) {
                                $('#ajaxSuccessAlert').text(data.message).show();
                                setTimeout(function() {
                                    $('#ajaxSuccessAlert').fadeOut('fast');
                                    location.reload();
                                }, 300);
                            } else {
                                // Jika tidak ada, fallback ke alert browser
                                alert(data.message);
                                location.reload(); // Refresh halaman setelah sukses
                            }
                        } else {
                            alert(data.message);
                        }
                    },
                    error: function(data) {
                        console.log('Error:', data);
                        alert('Terjadi kesalahan saat menghapus data.');
                    }
                });
            });
        });
    </script>
@endsection