@extends('layouts.dashboard')

@section('title', 'Manage Set Up')

@section('myJS')
	<script src="{{url('/')}}/js/admin/setup.js"></script>
@endsection

@section('content')

<div class="padding-top40"></div>

<div class="bs-example">

<!-- main part-->
<div class="container-fluid">
    @include('dashboard.MasterSetup.Header')
    <div class="row" style="margin: 0px; padding-top: 15px;">
        <div class="col-md-2 manage-text">
            <input type="text" class="form-control" id="inputUnit" placeholder="Unit">
        </div>
        <div class="col-md-2">
            <button type="button" id="addUnit" class="btn btn-default btn-xs btnAddUnit" data-toggle="modal" data-target="#unitModal" style="font-size:14px !important;">Add Unit</button>
        </div>
        <div class="col-md-8"></div>
    </div>
    <div id="div_unit_table" class="row table-catalog" style="margin: 0px;">
        <table data-page-length='50' id="unitTable" class="table table-striped table-bordered" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th scope="col" class="set1">Unit ID</th>
                    <th scope="col" class="set1">Unit Abbreviation</th>
                    <th scope="col" class="set2">Unit Description</th>
                    <th scope="col" class="set2">Operations</th>
                </tr>
            </thead>
            <tbody>
                @foreach($unitList as $unit)
                    <tr id="unitatt_{{$unit->UnitID}}">
                        <td class="set-col1">
                            {{$unit->UnitID}}
                        </td>
                        <td class="set-col1">
                            {{$unit->UnitAbbreviation}}
                        </td>
                        <td class="set-col2">
                            {{$unit->UnitDescription}}
                        </td>
                        <td class="set-col5">
                            <div class="bt-seperation">
                                <button type="button" class="btn btn-primary btn-xs edit_button_unit"
                                data-toggle="modal" data-target="#unitModal"
                                data-unitid="{{$unit->UnitID}}"
                                data-unitabbrev="{{$unit->UnitAbbreviation}}"
                                data-unitdescription="{{$unit->UnitDescription}}">Edit</button> |

                                <button type="button" class="btn btn-primary btn-xs delete_button del_unit "
                                data-toggle="modal"
                                data-tabname="Unit"
                                data-id="{{$unit->UnitID}}">
                                Delete</button>
                            </div>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<div class="modal fade" id="unitModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog setup-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Add / Edit Units</h4>
            </div>
            <form id="postUnit">
            @csrf
                <div class="modal-body">
                     <div class="form-group">
                         <div class="row">
                             <div class="col-md-4"><div class="padd-name">Abbreviation :</div>  </div>
                          <div class="col-md-8">
                              <input class="form-control unitID" type="hidden" name="unitID" id="unitID">
                             <input class="form-control unitAbbrev" name="unitAbbrev" id="unitAbbrev" pattern=".*[^ ].*"  oninvalid="setCustomValidity('Plz enter unit name ')" oninput="try{setCustomValidity('')}catch(e){}" required>
                         </div>
                         </div>
                    </div>
                    <div class="form-group" style="clear: both;margin-top: 3% !important;">
                        <div class="row">
                            <div class="col-md-4"><div class="padd-name">Description :</div> </div>
                         <div class="col-md-8">
                        <input class="form-control unitDescription" name="unitDescription" id="unitDescription" pattern=".*[^ ].*"  oninvalid="setCustomValidity('Plz enter unit description ')" oninput="try{setCustomValidity('')}catch(e){}" required>
                         </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer" style="clear: both;margin-top: 5% !important;">
                    <button type="submit" class="btn btn-primary btn_update_properties">Save changes</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection