@extends('adminlte::page')
@section('content_header')
    <h1>Section</h1>
@stop
<script src="//code.jquery.com/jquery.js"></script>

@section('content')
@notifyCss
 @notifyJs
    
    @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
    @endif

    @if (session('status'))
            <div class="alert alert-success">
                {{ session('status') }}
            </div>
    @endif
@include('notify::messages')  

  <div class="row">
            <!--row starts-->

            <div class="col-md-12">
               
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                           Section
                        </h3>
                </div>

                <div class="panel-body">
                        <form class="form-horizontal" action="{{ url('sectionpost') }}" method="post" id="section" onsubmit="return validation();">

                            <!-- CSRF Token -->
                             <input type="hidden" name="_token" value="{{csrf_token()}}">
                                <!-- Name input-->
                              
                                <div class="form-group">
                                    <label class="col-md-3 control-label" for="email">Office Name<span style="color: red;">*</span></label>
                                    <div class="col-md-9">
                                      <select name="officename" id="officename" class="form-control">
                                        <option value="0">Select One</option>
                                       @foreach ($officenames as $officename)
                                        <option value="{{$officename->id}}">{{$officename->office_name}}</option>

                                       @endforeach

                                      </select>
                                      </div>
                                </div>
                               <!--dept name-->
                                  <div class="form-group">
                                    <label class="col-md-3 control-label" for="email">Department Name<span style="color: red;">*</span></label>
                                    <div class="col-md-9">
                                      <select name="deptname" id="deptname" class="form-control">
                                        <option value="0">Select One</option>
                                      

                                      </select>
                                      </div>
                                </div>

                                    
                                <!-- Message body -->
                                <div class="form-group">
                                    <label class="col-md-3 control-label" for="addr">Section Code<span style="color: red;">*</span></label>
                                    <div class="col-md-9">
                                        <input id="seccode" name="seccode" placeholder="Please enter your section code here..." class="form-control" maxlength='20'>
                                    </div>
                                </div>

                                <!-- Message body -->
                                <div class="form-group">
                                    <label class="col-md-3 control-label" for="addr">Section Name<span style="color: red;">*</span></label>
                                    <div class="col-md-9">
                                        <input id="secname" name="secname" placeholder="Please enter your section name here..." class="form-control" maxlength='50'>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-md-3 control-label" for="name">Remarks<span style="color: red;">*</span></label>
                                    <div class="col-md-9">
                                        <input id="remark" name="remark" type="text" placeholder="Enter your remarks here..." class="form-control" maxlength='100'></div>
                                </div>
                                
                               
                                <!-- Form actions -->
                                <div class="form-position">
                                    <div class="col-md-12 text-right">
                                        <button type="submit" class="btn btn-responsive btn-primary btn-sm" id="btn" >Submit</button>
                                    </div>
                                </div>
                        </form>
                    </div>
                </div>
               



            </div>
            <!--md-12 ends-->
        </div>


 <table class="table table-bordered" id="section_table">
        <thead>
            <tr>
                <th>Id</th>
                <th>Office Name</th>
                <th>Department Name</th>
                <th>Section Code</th>
                <th>Section Name</th>
                <th>Remarks</th>
                <th>Updated At</th>
                <th>Actions</th>
            </tr>
        </thead>
    </table>



<script>
$(function() {

    $('#section_table').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{!! url('sectionpostdata') !!}',
        columns: [
            { data: 'id', name: 'id' },
            { data: 'office_name', name: 'office_name' },
            { data: 'dept_name', name: 'dept_name' },
            { data: 'section_code', name: 'section_code' },
            { data: 'section_name', name: 'section_name' },
            { data: 'remarks', name: 'remarks' },
            { data: 'updated_at', name: 'updated_at' },
            { data: 'action', name: 'action' }
        ]
    });
});






$(document).ready(function($){
   
    $('#officename').change(function(){
      
        $.get("{{ url('getdepartment')}}",
        { option: $(this).val() },
        function(data) {
            
            $('#deptname').empty();
            $('#deptname').append("<option value='0'>Select a department</option>");
            $.each(data, function(key, element) {
                $('#deptname').append("<option value='" + key +"'>" + element + "</option>");
            });
        });
    });
});

</script>



<script>
function validation()
    {
        if(document.getElementById('officename').value=="0")
        {
            alert(" Please select the Office Name");
            document.getElementById('officename').focus();
            return false;
        }

        if(document.getElementById('deptname').value=="0")
        {
            alert(" Please select the Department Name");
            document.getElementById('deptname').focus();
            return false;
        }

        if(document.getElementById('seccode').value=="")
        {
            alert(" Please Enter the Section Code");
            document.getElementById('seccode').focus();
            return false;
        }

        if(document.getElementById('secname').value=="")
        {
            alert(" Please Enter the Section Name");
            document.getElementById('secname').focus();
            return false;
        }

        if(document.getElementById('remark').value=="")
        {
            alert(" Please Enter the Remarks");
            document.getElementById('remark').focus();
            return false;
        }
        document.getElementById("btn").disabled='true';
   
        return true;
    }
</script>

			                       
@stop