@extends('adminlte::page')
@section('content_header')
    <h1>Seat Assigned To User</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">
                   Seat Assigned To User
                </h3>
            </div>
            <div class="panel-body">
                <form class="form-horizontal" action="{{ url('user_seatpost') }}" method="post" id="userseat" onsubmit="return validation();">
                    <!-- CSRF Token -->
                    <input type="hidden" name="_token" value="{{csrf_token()}}">
                    <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-6">
                            <select name="officename" id="officename" class="form-control">
                                <option value="">Select One</option>
                                @foreach ($officenames as $officename)
                                    <option value="{{$officename->id}}" {{ $officename->id == $office_id ? 'selected' : '' }}>{{$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-6">
                            <select name="deptname" id="deptname" class="form-control">
                                <option value="">Select One</option>
                                @foreach ($departments as $department)
                                    <option value="{{$department->id}}">{{$department->dept_name}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <!--dept name-->
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="email">Section Name<span style="color: red;">*</span></label>
                        <div class="col-md-6">
                            <select name="secname" id="secname" class="form-control">
                                <option value="">Select One</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="email">Seat<span style="color: red;">*</span></label>
                        <div class="col-md-6">
                            <select name="seatname" id="seatname" class="form-control">
                                <option value="">Select One</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="email">User<span style="color: red;">*</span></label>
                        <div class="col-md-6">
                            <select name="name" id="name" class="form-control">
                                <option value="">Select One</option>
                                @foreach ($users as $user)
                                    <option value="{{$user->id}}">{{$user->name}} - {{$user->email}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <!-- Form actions -->
                    <div class="form-position">
                        <div class="col-md-5 text-right">
                            <button type="submit" class="btn btn-responsive btn-primary btn-sm" id="btn" >Save</button>
                        </div>
                    </div>
                </form>
            </div>
        </div> 
        <div class="panel panel-body">
            <table class="table table-bordered" id="user_seat_table">
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>User</th>
                         <th>Office Name</th>
                        <th>Department Name</th>
                        <th>Section Name</th>
                        <th>Seat</th>
                        <th>Updated At</th>
                        <th>Actions</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    <!--md-12 ends-->
</div>
<script>
$(function() {
    $('#user_seat_table').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{!! url('user_seatpostdata') !!}',
        columns: [
            { data: 'id', name: 'id' },
            { data: 'name', name: 'name' },
             { data: 'office_name', name: 'office_name' },
            { data: 'dept_name', name: 'dept_name' },
            { data: 'section_name', name: 'section_name' },
            { data: 'seat_name', name: 'seat_name' },
            { data: 'updated_at', name: 'updated_at' },
            { data: 'action', name: 'action' }
        ],
        initComplete: function () {
            this.api().columns([1,2,3]).every( function () {
                var column = this;
                var select = $('<select><option value="">Select</option></select>')
                    .appendTo( $(column.header()))
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );

                        column
                            .search( val ? val : '', true, false )
                            .draw();
                    } );

                column.data().unique().sort().each( function ( d, j ) 
                {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        }
    });
});

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

    $('#deptname').change(function(){
      
        $.get("{{ url('getsection')}}",
        { option: $(this).val() },
        function(data) {
            
            $('#secname').empty();
            $('#secname').append("<option value=''>Select section</option>");
            $.each(data, function(key, element) {
                $('#secname').append("<option value='" + key +"'>" + element + "</option>");
            });
        });
    });

    $('#deptname').change(function(){
      
        //var officeid = document.getElementById("office_id").value=id;
        $.get("{{ url('getseatfrmdept')}}",
        { option: $(this).val() },
        function(data) {
            
            $('#seatname').empty();
            $('#seatname').append("<option value=''>Select seat</option>");
            $.each(data, function(key, element) {
                $('#seatname').append("<option value='" + key +"'>" + element + "</option>");
            });
        });
    });

    $('#secname').change(function(){
      
        //var officeid = document.getElementById("office_id").value=id;
        $.get("{{ url('getseatfrmsection')}}",
        { option: $(this).val() },
        function(data) {
            
            $('#seatname').empty();
            $('#seatname').append("<option value=''>Select seat</option>");
            $.each(data, function(key, element) {
                $('#seatname').append("<option value='" + key +"'>" + element + "</option>");
            });
        });
    });

   $('#officename').change(function(){
      
        $.get("{{ url('getseat')}}",
        { option: $(this).val() },
        function(data) {
            $('#seatname').empty();
            $('#seatname').append("<option value=''>Select seat</option>");
            $.each(data, function(key, element) {
                $('#seatname').append("<option value='" + key +"'>" + element + "</option>");
            });
        });
    });
});

function validation()
{
    
    if(document.getElementById('seatname').value=="0")
    {
        alert(" Please select the Seat");
        document.getElementById('seatname').focus();
        return false;
    }

    if(document.getElementById('name').value=="0")
    {
        alert(" Please select the User");
        document.getElementById('name').focus();
        return false;
    }
    document.getElementById("btn").disabled='true';

    
    return true;
}
</script>
@stop