@extends('adminlte::page')
@section('content_header')
    <h1>Office</h1>
@stop
<script src="//code.jquery.com/jquery.js"></script>
@section('content')
<div class="row">
    <!--row starts-->
    <div class="col-md-12">   
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">
                   Office
                </h3>
            </div>
            <div class="panel-body">
                <form class="form-horizontal" action="{{ url('updateofficedata') }}" method="post" id="office" onsubmit="return validation();">
                    <!-- CSRF Token -->
                    <input type="hidden" name="_token" value="{{csrf_token()}}">

                    <!--Office ID Hidden value-->
                    <input type="hidden" name="office_id" value="{{$office->id}}">
                    <!-- Name input-->
                      
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="name">Office Name<span style="color: red;">*</span></label>
                        <div class="col-md-6">
                            <input id="officename" name="officename" type="text" placeholder="Enter the office name" class="form-control" value="{{$office->office_name}}" required>
                        </div>
                    </div>
                        
                    <!-- Message body -->
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="addr">Address1<span style="color: red;">*</span></label>
                        <div class="col-md-6">
                            <input id="addr1" name="addr1" placeholder="Please enter your address here..." class="form-control" value="{{$office->address1}}" required>
                        </div>
                    </div>

                    <!-- Message body -->
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="addr">Address2<span style="color: red;">*</span></label>
                        <div class="col-md-6">
                            <input id="addr2" name="addr2" placeholder="Please enter your address here..." class="form-control" value="{{$office->address2}}" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="email">State<span style="color: red;">*</span></label>
                        <div class="col-md-6">
                            <select name="state" id="state" class="form-control" required>
                                <option value="">Select One</option>
                                @foreach ($states as $state)
                                    <option value="{{$state->id}}" {{ $state->id == $office->state ? 'selected' : '' }}>{{$state->state_name}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="email">District<span style="color: red;">*</span></label>
                        <div class="col-md-6">
                            <select name="district" id="district" class="form-control" required>
                                <option value="">Select One</option>
                                @foreach ($districts as $district)
                                    <option value="{{$district->id}}" {{ $district->id == $office->district ? 'selected' : '' }}>{{$district->district_name}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="name">City<span style="color: red;">*</span></label>
                        <div class="col-md-6">
                            <input id="city" name="city" type="text" placeholder="Enter your city..." class="form-control" value="{{$office-> city}}" required>
                        </div>
                    </div>
                    <!-- Email input-->
                    
                    
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="name">Pincode<span style="color: red;">*</span></label>
                        <div class="col-md-6">
                            <input id="pincode" name="pincode" type="text" placeholder="Enter the pincode" maxlength="6" minlength="6" class="form-control" onkeypress="return isNumber(event)" onchange="ValidateNo(this,'Pincode');" required value="{{$office->pincode}}">
                        </div>
                    </div>
                    <!-- Form actions -->
                    <div class="form-position">
                        <div class="col-md-5 text-right">
                             <a href="{{url('office')}}"><button type="button" class="btn btn-responsive btn-danger btn-sm">Back</button></a>
                            <button type="submit" id="btn" class="btn btn-responsive btn-warning btn-sm" >Update</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>     
    </div>
    <!--md-12 ends-->
</div>
<script>
    /////////validate integer fields///////////////////////////
    function isNumber(evt) 
    {
      evt = (evt) ? evt : window.event;
      var charCode = (evt.which) ? evt.which : evt.keyCode;
      if (charCode > 31 && (charCode < 48 || charCode > 57)) 
      {
        //alert("Please enter only Numbers.");
        return false;
      }

      return true;
    }
    /////////////validate no/////////////////////////////
    function ValidateNo(fieldNo,field) 
    {
        //////////////pincode//////////////////////////
        if(fieldNo.name == 'pincode')
        {
            if (fieldNo.value.length < 6 || fieldNo.value.length > 6) 
            {
                alert(field+" No. is not valid, Please Enter 6 Digit "+field+" No.");
                return false;
            }

        }
        return true;
    }
    function validation()
    {
        if(document.getElementById('officename').value=="")
        {
            alert(" Please Enter the Office Name");
            document.getElementById('officename').focus();
            return false;
        }

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

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

        if(document.getElementById('city').value=="")
        {
            alert(" Please Enter the City");
            document.getElementById('city').focus();
            return false;
        }
        if(document.getElementById('district').value=="0")
        {
            alert(" Please select District");
            document.getElementById('district').focus();
            return false;
        }

        if(document.getElementById('state').value=="0")
        {
            alert(" Please select State");
            document.getElementById('state').focus();
            return false;
        }

        document.getElementById("btn").disabled='true';
              
        return true;
    }
</script>             
@stop