@extends('layout._default')

@section('body-con')
   
@section('styles')
    <style>
        .cursor-pointer-class:hover {
            cursor: pointer;
        }
    </style>
@endsection
@section('title')
    Influencer Users
@endsection 
    {{-- @section('breadcrumbs')
        {{ Breadcrumbs::render('user-management.users.index') }}
    @endsection --}}

    <div class="card">
        @include('pages.site-users.partial-nav')
    </div>
    <br><br>
    <div class="card">

        <div class="card-body py-4">

            <div class="card-title">
                <div class="text-end my-1 d-flex flex-wrap">
                    <div class="form-group p-1">
                        <select name="" id="filter" class="form-control form-control-solid w-200px ps-13 cursor-pointer-class" onchange="filterData()">
                            <option value="">Filter By</option>
                            <option value="revenue">Revenue</option>
                            <option value="collaborations">No Of Collaborations</option>
                        </select>
                    </div>

                    <div class="form-group p-1">
                        <select name="" id="payment-method" class="form-control form-control-solid w-200px ps-13 cursor-pointer-class" onchange="filterData()">
                            <option value="">Payment Methods</option>
                            @foreach($paymentMethods as $paymentMethod)
                                <option value="{{$paymentMethod}}">{{$paymentMethod}}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group p-1">
                        <select name="" id="status" class="form-control form-control-solid w-200px ps-13 cursor-pointer-class" onchange="filterData()">
                            <option value="">Status</option>
                            <option value="active">Active</option>
                            <option value="inactive">Inactive</option>
                        </select>
                    </div>

                    <div class="form-group p-1">
                        <input type="text" class="form-control form-control-solid w-200px ps-13" placeholder="Start Date" id="active_start_date" onfocus="(this.type='date')"
                        onblur="(this.type='text')" onchange="filterData()"/>
                    </div>

                    <div class="form-group p-1">
                        <input type="text" class="form-control form-control-solid w-200px ps-13" placeholder="End Date" id="active_end_date" onfocus="(this.type='date')"
                        onblur="(this.type='text')" onchange="filterData()"/>
                    </div>

                   <div class="form-group p-1">
                        <select name="" id="featured" class="form-control form-control-solid w-200px ps-13 cursor-pointer-class" onchange="filterData()">
                            <option value="">Featured</option>
                            <option value="yes">Yes</option>
                            <option value="no">No</option>
                        </select>
                    </div>

                    {{-- <div class="form-group p-1">
                        <select name="" id="deleted" class="form-control form-control-solid w-200px ps-13 cursor-pointer-class" onchange="filterData()">
                            <option value="">Deleted</option>
                            <option value="yes">Yes</option>
                            <option value="no">No</option>
                        </select>
                    </div> --}}
                </div>

                <!--begin::Search-->
                <div class="d-flex align-items-center position-relative my-1">
                    {!! getIcon('magnifier', 'fs-3 position-absolute ms-5') !!}
                    <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::Table-->
            <div class="table-responsive">
                {{ $dataTable->table() }}
                <div id="total_records"></div>
            </div>
            <!--end::Table-->
        </div>
    </div>
    @include('livewire.site-users.edit-site-user-modal')
@endsection

@push('scripts')
    {{ $dataTable->scripts() }}
    <script>
        var recordType = 'influencer';
        document.getElementById('mySearchInput').addEventListener('keyup', function () {
            window.LaravelDataTables['site-users-table-'+recordType].search(JSON.stringify({"search": document.getElementById('mySearchInput').value,"filter":document.getElementById('filter').value,
             "status": document.getElementById('status').value, "active_start_date" : document.getElementById('active_start_date').value, "active_end_date" : document.getElementById('active_end_date').value, 
            "payment_method" : document.getElementById('payment-method').value, "featured" : document.getElementById('featured').value,
            //  "deleted" : document.getElementById('deleted').value
            })).draw();
        });

        function editUser(id)
        {
            $.ajax({
                type: "GET",
                url: "/admin/site/users/edit/"+id,
                success: function(response)
                {
                    if(response.status == 1)
                    {
                        $("#edit-site-user-modal-body").empty();
                        $("#edit-site-user-modal-body").append(response.data);
                        $("#kt_modal_edit_site_user").modal("show");
                    }
                    
                }
            })
        }

        $(document).on("click", "#edit-site-user-submit-btn",function(e) {
            e.preventDefault();
            console.log('ss');
            var username = $("#edit_site_user_name").val();
            var error = false;
            if(username == "") {
                $("#edit_site_user_name_error").html('Username is required!');
                error = true;
            }

            if(error) {
                return false;
            }

            $("#kt_modal_edit_site_user_form").submit();
        });

        function filterData()
        {
            var startDateInput = document.getElementById('active_start_date');
            var endDateInput = document.getElementById('active_end_date');
            
            // Parse the date strings to Date objects
            var startDate = new Date(startDateInput.value);
            var endDate = new Date(endDateInput.value);

            // Compare start date with end date
            if (startDate > endDate) {
                Swal.fire({
                    text: "Start Date Cannot Be Greater Than End Date",
                    icon: "error",
                    buttonsStyling: false,
                    confirmButtonText: "Close!",
                    customClass: {
                        confirmButton: "btn btn-primary"
                    }
                });
                return;
                // Clear the end date input value
                endDateInput.value = '';
            }

            // document.getElementById('mySearchInput').addEventListener('keyup', function () {
            window.LaravelDataTables['site-users-table-'+recordType].search(JSON.stringify({"search": document.getElementById('mySearchInput').value,"filter":document.getElementById('filter').value,
             "status": document.getElementById('status').value,  "active_start_date" : document.getElementById('active_start_date').value, "active_end_date" : document.getElementById('active_end_date').value, 
             "payment_method" : document.getElementById('payment-method').value, "featured" : document.getElementById('featured').value,  
            //  "deleted" : document.getElementById('deleted').value
            })).draw();
        // });
        }

        function deleteUser(id)
        {
            var url = "/admin/site/users/delete/"+id;
            Swal.fire({
                html: `Are You Sure You Want To Delete This User ? `,
                icon: "info",
                buttonsStyling: false,
                showCancelButton: true,
                confirmButtonText: "Confirm!",
                cancelButtonText: 'Nope, cancel it',
                customClass: {
                    confirmButton: "btn btn-primary",
                    cancelButton: 'btn btn-danger'
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    window.location.href = url;
                }
            });
            
        }

        function undoDelete(id)
        {
            var url = "/admin/site/users/recover/"+id;
            Swal.fire({
                html: `Are You Sure You Want To Recover This User ? `,
                icon: "info",
                buttonsStyling: false,
                showCancelButton: true,
                confirmButtonText: "Confirm!",
                cancelButtonText: 'Nope, cancel it',
                customClass: {
                    confirmButton: "btn btn-primary",
                    cancelButton: 'btn btn-danger'
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    window.location.href = url;
                }
            });
        }
    </script>

        
@endpush