@extends('layouts.template')

@section('title')
Master Ruangan (Room) | SIMRS
@endsection

@section('pagetitle')
Master Ruangan (Room)
@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="#">Data Master</a></li>
        <li class="breadcrumb-item"><a href="#">Ruangan</a></li>
        <li class="breadcrumb-item active" aria-current="page">Data Ruangan (Room)</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 {
        /* padding:50px; */
        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-12">
            <div class="row">
                <h4 class="title">Data Master Ruangan (Room)</h4>
                <a href="{{ route('tambahmasterruangan') }}">
                    <button type="button" class="btn btn-primary right" style="margin-right:10px; margin-left:10px;">
                        <span class="btn-label">
                            <i class="ti-plus"></i>
                        </span>
                        Tambah Data
                    </button>
                </a>
                <button type="button" class="btn btn-primary right" data-toggle="modal"
                    data-target="#importmasterruangan">
                    <span class="btn-label">
                        <i class="ti-files"></i>
                    </span>
                    Import
                </button>
            </div>
            <br>
            <div class="card">
                <div class="card-content">
                    <div class="toolbar">
                        <!--Here you can write extra buttons/actions for the toolbar-->
                    </div>
                    <table id="bootstrap-table" class="table">
                        <thead>
                            <th data-field="state" data-checkbox="true"></th>
                            <th data-field="ruangan" data-sortable="true"><strong>Nama Ruangan</strong></th>
                            <th data-field="actions" class="td-actions text-right" data-events="operateEvents"
                                data-formatter="operateFormatter"><strong>Actions</strong></th>
                        </thead>
                        <tbody>
                            <tr>
                                <td></td>
                                <td>Dakota@gmail.com</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td>Minerva@gmail.com</td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div><!--  end card  -->
        </div> <!-- end col-md-12 -->
    </div> <!-- end row -->
</div>

<!-- Modal -->
<div class="modal fade" id="importmasterruangan" data-backdrop="static" tabindex="-1" role="dialog"
    aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form id="allInputsFormValidation" class="form-horizontal" action="" method="post" novalidate="">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h5 class="modal-title" id="exampleModalLabel">Import Data Ruangan (Room)</h5>
                </div>
                <div class="modal-body">
                    <div class="content">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="card-content">
                                        <!-- <fieldset>
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label">
                                                    Keterangan
                                                </label>
                                                <div class="col-sm-9">
                                                    <input class="form-control" type="text" name="keterangan"
                                                        required="required" />
                                                </div>
                                            </div>
                                        </fieldset> -->

                                        <fieldset>
                                            <center>
                                                <p>Berikut adalah form <code>import file data Ruangan (Room)</code>,
                                                    silahkan mengikuti <code>langkah-langkah dibawah</code> untuk
                                                    meng-import data master ruangan (Room).</p>
                                            </center>
                                            <pre>1. Unduh File template Excel pada link berikut&nbsp;<i class="ti-arrow-right"></i>&nbsp;<button class="btn btn-success btn-xs">dataruanganrs.xlsx</button>
                                            <br>2. Pastikan data terisi dengan benar
                                            <br>3. Pastikan format file sesuai (.xlsx atau .xls)
                                            <br>4. Upload file pada form dibawah <i class="ti-arrow-down"></i>
                                        </pre>
                                        </fieldset>

                                        <fieldset>
                                            <div class="form-group">
                                                <!-- <label class="col-sm-3 control-label">
                                                    File
                                                </label> -->
                                                <div class="col-sm-12">
                                                    <!-- <input class="form-control" type="text" name="number" number="true" /> -->
                                                    <input type="file" id="InputFile" onchange="selectFile();"
                                                        name="file_masterunit" 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>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Upload</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- End Modal -->

<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