@extends('layouts.adminlayout')

@section('content')
<style>
  .prev{
    position: absolute;
    font-size: 24px;
    left: 5%;
    top: 30%;
    cursor: pointer;
  }
svg
{
width:20px;
}
a 
{
text-decoration:none;
}
nav .hidden
{
margin-top:20px;
}

  .next{
    position: absolute;
    font-size: 24px;
    right: 5%;
    top: 30%;
    cursor: pointer;
  }

.card-imag {
    height: 300px;
}
  </style>
<section class="color-bg">
    <div class="container">
        <div class="row">
             <div class="col-12 py-4 d-flex align-items-baseline">
             <form class="" action="" method="get">
                @csrf
                <div class="row">
                  <div class="col-2">
                  <select name="unit_no" id="territorySelect" class="form-control  ms-2 me-3">
                      <option value disabled selected>--- Select Territor---</option>
                      @foreach(App\Models\Territory::all() as $territory)
                      <option value="{{ $territory->id }}">{{ $territory->name }}</option>
                      @endforeach
                  </select>
                  </div>
                  <div class="col-3">
                  <select name="plant_id" id="plantSelect" class="form-control  ms-2 me-3">
                      <option value disabled selected>--- Select Plant---</option>
        
                  </select>
                  </div>
                  <div class="col-3">
                  <select id="areaSelect" name="area" class="form-control  ms-2 me-3">
                      <option value disabled selected>--- Select Section---</option>
                
                  </select>
                  </div>
                  <div class="col-3">
                 <select class="form-select entry2  mx-4" name="dept" aria-label="Default select example">
                  <option selected>Choose A Department</option>
                  @foreach(App\Models\dept::all() as $dept)
                  <option value="{{ $dept->id }}" {{ request()->get('dept')  == $dept->id ? 'selected' : '' }}>{{ $dept->deptName }}</option>
                  @endforeach
                </select>
                </div>
                  <div class="col-1">
                <button type="submit" class="btn butong ms-3">Apply</button>
                </div>
                </form>
            </div>
        </div>
    </div>
</section>


