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


</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">
  <a  class="btn btn-primary" style="background: #05BCF6;"  onclick="showEquipment()">
    + Add Lead Status
  </a>
</div>


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

			<!-- Filter Form -->
			<!--<div id="filterForm" class="card-body filter-transition">-->
			<!--	<form class="row g-3">-->
			<!--		<div class="col-md-4">-->
			<!--			<label class="form-label">Lead Status:</label>-->
			<!--			<select class="form-select"><option>Select Name</option></select>-->
			<!--		</div>-->
					<!--<div class="col-md-4">-->
					<!--	<label class="form-label">Carrier</label>-->
					<!--	<select class="form-select"><option>Select Carrier</option></select>-->
					<!--</div>-->
					<!--<div class="col-md-4">-->
					<!--	<label class="form-label">Status</label>-->
					<!--	<select class="form-select"><option>Select Status</option></select>-->
					<!--</div>-->
					<!--<div class="col-md-4">-->
					<!--	<label class="form-label">Payment Status</label>-->
					<!--	<select class="form-select"><option>Select Payment</option></select>-->
					<!--</div>-->
					<!--<div class="col-md-4">-->
					<!--	<label class="form-label">Driver</label>-->
					<!--	<select class="form-select"><option>Select Driver</option></select>-->
					<!--</div>-->
			<!--		<div class="col-md-4">-->
			<!--			<label class="form-label">Date Range</label>-->
			<!--			<select class="form-select"><option>Last Week</option></select>-->
			<!--		</div>-->
			<!--		<div class="col-12 text-end">-->
			<!--			<button class="btn btn-primary mt-2" style="background-color: #16ACF2; border-color: #16ACF2;">Apply</button>-->

			<!--			<button class="btn btn-primary mt-2" style="background-color: #E33C5A; border-color: #E33C5A;">Clear</button>-->
			<!--		</div>-->
			<!--	</form>-->
			<!--</div>-->

			<!--<hr style="border: 1px solid #0D0D0D;">-->

<!-- Filter Toggle Section -->
<div class="d-flex justify-content-between align-items-center p-2 rounded">
	<!-- Left Buttons -->
	<div class="d-flex gap-2">
		
	</div>

	<!-- Center Title -->
	<div class="text-center">
		<h6 class="mt-3" style="font-size: 20px; font-weight: 600;">List of Lead Status</h6>
		<!--<small style="font-size: 16px; font-weight: 500;">From Jun 25, 2025 to Aug 30, 2025</small>-->
	</div>

	<!-- Right Filter Button -->
	<div>
		<!--<button onclick="toggleFilter()" class="btn btn-light btn-sm border" style="width: 70px; height:30px; background: #DFEAFC; border-color: #DFEAFC;">-->
		<!--	Filter <i id="chevronIcon" class="bi bi-chevron-up"></i>-->
		<!--</button>-->
	</div>
</div>

<!-- JavaScript -->
<script>
	function toggleFilter() {
		const filterForm = document.getElementById("filterForm");
		const icon = document.getElementById("chevronIcon");

		filterForm.classList.toggle("hidden");

    // Toggle icon
		if (filterForm.classList.contains("hidden")) {
			icon.classList.remove("bi-chevron-up");
			icon.classList.add("bi-chevron-down");
		} else {
			icon.classList.remove("bi-chevron-down");
			icon.classList.add("bi-chevron-up");
		}
	}

  // On page load, filter should be visible
	document.addEventListener("DOMContentLoaded", function() {
		document.getElementById("filterForm").classList.remove("hidden");
	});
</script>



<!-- Table Card -->

<div class="card-body">
	<div class="table-responsive">
		<table id="ordersTable" class="table table-bordered" style="background-color: white; color: black;">
			<thead style="background: #05BCF6; color: white;">
				<tr>
						<th>Sr. No.</th>
	<th>Lead Status Name</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>
           <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('/Lead_Status/' . $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('/Lead_Status/' . $state->id . '/update') }}">
                    @csrf
                    <div class="modal-header text-white rounded-top-4" style="background-color: #05BCF6;">
                        <h5 class="modal-title">Edit Lead Status</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">Lead Status Name<span class="text-danger">*</span></label>
                            <input class="form-control" name="name" value="{{ $state->name }}" required>
                        </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" >
        <h5 class="modal-title" id="addEquipmentLabel">Add Lead Status</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('Lead_Status') }}">
    @csrf
    <div class="modal-body">
        <div class="mb-3">
            <label class="form-label">Lead Status Name<span class="text-danger">*</span></label>
            <input class="form-control" name="name" placeholder="Enter Lead Status Name" required>
        </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>
  function addPickup() {
    const id = 'pickup-' + Date.now();
    const html = `
      <div class="row g-3 pickup-block position-relative mt-3" id="${id}">
        <span class="remove-block" onclick="document.getElementById('${id}').remove()">×</span>
        <div class="col-md-6">
          <label class="form-label">Product Name:</label>
          <input class="form-control" value="Add">
        </div>
        <div class="col-md-6">
          <label class="form-label">Quantity:</label>
          <input class="form-control" value="Add">
        </div>
      </div>`;
    document.getElementById('pickupSection').insertAdjacentHTML('beforeend', html);
  }
</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 () {
		$('#ordersTable').DataTable({
			responsive: true
		});
	});
</script>
<script>
	function toggleSidebar() {
		const sidebar = document.getElementById("sidebarWrapper");
		sidebar.classList.toggle("active");
	}
</script>
</body>

</html>