@include('includes.app')
@include('includes.sidebar')
@include('includes.header')
@include('includes.toster')
<style>
	.filter-transition {
		overflow: hidden;
		transition: all 0.4s ease;
		transform-origin: top;
		max-height: 1000px; /* enough height to accommodate content */
		transform: scaleY(1);
		opacity: 1;
	}

	.filter-transition.hidden {
		max-height: 0;
		transform: scaleY(0);
		opacity: 0;
		padding: 0 !important;
		margin: 0 !important;
	}
	.page-content {
		min-height: 100vh;
		padding: calc(70px + 1.5rem) calc(1.5rem * .5) 60px calc(1.5rem * .5);
	}
/*@media (max-width: 991.98px) {*/
/*  #sidebarWrapper {*/
/*    transform: translateX(-100%);*/
/*    transition: transform 0.3s ease-in-out;*/
/*    display: block !important;*/
/*    position: fixed;*/
/*    top: 70px;*/
/*    left: 0;*/
/*    width: 250px;*/
/*    background: white;*/
/*    z-index: 1000;*/
/*    height: 100vh;*/
/*    overflow-y: auto;*/
/*    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);*/
/*  }*/

/*  #sidebarWrapper.active {*/
/*    transform: translateX(0);*/
/*  }*/
/*}*/
/*#sidebarWrapper a.active {*/

/*  font-weight: bold;*/
/*  background: #e6f4ff;*/
/*  color: #007bff !important;*/
/*  border-radius: 5px;*/
/*  padding: 6px 12px;*/
/*  display: block;*/


/*}*/


.custom-dropdown {
	min-width: 100px;
	padding: 4px 0;
	font-size: 13px;
	text-align: center;
}

.custom-dropdown .dropdown-item {
	padding: 4px 8px;
}

.offcanvas-body .card {
  background-color: white;
  border: none;
  margin-bottom: 1rem;
}
.offcanvas-body .card-header {
  font-weight: bold;
  font-size: 16px;
}
.offcanvas-body p {
  margin: 0 0 5px;
  font-size: 14px;
}

  th {
  white-space: nowrap;
}

th, td {
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}
</style>
<div class="page-content">
	<div class="container-fluid media-containerfluid" style="background-color: #F6F7F9; padding-left: 45px;">
		<div class="row mt-4">

			<!-- Sidebar Column -->
			 @include('includes.under-master-sidebar')



			<!-- Main Content -->
			<div class="col-md-10">
<!--              <button class="btn btn-primary d-lg-none m-2" onclick="toggleSidebar()">-->
<!--  ☰ Menu-->
<!--</button>-->
<!-- Filter Card -->
<!--      <div class="d-flex justify-content-end mb-3">-->
	<!--        <button class="btn btn-primary"-->
		<!--        style="background: linear-gradient(180deg, #190650 -14.29%, #16ACF2 158.33%);"-->
		<!--        data-bs-toggle="modal"-->
		<!--        data-bs-target="#addOrderModal">-->
		<!--  + Add Order-->
		<!--</button>-->

		<!--      </div>-->

		<div class="card mb-4 responsive-card">


			
	<div class="d-flex justify-content-between align-items-center p-2 rounded m-3">
	<!-- Left Buttons -->
	<div class="d-flex gap-2">
		<!--<button class="btn btn-outline-dark btn-sm" style="background: #DFEAFC; border-color: #DFEAFC;">-->
	
		<!--	<span>Order ID Series</span>-->
		<!--</button>-->
		<!--<button class="btn btn-outline-dark btn-sm" style="background: #DFEAFC; border-color: #DFEAFC;">-->
		<!--Quote ID Series-->
		<!--</button> -->
	<!--	<button class="btn btn-outline-dark btn-sm" style="background: #DFEAFC; border-color: #DFEAFC;">-->
	<!--	Customer ID Series-->
	<!--	</button>-->
		
	<!--			<button class="btn btn-outline-dark btn-sm" style="background: #DFEAFC; border-color: #DFEAFC;">-->
	<!--	Lead ID Series-->
	<!--	</button>-->
		
	<!--			<button class="btn btn-outline-dark btn-sm" style="background: #DFEAFC; border-color: #DFEAFC;">-->
	<!--Carrier ID Series-->
	<!--	</button>-->
	</div>
	
		<div class="text-center">
		<h6 class="mt-3" style="font-size: 20px; font-weight: 600;">List of Quote ID Series</h6>
		<!--<small style="font-size: 16px; font-weight: 500;">From Jun 25, 2025 to Aug 30, 2025</small>-->
	</div>

	 <div class="d-flex justify-content-end">
  <a class="btn btn-primary" style="background: #05BCF6;"  onclick="showEquipment()">
    Add Quote ID Series
  </a>
</div>
</div>		
			




<!-- Table Card -->

