@extends('fronted.layout.main')
@section('adcontent')
<style>
   #expenses_list {
      list-style-type: none;
   }

   #expenses_list li {
      display: inline-block;
   }

   #expenses_table #roomSeatTable td {
      color: black;
   }

   .dataTables_filter {
      margin-bottom: 10px;
   }

   .expensesfilter input {
      font-size: 0.8rem;
   }

   .expensesfilter label {
      font-size: 0.8rem;
   }

   .expensesfilter input:focus {
      box-shadow: none;
   }

   #expensesTable .form-control,
   #expensesTable .form-select {
      font-size: 0.8rem;
   }

   #expensesTable input:focus,
   #expensesTable select {
      box-shadow: none;
   }

   table.dataTable thead th,
   table.dataTable thead td,
   table.dataTable tfoot th,
   table.dataTable tfoot td {
      text-align: center;
   }

   .form-control,
   .form-select,
   .form-label {
      font-size: 0.8rem;
   }

   .form-control:focus,
   .form-select:focus {
      box-shadow: none;
   }
</style>
<div class="container-fluid mt-4">
   @if ($message = Session::get('success'))
   <script>
      Swal.fire({
         icon: 'success',
         text: 'Category Added Successfully',
      })
   </script>
   @php session()->forget('success'); @endphp
   @endif
   @if ($message = Session::get('warning'))
   <script>
      Swal.fire({
         icon: 'success',
         text: ' Expenses Updated Successfully',
      })
   </script>
   @php session()->forget('warning'); @endphp
   @endif
   @if ($message = Session::get('danger'))
   <script>
      Swal.fire({
         icon: 'warning',
         text: 'Category Deleted Successfully',
      })
   </script>
   @php session()->forget('danger'); @endphp
   @endif
   <div class="container-fluid me-0 ms-0  bg-white shadow-sm">
      <div class="table-responsive dataTable">
         <table id="expensesTable " class="table text-center">
            <thead class="align-middle text-nowrap">
               <th>Date</th>
               <th>Item Name</th>
               <th>Quantity</th>
               <th>Rate</th>
               <th>Amount</th>
               <th>Payment Type</th>
               <th>Upload Bill</th>
               <th>Action</th>
            </thead>
            @php
            $data = DB::table('expenses')->get();
            @endphp
            <tbody class="align-middle">
               <form method="POST" action="{{route('expensesdetail')}}" enctype="multipart/form-data">
                  @csrf
                  <tr>
                     <td><input type="date" class="form-control" name="billdate" required></td>
                     <td>
                        <input type="text" class="form-control" name="itemname" required>
                     </td>
                     <input type="hidden" name="category_id" value="{{ $expensesadd->id}}">
                     <td>
                        <input type="number" name="quantity" value="1" class="form-control txt1" required>
                        <p class="text-danger m-0 p-0">@error('quantity'){{$message}}@enderror</p>
                     </td>
                     <td><input type="number" name="rate" class="form-control txt2" required></td>
                     <td>
                        <input type="number" name="amount" class="form-control txt3" readonly>
                        <p class="text-danger m-0 p-0">@error('amount'){{$message}}@enderror</p>
                     </td>
                     <td>
                        <select class="form-control" name="paymentmode" required>
                           <option value="">--Select--</option>
                           <option value="Cash">Cash</option>
                           <option value="Online">Online</option>
                           <option value="Cheque">Cheque</option>
                        </select>
                     </td>
                     <td><input type="file" name="uploadbill" class="form-control"></td>
                     <td><button class="btn btn-success btn-sm m-auto" type="submit">Submit</button></td>
                  </tr>
               </form>
            </tbody>
         </table>
      </div>
   </div>
