@extends('layouts.template')

@section('title')
Tambah Data E-Library | SIMRS
@endsection

@section('pagetitle')
Tambah Data E-Library
@endsection

@section('breadcumb')
<nav aria-label="breadcrumb" role="navigation" class="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Beranda</a></li>
        <li class="breadcrumb-item"><a href="#">Rekam Medis</a></li>
        <li class="breadcrumb-item"><a href="#">E-Library</a></li>
        <li class="breadcrumb-item active" aria-current="page">Tambah Data E-Library</li>
    </ol>
</nav>
@endsection

@section('content')

<style>
    select,
    option {
        top: 50px;
    }

    #buttonStyle {
        padding: 10px;
        color: white;
        background-color: #2D72EA;
        border: 1px solid #2D72EA;
        border-radius: 5px;
        cursor: pointer;
    }

    #buttonStyle:hover {
        background-color: #01ADFF;
        border: 1px solid #2D72EA;
    }

    #errormsg {
        margin-left: 10px;
        font-family: sans-serif;
        color: #aaa;
    }

    p .reds {
        color: red;
    }

    p .bold {
        font-weight: bold;
    }

    .input-field select {
        margin-top: 80px;
    }

</style>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-5">
            <h4 class="title">Form Tambah Data E-Library</h4>
            <!-- <p class="category">A powerful jQuery plugin handcrafted by our friends from <a href="https://datatables.net/" target="_blank">dataTables.net</a>. It is a highly flexible tool, based upon the foundations of progressive enhancement and will add advanced interaction controls to any HTML table. Please check out the <a href="https://datatables.net/manual/index" target="_blank">full documentation.</a></p> -->
            <div class="card">
                <form id="allInputsFormValidation" class="form-horizontal" action="" method="post" novalidate="">
                    <div class="card-content">
                        <h4 class="card-title">Tambah Data E-Library</h4>

                        <fieldset>
                            <div class="form-group">
                                <label class="col-sm-6 control-label">
                                    Nama File
                                </label>
                                <div class="col-sm-6">
                                    <input class="form-control" type="text" name="email" email="true" />
                                </div>
                            </div>
                        </fieldset>

                        <fieldset>
                            <div class="form-group">
                                <label class="col-sm-6 control-label">
                                    File
                                </label>
                                <div class="col-sm-6">
                                    <!-- <input class="form-control" type="text" name="number" number="true" /> -->
                                    <input type="file" id="InputFile" onchange="selectFile();" name="file_elibrary"
                                        style="display:none" />
                                    <button type="button" class="form-control btn-info" id="buttonStyle"
                                        onclick="FileUpload();">CHOOSE FILE</button>
                                    <br>
                                    <center>
                                        <span id='errormsg'>No file choosen, yet.</span>                                    </center>
                                </div>
                            </div>
                        </fieldset>
                    </div>
                </form> <!-- turunkan ke bawah card-footer jika data sudah ada -->
                <div class="card-footer text-center">
                    <button type="submit" class="btn btn-danger btn-fill">Batal</button>
                    <a href="{{ route('elib') }}">
                        <button type="submit" class="btn btn-info btn-fill">Tambah</button>
                    </a>
                </div>
            </div><!--  end card  -->
        </div> <!-- end col-md-5 -->
    </div> <!-- end row -->
</div>
<script>
    function FileUpload() {
        document.getElementById('InputFile').click();
    }

    function selectFile() {
        if (document.getElementById('InputFile').value) {
            document.getElementById('errormsg').innerHTML = document.getElementById('InputFile').value.match(
                /[\/\\]([\w\d\s\.\-\(\)]+)$/
            )[1];
        } else {
            document.getElementById('errormsg').innerHTML = "No file choosen, yet.";
        }
    }

</script>
@endsection


@section('script')
<!-- jika ada script tambahan letakkan disini -->

@endsection