<div class="card-body">
	<div class="table-responsive">
		<table class="table table-bordered" style="background-color: white; color: black;">
			<thead style="background: #05BCF6; color: white;">
				<tr>
					<!--<th>-->
					<!--	<input type="checkbox" id="select-all" />-->
					<!--</th>-->
					<th>Sr. No.</th>
	                <th>Quote ID Series Name</th>
					<th>Quote ID Series</th>
					<th>Edit</th>
					<th>Delete</th>
				
				</tr>
			</thead>
			<tbody style="background-color: white; color: black;">
    @foreach ($states as $index => $state)
    <tr>
        <!--<td><input type="checkbox" class="select-row" /></td>-->
        <td>{{ $index + 1 }}</td>
        <td>{{ $state->name }}</td>
        <td>{{ $state->value }}</td>
        <td>
         <button class="btn btn-sm btn-success"
        onclick="showStateModal({{ $state->id }})">
    <i class="bi bi-pencil-square me-2"></i>Edit
</button>


        </td>
        <td>
    <!-- Delete Button (Triggers Modal) -->
    <button 
        type="button" 
        class="btn btn-sm btn-danger" 
        data-bs-toggle="modal" 
        data-bs-target="#deleteConfirmModal" 
        data-url="{{ url('/QuoteID_Series/' . $state->id) }}">
        <i class="bi bi-trash me-2"></i> Delete
    </button>
</td>

    </tr>

    <!-- Edit Modal -->
<div class="modal fade" id="editStateModal{{ $state->id }}" tabindex="-1" aria-labelledby="editStateLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content rounded-4">
        <form method="POST" action="{{ url('/QuoteID_Series/' . $state->id . '/update') }}" id="editQuoteForm{{ $state->id }}">
          @csrf
          <div class="modal-header text-white rounded-top-4" style="background-color: #05BCF6;">
            <h5 class="modal-title" id="editStateLabel">Edit Quote ID Series</h5>
            <button type="button" class="btn-close text-white" style="filter: invert(1);" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div class="mb-3">
              <label class="form-label">Quote ID Series Name<span class="text-danger">*</span></label>
              <input class="form-control @error('name') is-invalid @enderror" name="name" id="editName{{ $state->id }}" value="{{ old('name', $state->name) }}">
              <div class="invalid-feedback" id="editNameError{{ $state->id }}">
                {{ $errors->first('name', 'The Quote ID Series Name is required.') }}
              </div>
            </div>
            <div class="mb-3">
              <label class="form-label">Quote ID Series<span class="text-danger">*</span></label>
              <input class="form-control @error('value') is-invalid @enderror" name="value" id="editValue{{ $state->id }}" value="{{ old('value', $state->value) }}">
              <div class="invalid-feedback" id="editValueError{{ $state->id }}">
                {{ $errors->first('value', 'The Quote ID Series is required.') }}
              </div>
            </div>
          </div>
          <div class="modal-footer justify-content-center">
            <button type="submit" class="btn btn-sm text-white" style="background-color: #05BCF6;">Update</button>
          </div>
        </form>
      </div>
    </div>
  </div>
    @endforeach
</tbody>
		</table>
	</div>


</div>
</div>

</div>
</div>


<div class="modal fade" id="addEquipment" tabindex="-1" aria-labelledby="addEquipmentLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content rounded-4">
      <div class="modal-header text-white rounded-top-4" style="background-color: #05BCF6;">
        <h5 class="modal-title" id="addEquipmentLabel">Add Quote ID Series</h5>
        <button type="button" class="btn-close text-white" style="filter: invert(1);" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form method="POST" action="{{ url('QuoteID_Series') }}" id="addQuoteForm">
        @csrf
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label">Quote ID Series Name<span class="text-danger">*</span></label>
            <input class="form-control @error('name') is-invalid @enderror" name="name" id="addName" placeholder="Enter Quote ID Series Name" value="{{ old('name') }}">
            <div class="invalid-feedback" id="addNameError">
              {{ $errors->first('name', 'The Quote ID Series Name is required.') }}
            </div>
          </div>
          <div class="mb-3">
            <label class="form-label">Quote ID Series<span class="text-danger">*</span></label>
            <input class="form-control @error('value') is-invalid @enderror" name="value" id="addValue" placeholder="Enter Quote ID Series" value="{{ old('value') }}">
            <div class="invalid-feedback" id="addValueError">
              {{ $errors->first('value', 'The Quote ID Series is required.') }}
            </div>
          </div>
        </div>
        <div class="modal-footer justify-content-center" style="border-top: none;">
          <button type="submit" class="btn btn-sm text-white" style="background-color: #05BCF6;">Create</button>
        </div>
      </form>
    </div>
  </div>
</div>








