@include('inc.header-inc')
<style>
  input{
    background-color: var(--sidebard-color) !important;
    color: var(--text-color) !important; 
  }
  .dataTables_filter, .dataTables_length{
    margin: 10px;
  }
  .btn{
    background: #695CFE;
    color: white;
  }
  .dataTables_scroll{
    border:1px solid silver;
    border-radius:5px;
  }
  .icon-btn{
      height: 30px;
   }
</style>
<section class="container-fluid p-3 py-2 " style="padding-bottom:300px;">
  <div class="card container-shadow py-3 mb-2">
    <div class="container-fluid">
        <div class="flex position-relative">
              <span class="fw-semibold fs-4 align-middle justify-content-start text-secondary" style="font-weight: 500; font-size: 1.5em;">{{ ucwords($title) }}</span>
        </div>
    </div>
  </div>

  <div class="container-shadow bg-white ps-3 py-2 border mb-4 rounded" id="breadcrumb-container">
      <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
          <ol class="breadcrumb mb-0">
              <li class="breadcrumb-item active py-1" aria-current="page">Maintenance</li>
              <li class="breadcrumb-item active py-1" aria-current="page">{{ ucwords($title) }}</li>
          </ol>
      </nav>
  </div>

  <div class="container-shadow border px-2 py-3 mb-3 rounded">
    <form action="/storeparticular" method="POST">
        @csrf
        <div class="form-floating">
          <input type="text" class="form-control" name="name" placeholder="Input Particulars" id="particular" aria-label="Recipient's username" aria-describedby="button-addon2" requiredplaceholder="name@example.com">
          <label for="particular"><span class="text-danger">*</span>Particular</label>
        </div>
        <div class="text-center mt-3">
          <button  type="submit" class="btn btn-outline-primary btn-sm px-4 py-1 container-shadow" type="button" id="add-btn">Add Particular</button>
        </div>
    </form>
  </div>

  <div class="container-shadow border px-2 py-4 mb-3 rounded position-relative">
    <button style="background: #695CFE !importantl;z-index:100" class="btn btn-primary btn-sm px-3 py-1 mt-2 position-absolute top-0 start-50 translate-middle-x container-shadow" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" id="collapseButton" aria-controls="collapseOne" >
      Particular Table Hide
    </button>
    <div id="particulartable">
      <table class="display nowrap" id="pr_table" width="100%" style="width: 100%;">
        <thead >
            <tr>
                <th scope="col">No.</th>
                <th scope="col" >ADDED BY</th>
                <th scope="col" >PARTICULAR</th>
                <th scope="col" >CREATED AT</th>
                <th scope="col" >ACTION</th>
              </tr>
        </thead>

        <tbody>   
          @foreach ( $particular as $key=>$prt )
          <tr>      
              <td>{{ $key + 1 }}</td>
              <td>{{ ucwords(strtolower($prt->user->name)) }}</td>
              <td>{{ ucwords(strtolower($prt->name)) }}</td>
              <td>{{ date('F-d-Y', strtotime( $prt->date_added)) }}</td>
              <td><a href="/editparticular/{{ $prt->id }}"><button class="btn btn-primary icon-btn">
                <svg xmlns="http://www.w3.org/2000/svg" data-bs-toggle="tooltip" title="Edit Particular" width="22" height="22" viewBox="0 0 24 36" style="fill: rgb(255, 255, 255);transform: ;msFilter:;"><path d="m7 17.013 4.413-.015 9.632-9.54c.378-.378.586-.88.586-1.414s-.208-1.036-.586-1.414l-1.586-1.586c-.756-.756-2.075-.752-2.825-.003L7 12.583v4.43zM18.045 4.458l1.589 1.583-1.597 1.582-1.586-1.585 1.594-1.58zM9 13.417l6.03-5.973 1.586 1.586-6.029 5.971L9 15.006v-1.589z"></path><path d="M5 21h14c1.103 0 2-.897 2-2v-8.668l-2 2V19H8.158c-.026 0-.053.01-.079.01-.033 0-.066-.009-.1-.01H5V5h6.847l2-2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2z"></path></svg>
                </button></a>
                <button type="button" class="btn btn-danger icon-btn" data-bs-toggle="modal" title="Remove Particular" data-bs-target="#removeModal{{ $prt->id }}">
                <svg xmlns="http://www.w3.org/2000/svg" data-bs-toggle="tooltip" title="Remove Particular" width="22" height="22" viewBox="0 0 24 36" style="fill: rgb(255, 255, 255);transform: ;msFilter:;"><path d="M7 11h10v2H7z"></path><path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z"></path></svg>
                </button>
              </td>
          </tr>

          @include('inc.modal.deleteParticularModal')
          @endforeach
        </tbody>
      </table>
    </div>
  </div>
</section>

<script>
 var table = $('#pr_table').DataTable({
    "scrollY": "200px",
    "scrollX": "1200px",
  });
  $('#collapseButton').click(function () {
    var btnText = $(this).text();
    if (btnText === "Particular Table Show") {
      $(this).text("Particular Table Hide");
      $('#particulartable').show();
    } else {
      $(this).text("Particular Table Show");
      $('#particulartable').hide();
    }
  });

  $("body").on('click', 'button[id=add-btn]', function(){
      if($('#particular').val().trim() == ''){
        toasts_error('Particular is required.');
        return false;
      }
     
    });
</script>
@include('inc.modal.modalloader')
@include('inc.footer-inc')