@extends('layouts.app')

@section('content')

 @if ($errors->any())
     @foreach ($errors->all() as $error)
         <div class="alert alert-danger" role="alert">{{$error}}</div>
     @endforeach
 @endif



	<form class="forms px-4 py-4"  method="POST" action="{{ url('/newaddreport')}}" enctype="multipart/form-data">
    @csrf

    <div class="card ">
      <div class="card-body">
        <div class="row mt-0">
          <div class="col-lg-6 "><h4 class="row text-primary d-flex justify-content-between">Report Issue</h4></div>
        </div>


        <div class="row">
          <div class="col-lg-4 mt-3">
            <div class="form-group">
              <label for="issue">Image Of Issue</label>
              <input type="file" class="form-control" id="file" name="image[]" multiple accept="image/png, image/jpeg" placeholder="Issue">
              <div id="image-error" class="text-danger mt-2" style="display: none;">Image size exceeds 1024 KB. Please select a smaller file.</div>
              <input type="hidden" name="image" id="compressfile" value="">
            </div>          
	</div>

          <div class="col-lg-4 mt-3">
            <div class="form-group">
              <label for="dtpicker">Select Date/Time:*</label>              
              <div class="input-group date" id='dtpicker'>
                <input type="datetime-local" class="form-control" name="datetime" required/>
                <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
                </span>
              </div>
            </div>
          </div>

             <div class="col-lg-4 mt-3">
              <div class="form-group">
                <label for="utn">Issue Type*</label>
                <select class="form-control" id="utn" name="issueType" placeholder="Issue Type" required>
                  <option selected disabled> Choose Issue Type</option>
					<option value="Imminent Danger">Imminent Danger</option>
					<option value="Near Miss">Near Miss</option>
					<option value="Poor Housekeeping">Poor Housekeeping</option>
					<option value="Point of Discussion / Meeting">Point of Discussion / Meeting</option>
					<option value="Recommendation / CAPA">Recommendation / CAPA</option>
					<option value="Suggestion">Suggestion</option>
					<option value="Unsafe Practice/Action (PIO – UA)">Unsafe Practice/Action (PIO – UA)</option>
					<option value="Unsafe Condition (PIO – UC)">Unsafe Condition (PIO – UC)</option>
					<!--<option value="4">Injury Incident</option>-->
					<!--<option value="5">Non Injury Incident</option>-->
					
                    <!--<option value="7">Safety Meeting Point</option>-->
                    <!--<option value="8">Safety Auditing/Safety Inspection Point</option>-->
                    <!--<option value="9">PTW Auditing/Review Point</option>-->
                    
                    <option value="Other">Other</option>
                </select>
              </div>
            </div>
             <div id="upperDivContainer" ></div>

            <div class="col-lg-4 mt-3">
              <div class="form-group">
                <label for="utn">Issue Identified From*</label>
                <select class="form-control" id="issue_derived" name="issue_derived" placeholder="Choose Issue Derived From" required>
                  <option selected disabled> Choose Issue Identified From</option>
					
					<option value="At-random Plant SEF Round">At-random Plant SEF Round</option>
					<option value="Planned SEF Round">Planned SEF Round</option>
	
					<option value="Incident Investigation Program">Incident Investigation Program</option>
					<option value="Management Walkthrough">Management Walkthrough</option>
					<option value="Obligatory Requirement / Advisory">Obligatory Requirement / Advisory</option>
					<option value="BBS Round">BBS Round</option>
					<option value="Internal Audit Auditing Program">Internal Audit Auditing Program</option>
					<option value="External Audit Auditing Program">External Audit Auditing Program</option>
					<option value="Inspection Program">Inspection Program</option>
					<option value="Management Review / Meeting">Management Review / Meeting</option>
					<option value="Evaluation of Compliance">Evaluation of Compliance</option>
                    <option value="Suggestion Scheme">Suggestion Scheme</option>
                    
                    <option value="IMS Auditing Program">IMS Auditing Program</option>
                    <option value="PSM Auditing Program">PSM Auditing Program</option>
                    <option value="PSSR">PSSR</option>
                    <option value="Cross-Complex Auditing Program">Cross-Complex Auditing Program</option>
                    <option value="BBSO round">BBSO round</option>
                    <option value="Other">Other</option>
                </select>
              </div>
            </div>
            
             <div id="upperDerivedDivContainer" ></div>

          </div>

          <div class="row">
            <div class="col-lg-4 mt-3">
              <div class="form-group">
                <label >Territory*</label>
                <select class="form-control" id="territorySelect" name="unit_no" placeholder="Unit Number" required>
                  <option selected disabled> Select Territory</option>
                  @foreach($territories as $territory)
                  <option value="{{ $territory->id }}">{{ $territory->name }}</option>
                  @endforeach
                </select>
              </div>
            </div>

            <div class="col-lg-4 mt-3">
              <div class="form-group">
                <label for="plantSelect">Plant*</label>
                <select class="form-control" id="plantSelect" name="plant_id" placeholder="Unit Number" required>
                  <option selected disabled> Select Plant</option>

                </select>
              </div>
            </div>
            
            <div class="col-lg-4 mt-3">
              <div class="form-group">
                <label for="area">Section*</label>
                <select class="form-control" id="areaSelect" name="area" placeholder="Area" required>
                  <option value="" disabled="" selected="">Choose Section</option>

                </select>
              </div>
            </div>
            </div>
          <div class="row">
            <div class="col-lg-4 mt-3">
              <div class="form-group">
                <label for="utn">Action Taken Department*</label>
                <select class="form-control" id="deptSelect" name="dept" placeholder="Department" required>
					<option value="" disabled="" selected="">Choose Department</option>
					@if(count($dept) > 0)
					@foreach(App\Models\dept::orderBy('deptName', 'asc')->get() as $depts)
					<option value="{{ $depts->id }}">{{ $depts->deptName }}</option>
					@endforeach
					@endif
                </select>
              </div>
            </div>
          
            <div class="col-lg-4 mt-3">
              <div class="form-group">
                <label for="loc">Contractor Name</label>
                <input type="text" class="form-control" id="contractor_name" name="contractor_name" placeholder="Contractor Name" >
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-lg-4 mt-3">
              <div class="form-group">
                <label for="loc">Exact Location*</label>
                <input type="text" class="form-control" id="loc" name="exact_location" placeholder="Location" required>
              </div>
            </div>

        

            <div class="col-lg-4 mt-3">
              <div class="form-group">
                <label for="description">Brief Description Of Issue*</label>
                <textarea class="form-control" name="description" id="description" placeholder="Brief Description of Issue" required></textarea>
              </div>
            </div>
          
            <div class="col-lg-4 mt-3">
              <div class="form-group">
                <label for="action">Immediate Action*</label>
                <input type="text" class="form-control" id="action" name="immediate_action" placeholder="Immediate Action" required>
              </div>
            </div>

          </div>

          <h5 class="mt-3 mb-2"></h5>
          <p>
            <a class="btn btn-info w-100" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
              Add Observer’s Details
            </a>
            <span>This is applicable only when Reporter is different than Observer OR This is to be completed if Reporter is different from the Observer.</span>
          </p>

          <div class="collapse" id="collapseExample">
          <div class="row">
            <div class="col-lg-4 mt-3">
              <div class="form-group">
                <label for="name">Observer’s Name</label>
                <input type="text" class="form-control" id="name" name="re_name" placeholder=" Observer’s Name" >
              </div>
            </div>
            <div class="col-lg-4 mt-3">
              <div class="form-group">
                <label for="contact">Contact No.</label>
                <input type="text" class="form-control" id="contact" name="re_contact" placeholder="Contact No" >
              </div>
            </div>
            <div class="col-lg-4 mt-3">
              <div class="form-group">
                <label for="cntr_name">Contractor Name</label>
                <input type="text" class="form-control" id="cntr_name" name="cntr_name" placeholder="Contractor Name" >
              </div>
            </div>

          </div>
          <div class="row">
            <div class="col-lg-4 mt-3">
              <div class="form-group">
                <label for="utn">Department Name</label>
                <select class="form-control"  name="r_dept" placeholder="Department" >
                  <option value="" disabled="" selected="">Choose Department</option>
					@if(count($dept) > 0)
					@foreach($dept->all() as $depts)
					<option value="{{ $depts->id }}">{{ $depts->deptName }}</option>
					@endforeach
					@endif

                </select>
              </div>

            </div>
          </div>
          </div>

          <div class="d-flex justify-content-end mt-3">
              
              
  <button type="submit" 
    onclick="
        const imageInput = document.getElementById('file'); // Replace with your image input ID
        const collapseElement = document.getElementById('collapseExample');
        
        if (imageInput && imageInput.files.length === 0) {
            // Image is null
            if (!confirm('You have not selected an image. Do you want to proceed without an image?')) {
                event.preventDefault(); // Prevent submission if user cancels
                return; // Exit early
            }
        }
        
        // Always check for observers detail confirmation before final submission
        if (!collapseElement.classList.contains('show')) {
            if (confirm('Would you like to provide observers detail?')) {
                event.preventDefault(); // Prevent submission to show observers detail section
                collapseElement.className = 'collapse show';
                return; // Exit early
            }
        }
    " 
    class="btn btn-primary me-2">
    Submit
