@extends('fronted.layout.main')
@section('adcontent')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<style>
   #expenses h1,
   #expenses h2,
   #expenses h3,
   #expenses h4,
   #expenses h5,
   #expenses h6 {
      background-color: #212529;
      font-size: 1rem;
      padding: 2px;
      color: #fcfcfc;
   }

   #expenses_form .form-control {
      font-size: 0.8rem;
   }

   #expenses_form .form-control:focus {
      box-shadow: none;
   }

   #expenses_list {
      list-style-type: none;
   }

   #expenses_list li {
      display: inline-block;
   }

   #expenses #roomSeatTable input {
      font-size: 0.8rem;
      font-weight: 500;
   }

   .autoplay .img-height {
      height: 150px;
   }

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

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

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

   #chart_div {
      position: relative;
      top: 0;
      left: 0;
      padding: 0;

   }

   .chart_heading h4 {
      padding: 1.5% 0;
   }

   #chart_div .google-visualization-title {
      text-align: center;
      width: 100%;
      font-size: 30px;
   }

   .swal-title {

      font-size: 18px;
   }
</style>

@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: 'Category Updated Successfully',
   })
</script>
@php session()->forget('warning'); @endphp
@endif
@if ($message = Session::get('danger'))
<script>
   Swal.fire({
      icon: 'success',
      text: 'Category Deleted Successfully',
   })
</script>
@php session()->forget('danger'); @endphp
@endif
<div id="expenses" class="container-fluid ps-0 p-0 p-lg-2">
   <div class="row mt-0 my-1">
      <div class="col-md-6">
      </div>
      <div class="col-md-6">
         <form method="GET" action="{{url('filterExpenses')}}">
            <div class="row g-3 align-items-right" style="height: 40px;float: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('endDate', 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 class="col-auto">
                  <a class="btn btn-danger btn-sm" href="{{url('expenses_report')}}" style="float:right">Reports</a>
               </div>
            </div>
         </form>
      </div>
   </div>
</div>
<div class="container-fluid rounded-3 shadow">
   <div class="row">
      <div class="col-lg-5 bg-white m-0" style="border-right:1px solid gray">
         <div class="chart_heading m-0">
            <h4 class="text-center fw-bold" style="font-size: 1rem; padding:6px;">Category Wise Chart</h4>
         </div>
         <div id="chart_div" class="container p-0" style="width:100%; height:400px"></div>

         <div class="container mt-5 px-5">
            <div class="row autoplay">
               <div class="col-3">
                  <div class="card  m-0 p-0 shadow-sm">
                     <div class="card-body p-0">
                        <img src="{{asset('assets/images/poster1.jpg')}}">
                     </div>
                  </div>
               </div>
               <div class="col-3">
                  <div class="card   m-0 p-0">
                     <div class="card-body p-0">
                        <img src="{{asset('assets/images/poster2.jpg')}}">
                     </div>
                  </div>
               </div>
               <div class="col-3">
                  <div class="card   m-0 p-0">
                     <div class="card-body p-0">
                        <img src="{{asset('assets/images/poster3.jpg')}}">
                     </div>
                  </div>
               </div>
               <div class="col-3">
                  <div class="card m-0 p-0 ">
                     <div class="card-body p-0 border-0">
                        <img src="{{asset('assets/images/poster4.jpg')}}">
                     </div>
                  </div>
               </div>
               <div class="col-3">
                  <div class="card m-0 p-0  ">
                     <div class="card-body p-0 border-0">
                        <img src="{{asset('assets/images/poster5.jpg')}}">
                     </div>
                  </div>
               </div>
               <div class="col-3">
                  <div class="card m-0 p-0  ">
                     <div class="card-body p-0 border-0">
                        <img src="{{asset('assets/images/poster6.jpg')}}">
                     </div>
                  </div>
               </div>
               <div class="col-3">
                  <div class="card m-0 p-0  ">
                     <div class="card-body p-0 border-0">
                        <img src="{{asset('assets/images/poster7.jpg')}}">
                     </div>
                  </div>
               </div>
               <div class="col-3">
                  <div class="card m-0 p-0  ">
                     <div class="card-body p-0 border-0">
                        <img src="{{asset('assets/images/poster8.jpg')}}">
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>

      <div class="col-lg-7 bg-white rounded-2">
         <div class="responsive dataTable">
            <table id="roomSeatTable" class="table text-center">
               <thead class="align-middle">
                  <tr class="">
                     <th colspan="2" style="font-size: 1rem; padding:4px 0; color: #fff;background: #212529;">
                        Add Category
                     </th>
                  </tr>
               </thead>
               <tbody class="align-middle">
                  <form id="expenses_form" method="POST" action="{{route('expensessave')}}" enctype="multipart/form-data">
                     @csrf
                     <tr>
                        <td>
                           <input type="text" class="form-control" name="category_name" id="floatingInput" placeholder="Add Category" style="box-shadow: none;" oninput="this.value = this.value.match(/^[A-Za-z[0-9]\s]+$/) ? this.value : this.value.replace(/[^A-Za-z[0-9]\s]/g, '')" required>
                        </td>
                        <td>
                           <button class="btn btn-success btn-sm" type="submit">Submit</button>
                        </td>
                     </tr>
                  </form>
               </tbody>
            </table>
         </div>

         <div style="height:37vh" class="table-responsive dataTable">
            <table id="expensescontainer" class=" table table-bordered display nowrap text-center  roomSeatTable">
               <thead style="position: sticky; top: 0;" class="table-header">
                  <tr>
                     <th>Category Name</th>
                     <th>Total Amount <span class="text-dark rounded-1  ms-2 bg-white p-1 "> ₹{{$totalExpense}} </span></th>
                     <th>Action</th>
                  </tr>
               </thead>
               <tbody class="align-middle " id="expenses">
                  @foreach($dataexpensess as $temp)
                  <tr>
                     <td class="text-start" style="text-indent:30%">{{$temp->category_name}}</td>
                     <td class="text-start" style="text-indent:40%"> <i class="fa fa-solid fa-indian-rupee-sign" style="font-size:12px"></i> {{$temp->total}}</td>
                     <td>
                        <ul class="p-0 m-0" id="expenses_list">
                           <li>