@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 Package</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' }} Test Package</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 Package 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('package-list') }}" class="btn btn-info">List</a>
	                        </div>
	                      </div>
	                    </div>
	                </div>
                  <!--end::Header-->
                  <!--begin::Form-->
                  <form class="needs-validation" novalidate method="POST" action="{{route('store-package')}}">
                    @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-->
                        <div class="col-md-12 col-12">
                        <div class="form-group ">
                            <label>Select test  those will be include in this package: <span class="text-danger">*</span></label><br>
                            <div class="d-flex">
                              
                                @foreach ($testList as $list)
                                                                <div class="form-check m-2">
                                    <input class="form-check-input" {{in_array($list->id,$tests)?'checked':''}} style="border-color:#0dcaf0" data-price="{{$list->price}}" type="checkbox" name="test[]" id="" value="{{$list->id}}">
                                    <label class="form-check-label" for="interest1">{{$list->name}}</label>
                                </div>
                                @endforeach
                                
                            </div>
                            <div class="invalid-feedback" id="checkbox_validation">Please select at least one option.</div>
                        </div>
                      </div>
                      <!--end::Row-->
                    </div>
                    <!--end::Body-->
                    <!--begin::Footer-->
                    <div class="card-footer">
            			     <a href="{{ route('package-list') }}" 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' }} Package</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() {
        var TotalPrice =0;
        $("input[type='checkbox']").change(function(){
            $('#price').val('');
            if($(this).is(":checked")){
                TotalPrice = (TotalPrice + parseInt($(this).attr('data-price')));
            }else{
                TotalPrice = (TotalPrice - parseInt($(this).attr('data-price')));

            }
            $('#price').val(TotalPrice);
            if($('input[type="checkbox"]:checked').length>0){
                $('#checkbox_validation').css('display','none');
            }
        });
        $('.needs-validation').submit(function(e){
            if($('input[type="checkbox"]:checked').length<=0){
                e.preventDefault();
                $('#checkbox_validation').css('display','block');
            }
        })
    });
</script>
@endsection