<div class="container my-5">
    <div class="row">
        <div class="col-12 centr">
     
            <!--request inner row-->
             <div class="row">
            
                @if(count($issuelist) > 0)
                @foreach($issuelist as $index => $issue)
                        <div class="col-6" style=" overflow:inherit">
                          <div class="row g-0 color-bg card shadw mb-5 p-3 m-2  br ">
                            <div class="col-md-12" style="position:relative;">
                            @if(strpos($issue->image,'+') > 0)
                            <div class="slideshow-container" id="slidem{{ $issue->id }}"> 
                            @foreach(explode('+', $issue->image) as $index => $images)
                                @if($images!="")
                            <div class="mySlides">
                              <img src="{{ url('/').$images}}" class="img-fluid card-imag rounded" style="box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;">
                            </div>
                              @endif
                            @endforeach
                            <a class="prev" onclick="plusSlides('slidem{{ $issue->id }}',-1)">&#10094;</a>
                            <a class="next" onclick="plusSlides('slidem{{ $issue->id }}',1)">&#10095;</a>
                            </div>	
                            @elseif(!empty($issue->closedimage))
                            <img src="{{ url('/').$issue->closedimage }}"  class="img-fluid card-imag rounded" style="box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;">
                           @else
                                {{-- Placeholder Image --}}
                                <img src="{{ url('/image/no_image_selected.jpg') }}" class="img-fluid card-imag rounded" style="box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;">
                            @endif
                                                     
                        
                            </div>
                            <div class="col-md-12 ">
                              <div class="card-body">
                                  
                                    <table class="req-td" style="width:100%; margin-top:20px;">
                                        <tr>
                                          <td class="spac">
                                                <h6>Issue No.11</h6><h6> :</h6>
                                          </td>
                                          <td>{{ $issue->id }}</td>
                                        </tr>
                                        
                                        <tr>
                                          <td class="spac">
                                                <h6>Issue Created Date</h6><h6> :</h6>
                                          </td>
                                          <td>{{ \Carbon\Carbon::parse($issue->created_at)->format('d/m/Y') }}</td>
                                        </tr>
                                        
                                        <tr>
                                          <td class="spac">
                                                <h6>Severity Level</h6><h6> :</h6>
                                          </td>
                                          <td>{{ $issue->rating }}</td>
                                        </tr>
                                        <tr>
                                          <td class="spac">
                                                <h6>Issue Type</h6><h6> :</h6>
                                          </td>
                                          <td>{{ $issue->type }}</td>
                                        </tr>
                                        <tr>
                                          <td class="spac">
                                                <h6>Territory</h6><h6> :</h6>
                                          </td>
                                          <td>{{ $issue->territory->name }}</td>
                                        </tr>
                                        <tr>
                                          <td class="spac">
                                                <h6>Plant</h6><h6> :</h6>
                                          </td>
                                          <td>{{ $issue->plant->name }}</td>
                                        </tr>
                                        <tr>
                                          <td class="spac">
                                                <h6>Section</h6><h6> :</h6>
                                          </td>
                                          <td>{{ $issue->areaDetails->name }}</td>
                                        </tr>
                                         <tr>
                                          <td class="spac">
                                                <h6>Issue Dept</h6><h6> :</h6>
                                          </td>
                                          <td>{{ $issue->depts->deptName }}</td>
                                        </tr>

					<tr>
                                          <td class="spac">
                                                <h6>Issue Derived From</h6><h6> :</h6>
                                          </td>
                                          <td>{{ $issue->issue_derived }}</td>
                                        </tr>

                                         <tr>
                                          <td class="spac">
                                                <h6>Target Date</h6><h6> :</h6>
                                          </td>
                                          <td>{{ $issue->targetdate }}</td>
                                        </tr>
                                        <tr>
                                          <td class="spac">
                                                <h6>Description</h6> <h6>:</h6>
                                          </td>
                                          <td>{{ $issue->description }}</td>
                                        </tr>
                                        
                                    </table>


                                    
                              </div>
                            </div>
                            @if($issue->status != "closed")
                            <form action="{{url('/adminsubmitaction')}}" method="post">
                            @csrf
				            <input type="hidden" name="issueid" value="{{ $issue->id}}">
                            <div class="col-12 mt-3">
                                <textarea class="form-control" name="actiondes" placeholder="Action" id="floatingTextarea" required>@if($issue->action != ""){{ $issue->action }}
				@endif</textarea>
                            </div>
                            <div class="col-12 mt-3">
                                @if($issue->rating == "")
                                 <button type="button" class="btn butond mx-2" onclick="riskassessment({{$issue->id}})" data-bs-toggle="modal" data-bs-target="#staticBackdrop1">Risk</button>
                                @endif
                                 <button type="submit" class="btn butong">Add Action</button>
                                 <a class="btn butond mx-2" href="{{ url('/admin_close_request_issue') }}/{{$issue->id}}">Close Issue</a>



                                 @if($issue->status == "open" && $issue->assignto == "")
                                 <button type="button" class="btn butono" onclick="transdept({{$issue->id}})" data-bs-toggle="modal" data-bs-target="#staticBackdrop">Transfer Dept</a>
                                 @endif
                            </div>
                            </form>
                            @else
                            <!-- <a class="btn butond mx-3" href="{{ url('/admin_close_request_issue') }}/{{$issue->id}}">Close Issue</a> -->
                            @endif
                          </div>
                        </div>
                    @endforeach
{{ $issuelist->links() }}
                    @else
                    <h2>No issue Find</h2>
                    @endif

            </div>
            <!--end request inner row-->
        </div>    
        
       
    </div>
</div>

 
 
 
 <!-- Modal close action -->
<div class="modal fade" id="CloseIssue" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="CloseIssueLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Close Issue</h5>
        
      </div>
      <div class="modal-body">
             <div class=" ">
                 <img src="image/image.jpg" class="heit w-100">
                 <h5 class="text-center mt-1">Capture Image</h5>
             </div>
             <div class="mt-4">
                  <textarea class="form-control" placeholder="Action" id="floatingTextarea"></textarea>
             </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn butong px-4">Submit</button>
        <button type="button" class="btn butono px-4" data-bs-dismiss="modal">Cancel</button>
      </div>
    </div>
  </div>
