@extends('Layouts.main')
@section('container')
    <!-- Default box -->
    <div class="card mt-n3 shadow-none">
        <div class="card-body">
            <div class="d-flex flex-row">
                <div class="col-12 col-sm-9 p-0 mycontent pb-5 position-relative">

                    <div class="loading fade">
                        <div class="lds-ellipsis">
                            <div></div>
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                    </div>

                    @if ($menu == 'sampah')
                        <div class="alert py-1 px-1 pl-3 mt-n2"
                            style="background: rgba(0,0,0,0.1);line-height: 2.3;font-size:11pt">
                            <div class="row">
                                <div class="col-md-10">
                                    Item yang sudah dikosongkan akan dihapus selamanya
                                </div>
                                <div class="col-md-2 text-right">
                                    <button class="btn btn-default btn-sm" id="kosongkan">Kosongkan</button>
                                </div>
                            </div>
                        </div>
                    @endif

                    @if ($menu == 'terbaru')
                        <div class="alert py-1 px-1 pl-3 mt-n2"
                            style="background: rgba(0,0,0,0.1);line-height: 2.3;font-size:11pt">
                            <div class="row">
                                <div class="col-md-12">
                                    Item 7 hari terakhir yang ditampilkan
                                </div>
                            </div>
                        </div>
                    @endif

                    <div class="table-div" style="height: 83vh;overflow-y: auto">

                        <table class="my-table" id="my-table">
                            <thead>
                                <tr>
                                    <th>Nama &nbsp;&nbsp;<i class="fas fa-sort fa-xs"></i></th>
                                    <th class="col-hide">Size &nbsp;&nbsp;<i class="fas fa-sort fa-xs"></i>
                                    </th>
                                    <th class="col-hide">Terakhir diubah &nbsp;&nbsp;<i class="fas fa-sort-down fa-xs"></i>
                                    </th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                        <div class="div-kosong"></div>
                    </div>
                </div>
                <div class="detail-preview col-sm-3 d-none d-sm-inline-block pl-3" style="height: 86vh;overflow-y: auto">
                    <div class="subhead border-bottom font-weight-bold pb-2 mb-3" style="line-height:25px">
                        Preview & Detail
                    </div>
                    <div class="col-12 border-bottom pb-3 text-center mb-3 preview-image">
                        <div class="col text-muted">
                            <p class="font-weight-bold p-0 m-0">No Preview</p>
                        </div>
                    </div>
                    <div class="detail-info col-12 text-center">
                        <dl class="row">
                            <dt class="col-sm-4 text-left font-weight-normal">Tipe</dt>
                            <dd class="col-sm-8 text-left tipe">-</dd>

                            <dt class="col-sm-4 text-left font-weight-normal">Lokasi</dt>
                            <dd class="col-sm-8 text-left path">-</dd>

                            <dt class="col-sm-4 text-left font-weight-normal">Pemilik</dt>
                            <dd class="col-sm-8 text-left user_id">-</dd>

                            <dt class="col-sm-4 text-left font-weight-normal">Diubah</dt>
                            <dd class="col-sm-8 text-left updated_at">-</dd>

                            <dt class="col-sm-4 text-left font-weight-normal">Dibuat</dt>
                            <dd class="col-sm-8 text-left created_at">-</dd>

                            <dt class="col-sm-4 text-left font-weight-normal">Dibagikan</dt>
                            <dd class="col-sm-8 text-left share">-</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.card-body -->
    </div>
    <div class="modal fade" id="modal-hapus-file" tabindex="-1" role="dialog" aria-labelledby="modalLabel"
        aria-hidden="true">
        <div class="modal-dialog  modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    Anda yakin?
                    <input type="hidden" name="file-id" id="file-id">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm btn-modal-cancel"
                        data-dismiss="modal">Kembali</button>
                    <button type="submit" class="btn btn-danger btn-sm btn-modal-submit">Hapus</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-tambah-folder" tabindex="-1" role="dialog" aria-labelledby="modalLabel"
        aria-hidden="true">
        <div class="modal-dialog  modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Tambah Folder</h5>
                </div>
                <form action="#" id="form-tambah-folder">
                    <div class="modal-body">
                        @csrf
                        <div class="form-group">
                            <input type="text" class="form-control" name="nama" id="nama"
                                placeholder="Nama folder">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary btn-sm btn-modal-cancel"
                            data-dismiss="modal">Kembali</button>
                        <button type="submit" class="btn btn-primary btn-sm btn-modal-submit">Simpan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-upload-file" tabindex="-1" role="dialog" aria-labelledby="modalLabel"
        aria-hidden="true">
        <div class="modal-dialog  modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Upload File</h5>
                </div>
                <form action="#" name="form-upload-file" id="form-upload-file" enctype="multipart/form-data">
                    <div class="modal-body">
                        @csrf
                        <div class="form-group">
                            <div class="custom-file">
                                <input type="file" class="custom-file-input" name="files[]" id="files" multiple>
                                <label class="custom-file-label" for="exampleInputFile">Choose file</label>
                            </div>
                        </div>
                        <div class="form-group upload-progress">
                            <div class="progress hide-this">
                                <div class="progress-bar bg-primary progress-bar-striped" id="progress-bar-process"
                                    role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"
                                    style="width: 0%">
                                    0% Complete
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary btn-sm btn-modal-cancel"
                            data-dismiss="modal">Kembali</button>
                        <button type="submit" class="btn btn-primary btn-sm btn-modal-submit">Upload</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modal-rename-file" tabindex="-1" role="dialog" aria-labelledby="modalLabel"
        aria-hidden="true">
        <div class="modal-dialog  modal-dialog-centered" role="document">
            <div class="modal-content">
                <form action="#" id="form-rename-file">
                    <div class="modal-body pb-0">
                        @csrf
                        <div class="rename-div"></div>
                        <div class="form-group">
                            <input type="text" class="form-control" name="rename" id="rename"
                                placeholder="Nama baru">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary btn-sm btn-modal-cancel"
                            data-dismiss="modal">Kembali</button>
                        <button type="submit" class="btn btn-primary btn-sm btn-modal-submit">Simpan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-dapatkan-link" tabindex="-1" role="dialog" aria-labelledby="modalLabel"
        aria-hidden="true">
        <div class="modal-dialog  modal-dialog-centered" role="document">
            <div class="modal-content">
                <form action="#" id="form-dapatkan-link">
                    <div class="modal-body">
                        @csrf
                        <h5>Dapatkan link</h5>
                        <div class="w-100 bg-custom1-fade mb-2 mt-3 py-2 px-2 rounded"
                            style="overflow-x: auto; white-space: nowrap;font-size:11pt" id="input-link">
                            https://syno.stp-bandung.ac.id/share/skdfhf9900/dkkkasdas.pdf</div>
                        <p class="deskripsi">Item ini akan dibagikan atau dilihat secara umum. Silahkan tentukan tanggal
                            kadaluwarsa terlebih
                            dahulu.
                        </p>
                        <input type="hidden" id="dapatkan-id">
                        <div class="form-group">
                            <div class="input-group date" data-target-input="nearest">
                                <input type="text" name="link_expired" id="link_expired" value=""
                                    class="form-control form-control-sm datetimepicker-input" data-target="#link_expired"
                                    placeholder="yyyy-mm-dd" required />
                                <div class="input-group-append" data-target="#link_expired" data-toggle="datetimepicker">
                                    <div class="input-group-text"><i class="fa fa-calendar"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary btn-sm btn-modal-cancel"
                            data-dismiss="modal">Kembali</button>
                        <button type="submit" class="btn btn-primary btn-sm btn-modal-submit">Dapatkan link</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {{-- Modal bagikan --}}
    <div class="modal fade" id="modal-bagikan-file" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
        <div class="modal-dialog  modal-dialog-centered" role="document">
            <div class="modal-content">
                <form action="#" id="form-bagikan-file">
                    <div class="modal-body">
                        @csrf
                        <h5>Bagikan kepada pengguna</h5>
                        <p>Tambahkan pengguna dan atur hak akses</p>
                        <div class="form-row">
                            <div class="col-6 pr-0">
                                <select class="form-control form-control-sm select2" name="user"
                                    style="width: 100%"></select>
                            </div>
                            <div class="col-4">
                                <select name="permission" class="form-control form-control-sm">
                                    <option value="0">View</option>
                                    <option value="1">Edit</option>
                                </select>
                            </div>
                            <div class="col-2">
                                <button class="btn btn-primary form-control form-control-sm p-0" id="tambah-bagikan">
                                    <i class="fas fa-plus fa-xs" style="margin-top:0.1px"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 py-2 px-3 text-sm mb-2 div-bagikan nowrap">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary btn-sm btn-modal-cancel"
                            data-dismiss="modal">Kembali</button>
                        <button type="submit" class="btn btn-primary btn-sm btn-modal-submit">Bagikan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- /.card -->
@endsection