@extends('layouts.app')
@push('css')
<style>
 .timeline{
    display:flex;
    justify-content:space-between;
    position:relative;
    margin:40px 0;
}

.timeline-step{
    flex:1;
    text-align:center;
    position:relative;
}

.timeline-icon{
    width:50px;
    height:50px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:auto;
    color:white;
}

/* garis */
.timeline-step::after{
    content:'';
    position:absolute;
    top:25px;
    left:50%;
    width:100%;
    height:3px;
    background:#dcdcdc;
    z-index:-1;
}

.timeline-step:last-child::after{
    display:none;
}

/* STATUS */

.done .timeline-icon{
    background:#28a745;
}

.done::after{
    background:#28a745;
}

.active .timeline-icon{
    background:#5c6bc0;
}

.inactive .timeline-icon{
    background:#dcdcdc;
    color:#777;
}

/* RESPONSIVE */

@media (max-width:768px){

.timeline{
    flex-direction:column;
    align-items:flex-start;
}

.timeline-step{
    display:flex;
    align-items:center;
    margin-bottom:25px;
}

.timeline-icon{
    margin:0 15px 0 0;
}

.timeline-step::after{
    display:none;
}

.timeline-step p{
    text-align:left;
}

}
  </style>
@endpush
@section('title', 'Detail Pengajuan')

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

    <div class="section-header">
      <h1>Detail Pengajuan</h1>
    </div>
            @include('user.riwayat.partials.status')

   @if ($pengajuan->pembayaran->where('status','pending')->count())
        @include('user.riwayat.partials.tagihan')
        @elseif($pengajuan->pembayaran->where('status','draft')->count())
                @include('user.riwayat.partials.draft')

        @else
        @include('user.riwayat.partials.detail')
@endif


  </section>
</div>
<div class="modal fade" id="modalProses" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">

      <div class="modal-header">
        <h5 class="modal-title">Detail Proses Penerbitan</h5>
        <button type="button" class="close" data-dismiss="modal">
          <span>&times;</span>
        </button>
      </div>

      <div class="modal-body">

        <div class="table-responsive">
          <table class="table table-striped table-hover">

            <thead class="thead-light">
              <tr>
                <th width="40%">Tahapan</th>
                <th>Tanggal Mulai</th>
                <th>Tanggal Selesai</th>
                <th>Status</th>
              </tr>
            </thead>

            <tbody>
            @foreach($step as $s)

            @php
                if($s->status == 'completed'){
                    $status = '<span class="badge badge-success">Selesai</span>';
                }else{
                    $status = '<span class="badge badge-primary">Diproses</span>';
                }
            @endphp

            <tr>
                <td>
                    <strong>{{ $s->step->nama }}</strong>
                </td>

              <td>
    {{ $s->tanggal_mulai ? \Carbon\Carbon::parse($s->tanggal_mulai)->format('d-m-Y') : '-' }}
</td>

<td>
    {{ $s->tanggal_selesai ? \Carbon\Carbon::parse($s->tanggal_selesai)->format('d-m-Y') : '-' }}
</td>

                <td>
                    {!! $status !!}
                </td>
            </tr>

            @endforeach
            </tbody>

          </table>
        </div>

      </div>

      <div class="modal-footer">
        <button class="btn btn-secondary" data-dismiss="modal">
          Tutup
        </button>
      </div>

    </div>
  </div>
</div>

<div class="modal fade" id="modalSetujuiEditor" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">

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

      <form action="{{ route('riwayat.setujui-editor', $pengajuan->id) }}" method="POST">
        @csrf

        <div class="modal-body">

            <p>
                Dengan ini saya menyatakan bahwa <strong>naskah hasil editing</strong> 
                telah saya periksa dan <strong>setuju</strong> untuk dilanjutkan 
                ke proses <strong>penerbitan ISBN</strong>.
            </p>

            <p class="text-muted small">
                Setelah disetujui, proses penerbitan ISBN akan dimulai 
                dan perubahan pada naskah tidak dapat dilakukan kembali.
            </p>

        </div>

        <div class="modal-footer">

            <button type="button" class="btn btn-secondary" data-dismiss="modal">
                Batal
            </button>

            <button type="submit" class="btn btn-success">
                <i class="fas fa-check"></i>
                Ya, Saya Setuju
            </button>

        </div>

      </form>

    </div>
  </div>
</div>

<div class="modal fade" id="modalPersetujuan" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">

<div class="modal-header">
<h5 class="modal-title">
Persetujuan Hasil Editing
</h5>
<button type="button" class="close" data-dismiss="modal">
<span>&times;</span>
</button>
</div>

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

@csrf

<div class="modal-body">

<p>
Silakan download template surat persetujuan terlebih dahulu,
tandatangani, lalu upload kembali.
</p>

<hr>

<div class="mb-3">

<a href="{{ route('penulis.template.surat',$pengajuan->id) }}"
target="_blank"
class="btn btn-outline-primary btn-sm">

<i class="fas fa-download"></i>
Download Template Surat
</a>

</div>

<div class="form-group">
<label>Upload Surat yang Sudah Ditandatangani (PDF)</label>

<input type="file"
name="file_persetujuan"
class="form-control"
accept="application/pdf"
required>

</div>

</div>

<div class="modal-footer">

<button type="button"
class="btn btn-secondary"
data-dismiss="modal">
Batal
</button>

<button type="submit"
class="btn btn-success">

<i class="fas fa-check"></i>
Kirim Persetujuan

</button>

</div>

</form>

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