@extends('admin.layouts.app')

@section('title', 'Daftar Mobil')

@section('content')
<div class="container-fluid">
    <!-- Replace the existing success alert with centered notification -->
    @if(session('success'))
    <div class="success-notification">
        <div class="success-icon">
            <i class="fas fa-check-circle"></i>
        </div>
        <div class="success-message">
            {{ session('success') }}
        </div>
    </div>

    <script>
        setTimeout(function() {
            const notification = document.querySelector('.success-notification');
            if (notification) {
                notification.classList.add('hiding');
                setTimeout(() => notification.remove(), 300);
            }
        }, 3000);
    </script>
    @endif

    <!-- Page Heading -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">Daftar Mobil</h1>
        <div class="d-flex gap-3 align-items-center">
           

            <!-- Tombol tambah -->
            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#tambahMobilModal">
                <i class="fas fa-plus fa-sm"></i> Tambah Mobil
            </button>
        </div>
    </div>

    @if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show">
        {{ session('error') }}
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    @endif

    <!-- DataTales Example -->
    <div class="card shadow mb-4">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                    <thead class="bg-maroon text-white">
                        <tr>
                            <th>Foto</th>
                            <th>Nama Mobil</th>
                            <th>Plat Nomor</th>
                            <th>Status</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($mobil as $m)
                        <tr>
                            <td>
                                @if($m->foto)
                                <img src="{{ asset('storage/'.$m->foto) }}" 
                                alt="Foto {{ $m->nama }}" 
                                class="img-thumbnail" 
                                style="max-width: 100px;">

                                @else
                                    <span class="text-muted">No image</span>
                                @endif
                            </td>
                            <td>{{ $m->nama }}</td>
                            <td>{{ $m->plat_nomor }}</td>
                            <td>
                                <span class="badge {{ $m->status == 'tersedia' ? 'bg-success' : 'bg-danger' }}">
                                    {{ ucfirst($m->status) }}
                                </span>
                            </td>
                            <td>
                                <button type="button" class="btn btn-sm btn-info" 
                                        data-bs-toggle="modal" 
                                        data-bs-target="#editMobilModal{{ $m->id }}">
                                    <i class="fas fa-edit"></i> Edit
                                </button>
                                <form action="{{ route('admin.mobil.delete', $m->id) }}" 
                                      method="POST"
                                      class="d-inline"
                                      onsubmit="return confirm('Yakin ingin menghapus mobil ini?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-danger btn-sm">
                                        <i class="fas fa-trash"></i> Hapus
                                    </button>
                                </form>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Modal Tambah Mobil -->
<div class="modal fade" id="tambahMobilModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Tambah Mobil</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('admin.mobil.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <div class="form-group mb-3">
                        <label>Nama Mobil</label>
                        <input type="text" class="form-control" name="nama" required>
                    </div>
                    <div class="form-group mb-3">
                        <label>Plat Nomor</label>
                        <input type="text" class="form-control" name="plat_nomor" required>
                    </div>
                    <div class="form-group mb-3">
                        <label>Foto</label>
                        <input type="file" class="form-control" name="foto" accept="image/*" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Edit untuk setiap mobil -->
@foreach($mobil as $m)
<div class="modal fade" id="editMobilModal{{ $m->id }}" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Mobil</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('admin.mobil.update', $m->id) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PATCH')
                <div class="modal-body">
                    <div class="form-group mb-3">
                        <label>Nama Mobil</label>
                        <input type="text" class="form-control" name="nama" value="{{ $m->nama }}" required>
                    </div>
                    <div class="form-group mb-3">
                        <label>Plat Nomor</label>
                        <input type="text" class="form-control" name="plat_nomor" value="{{ $m->plat_nomor }}" required>
                    </div>
                    <div class="form-group mb-3">
                        <label>Foto</label>
                        @if($m->foto)
                            <div class="mb-2">
                            <img src="{{ asset('storage/'.$m->foto) }}" 
                            alt="Foto {{ $m->nama }}" 
                            class="img-thumbnail" 
                            style="max-width: 100px;">

                            </div>
                        @endif
                        <input type="file" class="form-control" name="foto" accept="image/*">
                        <small class="text-muted">Biarkan kosong jika tidak ingin mengubah foto</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan Perubahan</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endforeach

@endsection

@push('scripts')
<script>
    $(document).ready(function() {
        // Initialize DataTable
        $('#dataTable').DataTable();

        // Handle modal events
        $('.modal').on('shown.bs.modal', function () {
            $(this).find('[autofocus]').focus();
        });

        // Handle form submission
        $('form').on('submit', function() {
            $(this).find('button[type="submit"]').prop('disabled', true);
        });

        // Show success/error messages
        @if(session()->has('error'))
            Swal.fire({
                icon: 'error',
                title: 'Error!',
                text: "{!! session('error') !!}",
                timer: 3000,
                showConfirmButton: false
            });
        @endif
    });
</script>
@endpush