@extends('layouts.master')

@section('content')
  @include('pages.auth.order.nav')
  @include('pages.auth.order.package-form-modal')
  @include('pages.auth.order.delete-package-modal')
  <div class="container">
    <div class="mb-1 mt-5 row">
      <div class="col-md-10 offset-md-1 table-responsive">
        @if ($error ?? false)
          <div class="alert alert-danger alert-dismissible fade show" role="alert">
            {{ $error }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
          </div>
        @endif
        <table class="table table-bordered table-striped text-center">
          <thead>
            <tr>
              <th>Package ID</th>
              <th>Number of Assessments</th>
              <th>Unit Price</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            @foreach($packages as $package)
              <tr>
                <td>{{ $package->id }}</td>
                <td>{{ $package->start_number === $package->end_number ? $package->start_number : $package->start_number . ' - ' . $package->end_number }}</td>
                <td>${{ $package->unit_price}}</td>
                <td>
                  <a href="#" class="editPackage" startNumber="{{ $package->start_number }}" endNumber="{{ $package->end_number }}" price="{{ $package->unit_price }}" packageId="{{ $package->id }}" title="Edit Package">
                    <i class="bi-pencil-square" style="font-size: 1rem;margin-right: 10px;"></i>
                  </a>
                  <a href="#" class="deletePackage" packageId="{{ $package->id }}">
                    <i class="bi-trash" style="font-size: 1rem;"></i>
                  </a>
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>

    <div class="mt-4 row">
      <div class="col text-center">
        <div class="d-grid gap-2 d-lg-block">
          <button type="button" id="newPackage" class="btn btn-primary btn-lg">Add New Package</button>
        </div>
      </div>
    </div>
  </div>
@stop



@section('footer-scripts')
  <script type="text/javascript">
    jQuery(function() {
      $('#newPackage').on('click', function() {
        $('#packageForm').modal('show')
      })

      $(document).on('click', '.editPackage', function() {
        $('#packageForm #packageId').val($(this).attr('packageId'))
        $('#packageForm #startNumber').val($(this).attr('startNumber'))
        $('#packageForm #endNumber').val($(this).attr('endNumber'))
        $('#packageForm #price').val($(this).attr('price'))
        $('#packageForm').modal('show')
      })

      $(document).on('click', '.deletePackage', function() {
        $('#deletePackageModal #deletePackageId').val($(this).attr('packageId'))
        $('#deletePackageModal #packageText').html('Are you sure you want to delete Package ID ' + $(this).attr('packageId'))
        $('#deletePackageModal').modal('show')
      })
    })
  </script>
@endsection