</div>
<!--end modals-->
 
 
<!-- Modal transfer department -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
    <form method="get" action="{{ url('/issuetransdept') }}">
        @csrf
        <input type="hidden" name="issue_id" id="issue_id" required>
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Transfer Department</h5>
        
      </div>
      <div class="modal-body">
            <select class="form-select" name="dept_id" aria-label="Default select example" required>
              <option selected disabled>Choose a Department</option>
            @foreach($depts as $dept)
              <option value="{{$dept->id}}">{{$dept->deptName}}</option>
		  	@endforeach
            </select>
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn butong px-4">Submit</button>
        <button type="button" class="btn butono px-4" data-bs-dismiss="modal">Cancel</button>
      </div>
    </form>
    </div>
  </div>
</div>


<!-- Model Issue Risk -->
<div class="modal fade" id="staticBackdrop1" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
    <form method="POST" action="{{ url('/saverisk')}}">
        	@csrf
        	<input type="hidden" name="issueid" id="issue_idrisk" required>
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Risk Asseesement</h5>
        
      </div>
      <div class="modal-body">
      <select name="learningvalue" class="form-select mb-3" required>
					<option value selected disabled>--Learning Value Index - Usefulness</option>
					<option value="3">Across The Site</option>
					<option value="2">Within Department / Area</option>
					<option value="1">Restricted to Local Area / Practically NIL</option>
				</select>

				<select name="visibility" class="form-select mb-3" required>
					<option value selected disabled>--Visibility Index</option>
					<option value="3">With Great Difficulty</option>
					<option value="2">Some Insight Required</option>
					<option value="1">It is Obvious / Apparently Identifiable</option>
				</select>

				<select name="potentials" class="form-select mb-3" required>
					<option value selected disabled>--Potentials Conseqence</option>
					<option value="3">Fatal Or Property Damage + 5L</option>
					<option value="2">Lost Time Injury Or Property Damage 2L - 5L</option>
					<option value="1">Medical Treatment Case(MTC)/First Aid Case(FAC)/Property Damage < 2L</option>
				</select>
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn butong px-4">Submit</button>
        <button type="button" class="btn butono px-4" data-bs-dismiss="modal">Cancel</button>
      </div>
    </form>
    </div>
  </div>
</div>

<script>
function transdept(issue_id)
{
	document.getElementById('issue_id').value = issue_id;
}

function riskassessment(issue_id)
{
	document.getElementById('issue_idrisk').value = issue_id;
}
</script>
<script type="text/javascript">
	var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(s,n) {
  showSlides1(s,slideIndex += n);
}

function currentSlide(s,n) {
  showSlides1(s,slideIndex = n);
}

function showSlides(n) {
  var i;
  var silder = document.getElementsByClassName("slideshow-container");
  for(s=0; s < silder.length;s++ )
  {
  	  var slides = silder[s].getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  /*for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }*/
  slides[slideIndex-1].style.display = "block";  
/*  dots[slideIndex-1].className += " active";*/
  }

}

function showSlides1(s1,n) {
  var i;
  var silder = document.getElementById(s1);


  var slides = silder.getElementsByClassName("mySlides");
  var dots = silder.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }

  slides[slideIndex-1].style.display = "block";  

}
</script>

<script type="text/javascript">
    
    document.addEventListener('DOMContentLoaded', function () {
  
      document.getElementById('territorySelect').addEventListener('change', function () {
          let territoryId = this.value;
          fetch(`/get-plants/${territoryId}`)
              .then(response => response.json())
              .then(plants => {
                  let plantSelect = document.getElementById('plantSelect');
                  plantSelect.innerHTML = '<option value="">Select Territory</option>';
                  plants.forEach(plant => {
                      let option = document.createElement('option');
                      option.value = plant.id;
                      option.text = plant.name;
                      plantSelect.appendChild(option);
                  });
              });
      });
  
      document.getElementById('plantSelect').addEventListener('change', function () {
          let plantId = this.value;
          fetch(`/get-areas/${plantId}`)
              .then(response => response.json())
              .then(areas => {
                  let areaSelect = document.getElementById('areaSelect');
                  areaSelect.innerHTML = '<option value="">Select Section</option>';
                  areas.forEach(area => {
                      let option = document.createElement('option');
                      option.value = area.id;
                      option.text = area.name;
                      areaSelect.appendChild(option);
                  });
              });
      });
    });
</script>  
@endsection