@extends('fronted.layout.main')
@section('adcontent')
<style>
   select,
   input {
      font-size: 0.8rem;
   }
</style>
<div class="container-fluid mt-5" style="margin-bottom:2%; margin-top:20px;">
   <div class="container d-flex justify-content-around align-items-center fs-6 g-3"></div>
   @if ($message = Session::get('ItemAdded'))
   <script>
      swal({
         "title": "Add Item",
         "icon": "success",
         "text": "Item Added successfully."
      });
   </script>
   @php session()->forget('ItemAdded') @endphp
   @endif
   @if ($message = Session::get('danger'))
   <script>
      swal({
         "title": "Delete Item",
         "icon": "warning",
         "text": "Item Deleted successfully."
      });
   </script>
   @php session()->forget('danger') @endphp
   @endif
   @if ($message = Session::get('warning'))
   <script>
      swal({
         "title": "Update Item",
         "icon": "success",
         "text": "{{$message}}"
      });
   </script>
   @php session()->forget('warning') @endphp
   @endif
   <div class="container-fluid shadow p-0">
      <div class="table-responsive dataTable">
         <table class="table table-striped text-center table-bordered mb-4 roomSeatTable">
            <thead class="align-middle">
               <tr>
                  <th>Item Code</th>
                  <th>Item Name</th>
                  <th> Rate</th>
                  <th>Tax</th>
                  <th>Amount</th>
                  <th>Action</th>
               </tr>
            </thead>
            <tbody class="align-middle">
               <form method="POST" action="{{route('itemsave')}}">
                  @csrf
                  <tr>
                     <td class="p-2">
                        <div class="d-flex justify-content-center flex-column ">
                           <input class="form-control-sm border-0   text-center" type="text" placeholder="Enter Here Item Code" name="itemcode" required>
                           <p class="text-danger mb-0">@error('itemcode'){{$message}}@enderror</p>
                        </div>
                     </td>
                     <td class="p-2">
                        <input class="form-control-sm border-0   text-center" type="text" placeholder="Enter Item Name" name="itemname" required>
                        <p class="text-danger mb-0">@error('itemname'){{$message}}@enderror</p>
                     </td>
                     <td class="">
                        <input class="form-control-sm border-0   text-center" type="number" placeholder="Enter Here" step="0.01" id="txt1" name="rate" required>
                        <p class="text-danger bg-info mb-0">@error('rate'){{$message}}@enderror</p>
                     </td>
                     <td class="p-2">
                        <input class="form-control-sm border-0   text-center" type="number" step="0.01" placeholder="Enter Here" id="txt2" name="tax" required>
                        <p class="text-danger mb-0">@error('tax'){{$message}}@enderror</p>
                     </td>
                     <td class="p-2">
                        <input class="form-control-sm border-0   text-center" type="number" step="0.01" placeholder="Enter Here" id="txt3" name="amount" readonly>
                        <p class="text-danger mb-0">@error('amount'){{$message}}@enderror</p>
                     </td>
                     <td><button class=" btn btn-success roombtn btn" data-bs-toggle="tooltip" data-bs-placement="top" type="submit">Add Item</button></td>
                  </tr>
               </form>
            </tbody>
         </table>
      </div>
   </div>
   <div class="container-fluid shadow p-0 mt-4">
      <div class="table-responsive dataTable">
         <table class="table table-striped text-center table-bordered mb-4 roomSeatTable" id="example">
            <thead class="align-middle">
               <tr>
                  <th>S.No.</th>
                  <th>Item Code</th>
                  <th>Item Name</th>
                  <th>Rate</th>
                  <th>Tax</th>
                  <th>Amount</th>
                  <th>Action</th>
               </tr>
            </thead>
            <tbody class="align-middle">
               @php
               $data = DB::table('items')->orderBy('id', 'DESC')->get();
               @endphp
               @php($count=0)
               @foreach($data as $temp)
               @php($count++)
               <tr>
                  <td>{{$count}}</td>
                  <td>{{$temp->itemcode}}</td>
                  <td>{{$temp->itemname}}</td>
                  <td>₹ {{$temp->rate}}</td>
                  <td>₹ {{$temp->tax}}</td>
                  <td> ₹ {{$temp->amount}}</td>
                  <td>
                     <div class="d-flex gap-2 justify-content-center">
                        <form action="{{route('itemdelete', $temp->id)}}" method="POST">
                           @csrf
                           <input type="hidden" value="DELETE">
                           <button type="submit" class="btn btn-xs  btn-flat show_confirm" data-toggle="tooltip" title='Delete'><i class="fa fa-trash fa-lg text-danger"></i></button>
                        </form>
                        <button type="button" class="btn editbtn" value="{{$temp->id}}" data-bs-toggle="modal" data-bs-target="#editModals">
                           <i class="fa-regular fa-pen-to-square  text-success"></i>
                        </button>
                     </div>
                  </td>
               </tr>
               @endforeach
            </tbody>
         </table>
      </div>
   </div>
   <!-- Modal -->
   <div class="modal fade" id="editModals" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
         <form method="POST" action="{{route('additemupdate')}}" enctype="multipart/form-data">
            @csrf
            <div class="modal-content">
               <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">Edit </h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
               </div>
               <div class="modal-body">
                  <input type="hidden" id="item_id" name="item_id">
                  <div class="form-group">
                     <label>Item Code</label>
                     <input type="text" class="form-control" name="itemcode" id="itemcode">
                  </div>
                  <div class="form-group">
                     <label> Item Name</label></label>
                     <input type="text" class="form-control" name="itemname" id="itemname">
                  </div>
                  <div class="form-group">
                     <label>Rate</label>
                     <input type="text" class="form-control txt2" name="rate" id="rate">
                  </div>
                  <div class="form-group">
                     <label>Tax</label>
                     <input type="text" class="form-control txt2" name="tax" id="tax">
                  </div>
                  <div class="form-group">
                     <label>Amount</label>
                     <input type="text" class="form-control txt2" name="amount" id="amount" readonly>
                  </div>
               </div>
               <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                  <button class="btn btn-warning" type="submit">Save changes</button>
               </div>
            </div>
         </form>
      </div>
   </div>
