@extends('anggota.layouts.layout_dashboard')

@section("title") Pustaka Berbagi Digital @endsection

@section("breadcrumb")
    <li class="breadcrumb-item"><a href="{{route('anggota.dashboard.index')}}">Dashboard</a></li>
    <li class="breadcrumb-item">@yield("title")</li>
@endsection

@section('header-scripts')
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
@endsection

@section('content')
    <div class="header text-center mt-5 mb-3">
        <h3 class="title">Pustaka Berbagi Digital</h3>
        <span>Maksimal Berbagi Pustaka {{$settings->value}} x Pertahun</span>
    </div>

    <div class="row">
        <div class="col-md-4">

            <div class="card card-contact">

                <form id="contact-form" enctype="multipart/form-data"
                      action="{{route('anggota.pustaka_berbagi_digital.store')}}"
                      method="POST">
                    @csrf
                    <input type="hidden" value="POST" name="_method">
                    <input type="hidden" name="nomor_klasifikasi_subyek" id="nomor_klasifikasi_subyek" value="{{old('nomor_klasifikasi_subyek')}}">
                    <div class="card-header card-header-raised card-header-info text-center">
                        <h4 class="card-title">Form Pustaka Berbagi Digital</h4>
                        <br>
                    </div>
                    <div class="card-body pt-4">
                        <div class="row">
                            <div class="col-md-12 mb-2">
                                <label class="bmd-label-floating">Kategori Buku*</label>
                                <div class="form-group ">
                                    <select name="jenis_koleksi" id="jenis_koleksi" class="form-control selectpicker col"
                                            data-size="7" data-style="btn btn-info" title="Kategori">
                                        @foreach($jenis_koleksi as $key => $jk)
                                            <option
                                                @if (old('jenis_koleksi') == $jk->id)
                                                    selected
                                                @endif
                                                value="{{ $jk->id }}">{{ $jk->jenis_koleksi }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('jenis_koleksi')
                                    <span class="bmd text-danger mt-2">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-12 mb-2">
                                <label class="bmd-label-floating">Bahasa*</label>
                                <div class="form-group ">
                                    <select name="bahasa" id="bahasa" class="form-control selectpicker col"
                                            data-size="7" data-style="btn btn-info" title="Bahasa">
                                        @foreach($bahasa as $key => $b)
                                            <option
                                                @if (old('bahasa') == $b->id)
                                                selected
                                                @endif
                                                value="{{ $b->id }}">{{ $b->keterangan }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('bahasa')
                                    <span class="bmd text-danger mt-2">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group mb-0 label-floating is-empty bmd-form-group">
                                    <label class="bmd-label-floating">Judul Buku*</label>
                                    <input type="text" name="judul" value="{{old('judul')}}" class="form-control">
                                    <span class="material-input"></span>
                                </div>
                                @error('judul')
                                <span class="bmd text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-12">
                                <div class="form-group mb-0 label-floating is-empty bmd-form-group">
                                    <label class="bmd-label-floating">Pengarang*</label>
                                    <input type="text" name="pengarang" value="{{old('pengarang')}}" class="form-control">
                                    <span class="material-input"></span>
                                </div>
                                @error('pengarang')
                                <span class="bmd text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-12">
                                <div class="form-group mb-0 label-floating is-empty bmd-form-group">
                                    <label class="bmd-label-floating">Penerbit*</label>
                                    <input type="text" name="penerbit" value="{{old('penerbit')}}" class="form-control">
                                    <span class="material-input"></span>
                                </div>
                                @error('penerbit')
                                <span class="bmd text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-12">
                                <div class="form-group mb-0 label-floating is-empty bmd-form-group">
                                    <label class="bmd-label-floating">Kota Terbit*</label>
                                    <input type="text" name="kota_terbit" value="{{old('kota_terbit')}}" class="form-control">
                                    <span class="material-input"></span>
                                </div>
                                @error('kota_terbit')
                                <span class="bmd text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-12">
                                <div class="form-group mb-0 label-floating is-empty bmd-form-group">
                                    <label class="bmd-label-floating">Tahun*</label>
                                    <input type="text" name="tahun_terbit" value="{{old('tahun_terbit')}}" class="form-control yearpicker">
                                    <span class="material-input"></span>
                                </div>
                                @error('tahun_terbit')
                                <span class="bmd text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-12">
                                <div class="form-group bmd-form-group">
                                    <label class="bmd-label-floating">Subyek*</label>
                                    <input id="subyek" class="form-control" placeholder="..." type="text" name="subyek"
                                           value="{{old('subyek')}}">
                                    <style>
                                        #sbyk li{
                                            /* color:red;  */
                                            list-style-type: none;
                                            display: block;
                                            background-color: #ebebeb;;
                                            padding: 1px;
                                            padding-left: 4px;
                                        }
                                        #sbyk li:hover
                                        {
                                            color: white;
                                            background-color: #e91e63;
                                        }
                                        #sbyk ul{
                                            padding: 0;
                                        }
                                    </style>
                                    <div style="position: absolute; top: 100%; z-index: 1000;" id="sbyk"></div>
                                    @error('subyek')
                                    <span class="bmd text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-2 text-center">
                                <label class="bmd-label-floating">Gambar*</label>
                                <div class="fileinput fileinput-new text-center " data-provides="fileinput">
                                    <div class="fileinput-new thumbnail ">
                                        <img src="https://ui-avatars.com/api/?size=235&background=c9c9c9&name=PD" alt="...">
                                    </div>
                                    <div class="fileinput-preview fileinput-exists thumbnail "></div>
                                    <div>
                                    <span class="btn btn-round btn-info btn-file">
                                        <span class="fileinput-new">Pilih File</span>
                                        <span class="fileinput-exists">Pilih File</span>
                                        <input type="file" name="gambar">
                                    </span>
                                        <br>
                                        <a href="#pablo" class="btn btn-danger btn-round fileinput-exists"
                                           data-dismiss="fileinput"><i class="fa fa-times"></i> Remove</a>
                                    </div>
                                    @error('gambar')
                                    <span class="bmd text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-12">
                                    <label class="bmd-label-floating">File*</label>
                                    <div class="">
                                        <div class="pt-3 bmd-form-group">
                                            <input type="file" class="" id="file1" name="file1" required>
                                            @error('file1')
                                            <br>
                                            <span class="bmd text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                            </div>
                        </div>
                        <div class="form-group label-floating is-empty bmd-form-group">
                            <label for="exampleMessage1" class="bmd-label-floating">Keterangan / Catatan</label>
                            <textarea name="keterangan" class="form-control" id="exampleMessage1"
                                      rows="2">{{old('keterangan')}}</textarea>
                            <span class="material-input"></span>
                            @error('keterangan')
                            <span class="bmd text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="card-footer">
                        <button type="submit" class="btn btn-info pull-right">Kirim</button>
                    </div>
                </form>
            </div>
        </div>
        <div class="col-md-8">

            <div class="card card-contact">
                <form id="contact-form" method="post">
                    <div class="card-header card-header-raised card-header-info text-center">
                        <h4 class="card-title">Riwayat Pustaka Berbagi Digital</h4>
                        <br>
                    </div>
                    <div
                        class="card-body pt-0 pb-0 pl-2 pr-2 table-full-width table-responsive justify-content-center">
                        <table class="table table-hover">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>Pustaka</th>
                                <th></th>
                                <th>Status</th>
                                <th class="text-center">Tanggapan</th>
                                <th>Waktu</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($pbd_riwayat as $key => $pbd_r)
                                <tr>
                                    <td>{{ ($pbd_riwayat->currentpage()-1) * $pbd_riwayat->perpage() + $key + 1 }}
                                    </td>
                                    <td>
                                        <h6 class="mb-0"> {{$pbd_r->judul}} </h6>
                                        {{$pbd_r->penerbit}}, {{ $pbd_r->pengarang}}, {{ $pbd_r->tahun_terbit}}
                                    </td>
                                    <td class="td-actions text-right">
                                        <a class="btn btn-rose text-white btn-sm"
                                           rel="tooltip" data-placement="bottom" title="" data-original-title="Edit"
                                           href="{{ route('anggota.pustaka_berbagi_digital.show',[$pbd_r->id]) }}">
                                            BACA
                                        </a>
                                    </td>
                                    <td>
                                        @if($pbd_r->status_proses == "sudah")
                                            <span class="badge badge-success">
                                                Diterima
                                            </span>

                                        @elseif($pbd_r->status_proses == "belum")
                                            <span class="badge badge-warning">
                                                Menunggu Verifikasi
                                            </span>

                                        @elseif($pbd_r->status_proses == "tolak")
                                            <span class="badge badge-danger">
                                                Ditolak
                                            </span>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        <span class="text-black">
                                            @if($pbd_r->tanggapan != ''){{$pbd_r->tanggapan}}@else - @endif
                                        </span>
                                    </td>
                                    <td><span class="text-black">{{$pbd_r->created_at}}</span></td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                        <div class="row justify-content-center">
                            {{$pbd_riwayat->links()}}
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('footer-scripts')
    @include('petugas.components.notification')

    <script language="JavaScript" type="text/javascript">

        $(document).ready(function() {
            // initialise Datetimepicker and Sliders
            md.initFormExtendedDatetimepickers();
            if ($('.slider').length != 0) {
                md.initSliders();
            }
        });

    </script>

    {{-- This Documentation on jQuery-ui https://api.jqueryui.com/autocomplete/ --}}
    <link rel="stylesheet" type="text/css" href="{{ asset('md\assets\js\jquery-ui-1.12.1\jquery-ui.min.css') }}styles.css">
    <script src="{{ asset('md\assets\js\jquery-ui-1.12.1\jquery-ui.min.js') }}"></script>
    <script type="text/javascript">
        function capitalizeFirstLetter(string) {
            return string.charAt(0).toUpperCase() + string.slice(1);
        }

        var noklas = "{{old('nomor_klasifikasi')}}";

        $(function(){
            function log( message ) {
                $("#nomor_klasifikasi_subyek").val(message)
                var nomor_klas = $("#nomor_klasifikasi_subyek").val().split(" ");
                $("#nomor_klasifikasi").val(nomor_klas[0]);
            }

            $("#subyek").autocomplete({
                appendTo: "#sbyk",
                source: function(request, response ){
                    $.ajax({
                        url: '{{ route("petugas.klasifikasi.subyek_auto_complete") }}',
                        method: 'GET',
                        dataType: 'json',
                        data: {
                            query: request.term
                        },
                        success: function(res){
                            var result;

                            result = [
                                {
                                    label: 'There is matching record found for '+request.term,
                                    value: request.term,
                                }
                            ];

                            if (res.length) {
                                result = $.map(res, function(dt){
                                    return {
                                        label: dt.nomor_klasifikasi+" "+dt.subyek,
                                        value: dt.subyek,
                                    };
                                });
                            }
                            response(result);
                        }
                    });
                },
                select: function( event, ui ) {
                    log( ui.item ? ui.item.label : "Nothing selected, input was " + this.label);
                },
            },"widget");

            $('input').blur(function(){
                var jd = $("#judul").val().toLowerCase().substring(0,1);
                var pg = $("#pengarang").val().substring(0,3);
                var nomor_klas = $("#nomor_klasifikasi").val().split(" ");
                $('#klasifikasi').val(nomor_klas[0]+" "+capitalizeFirstLetter(pg)+" "+jd);
            });
        });
    </script>


@endsection