</button>


            <!--<button type="submit" onclick="if(!document.getElementById('collapseExample').classList.contains('show')){ if(confirm('Would you like to provide observers detail?')) {event.preventDefault(); document.getElementById('collapseExample').className = 'collapse show';} }" class="btn btn-primary me-2">Submit</button>-->
            <a href="{{ url('/home') }}" class="btn btn-light ml-2">Go To Home</a></div>
          </div>
        </div>

      </form>
      


      <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);
                });
            });
    });
    

    


    document.getElementById('utn').addEventListener('change', function() {
        var upperDivContainer = document.getElementById('upperDivContainer');

        if (this.value === 'Other') {
            // Create the upper div if it doesn't exist
            if (!document.getElementById('writeissuetypediv')) {
                var writeIssueTypeDiv = document.createElement('div');
                upperDivContainer.classList.add("col-lg-4");
                upperDivContainer.classList.add("mt-3");
                writeIssueTypeDiv.id = 'writeissuetypediv';
                writeIssueTypeDiv.style.display = 'block';

                writeIssueTypeDiv.innerHTML = `
                    <div class="form-group">
                        <label for="utn">Write Issue Type</label>
                        <input type="text" class="form-control" id="writeissuetype" name="issueType" placeholder="Write Issue Type">
                    </div>
                `;

                upperDivContainer.appendChild(writeIssueTypeDiv);
            }
        } else {
            // Remove the upper div if it exists
            var writeIssueTypeDiv = document.getElementById('writeissuetypediv');
            if (writeIssueTypeDiv) {
                upperDivContainer.removeChild(writeIssueTypeDiv);
            }
        }
    });



