@extends('layouts.app')

@section('content')
    <style type="text/css">
        .error {color: red;}
    </style>
    <div class="container-fluid">
        <div class="row-fluid">
            <!-- BEGIN PAGE TITLE & BREADCRUMB-->
            <h3 class="page-title">
                Name
            </h3>
            <ul class="breadcrumb">
                <li>
                    <i class="icon-home"></i>
                    <a href="#">Dashboard</a> 
                    <i class="icon-angle-right"></i>
                </li>
                <li><a href="#">Store</a><i class="icon-angle-right"></i></li>
                <li><a href="#">Name</a></li>
                
            </ul>
            <!-- END PAGE TITLE & BREADCRUMB-->
        </div>
        @if(Session::has('flash_message'))
            <div class="row-fluid">
            <div class="span12">
                <p class="alert {{ Session::get('alert-class', 'alert-info') }}">{{ Session::get('flash_message') }}</p>
            </div> 
            </div>   
        @endif
        <div class="row-fluid">
            <div class="span12">
                <div class="portlet box green">
                    <div class="portlet-title">
                        <div class="caption"><i class="icon-globe"></i>Name Records</div>
                        <div class="tools">
                            <a href="javascript:;" class="reload"></a>
                            <a href="javascript:;" class="remove"></a>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <div class="clearfix">
                            <div class="btn-group pull-right">
                               <a href="{{ url('/admin/name/create') }}" class="btn green btn-sm" title="Add New Name">
                                    <i class="icon-plus" aria-hidden="true"></i> Add New Name
                                </a>
                            </div>
                        </div>
                        <table class="table table-striped table-bordered table-hover table-full-width" id="sample_2">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Function</th>
                                    <th>ID NR</th>
                                    <th>Passport</th>
                                    <th>Licence NR</th>
                                    <th>Tax ID</th>
                                    <th>Pension NR</th>
                                    <th>Employed</th>
                                    <th>Dismissed</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($name as $item)
                                    <tr>
                                        <td>{{ $item->name }}</td>
                                        <td>{{ $item->function }}</td>
                                        <td>{{ $item->id_number }}</td>
                                        <td>{{ $item->passport }}</td>
                                        <td>{{ $item->licence_number }}</td>
                                        <td>{{ $item->tax_id }}</td>
                                        <td>{{ $item->pension_number }}</td>
                                        <td>{{ $item->employed_date }}</td>
                                        <td>{{ $item->dismissed_date }}</td>
                                        <td>{!! $item->status == 0 ? '<span class="label label-warning">Inactive</span>' : '<span class="label label-success">Active</span>' !!}</td>
                                        <td>
                                            <a href="{{ url('/admin/name/' . $item->id) }}" title="View Name"><button style="padding: 7px 12px;" class="btn blue btn-xs"><i class="icon-eye-open" aria-hidden="true"></i></button></a>
                                            <a href="{{ url('/admin/name/' . $item->id . '/edit') }}" title="Edit Name"><button style="padding: 7px 12px;" class="btn purple btn-xs"><i class="icon-edit" aria-hidden="true"></i></button></a>
                                            {!! Form::open([
                                                'method'=>'DELETE',
                                                'url' => ['/admin/name', $item->id],
                                                'style' => 'display:inline'
                                            ]) !!}
                                            {!! Form::button('<i class="icon-trash" aria-hidden="true"></i>', array(
                                                    'type' => 'submit',
                                                    'style' => 'padding: 7px 12px',
                                                    'class' => 'btn red btn-xs',
                                                    'title' => 'Delete Name',
                                                    'onclick'=>'return confirm("Confirm delete?")'
                                            )) !!}
                                            {!! Form::close() !!}
                                            <button class="btn green btn-xs" style="padding: 7px 12px;" data-toggle="modal" data-target="#basicModal" data-id="{{encrypt($item->id)}}" data-driver-name="{{$item->name}}" onclick="onClickPhone(this)" title="Add/Edit Phones"><i class="icon-phone" aria-hidden="true"></i></button>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
                {!! Form::open(['method' => 'POST', 'route' => 'admin.name.UpdatePhone' ,'id'=>'driveraddphoneform','class' => 'form-vertical', 'role' => 'add phone', 'novalidate' => 'novalidate'])  !!}
                <input id="driverId" type="hidden" name="driver_id">
                <input id="driverName" type="hidden" name="driver_name">
              <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">Add/Edit Phone Numbers</h4>
              </div>
              <div class="modal-body">
                <table id="driver-phone-number" class="table table-bordered">
                    <thead>
                        <tr>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th style="width: 13% !important;"><button id="addRow" type="button" class="btn blue">Add</button></th>
                        </tr>
                        <tr>
                            <td class="text-center"><b>Driver</b></td>
                            <td class="text-center"><b>Phone Nr</b></td>
                            <td class="text-center"><b>Primary</b></td>
                            <td></td>
                        </tr>
                    </thead>
                    <tbody id="newRow">
                        <tr>
                            <td><label for="driver_name" class="driver-name-class"></label></td>
                            <td><input class="form-control phone_number" type="number" name="phone_number[]" required /></td>
                            <td><center><input class="is_primary" type="checkbox" name="is_primary[]" /></center></td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
              </div>
              <div style="background-color: transparent;" class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button class="btn blue">Save changes</button>
              </div>
              {!! Form::close() !!}
            </div>
          </div>
        </div>
    <script type="text/javascript">
        var num = 0;
        // add row
        $(document).on('click', '#addRow', function () {
          num = $('#newRow tr').length;
            num++;
          var html = '';
          var driver_val = $('#driverName').val();
          html += '<tr class="input-form-row">';
          html += '<td><label for="driver_name">'+driver_val+'</label></td>';
          html += '<td><input class="form-control phone_number" type="number" name="phone_number['+num+']" required /></td>';
          html += '<td><center><input type="checkbox" name="is_primary['+num+']"/></center></td>';
          html += '<td><button id="removeRow" type="button" class="btn red"><i class="icon-trash" aria-hidden="true"></i></button></td>';
          html += '</tr>';
          html += '</tr>';

          $('#newRow').append(html);
        });

        // remove row
      $(document).on('click', '#removeRow', function () {
          $(this).closest('.input-form-row').remove();
      });

      $("#basicModal" ).on('shown.bs.modal', function(){
            var driver_name = $('#driverName').val();
            $('.driver-name-class').text(driver_name);
            var driver_id = $('#driverId').val();
            var url = '{{ route("admin.name.GetPhoneNumbers", ":id") }}';
            url = url.replace(':id', driver_id);

            $.ajax({
                url: url,
                type: 'GET',
                dataType: 'JSON',
                data: {"driver_id": driver_id},
                success: function (response) {
                    if (response.msg == 'success' && response.driver_data.phones.length != 0) {
                            $("#newRow").empty();
                            var phone_data = response.driver_data.phones;
                        var html = '';
                            $.each(phone_data, function(index, value) {
                                      var driver_val = $('#driverName').val();
                                  html += '<tr class="input-form-row">';
                                  html += '<td><label for="driver_name">'+driver_val+'</label></td>';
                                  html += '<td><input class="form-control phone_number" type="number" name="phone_number['+index+']" value="'+value.phone_number+'" required /></td>';
                                  html += '<td><center><input type="checkbox" name="is_primary['+index+']" ';
                                  if (value.is_primary == 1) {
                                    html += 'checked';
                                  }
                                  html += ' /></center></td>';
                                  html += '<td>';
                                  html += (index !== 0) ? '<button id="removeRow" type="button" class="btn red"><i class="icon-trash" aria-hidden="true"></i></button>' : '';
                                  html += '</td>';
                                  html += '</tr>';
                                  html += '</tr>';
                                    });
                                $('#newRow').append(html);
                    }
                    else
                    {
                        var rowCount = $('#newRow tr').length;
                        if (rowCount == 0) {
                            html += '<tr>';
                            html += '<td><label for="driver_name" class="driver-name-class">'+driver_name+'</label></td>';
                                html += '<td><input class="form-control phone_number" type="number" name="phone_number[]" required /></td>';
                                html += '<td><center><input class="is_primary" type="checkbox" name="is_primary[]" /></center></td>';
                                html += '<td></td>';
                                html += '</tr>';
                                $('#newRow').append(html);
                        }
                    }
                }
            });
        });

        $("#basicModal" ).on('hidden.bs.modal', function(){
            $('.input-form-row').remove();
        });

        $('#driveraddphoneform').on('submit', function(event) {
          event.preventDefault();
          // adding rules for inputs with class 'comment'
          $('input.phone_number').each(function() {
              $(this).rules("add", 
              {
                  required: true
              })
          });
          var checkboxes = $('#driveraddphoneform input[type="checkbox"]');
          var countCheckedCheckboxes = checkboxes.filter(':checked').length;

          // prevent default submit action
          if($('#driveraddphoneform').validate().form()) {
                            if(countCheckedCheckboxes == 0)
                          {
                            alert("Please select one phone number primary");
                          }
                          else if(countCheckedCheckboxes > 1)
                          {
                            alert("Please select only one phone number primary");
                          }
                          else
                          {
                  event.currentTarget.submit();
                          }
          } else {
              // console.log("no validates");
          }
        });

        $(document).ready(function(){
            $('#driveraddphoneform').validate();
        });

        function onClickPhone(obj) {
            var id = obj.getAttribute("data-id");
            var driver_name = obj.getAttribute("data-driver-name");
            
            $('#driverId').val(id);
            $('#driverName').val(driver_name);
        }
    </script>
@endsection