@extends('layouts.admin')
@section('content')
<style>
    .skew-title{
        transform: skew(calc(-1* 15deg));
    }
</style>
<!--App-Content-->
    <!--Section-->
    <section class="bg-primary">
        <div class="sptb-2 bannerimg">
            <div class="header-text mb-0">
                <div class="container">
                    <div class="text-center text-white py-7">
                        <h1 class="">Summary</h1>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--/Section-->
    <!-- Shape Start -->
    <div class="relative">
        <div class="shape overflow-hidden text-white">
            <svg viewBox="0 0 2880 48" fill="none" xmsns="http://www.w3.org/2000/svg">
                <path d="M0 48H1437.5H2880V0H2160C1442.5 52 720 0 720 0H0V48Z" fill="#f5f4f9"></path>
            </svg>
        </div>
    </div>

    <div class="app-content my-3 my-md-5">
        <div class="side-app">
            <div class="p-5 mb-6 bg-white item2-gl-nav d-flex">
                <div class="">
                    <h5 class="mb-0 mt-0">Showing Life Time Summary</h5>
                    <label class="me-2 mt-3 mb-sm-1">Filter By Certain Month:</label>
                    <div class="d-flex">
                        <form action="{{route('admin.summary.index')}}" id="search_month_form" method="get">
                            <input type="month" id="month" class="form-control" name="date" value="{{request()->date}}">
                        </form>
                        <span class="px-3 pt-3">Or</span>
                        <a class="modal-effect btn btn-primary" data-bs-effect="effect-flip-vertical" data-bs-toggle="modal" href="#date_modal">
                            <i class="fa fa-filter ms-1"></i>
                            Filter By Date
                        </a>
                    </div>
                </div>
                <ul class="nav item2-gl-menu ms-auto">
                    <li class="border-end"><a href="{{route('admin.summary.index')}}" class="" title="Show All"><i class="fa fa-list"></i></a></li>
                </ul>
            </div>
            <!-- Begin:Wallets section -->
            @include('admin.summary.total-wallets._index')
            <!-- End:Wallets section -->
            <hr>
            <!-- Begin:Recharge section -->
            @include('admin.summary.total-recharge._index')
            <!-- End:Recharge section -->
            <hr>
            <!-- Begin:Refund visa section -->
            @include('admin.summary.refunded-to-students._index')
            <!-- End:Refund visa section -->
            <hr>
            <!-- Begin:Refund to wallet section -->
            @include('admin.summary.total-refund-to-wallet._index')
            <!-- End:Refund to wallet section -->
            <hr>
            <!-- Begin:Total income -->
            @include('admin.summary.total-income._index')
            <!-- End:Total income -->
            <hr>
            <!-- Begin:Net income -->
            @include('admin.summary.net-income._index')
            <!-- End:Net income -->
            <!-- Begin:Other -->
            @include('admin.summary.other._index')
            <!-- End:Other -->

        </div>
    </div>

    <div class="modal fade effect-flip-vertical show" id="date_modal">
        <div class="modal-dialog modal-dialog-centered text-center" role="document">
            <div class="modal-content modal-content-demo">
                <div class="modal-header">
                    <h6 class="modal-title">Filter By Certain Period</h6>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <form action="{{route('admin.summary.index')}}" id="search_month_form" method="get">
                    <div class="modal-body">
                        <div class="p-5 mb-6 bg-white item2-gl-nav">
                            <div class="row">
                                <div class="col-md-6">
                                    <label class="mt-3 mb-sm-1" for="from"> from: </label>
                                    <div>
                                        <input type="date" class="form-control" name="start_date" id="from" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label class="mt-3 mb-sm-1" for="to"> to: </label>
                                    <div>
                                        <input type="date" class="form-control" name="end_date" id="to" required>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary" type="submit">Save</button>
                        <button class="btn btn-secondary" data-bs-dismiss="modal" type="button">Close</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@section('admin-js')

<script>
    $(function() {
        $('#month').on('change', function() {
            $("#search_month_form").submit();
        });
    });
</script>

@endsection