@extends('layouts.app')

@section('title', 'Upload Naskah')

@section('content')
<div class="main-content">
  <section class="section">

    <div class="section-header">
      <h1>Upload Naskah</h1>
    </div>

    <div class="card">
<div class="card-body">

    <div class="alert alert-success">
        <strong>Pembayaran berhasil diverifikasi!</strong><br>
        Silakan upload naskah buku yang sudah siap pada kolom di bawah ini.
    </div>

    @if ($errors->any())
        <div class="alert alert-danger">
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
        <div class="alert alert-info">
            Pastikan file dalam format PDF / DOC / DOCX
            maksimal 10MB.
        </div>

        <form action="{{ route('naskah.store', $pengajuan->id) }}"
              method="POST"
              enctype="multipart/form-data">
            @csrf

            {{-- Judul --}}
            <div class="form-group">
                <label>Judul Naskah<span class="text-danger ml-1">*</span></label>
                <input type="text"
                       name="judul"
                       class="form-control"
                       value="{{ old('judul') }}"
                       required>
            </div>

            {{-- Jumlah Halaman --}}
            <div class="form-group">
                <label>Jumlah Halaman<span class="text-danger ml-1">*</span></label>
                <input type="number"
                       name="jumlah_halaman"
                       class="form-control"
                       min="1"
                       value="{{ old('jumlah_halaman') }}"
                       required>
            </div>

            {{-- Penulis --}}
            <div class="form-group">
                <label>Penulis<span class="text-danger ml-1">*</span></label>

                <div id="penulis-wrapper">
                    @if(old('penulis'))
                        @foreach(old('penulis') as $nama)
                            <div class="input-group mb-2">
                                <input type="text"
                                       name="penulis[]"
                                       class="form-control"
                                       value="{{ $nama }}"
                                       required>
                                <div class="input-group-append">
                                    <button type="button"
                                            class="btn btn-danger"
                                            onclick="hapusPenulis(this)">
                                        Hapus
                                    </button>
                                </div>
                            </div>
                        @endforeach
                    @else
                        <div class="input-group mb-2">
                            <input type="text"
                                   name="penulis[]"
                                   class="form-control"
                                   placeholder="Nama Penulis"
                                   required>
                            <div class="input-group-append">
                                <button type="button"
                                        class="btn btn-danger"
                                        onclick="hapusPenulis(this)">
                                    Hapus
                                </button>
                            </div>
                        </div>
                    @endif
                </div>

                <button type="button"
                        class="btn btn-sm btn-secondary"
                        onclick="tambahPenulis()">
                    + Tambah Penulis
                </button>
            </div>

            {{-- Catatan --}}
            <div class="form-group">
                <label>Ringkasan</label>
                <textarea name="ringkasan"
                          class="form-control"
                          rows="3"
                        >{{ old('ringkasan') }}</textarea>
            </div>

            {{-- Upload File --}}
            <div class="form-group">
                <label>Upload File Naskah<span class="text-danger ml-1">*</span></label>
                <input type="file"
                       name="file_naskah"
                       class="form-control"
                       required>
            </div>

            {{-- cover Naskah File --}}
            <div class="form-group">
                <label>Upload Cover Naskah</label>
                <input type="file"
                       name="cover_naskah"
                       class="form-control"
                       required>
            </div>

            <button type="button"
        class="btn btn-primary btn-block"
        data-toggle="modal"
        data-target="#confirmUploadModal">
    Upload Naskah
</button>
        </form>

      </div>
    </div>

  </section>
</div>
<!-- Modal Konfirmasi -->
<div class="modal fade" id="confirmUploadModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">

      <div class="modal-header">
        <h5 class="modal-title">Konfirmasi Upload Naskah</h5>
        <button type="button" class="close" data-dismiss="modal">
          <span>&times;</span>
        </button>
      </div>

      <div class="modal-body text-center">
        <p class="mb-2">
          Apakah semua data sudah sesuai?
        </p>
        <small class="text-muted">
          Jika sudah benar, silakan lanjut untuk mengirim naskah Anda.
        </small>
      </div>

      <div class="modal-footer justify-content-center">
        <button type="button"
                class="btn btn-secondary"
                data-dismiss="modal">
          Periksa Lagi
        </button>

        <button type="button"
                class="btn btn-primary"
                onclick="submitForm()">
          Ya, Lanjut Upload
        </button>
      </div>

    </div>
  </div>
</div>
@endsection

@push('scripts')
<script>
    function submitForm() {
    document.querySelector('form').submit();
}
function tambahPenulis() {
    let wrapper = document.getElementById('penulis-wrapper');

    let div = document.createElement('div');
    div.className = 'input-group mb-2';

    div.innerHTML = `
        <input type="text"
               name="penulis[]"
               class="form-control"
               placeholder="Nama Penulis"
               required>
        <div class="input-group-append">
            <button type="button"
                    class="btn btn-danger"
                    onclick="hapusPenulis(this)">
                Hapus
            </button>
        </div>
    `;

    wrapper.appendChild(div);
}

function hapusPenulis(button) {
    button.closest('.input-group').remove();
}
</script>
@endpush