@extends('layout.masters')
@section('content')
<div id="page-wrapper">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12 col-md-12">

        <div class="main-container border" style="margin-top : 50px;">
          <div class="col-sm-12 col-md-6 ">
            <h4>Deployments</h4>
          </div>
          @if(Auth::user()->role_id == 1)
            <div class="col-sm-12 col-md-6">
              <div class="align-right" style="text-align : right">
                <a href="{{url('add-deployment')}}" class="btn btn-formSubmit" type="button">Create Deployment</a>
              </div>
            </div>
          @endif
          <table id="scheduled_deployments" class="table table-striped table-bordered" style="width:100%">
            <thead>
              <tr>
                <th>Title</th>
                <th>Description</th>
                <th>Deployment Platform</th>
                <th>Server</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              @foreach($deployments as $deploy)
                @if(in_array($deploy->dep_id, explode(',',$current_user->dep_id)) || $current_user->role_id == 1)
                  <tr>
                    <td>{{$deploy->dep_title}}</td>
                    <td>{{$deploy->dep_desc}}</td>
                    <td>{{$deploy->dep_platform}}</td>
                    <td>{{$deploy->server_name}}</td>
                    <td>
                      <div class="action-button-container">
                        <button class="btn btn-info btn-xs branchModal btn{{$deploy->dep_id}}"  disabled  type="button" id="build-btn" data-toggle="modal" data-depid='{{$deploy->dep_id}}' data-route='dashboard-build' data-target="#branchModal"><span class="fa fa-cloud-upload dep-icon"></span><span class="fa fa-cog fa-spin fa-1x fa-fw dep-progress"></span>&nbsp;<span class="dep-btn-txt">Instant Deploy</span></button>

                        @if(Auth::user()->role_id == 1)
                        <a class="btn btn-warning btn-xs" type="button"  href="{{url('edit-deployment', $deploy->dep_id)}}"><span class="fa fa-pencil"></span>&nbsp;Edit</a>
                        <a class="btn btn-danger btn-xs delete" type="button" data-toggle="modal" data-id='{{$deploy->dep_id}}' data-route='delete-deployment' data-target="#customModal"><span class="fa fa-close"></span>&nbsp;Delete</a>
                        @endif
                      </div>
                  </td>
                  </tr>
                @endif
              @endforeach
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="branchModal" tabindex="-1" role="dialog" aria-labelledby="customModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="customModalLabel">Branch details</h4>
          </div>
          <div class="modal-body">
            <input type="hidden" id="id" name=id>
            <input type="hidden" id="depid" name=depid>
            <div class="form-group">
                <label>Select Branch</label>
                <div class="custom-radio">
                    <div class="form-check">
                    <label>
                        <input type="radio" name="radio" value="master" checked> <span class="label-text">Master</span>
                    </label>
                    </div>
                    <div class="form-check">
                        <label>
                            <input type="radio" name="radio" value="other"> <span class="label-text">Other branch</span>
                        </label>
                    </div>
                </div>
                <div class="custom-radio">
                </div>
            </div>
            <div class="form-group" id='branch-flag' style="display:none">
                <label for="dep_desc">Branch Name</label>
                <input type="text" name="branch-name" id="branch-name" >
            </div>
          </div>
          <div class="modal-footer">
            <a type="button" class="btn btn-danger btn-sm" data-dismiss="modal">No</a>
            <a type="submit" class="btn btn-formSubmit btn-sm" id="route">Yes</a>
          </div>
        </div>
    </div>
</div>

<script type="text/javascript">
  $(document).ready(function(){
    $(".dep-progress").hide();
    $('#scheduled_deployments').DataTable();
    $('input[type=radio][name=radio]').change(function() {
      console.log('inside the block');
      console.log(this.value);
      if (this.value == 'master') {
          $('#branch-flag').hide();
      }else if (this.value == 'other') {
          $('#branch-flag').show();
      }
    });
  });
  $('.branchModal').click(function() {
    console.log('success');
    var id = $(this).data("id");
    var route = $(this).data('route');
    console.log("route");
    console.log(route);
    var depId = $(this).data('depid');
    $('#route').val(route);
    $("#id").val(id);
    $("#depid").val(depId);
  });

  $('#route').click(function(e) {
    $.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
    }
    });
    e.preventDefault();
    var deploymentId = document.getElementById('depid').value;
    var id = document.getElementById('id').value;
    var route = document.getElementById('route').value;
    console.log("route1");
    console.log(route);
    var branch_name = '';
    if($('input[type=radio][name=radio]:checked').val() == 'master'){
        branch_name = 'master';
    }else{
        branch_name = document.getElementById('branch-name').value;
    }
    if(branch_name != ""){
        $('#branchModal').modal('hide');
        // $("#build-btn").attr("disabled", true);
        $(".btn"+deploymentId).attr("disabled", true);
        $.ajax({
            type: "POST",
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            url: "{{ url('dashboard-build')}}", // This is what I have updated
            data: { 'branch_name': branch_name, 'depId': deploymentId },
                datatype: 'json',
                beforeSend: function(){
                // Show image container
                    console.log("before send");
                // $("#loader").show();
                $(".btn"+deploymentId+" .dep-icon").hide();
                $(".btn"+deploymentId+" .dep-progress").show();
                $(".btn"+deploymentId+" .dep-btn-txt").html('Deploying...');
              },
                success: function (data) {
                    console.log("Return success");
                    console.log(data);
                    // window.location.href = "/dashboard";
                    window.location.href = "/deployment-detail/upcoming/"+data['id'];
                    // location.reload();
        },
        error: function (data) {
          console.log(data);
                    // $("#build-btn").attr("disabled", false);
                    $(".btn"+deploymentId).attr("disabled", false);
                    // $("#loader").hide();
                    $(".btn"+deploymentId+" .dep-icon").show();
                    $(".btn"+deploymentId+" .dep-progress").hide();
                    $(".btn"+deploymentId+" .dep-btn-txt").html('Instant Deploy');
        },
              complete:function(data){
                // Hide image container
              }

        });
    }else{
        alert('Branch name required');
    }
  });
</script>
@endsection