@extends('common.index')
@section('content')
 <main class="app-main">
        <!--begin::App Content Header-->
        <div class="app-content-header">
          <!--begin::Container-->
          <div class="container-fluid">
            <!--begin::Row-->
            <div class="row">
              <div class="col-sm-6"><h3 class="mb-0">Laboratory Test</h3></div>
              <div class="col-sm-6">
                <ol class="breadcrumb float-sm-end">
                  <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a></li>
                  <li class="breadcrumb-item active" aria-current="page">{{ isset($labtestList) ? 'Update' : 'Add New' }}  Laboratory Test</li>
                </ol>
              </div>
            </div>
            <!--end::Row-->
          </div>
          <!--end::Container-->
        </div>
        <div class="container-fluid">
            <!--begin::Row-->
            <div class="row g-4">
              <!--begin::Col-->
              <div class="col-12">
                <div class="callout callout-info">
                  <span class="bi bi-info-circle-fill"></span> Please fill in all required <span class="text-danger">*</span> fields below. Click <strong>"Reset Form"</strong> to clear the form.
                </div>
              </div>
              <!--end::Col-->

              @if(session('error'))
              <div class="col-12">
                  <div class="alert alert-danger alert-dismissible fade show" role="alert">
                      <strong>Error!</strong> {{ session('error') }}
                      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                  </div>
              </div>
              @endif

              @if(session('success'))
              <div class="col-12">
                  <div class="alert alert-success alert-dismissible fade show" role="alert">
                      <strong>Success!</strong> {{ session('success') }}
                      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                  </div>
              </div>
              @endif

              @if ($errors->any())
              <div class="col-12">
                  <div class="alert alert-danger alert-dismissible fade show">
                      <ul class="mb-0">
                          @foreach ($errors->all() as $error)
                              <li>{{ $error }}</li>
                          @endforeach
                      </ul>
                      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                  </div>
              </div>
              @endif

              <!--begin::Col-->
              <div class="col-md-12">                
                <!--begin::Form Validation-->
                <div class="card card-info card-outline mb-4">
                  <!--begin::Header-->
                  <div class="card-header">
	                  <div class="row w-100 align-items-center">
	                      <div class="col-md-6">
	                        <h3 class="card-title mb-0">{{ isset($labtestList) ? 'Update' : 'Add' }} Laboratory Test Form</h3>
	                      </div>
	                      <div class="col-md-6 text-end">
	                        <div class="d-flex justify-content-end gap-2 flex-wrap">
	                          {{-- list --}}
	                          <a href="{{ route('testList') }}" class="btn btn-info">List</a>
	                        </div>
	                      </div>
	                    </div>
	                </div>
                  <!--end::Header-->
                  <!--begin::Form-->
                  <form class="needs-validation" novalidate method="POST" action="{{route('store-test')}}">
                    @csrf
                    <!--begin::Body-->
                    <div class="card-body">
                      <!--begin::Row-->
                      <div class="row g-3">
                        <input type="hidden" name="lab_test_id" value="{{$labtestList->id??''}}">
                      	<!--begin::Col-->
                        <div class="col-md-6 col-12">
                          <label for="name" class="form-label">Test Name <span class="text-danger">*</span></label>
                          <div class="input-group has-validation">
                            <input
                              type="text"
                              class="form-control"
                              id="name"
                              name="name"
                              placeholder="Enter Test Name"
                              required
                              value="{{ old('name', $labtestList->name ?? '') }}"
                            />
                            <div class="invalid-feedback">Please Enter Test Name.</div>
                          </div>
                        </div>
                        <!--end::Col-->
                        <!--begin::Col-->
                        <div class="col-md-6 col-12">
                          <label for="price" class="form-label">Price <span class="text-danger">*</span></label>
                          <div class="input-group has-validation">
                            <input
                              type="text"
                              class="form-control"
                              id="price"
                              name="price"
                              placeholder="Enter Price"
                              required
                              value="{{ old('price', $labtestList->price ?? '') }}"
                            />
                            <div class="invalid-feedback">Please Enter Price.</div>
                          </div>
                        </div>
                        <!--end::Col-->
                        <!--begin::Col-->
                        <div class="col-12 col-12">
                          <label for="price" class="form-label">Description <span class="text-danger">*</span></label>
                          <div class="input-group has-validation">
                            <textarea name="description" id="description" class="form-control" required  rows="2" placeholder="Enter Description Here">{{ old('description', $labtestList->description ?? '') }}</textarea>
                            <div class="invalid-feedback">Please Enter Description.</div>
                          </div>
                        </div>
                        <!--end::Col-->
                          <label for="parameters" class="form-label">Test Parameters <span class="text-danger">*</span></label>
                        <div class="col-12">
                          <table class="table table-bordered mt-2 table-add-more">
                              <thead>
                                  <tr>
                                        <th>Parameter Name</th>
                                      <th>Unit Name</th>
                                        <th>Min Value</th>
                                      <th>Max Value</th>
                                      <th></th>
                                  </tr>
                              </thead>
                              <tbody>
                              @php  $i =0; @endphp

                                @if($testParameters->isNotEmpty())
                                @foreach($testParameters as $index=>$parameter)
                                <input type="hidden" name="parameters[{{$index}}][parameter_id]" value="{{$parameter->id}}">

                                  <tr>
                                      <td><input type="text" name="parameters[{{$index}}][parameter_name]" value="{{$parameter->name}}" class="form-control" placeholder="Parameter Name"required />
                                      </td>
                                      <td><input type="text" name="parameters[{{$index}}][unit]" value="{{$parameter->unit}}" class="form-control" placeholder="Unit Name" required/></td>
                                      <td><input type="number" name="parameters[{{$index}}][min_value]" value="{{$parameter->min_value}}" class="form-control" placeholder="Min Value"required /></td>
                                      <td><input type="number" name="parameters[{{$index}}][max_value]" value="{{$parameter->max_value}}" class="form-control" placeholder="Max Value"required/></td>
                                      <td><button type="button" onclick="deleteParameters({{$parameter->id}})" class="btn btn-danger btn-sm btn-add-more-rm"><i class="bi bi-trash"></i></button></td>
                                  </tr>
                                  @php  $i =$index; @endphp
                                @endforeach
                                @else
                                  <tr>
                                       <input type="hidden" name="parameters[0][parameter_id]" value="">

                                      <td><input type="text" name="parameters[0][parameter_name]" class="form-control" placeholder="Parameter Name"required /></td>
                                      <td><input type="text" name="parameters[0][unit]" class="form-control" placeholder="Unit Name" required/></td>
                                      <td><input type="number" name="parameters[0][min_value]" class="form-control" placeholder="Min Value"required /></td>
                                      <td><input type="number" name="parameters[0][max_value]" class="form-control" placeholder="Max Value"required/></td>
                                      <td><button type="button" class="btn btn-danger btn-sm btn-add-more-rm"><i class="bi bi-trash"></i></button></td>
                                  </tr>
                                  @endif
                                  
                              </tbody>
                          </table>
                        </div> 
                        <div class="col-md-6 col-12">
                        <button type="button" class="btn btn-primary btn-sm btn-add-more"><i class="bi bi-plus"></i> Add More Parameters</button>
                        </div>

                      </div>
                      <!--end::Row-->
                    </div>
                    <!--end::Body-->
                    <!--begin::Footer-->
                    <div class="card-footer">
            			     <a href="{{ route('testList') }}" class="btn btn-danger">Cancel</a>
                      <button class="btn btn-warning" type="reset">Reset Form</button>
                      <button class="btn btn-success" type="submit">{{ isset($labtestList) ? 'Update' : 'Add' }} Test</button>
                    </div>
                    <!--end::Footer-->
                  </form>
                  <!--end::Form-->
                  <!--begin::JavaScript-->
                  <script>
                    // Example starter JavaScript for disabling form submissions if there are invalid fields
                    (() => {
                      'use strict';

                      // Fetch all the forms we want to apply custom Bootstrap validation styles to
                      const forms = document.querySelectorAll('.needs-validation');

                      // Loop over them and prevent submission
                      Array.from(forms).forEach((form) => {
                        form.addEventListener(
                          'submit',
                          (event) => {
                            if (!form.checkValidity()) {
                              event.preventDefault();
                              event.stopPropagation();
                            }

                            form.classList.add('was-validated');
                          },
                          false,
                        );
                      });
                    })();
                  </script>
                  <!--end::JavaScript-->
                </div>
                <!--end::Form Validation-->
              </div>
              <!--end::Col-->
            </div>
            <!--end::Row-->
          </div>
          <!--end::Container-->
        </div>
        <!--end::App Content-->
      </main>

      <script>
        $(document).ready(function(){
          @php if($i>0){ @endphp
          var i = ;
          
          @php }else{ @endphp
           var i = 1;
           @php }@endphp
           let rowCount = $('.table-add-more tr').length;
           if(rowCount<=2){
            $('.btn-add-more-rm').css('display','none');
           }
          $(".btn-add-more").click(function(e){
              e.preventDefault();
              
              var html = '<tr><input type="hidden" name="parameters['+i+'][parameter_id]" value="">' +
                  '<td><input type="text" name="parameters['+i+'][parameter_name]" class="form-control" placeholder="Parameter Name"  required/></td>' +
                  '<td><input type="text" name="parameters['+i+'][unit]" class="form-control" placeholder="Unit Name" required/></td>' +
                  '<td><input type="number" name="parameters['+i+'][min_value]" class="form-control" placeholder="Min Value"  required/></td>' +
                  '<td><input type="number" name="parameters['+i+'][max_value]" class="form-control" placeholder="Max Value"  required/></td>' +
                  '<td><button type="button" class="btn btn-danger btn-sm btn-add-more-rm"><i class="bi bi-trash"></i></button></td>' +
                  '</tr>';
              $(".table-add-more tbody").append(html);
              i++;
              let rowCount = $('.table-add-more tr').length;
              if(rowCount>2){
                $('.btn-add-more-rm').css('display','block');
              }
          });

          $(document).on('click', '.btn-add-more-rm', function(e){
              e.preventDefault();
              $(this).closest('tr').remove();
              let rowCount = $('.table-add-more tr').length;
              if(rowCount<=2){
                $('.btn-add-more-rm').css('display','none');
              }

          });
      });

      function deleteParameters(parameter_id){
        Swal.fire({
              title: 'Please Confirm',
              text: "You won't be able to revert this action!",
              icon: "warning",
              showCancelButton: true,
              confirmButtonColor: "#3085d6",
              cancelButtonColor: "#d33",
              confirmButtonText: "Yes, delete it!",
              cancelButtonText: "Cancel",
              allowOutsideClick: false,
              allowEscapeKey: false,
              //position: "top-end",
              //toast: true,
              customClass: {
                  popup: "small-alert"
              }
          }).then((result) => {
              if (result.isConfirmed) {
                  // Redirect to the delete URL
                  $.ajax({
                    type: "POST",
                    url: "{{route('delete-parameter')}}",
                    data: { 'parameter_id': parameter_id,'_token':'{{csrf_token()}}' },
                    success: function(response) {
                      console.log(response);
                      if(response.success){
                        alertSuccessMessage(response.message);
                      }else{
                        alertErrorMessage(response.message);
                      }
                    },
                    error: function(xhr, status, error) {
                      console.log(xhr.responseText);
                    }
                  });
                  window.location.href = url;
              }else{
                location.reload();  
              }
          });
      }
      </script>
@endsection