@extends('layouts.app')

@section('title', 'Upload Masal Arsip SK')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
    <li class="breadcrumb-item"><a href="{{ route('arsip-sk.index', ['jenis' => $jenis]) }}">Arsip SK</a></li>
    <li class="breadcrumb-item active">Upload Masal</li>
@endsection

@section('content')
    <div class="card card-primary card-outline">
        <div class="card-header">
            <h3 class="card-title"><i class="fas fa-upload mr-1"></i> Upload Masal Arsip SK</h3>
        </div>
        <form action="{{ route('arsip-sk.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="card-body">
                <div class="callout callout-info">
                    <i class="fas fa-info-circle mr-1"></i>
                    Arsip akan disimpan untuk <strong>tahun {{ session('tahun', date('Y')) }}</strong> (ganti lewat pemilih tahun di pojok kanan atas).
                    Pilih beberapa file sekaligus (PDF, JPG, PNG; maks. 10 MB per file).
                    Setelah file dipilih, lengkapi nomor SK / nama / keterangan tiap file sebelum menyimpan.
                </div>

                <div class="form-group">
                    <label for="jenis">Jenis SK <span class="text-danger">*</span></label>
                    <select name="jenis" id="jenis" class="form-control @error('jenis') is-invalid @enderror" required>
                        <option value="asisten_ahli" {{ old('jenis', $jenis) === 'asisten_ahli' ? 'selected' : '' }}>Asisten Ahli</option>
                        <option value="lektor" {{ old('jenis', $jenis) === 'lektor' ? 'selected' : '' }}>Lektor</option>
                    </select>
                    @error('jenis')<span class="invalid-feedback">{{ $message }}</span>@enderror
                </div>

                <div class="form-group">
                    <label for="files">File Arsip <span class="text-danger">*</span></label>
                    <div class="custom-file">
                        <input type="file" class="custom-file-input" id="files" name="files[]"
                               accept=".pdf,.jpg,.jpeg,.png" multiple required>
                        <label class="custom-file-label" for="files">Pilih file...</label>
                    </div>
                </div>

                <div id="daftar-file" class="table-responsive d-none">
                    <table class="table table-bordered table-sm">
                        <thead>
                            <tr>
                                <th style="width: 40px">No</th>
                                <th>File</th>
                                <th>Nomor SK</th>
                                <th>Nama &amp; Gelar</th>
                                <th>Keterangan</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
            <div class="card-footer">
                <button type="submit" class="btn btn-primary" id="btn-simpan" disabled>
                    <i class="fas fa-save mr-1"></i> Simpan Arsip
                </button>
                <a href="{{ route('arsip-sk.index', ['jenis' => $jenis]) }}" class="btn btn-default">Batal</a>
            </div>
        </form>
    </div>
@endsection

@push('scripts')
    <script>
        $(function () {
            $('#files').on('change', function () {
                var files = this.files;
                var $tbody = $('#daftar-file tbody');
                $tbody.empty();

                $(this).next('.custom-file-label').text(files.length ? files.length + ' file dipilih' : 'Pilih file...');
                $('#daftar-file').toggleClass('d-none', !files.length);
                $('#btn-simpan').prop('disabled', !files.length);

                $.each(files, function (i, file) {
                    var nama = file.name.replace(/\.[^.]+$/, '').replace(/[_-]+/g, ' ');
                    $tbody.append(
                        '<tr>' +
                        '<td>' + (i + 1) + '</td>' +
                        '<td class="text-break">' + $('<span>').text(file.name).html() +
                            ' <span class="text-muted">(' + (file.size / 1024 / 1024).toFixed(2) + ' MB)</span></td>' +
                        '<td><input type="text" name="nomor_sk[' + i + ']" class="form-control form-control-sm" placeholder="Nomor SK"></td>' +
                        '<td><input type="text" name="nama_gelar[' + i + ']" class="form-control form-control-sm" value="' + $('<span>').text(nama).html() + '"></td>' +
                        '<td><input type="text" name="keterangan[' + i + ']" class="form-control form-control-sm" placeholder="Opsional"></td>' +
                        '</tr>'
                    );
                });
            });
        });
    </script>
@endpush