</div>
<script>
   $(document).ready(function() {
      $("#txt1, #txt2").keyup(function() {
         var value1 = parseFloat($("#txt1").val());
         var value2 = parseFloat($("#txt2").val());
         var tax = value1 * value2 * 0.01 + value1; 
         $("#txt3").val(tax.toFixed(2));
      });
   });
</script>
<script type="text/javascript">
   $('.show_confirm').click(function(event) {
      var form = $(this).closest("form");
      var name = $(this).data("name");
      event.preventDefault();
      swal({
            title: `Are you sure you want to  delete?`,
            text: "If you delete this, it will be gone forever.",
            icon: "warning",
            buttons: true,
            dangerMode: true,
         })
         .then((willDelete) => {
            if (willDelete) {
               form.submit();
            }
         });
   });
</script>
<script>
   $(document).ready(function() {
      $(document).on('click', '.editbtn', function() {
         var item_id = $(this).val();
         $('#editModal').modal('show');
         $.ajax({
            type: 'GET',
            url: 'itemedit/' + item_id,
            success: function(response) {
               console.log(response);
               $('#itemcode').val(response.itemdata.itemcode);
               $('#itemname').val(response.itemdata.itemname);
               $('#rate').val(response.itemdata.rate);
               $('#tax').val(response.itemdata.tax);
               $('#item_id').val(item_id);

               calculateAmount();
            }
         });
      });

      $('#tax, #rate').change(function() {
         calculateAmount();
      });

      function calculateAmount() {
         var editrate = parseFloat($('#rate').val());
         var editax = parseFloat($('#tax').val());
         var editamount = editrate * (1 + editax / 100);
         $('#amount').val(editamount.toFixed(2));
      }
   });
</script>
@endsection