@extends('layout._default')

@section('body-con')
   
@section('title')
    User Statistics
@endsection 
    {{-- @section('breadcrumbs')
        {{ Breadcrumbs::render('user-management.users.index') }}
    @endsection --}}

    <div class="card">
        <!--begin::Card header-->
        <div class="card-header border-0 pt-6">
            <!--begin::Card title-->
            <div class="card-title">
                <!--begin::Search-->
                <div class="d-flex align-items-center position-relative my-1">
                    {!! getIcon('magnifier', 'fs-3 position-absolute ms-5') !!}
                    <input type="text" class="form-control form-control-solid w-250px ps-13" placeholder="Search user" id="mySearchInput"/>
                </div>
                <!--end::Search-->
            </div>
            <!--begin::Card title-->

            <!--begin::Card title-->
            <div class="card-title">
                <!--begin::Search-->
                <div class="d-flex align-items-center position-relative my-1">
                    <input type="text" class="form-control form-control-solid w-200px ps-13" placeholder="Start Date" id="start_date" onfocus="(this.type='date')"
                    onblur="(this.type='text')" onchange="filterData()"/>
                </div>
                <!--end::Search-->
            </div>
            <!--begin::Card title-->

            <!--begin::Card title-->
            <div class="card-title">
                <!--begin::Search-->
                <div class="d-flex align-items-center position-relative my-1">
                    <input type="text" class="form-control form-control-solid w-200px ps-13" placeholder="End Date" id="end_date" onfocus="(this.type='date')"
                    onblur="(this.type='text')" onchange="filterData()"/>
                </div>
                <!--end::Search-->
            </div>
            <!--begin::Card title-->

            <!--begin::Card title-->
            <div class="card-title">
                <!--begin::Search-->
                <div class="d-flex align-items-center position-relative my-1 form-group">
                    {{-- {!! getIcon('magnifier', 'fs-3 position-absolute ms-5') !!} --}}
                    <select name="status" id="status" aria-label="Select a Status" data-placeholder="Select a status..." class="form-select form-select-solid"
                    onchange="filterData()" >
                        <option value="">Active/Inactive</option>
                        <option value="cancelled">Inactive</option>
                        <option value="active">Active</option>
                    </select>
                    {{-- <input type="text" data-kt-user-table-filter="search" class="form-control form-control-solid w-250px ps-13" placeholder="Search user" id="mySearchInput"/> --}}
                </div>
                <!--end::Search-->
            </div>
            <!--begin::Card title-->

             <!--begin::Card title-->
             <div class="card-title">
                <!--begin::Search-->
                <div class="d-flex align-items-center position-relative my-1 form-group">
                    {{-- {!! getIcon('magnifier', 'fs-3 position-absolute ms-5') !!} --}}
                    <select name="paid_status" id="paid_status" aria-label="Select a Status" data-placeholder="Select a status..." class="form-select form-select-solid"
                    onchange="filterData()" >
                        <option value="">Paid/Unpaid</option>
                        <option value="paid">Paid</option>
                        <option value="unpaid">Unpaid</option>
                    </select>
                    {{-- <input type="text" data-kt-user-table-filter="search" class="form-control form-control-solid w-250px ps-13" placeholder="Search user" id="mySearchInput"/> --}}
                </div>
                <!--end::Search-->
            </div>
            <!--begin::Card title-->

            <!--begin::Card title-->
            <div class="card-title">
                <!--begin::Search-->
                <div class="d-flex align-items-center position-relative my-1 form-group">
                    {{-- {!! getIcon('magnifier', 'fs-3 position-absolute ms-5') !!} --}}
                    <select name="medium" id="medium" aria-label="Select a Medium" data-placeholder="Select a medium..." class="form-select form-select-solid"
                    onchange="filterData()" >
                        <option value="">Medium</option>
                        <option value="iOS">IOS</option>
                        <option value="android">Android</option>
                        <option value="web">Web</option>
                    </select>
                    {{-- <input type="text" data-kt-user-table-filter="search" class="form-control form-control-solid w-250px ps-13" placeholder="Search user" id="mySearchInput"/> --}}
                </div>
                <!--end::Search-->
            </div>
            <!--begin::Card title-->


            <!--begin::Card toolbar-->
            <div class="card-toolbar">
                <!--begin::Toolbar-->
                {{-- <div class="d-flex justify-content-end" data-kt-user-table-toolbar="base">
                    <!--begin::Add user-->
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_add_user">
                        {!! getIcon('plus', 'fs-2', '', 'i') !!}
                        Add User
                    </button>
                    <!--end::Add user-->
                </div> --}}
                <!--end::Toolbar-->

                <!--begin::Modal-->

                <!--end::Modal-->
            </div>
            <!--end::Card toolbar-->
        </div>
        <!--end::Card header-->

        <!--begin::Card body-->
        <div class="card-body py-4">
            <!--begin::Table-->
            <div class="table-responsive">
                {{ $dataTable->table() }}
                <div id="total_records"></div>
            </div>
            <!--end::Table-->
        </div>
        <!--end::Card body-->
    </div>
    
    {{-- @include('livewire.user.add-user-modal') --}}
    @push('scripts')
        {{ $dataTable->scripts() }}
        <script>
            KTMenu.init();
            document.getElementById('mySearchInput').addEventListener('keyup', function () {
                // window.LaravelDataTables['users-table-new'].search(this.value).draw();
                window.LaravelDataTables['users-table-new'].search(JSON.stringify({"search": document.getElementById('mySearchInput').value,"status":document.getElementById('status').value,
                "paid_status":document.getElementById('paid_status').value,  "start_date": document.getElementById('start_date').value, "end_date": document.getElementById('end_date').value, "medium": document.getElementById('medium').value})).draw();

            });

            function filterData()
            {
                window.LaravelDataTables['users-table-new'].search(JSON.stringify({"search": document.getElementById('mySearchInput').value,"status":document.getElementById('status').value,
                     "paid_status":document.getElementById('paid_status').value, "start_date": document.getElementById('start_date').value, "end_date": document.getElementById('end_date').value, "medium": document.getElementById('medium').value})).draw();
            }
        </script>
    @endpush

@endsection