@extends('layouts.app')

@section('title', 'Master Data Dosen')

@section('content')
<div class="actions-wrapper">
    <a href="{{ route('dosen.export') }}" class="btn btn-success btn-sm"><i class="fas fa-file-excel"></i> Export</a>
    <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#importModal"><i class="fas fa-file-import"></i> Impor</button>
</div>

<div class="card">
    <div class="card-header">
        <h3 class="card-title">Daftar Dosen</h3>
        <div class="card-tools">
            <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#tambahModal"><i class="fas fa-plus mr-1"></i> Tambah Dosen</button>
        </div>
    </div>
    <div class="card-body">
        <table class="table table-bordered table-striped datatables">
            <thead><tr><th>NIP</th><th>Nama</th><th>Aksi</th></tr></thead>
            <tbody>
                @foreach($dosen as $d)
                <tr>
                    <td>{{ $d->nip }}</td>
                    <td>{{ $d->nama }}</td>
                    <td>
                        <a href="{{ route('dosen.edit', $d->nip) }}" class="btn btn-warning btn-sm"><i class="fas fa-edit"></i></a>
                        <form action="{{ route('dosen.destroy', $d->nip) }}" method="POST" style="display:inline">
                            @csrf @method('DELETE')
                            <button class="btn btn-danger btn-sm" onclick="return confirm('Hapus data?')"><i class="fas fa-trash"></i></button>
                        </form>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection

@push('js')
<div class="modal fade" id="tambahModal" tabindex="-1" role="dialog" aria-labelledby="tambahModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <form action="{{ route('dosen.store') }}" method="POST">
            @csrf
            <div class="modal-content" style="border-radius: var(--card-radius); border: none; box-shadow: var(--shadow-lg);">
                <div class="modal-header" style="border-bottom: 1px solid var(--card-border); padding: 1.5rem;">
                    <h5 class="modal-title font-weight-bold" id="tambahModalLabel" style="color: var(--text-main); font-size: 1.25rem;">
                        <i class="fas fa-user-tie mr-2" style="color: var(--primary);"></i> Tambah Dosen Baru
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" style="padding: 2rem;">
                    @if($errors->any())
                        <div class="alert alert-danger" style="border-radius: 12px; border: none; background: rgba(220, 38, 38, 0.1); color: #991b1b;">
                            <ul class="mb-0">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                    
                    <div class="form-group">
                        <label class="font-weight-600 mb-2">Nomor Induk Pegawai (NIP)</label>
                        <input type="text" name="nip" class="form-control" placeholder="Masukkan NIP" required 
                            style="border-radius: 10px; padding: 0.6rem 1rem; border: 1px solid var(--table-border);">
                    </div>

                    <div class="form-group">
                        <label class="font-weight-600 mb-2">Nama Lengkap & Gelar</label>
                        <input type="text" name="nama" class="form-control" placeholder="Nama Lengkap Sertakan Gelar" required
                            style="border-radius: 10px; padding: 0.6rem 1rem; border: 1px solid var(--table-border);">
                    </div>
                </div>
                <div class="modal-footer" style="border-top: 1px solid var(--card-border); padding: 1.5rem;">
                    <button type="button" class="btn btn-link text-secondary font-weight-bold" data-dismiss="modal" style="text-decoration: none;">Batal</button>
                    <button type="submit" class="btn btn-primary px-4" style="border-radius: 12px !important; box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);">
                        <i class="fas fa-save mr-2"></i> Simpan Data Dosen
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="modal fade" id="importModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <form action="{{ route('dosen.import') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="modal-content" style="border-radius: var(--card-radius); border: none;">
                <div class="modal-header" style="border-bottom: 1px solid var(--card-border);">
                    <h5 class="modal-title font-weight-bold">Impor Data Dosen</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="font-weight-600">Pilih File Excel/CSV</label>
                        <input type="file" name="file" class="form-control" required style="border-radius: 10px; height: auto; padding: 10px;">
                    </div>
                    <div class="alert alert-info" style="border-radius: 12px; border: none; background: rgba(0, 123, 255, 0.1); color: #004085;">
                        <p class="text-sm mb-0"><i class="fas fa-info-circle mr-2"></i> Belum punya formatnya? <a href="{{ route('dosen.template') }}" class="font-weight-bold text-primary" style="text-decoration: underline;">Unduh Template Di Sini</a></p>
                    </div>
                </div>
                <div class="modal-footer" style="border-top: 1px solid var(--card-border);">
                    <button type="button" class="btn btn-link text-secondary" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary px-4" style="border-radius: 10px !important;">Unggah & Impor</button>
                </div>
            </div>
        </form>
    </div>
</div>
@endpush

@push('js')
<script>
    $(document).ready(function() {
        @if($errors->any())
            $('#tambahModal').modal('show');
        @endif
    });
</script>
@endpush
