@extends('layout.app')

@section('content')
<div class="card">
    <div class="card-body">
        <form action="#" id="search">
            <h4 class="p-2 border-l">Reseller Payment Report</h4>

            <div class="row">
                <div class="col-md-2 col-sm-4">
                    <div class="form-group">
                        <label class="block text-gray-700 text-sm font-bold mb-2" for="from_date">
                            From Date
                        </label>
                        <div class="input-group date" id="searchFrom" data-target-input="nearest">
                            <input type="text" name="from_date" value="{{ $start->format('m/d/y') }}"
                                class="form-control datetimepicker-input"
                                data-toggle="datetimepicker" data-target="#searchFrom" autocomplete="off">
                        </div>
                    </div>
                </div>

                <div class="col-md-2 col-sm-4">
                    <div class="form-group">
                        <label class="block text-gray-700 text-sm font-bold mb-2" for="to_date">
                            To Date
                        </label>
                        <div class="input-group date" id="searchTo" data-target-input="nearest">
                            <input type="text" name="to_date" value="{{ $end->format('m/d/y') }}"
                                class="form-control datetimepicker-input"
                                data-toggle="datetimepicker" data-target="#searchTo" autocomplete="off">
                        </div>
                    </div>
                </div>

                <div class="col-md-2 col-sm-4">
                    <div class="form-group">
                        <label class='block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2'>Select Manager</label>
                        <select name="reseller_id" id="reseller_id" class="select2 form-control">
                            <option value="">All Reseller</option>
                            @foreach ($reseller as $r)
                                <option value="{{ $r->id }}">{{ $r->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                {{-- <div class="col-md-2 col-sm-4">
                    <div class="form-group">
                        <label class='block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2'>Select Sub-Manager/Pop</label>
                        <select name="pop_id" id="pop" class="select2 form-control">
                            <option value="">All Pops/Sub-manager</option>
                        </select>
                    </div>
                </div> --}}

                <div class="col-md-2 col-sm-4">
                    <div class="form-group">
                        <label class='block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2'>Entry By</label>
                        <select name="user_by" class="select2 form-control">
                            <option value="">Select User</option>
                            @forelse ($users as $user)
                                <option value="{{ $user->id }}">{{ $user->name }}</option>
                            @empty
                                <option value="">No User Found</option>
                            @endforelse
                        </select>
                    </div>
                </div>
                <div class="col-md-2 col-sm-4">
                    <div class="">
                        <label class='block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2'></label>
                        <button type="submit" id="paymentSearch" class="btn btn-primary w-100 mt-2"><i class="fa fa-search"></i> Search</button>
                    </div>
                </div>


            </div>
        </form>

        <div id="loader" style="display: none; margin-top: 10px;">
            <i class="fa fa-spinner fa-spin"></i> Loading...
        </div>

        <div id="result" class="mt-4"></div>
    </div>
</div>
@endsection

@section('ajax')
<script>
    $(function () {
        // Initialize select2
        $('.select2').select2();

        // Initialize datetime pickers (flatpickr or tempus dominus - use as per your setup)
        $('#searchFrom, #searchTo').datetimepicker({
            format: 'L'
        });

       

        // Handle search via AJAX
        $('#paymentSearch').on('click', function (e) {
            e.preventDefault();
            $("#loader").show();

            $.ajax({
                type: 'GET',
                url: '{{ route('resellerPaymentReportSearch') }}',
                data: $('#search').serialize(),
                success: function (result) {
                    $('#result').html(result);
                    $("#loader").hide();
                },
                error: function () {
                    $('#result').html('<div class="alert alert-danger">Something went wrong.</div>');
                    $("#loader").hide();
                }
            });
        });
    });
</script>
@endsection
