@extends('layouts.main')

@section('container')
<!-- @include('layouts.scripts') -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Add Map for Get Address of the Project -->
<style>
    a{cursor: pointer;}
</style>
<div class="page-title">
    <h1>
        Area Names
    </h1>
</div>
<!-- DataTables Example -->
 <div class="container-fluid main-content">
    
        <!-- DataTables Example -->
       
        <div class="row">
        	
          <div class="col-lg-offset-1 col-lg-10 col-lg-offset-1">
          	 <div class="widget-container fluid-height clearfix">
              
              <div class="widget-content padded clearfix">
              	  <details>
  <summary> 
  	<div class="btn-group btn btn-sm btn-info-outline pull-left"><i class="fa fa-plus"></i>Add New Area</div></summary>
<div class="row">
              <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                  <div class="x_title">
                    <h2>Add New</h2>
                  	<div class="clearfix"></div>
                  </div>
                  <div class="x_content">
                    <br>
                    <form  onsubmit="return submitdata()" data-parsley-validate="" class="form-horizontal form-label-left" >
                      <div class="form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name">Area Name <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input type="text" required="required" name="area_name" class="form-control col-md-7 col-xs-12" id="area_name">
                        </div>
                      </div>
                      <div class="ln_solid"></div>
                      <div class="form-group">
                        <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
                          <button type="submit" class="btn btn-success">Submit</button>
                        </div>
                      </div>

                    </form>
                  </div>
                </div>
              </div>
            </div>
</details>
              	
                <table class="table table-bordered table-striped" id="dataTable1">
                  <thead>
                    <th class="check-header hidden-xs">
                     Sr
                    </th>
                    <th style="text-align: center;">
                      Area Name
                    </th>
                    <th style="text-align: center;">
                      Action
                    </th>
                  </thead>
                  <tbody> 
                                          @foreach($datas as $value)
                    <tr id="{{$value->id}}">
                        <td>
                            {{$i}}
                        </td>	
                        <td style="text-align: center;">
                            {{$value->area}}
                        </td>
                        <td style="text-align: center;">
                            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal{{$value->id}}">Edit</button>
                            <a class="btn btn-success"  onClick="delete_data({{$value->id}})">Delete</a>

                            <!-- Modal -->
                            <div class="modal fade" id="myModal{{$value->id}}" role="dialog">
                                <div class="modal-dialog">
                                
                                <!-- Modal content-->
                                <div class="modal-content">
                                    <form action="{{url('panel/update_area')}}" method="POST">
                                        {{csrf_field()}}
                                        <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                                        <h4 class="modal-title">Update Area</h4>
                                        </div>
                                        <div class="modal-body">
                                            <input type="hidden" name="id" value="{{$value->id}}">
                                            <input type="text" class="form-control" required name="area_name" value="{{$value->area}}">
                                        </div>
                                        <div class="modal-footer">
                                        <button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
                                        <button type="submit" class="btn btn-success">Update</button>
                                        </div>
                                    </form>
                                </div>
                                
                                </div>
                            </div>
                        </td>
                    </tr>
                                        @endforeach
                  </tbody>
                </table>
                <input type="hidden" id="next" value="{{$i}}">
              </div>
            </div>
          </div>
        </div>
        <!-- end DataTables Example -->
      </div>
</div>

