@layout('admin/master') 
@section('content')
  @section('stylesheets')
    <link rel="stylesheet" href="/admin/assets/lib/datatables/jquery.dataTables.min.css">
    <link rel="stylesheet" href="/admin/assets/lib/datatables/responsive.bootstrap.min.css">
  @endsection 
  

      <div class="container-fluid g-0">
        <div class="row">
          <div class="col-12">
            <div class="listing-box">
              <div class="d-flex align-items-center justify-content-between">
                <div>
                  <h2>Neque efficitur porta</h2>
                </div>
                <div class="d-flex align-items-center">
                  <div class="me-4">
                    <div class="switch-data d-flex align-items-center justify-content-between">
                      <div>
                        <p>Active</p>
                      </div>
                      <div>
                        <div class="form-check form-switch">
                          <input class="form-check-input" type="checkbox" role="switch"
                            id="flexSwitchCheckDefault" />
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="me-4">
                    <button class="defaul-btn delete-btn" id="error">
                      <ul class="d-flex align-items-center">
                        <li class="me-2">
                          <img src="/admin/assets/img/delete-icon.png" alt="" />
                        </li>
                        <li>Delete</li>
                      </ul>
                    </button>
                  </div>
                  <div>
                    <button class="defaul-btn edit-btn" type="button" data-toggle="modal"
                      data-target="#exampleModal">
                      <ul class="d-flex align-items-center">
                        <li class="me-2">
                          <img src="/admin/assets/img/edit-icon.png" alt="" />
                        </li>
                        <li>Edit</li>
                      </ul>
                    </button>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="co-12 col-md-10 col-lg-6 mt-5">
                  <div class="row">
                    <div class="col-12 col-md-4">
                      <h2>Code</h2>
                      <p>SBE01122</p>
                    </div>
                    <div class="col-12 col-md-4">
                      <h2>Code</h2>
                      <p>SBE01122</p>
                    </div>
                    <div class="col-12 col-md-4">
                      <h2>Code</h2>
                      <p>SBE01122</p>
                    </div>
                  </div>
                </div>
                <div class="col-12">
                  <h2 class="mt-4">Users</h2>
                  <ul class="user-items d-flex align-items-center flex-wrap mt-2">
                    <li>Johnny Valdez</li>
                    <li>Johnny Valdez</li>
                    <li>Johnny Valdez</li>
                    <li>Johnny Valdez</li>
                    <li>ohnny Valdez</li>
                    <li>Johnny Valdez</li>
                    <li>Johnny Valdez</li>
                    <li>Johnny Valdez</li>
                    <li>Johnny Valdez</li>
                    <li>ohnny Valdez</li>
                    <li>Johnny Valdez</li>
                    <li>Johnny Valdez</li>
                  </ul>
                  <h2 class="mt-4">Description</h2>
                  <p class="mt-3">
                    Phasellus finibus enim nulla, quis ornare odio facilisis
                    eu. Suspendisse ornare ante sit amet arcu semper, vel
                    eleifend tortor egestas. Aenean luctus, lorem in
                    hendrerit interdum, leo orci egestas diam, ac euismod
                    massa est et turpis. Etiam auctor lectus vel neque
                    convallis pharetra. Ut turpis eros, aliquet non ante id,
                    interdum placerat erat. Curabitur sit amet eros vel orci
                    venenatis hendrerit. Cras sagittis sagittis sagittis. In
                    hac habitasse platea dictumst. Phasellus diam erat,
                    porttitor sed ligula at, ultricies auctor tellus. Donec
                    ut sem in turpis ultrices suscipit ut auctor tellus.
                    Quisque a tincidunt ipsum. Phasellus finibus enim nulla,
                    quis ornare odio facilisis eu. Suspendisse ornare ante
                    sit amet arcu semper, vel eleifend tortor egestas.
                    Aenean luctus, lorem in hendrerit interdum, leo orci
                    egestas diam, ac euismod massa est et turpis. Etiam
                    auctor lectus vel neque convallis pharetra. Ut turpis
                    eros, aliquet non ante id, interdum placerat erat.
                    Curabitur sit amet eros vel orci venenatis hendrerit.
                    Cras sagittis sagittis sagittis. In hac habitasse platea
                    dictumst. Phasellus diam erat, porttitor sed ligula at,
                    ultricies auctor tellus. Donec ut sem in turpis ultrices
                    suscipit ut auctor tellus. Quisque a tincidunt ipsum.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      	<!-- <<< Modal >>> -->
	<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered custom-modal" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Edit Tag</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <img src="/admin/assets/img/cross-icon.png" alt="" />
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <input type="text" class="form-control defaul-input mb-4" id="exampleFormControlInput1"
              placeholder="Title" />
          </div>
          <div class="form-group">
            <input type="text" class="form-control defaul-input mb-4" id="exampleFormControlInput1"
              placeholder="Code" />
          </div>
          <div class="form-group">
            <input type="text" class="form-control defaul-input mb-4" id="exampleFormControlInput1"
              placeholder="URL" />
          </div>
          <div class="form-group">
            <select class="form-select defaul-input mb-3" aria-label="Default select example">
              <option selected>Select Type</option>
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
            </select>
          </div>
          <div class="form-group">
            <select class="form-select defaul-input mb-3" aria-label="Default select example">
              <option selected>Select Users</option>
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
            </select>
          </div>
          <div class="form-group">
            <textarea class="form-control defaul-text-area" id="exampleFormControlTextarea1" rows="3"
              placeholder="Description"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn-black defaul-btn" data-dismiss="modal" aria-label="Close">
          Save
        </button>
      </div>
    </div>


  </div>
  </div>
    @include('admin.footer')
  @section('scripts')
    <script>
      let ajax_listing_url = "{{ route('admin.user.ajaxlsiting') }}";
    </script>
    <script src="/admin/assets/lib/datatables/jquery.dataTables.min.js"></script>
    <script src="/admin/assets/lib/datatables/dataTables.responsive.min.js"></script>
    <script src="/admin/assets/js/ajax-datatable.js"></script>
    <script>
			$(document).on('click', '#error', function (e) {
				swal({
					title: 'Alert!',
					text: 'Are you sure you want to delete?',
					type: 'warning',
					showCancelButton: true,
					confirmButtonColor: '#fc635d',
					cancelButtonColor: '#e5e5e5',
					confirmButtonText: 'Yes',
					cancelButtonText: 'No',
				})
			})
		</script>
  @endsection
@endsection