<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-labelledby="deleteConfirmModalLabel" aria-hidden="true" data-bs-backdrop="false">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content rounded-4">
      <div class="modal-header bg-danger text-white rounded-top-4">
        <h5 class="modal-title" id="deleteConfirmModalLabel">
          <i class="bi bi-exclamation-triangle me-2"></i>Confirm Deletion
        </h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body text-center">
        <p class="mb-2">Are you sure you want to delete this data?</p>
        <p class="text-muted small">This action cannot be undone.</p>
      </div>
      <div class="modal-footer justify-content-center">
        
        <form id="deleteForm" method="POST">
            @csrf
            @method('DELETE')
            <button type="submit" class="btn btn-sm btn-danger">Yes, Delete</button>
        </form>
        <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Cancel</button>
      </div>
    </div>
  </div>
</div>


<script>
document.addEventListener('DOMContentLoaded', function () {
  const deleteModal = document.getElementById('deleteConfirmModal');
  deleteModal.addEventListener('show.bs.modal', function (event) {
    const button = event.relatedTarget;
    const url = button.getAttribute('data-url');
    const form = deleteModal.querySelector('#deleteForm');
    form.setAttribute('action', url);
  });
});
</script>







<!-- Footer -->

</div></div>
@include('includes.footer')
<!-- Scripts -->
<!-- <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script> -->
<!-- jQuery -->


</div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
  // Add Quote Form Validation
  const addQuoteForm = document.getElementById('addQuoteForm');
  if (addQuoteForm) {
    addQuoteForm.addEventListener('submit', function (event) {
      const nameInput = document.getElementById('addName');
      const valueInput = document.getElementById('addValue');
      const nameError = document.getElementById('addNameError');
      const valueError = document.getElementById('addValueError');

      let isValid = true;

      // Reset error states
      nameInput.classList.remove('is-invalid');
      valueInput.classList.remove('is-invalid');
      nameError.textContent = '';
      valueError.textContent = '';

      // Validate Name
      if (!nameInput.value.trim()) {
        nameInput.classList.add('is-invalid');
        nameError.textContent = 'The Quote ID Series Name is required.';
        isValid = false;
      }

      // Validate Value
      if (!valueInput.value.trim()) {
        valueInput.classList.add('is-invalid');
        valueError.textContent = 'The Quote ID Series is required.';
        isValid = false;
      }

      if (!isValid) {
        event.preventDefault(); // Prevent form submission
      }
    });
  }

  // Edit Quote Form Validation (for each edit modal)
  document.querySelectorAll('[id^="editQuoteForm"]').forEach(form => {
    form.addEventListener('submit', function (event) {
      const id = form.id.replace('editQuoteForm', '');
      const nameInput = document.getElementById('editName' + id);
      const valueInput = document.getElementById('editValue' + id);
      const nameError = document.getElementById('editNameError' + id);
      const valueError = document.getElementById('editValueError' + id);

      let isValid = true;

      // Reset error states
      nameInput.classList.remove('is-invalid');
      valueInput.classList.remove('is-invalid');
      nameError.textContent = '';
      valueError.textContent = '';

      // Validate Name
      if (!nameInput.value.trim()) {
        nameInput.classList.add('is-invalid');
        nameError.textContent = 'The Quote ID Series Name is required.';
        isValid = false;
      }

      // Validate Value
      if (!valueInput.value.trim()) {
        valueInput.classList.add('is-invalid');
        valueError.textContent = 'The Quote ID Series is required.';
        isValid = false;
      }

      if (!isValid) {
        event.preventDefault(); // Prevent form submission
      }
    });
  });
});
</script>


<script>
function showEquipment() {
    const modal = new bootstrap.Modal(document.getElementById('addEquipment'));
    modal.show();
  }


  function showStateModal(id) {
    const modalElement = document.getElementById('editStateModal' + id);
    const modal = new bootstrap.Modal(modalElement);
    modal.show();
  }


</script>
<script>
	document.getElementById('select-all').addEventListener('change', function () {
		const isChecked = this.checked;
		document.querySelectorAll('.select-row').forEach(cb => {
			cb.checked = isChecked;
		});
	});
</script>
<script src="../assets/libs/jquery/dist/jquery.min.js"></script>
<script src="../assets/js/sidebarmenu.js"></script>
<script src="../assets/js/app.min.js"></script>
<script src="../assets/libs/apexcharts/dist/apexcharts.min.js"></script>
<script src="../assets/libs/simplebar/dist/simplebar.js"></script>
<script src="../assets/js/dashboard.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>


<script>
  $(document).ready(function () {
    if (!$.fn.DataTable.isDataTable('#ordersTable')) {
      $('#ordersTable').DataTable({
        responsive: true
      });
    }
  });
</script>
<script>
	function toggleSidebar() {
		const sidebar = document.getElementById("sidebarWrapper");
		sidebar.classList.toggle("active");
	}
</script>
</body>

</html>