<style>
    .feed-back ul {
        padding: 0;
        position: relative;
        top: -9px;
    }

    .social-icons .col-87 li a{
        color:#fff;
    }

    .social-icons {
        height: 100px;
        width: 295px;
        margin-top:20px;
    }
    .feed-back {

        color: #fff;
        cursor: pointer;
        position: relative;
        text-align: center;
        width: 30px;
        -webkit-box-shadow: -5px 0px 3px -3px rgba(0,0,0,0.32);
        -moz-box-shadow: -5px 0px 3px -3px rgba(0,0,0,0.32);
        box-shadow: -5px 0px 3px -3px rgba(0,0,0,0.32);
    }
    .col-87 {
        background: none repeat scroll 0 0 #fff;
        display: none;
        float: left;
        height: 100px;
        width: 265px;
        -webkit-box-shadow: -6px 2px 5px 1px rgba(0,0,0,0.37);
        -moz-box-shadow: -6px 2px 5px 1px rgba(0,0,0,0.37);
        box-shadow: -6px 2px 5px 1px rgba(0,0,0,0.37);
    }
    .col-87 ul {
        float: left;
        padding: 24px 16px 14px;
    }
    .col-87 ul li {
        background: #162983;
        border-radius: 35px;
        float: left;
        height: 50px;
        list-style: outside none none;
        margin-right: 8px;
        width: 50px;
        -webkit-box-shadow: inset 1px -7px 5px 0px rgba(0,0,0,0.37);
        -moz-box-shadow: inset 1px -7px 5px 0px rgba(0,0,0,0.37);
        box-shadow: inset 1px -7px 5px 0px rgba(0,0,0,0.37);
    }
    .col-87 ul li:hover{
        background:#777676;
        cursor:pointer;
    }
    .trash1 {
        left: 19px;
        position: relative;
        top: 15px;
    }

</style>

<!-- end DataTables Example -->



<!--script for getting checkbox value-->
<script src="{{ URL::asset('drag/j/dropMe1.js') }}"></script>

<script>
    function  disable(val){

        if(val==""){

            $("#header_val").show();
        }
        else{
            $("#header_val").hide();

        }

    }
</script>
<script>
    $(document).ready(function() {
        $("#userform1").validate({
            rules: {
                property_header1: {},
                property_header: {
                    required: true
                },
                property_type: {
                    required: true
                }

            },
            messages: {
                property_header1: "",
                property_header: "Please enter a valid property header ",
                property_type: {
                    required: "Please enter your property type"
                }
            }
        });
    });
</script>
<script>
    $('.dropme').dropme('enable');
    $('.exclude').dropme({
        items: ':not(.disabled)'
    });
    $('.connected').dropme({
        linkTo: '.connected'
    });



</script>
<!--script for image Preview-->


<style>
    /*Profile Pic Start*/
    .picture-container{
        position: relative;
        cursor: pointer;
        text-align: center;
    }
    .picture{
        width: 106px;
        height: 106px;
        background-color: #999999;
        border: 4px solid #CCCCCC;
        color: #FFFFFF;
        border-radius: 50%;
        margin: 0px auto;
        overflow: hidden;
        transition: all 0.2s;
        -webkit-transition: all 0.2s;
    }
    .picture:hover{
        border-color: #2ca8ff;
    }
    .content.ct-wizard-green .picture:hover{
        border-color: #05ae0e;
    }
    .content.ct-wizard-blue .picture:hover{
        border-color: #3472f7;
    }
    .content.ct-wizard-orange .picture:hover{
        border-color: #ff9500;
    }
    .content.ct-wizard-red .picture:hover{
        border-color: #ff3b30;
    }
    .picture input[type="file"] {
        cursor: pointer;
        display: block;
        height: 100%;
        left: 0;
        opacity: 0 !important;
        position: absolute;
        top: 0;
        width: 100%;
    }

    .picture-src{
        width: 100%;

    }
    /*Profile Pic End*/
</style>