document.getElementById('issue_derived').addEventListener('change', function() {
        var upperDerivedDivContainer = document.getElementById('upperDerivedDivContainer');

        if (this.value === 'Other' || this.value === 'Auditing Program' || this.value === 'Inspection Program' || this.value === 'Management Review / Meeting' || this.value === 'Evaluation of Compliance') {
            // Create the upper derived div if it doesn't exist
            if (!document.getElementById('writeissuederiveddiv')) {
                var writeIssueDerivedDiv = document.createElement('div');
                upperDerivedDivContainer.classList.add("col-lg-4");
                upperDerivedDivContainer.classList.add("mt-3");
                writeIssueDerivedDiv.id = 'writeissuederiveddiv';
                writeIssueDerivedDiv.style.display = 'block';

                writeIssueDerivedDiv.innerHTML = `
                    <div class="form-group">
                        <label for="utn">Write Issue Derived</label>
                        <input type="text" class="form-control" id="writeissuederived" name="issue_derived" placeholder="Write Issue Derived">
                    </div>
                `;

                upperDerivedDivContainer.appendChild(writeIssueDerivedDiv);
            }
        } else {
            // Remove the upper derived div if it exists
            var writeIssueDerivedDiv = document.getElementById('writeissuederiveddiv');
            if (writeIssueDerivedDiv) {
                upperDerivedDivContainer.removeChild(writeIssueDerivedDiv);
            }
        }
    });

  });
  
  


</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
function zeroPadded(val) {
  if (val >= 10)
    return val;
  else
    return '0' + val;
}

$(document).ready(function(){
d = new Date();
  $('input[type=datetime-local]').val(d.getFullYear()+"-"+zeroPadded(d.getMonth() + 1)+"-"+zeroPadded(d.getDate())+"T"+d.getHours()+":"+d.getMinutes());
});
 
</script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('file').addEventListener('change', function () {
        var file = this.files[0];
        var errorElement = document.getElementById('image-error');
        
        if (file) {
            // Check file size
            if (file.size > 1024 * 1024) { // 500 KB in bytes
                errorElement.style.display = 'block';
                this.value = ''; // Clear the input
            } else {
                errorElement.style.display = 'none';
            }
        }
    });
});
</script>
<script type="text/javascript" src="{{url('/js/image-compressor.js')}}"></script>

@endsection