</div>
<div class="container-fluid mt-3">
   <div class="container bg-white py-2 shadow-sm rounded-2">
      <div class="row">
         <div class="col-md-6" style="padding-top:6px;">
            <strong>Grand Total: <span class="text-danger" style="font-weight:bold">₹ {{ $totalAmount }}</span></strong>
         </div>
         <div class="col-md-6">
            <form method="get" action="{{url('datefilter',$expensesadd->id)}}">
               <div class="row g-3 align-items-right">
                  <div class="col-auto expensesfilter">
                     <label class="col-form-label">From&nbsp;:</label>
                  </div>
                  <div class="col-auto expensesfilter">
                     <input type="date" value="{{ old('startDate', isset($_GET['startDate']) ? $_GET['startDate'] : '') }}" class="form-control" name="startDate" id="startDate" required>
                  </div>
                  <div class="col-auto expensesfilter">
                     <label class="col-form-label">To &nbsp;:</label>
                  </div>
                  <div class="col-auto expensesfilter">
                     <input type="date" value="{{ old('startDate', isset($_GET['endDate']) ? $_GET['endDate'] : '') }}" class="form-control" name="endDate" id="endDate" required>
                  </div>
                  <div class="col-auto">
                     <button class="btn btn-warning btn-sm" type="submit">Filter</button>
                  </div>
               </div>
            </form>
         </div>
      </div>
   </div>
   <div class="table-responsive dataTable">
      <table id="example1" class="display nowrap  roomSeatTable" style="margin-bottom: 11px">
         <thead>
            <th>S.No.</th>
            <th>Date</th>
            <th>Item Name</th>
            <th>Quantity</th>
            <th>Rate</th>
            <th>Amount</th>
            <th>Payment Type</th>
            <th>Uploaded Bill</th>
            <th>Action</th>
         </thead>
         @php
         $count = 0;
         @endphp
         <tbody id="filteredResults">
            @foreach($expense as $temp)
            @php($count++)
            <tr>
               <td>{{$count}}</td>
               <td class="text-start ps-2">{{ date('d-M-Y', strtotime($temp->billdate)) }}</td>
               <td class="text-start ps-2" style="text-indent:25px">{{$temp->itemname}}</td>
               <td>{{$temp->quantity}}</td>
               <td class="text-start" style="text-indent:25px">₹ {{$temp->rate}}</td>
               <td class="text-start" style="text-indent:25px">₹ {{$temp->amount}}</td>
               <td class="text-start" style="text-indent:23%">{{$temp->paymentmode}}</td>
               <td>
                  @if($temp->uploadbill)
                  <a target="_blank" href="{{ asset('assets/uploads/'.$temp->uploadbill) }}">
                     <button class="btn btn-success">View</button>
                  </a>
                  @else
                  <button class="btn btn-default" disabled>View</button>
                  @endif
               </td>
               <td>
                  <ul class="m-0 p-0" id="expenses_list">
                     <li>
                        <form action="{{ route('expensesdetaildelete', $temp->id) }}" method="POST">
                           @csrf
                           <input type="hidden" value="DELETE">
                           <button type="submit" class="btn btn-xs  btn-flat show_confirm m-0 p-0" data-toggle="tooltip" title='Delete'><i class="fa fa-trash fa-lg text-danger"></i></button>
                        </form>
                     </li>
                     <li>
                        <button type="button" class="btn editbtn m-0 p-0 ms-1" value="{{$temp->id}}" data-bs-toggle="modal" data-bs-target="#editModals">
                           <i class="fa-regular fa-pen-to-square  text-success"></i>
                        </button>
                     </li>
                  </ul>
               </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('updateaddexpenses')}}" 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="addexpenses_id" name="addexpenses_id">
               <div class="form-group">
                  <label class="form-label" for="billdate">Date</label>
                  <input type="date" class="form-control" name="billdate" id="billdate">
               </div>
               <div class="form-group">
                  <label class="form-label" for="itemname">Item Name</label>
                  <input type="text" class="form-control" name="itemname" id="itemname">
               </div>
               <div class="form-group">
                  <label class="form-label" for="editQuantity">Quantity</label>
                  <input type="number" class="form-control txt1" name="quantity" id="editQuantity">
               </div>
               <div class="form-group">
                  <label class="form-label" for="editRate">Rate</label>
                  <input type="number" class="form-control txt2" name="rate" id="editRate">
               </div>
               <div class="form-group">
                  <label class="form-label" for="editAmount">Amount</label>
                  <input type="number" class="form-control txt3" name="amount" id="editAmount" readonly>
               </div>
               <div class="form-group">
                  <label class="form-label" for="paymentmode">Payment type</label>
                  <select class="form-select" name="paymentmode" id="paymentmode">
                     <option>Cash</option>
                     <option>Online</option>
                     <option>Cheque</option>
                  </select>
               </div>
               <div class="form-group">
                  <label class="form-label" for="uploadBill">Uploaded Bill</label><br>
                  <input type="file" accept="image/jpeg,image/png,image/jpg" class="form-control" name="uploadbill" id="uploadBill">
                  <p id="BillimgValidation" class="text-danger d-none" style="font-size: 0.6rem;"></p>
                  <img style="width:200px;" id="bill">
               </div>
            </div>
            <div class="modal-footer">
               <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
               <button class="btn btn-warning" id="ExpensesValidationForm" type="submit">Save changes</button>
            </div>
         </div>
      </form>
   </div>
</div>
</div>
<script>
   $(document).ready(function() {

      $(".txt1, .txt2").keyup(function() {

         $(".txt3").val($(".txt1").val() * $(".txt2").val());

      });

      $("#ExpensesValidationForm").on("click", function(e) {
         const input = $("#uploadBill");
         const  message = $("#BillimgValidation");
         const inputVal = input.val();
         const allowedExtensions = /(\.jpg|\.jpeg|\.png)$/i;
         if (allowedExtensions.exec(inputVal) || inputVal === "") {
            input.removeClass("is-invalid");
         } else {
            input.addClass("is-invalid");
            message.removeClass("d-none");
            message.text("only jpeg,png,jpg file accept");
            e.preventDefault();
         }
      });
   });
</script>
<script>
   $(document).ready(function() {
      $(document).on('click', '.editbtn', function() {
         var addexpenses_id = $(this).val();
         $('#editModals').modal('show');
         $.ajax({
            type: 'GET',
            url: '{{ route("editaddexpenses", ":id") }}'.replace(':id', addexpenses_id),
            success: function(response) {
               if (response && response.addexpense && response.addexpense.uploadbill) {
                  var protocol = window.location.protocol;
                  var domain = window.location.hostname;
                  var fullURL = "