<style>
    /*******************************
* MODAL AS LEFT/RIGHT SIDEBAR
* Add "left" or "right" in modal parent div, after class="modal".
* Get free snippets on bootpen.com
*******************************/
    .modal.left .modal-dialog,
    .modal.right .modal-dialog {
        position: fixed;

        width: 320px;
        height: 100%;
        -webkit-transform: translate3d(0%, 0, 0);
        -ms-transform: translate3d(0%, 0, 0);
        -o-transform: translate3d(0%, 0, 0);
        transform: translate3d(0%, 0, 0);
    }

    .modal.left .modal-content,
    .modal.right .modal-content {
        height: 100%;
        overflow-y: auto;
    }

    .modal.left .modal-body,
    .modal.right .modal-body {
        padding: 15px 15px 80px;
    }

    /*Left*/
    .modal.left.fade .modal-dialog{
        left: -320px;
        -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
        -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
        -o-transition: opacity 0.3s linear, left 0.3s ease-out;
        transition: opacity 0.3s linear, left 0.3s ease-out;
    }

    .modal.left.fade.in .modal-dialog{
        left: 0;
    }

    /*Right*/
    .modal.right.fade .modal-dialog {
        right: -320px;
        -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
        -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
        -o-transition: opacity 0.3s linear, right 0.3s ease-out;
        transition: opacity 0.3s linear, right 0.3s ease-out;
    }

    .modal.right.fade.in .modal-dialog {
        right: 0;
    }

    /* ----- MODAL STYLE ----- */
    .modal-content {
        border-radius: 0;
        border: none;
    }

    .modal-header {
        border-bottom-color: #EEEEEE;
        background-color: #FAFAFA;
    }

    /* ----- v CAN BE DELETED v ----- */

    .demo {
        padding-top: 60px;
        padding-bottom: 110px;
    }

    .btn-demo {
        margin: 15px;
        padding: 10px 15px;
        border-radius: 0;
        font-size: 16px;
        background-color: #FFFFFF;
    }

    .btn-demo:focus {
        outline: 0;
    }

    .demo-footer {
        position: fixed;
        bottom: 0;
        width: 100%;
        padding: 15px;
        background-color: #212121;
        text-align: center;
    }

    .demo-footer > a {
        text-decoration: none;
        font-weight: bold;
        font-size: 16px;
        color: #fff;
    }
</style>
<script>
    $(document).ready(function(){

        // Prepare the preview for profile picture
        $("#wizard-pic").change(function(){

            readURL(this);
        });
    });
    function readURL(input) {


        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {

                $('#wizardPicturePre').attr('src', e.target.result).fadeIn('slow');
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

        function delete_data(id)
        {
            var r = confirm("Are you sure to delete this record!!");
            if (r == true) 
            {
                $.ajax({
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                type    :"POST",
                url     :"{{url('panel/delete_area')}}",
                dataType:"JSON",
                data    :{ id:id,'_token':'{!!csrf_token()!!}'},
                success :function(Response)
                {
                    if (Response.status=='success') 
                    {
                        document.getElementById(id).style.display='none';
                        alert('Record deleted succefully!!');    
                    }
                    else
                    {
                        alert('Try Again! Fail to deleted record!!'); 
                    }
                }
                });
            }
        }

    function submitdata()
    {
        var name=document.getElementById('area_name').value;
        var next=document.getElementById('next').value;

        //alert(name);
        $.ajax({
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type    :"POST",
        url     :"{{url('panel/insert_area')}}",
        dataType:"JSON",
        data    :{ name:name,'_token':'{!!csrf_token()!!}'},
        success :function(Response)
        {
            if (Response.status=='already') 
            {
                alert('Area already exist!!');
                document.getElementById('area_name').value='';    
            } 
            else if(Response.status=='success') 
            {
                var markup = "<tr id="+Response.id+"><td>"+next+"</td><td style='text-align: center;'>"+name+"</td><td style='text-align: center;'><a class='btn btn-success'  onClick='delete_data("+Response.id+")'>Delete</a></td></tr>";
                $("table tbody").append(markup);
                document.getElementById('area_name').value='';
                alert('Record inserted successfully!!');
            }
            else
            {
                alert('Try again. Failed to insert record!!!');
            }
        }
        });
        return false;
    }
</script>

@if(Session::has('already'))
<script>
    swal({
        title: 'Try Again!',
        text: 'Area name already exist!!!',
        type: 'error',
        timer: 2500,
        showConfirmButton: false
     });
</script>