@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="d-flex justify-content-end">
            <a class="btn btn-danger btn-sm" href="{{ url('expenses_report') }}" style="float:right">Reports</a>

        </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 id="AddNewCategoryBtn" 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 text-capitalize " id="expenses">
                            @foreach ($dataexpensess as $temp)
                                <tr>
                                    <td class="text-start" style="text-indent:30%">{{ strtolower($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>