@extends('layouts.template')

@section('title')
Master Unit | SIMRS
@endsection

@section('pagetitle')
Master Unit
@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 active" aria-current="page">Data Master Unit</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 Unit</h4>
                <a href="{{ route('master.unit.add') }}">
                    <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="#importmasterunit">
                    <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="index" data-sortable="true"><strong>No</strong></th>
                            <th data-field="kode" data-sortable="true"><strong>Kode</strong></th>
                            <th data-field="nama" data-sortable="true"><strong>Nama</strong></th>
                            <th data-field="license" data-sortable="true"><strong>License</strong></th>
                            <th data-field="city"><strong>City</strong></th>
                            <th data-field="actions" class="td-actions text-right" ><strong>Actions</strong></th>
                        </thead>
                        <tbody>
                        @foreach ($data as $index => $r)
                            <tr>

                                <td>{{$index+1}}</td>
                                <td>{{$r->unit_kode}}</td>
                                <td>{{$r->unit_nama}}</td>
                                <td>{{$r->unit_nama}}</td>
                                <td>{{@$r->provinsi->provinsi_nama}},{{@$r->city->kabupaten_name}} </td>

                                <td>
                                        <form onsubmit="return confirm('Apakah Anda Yakin ?');"
                                            action="{{ route('master.unit.destroy', $r->unit_id) }}" method="POST">
                                            <a href="{{ route('master.unit.edit', $r->unit_id) }}"
                                                class="btn btn-xs btn-primary"><i class="fa fa-pencil-square-o"></i></a>
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-xs btn-danger"><i class="fa fa-trash-o" aria-hidden="true"></i></button>
                                        </form>
                                </td>

                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div><!--  end card  -->
        </div> <!-- end col-md-12 -->
    </div> <!-- end row -->
</div>

<!-- Modal -->
<div class="modal fade" id="importmasterunit" 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 Unit</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 unit</code>, silahkan mengikuti <code>langkah-langkah dibawah</code> untuk meng-import data master unit.</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">masterunit.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