@extends('layouts.dashboard-app')
@section('main-content')
    <div class="content-body">
        <div class="container">
            <div class="row page-titles">
                <div class="col p-0">
                    <h4>Hello, <span>Welcome {{ auth()->user()->name }}</span></h4>

                </div>
                <div class="col p-0">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="javascript:void(0)">From</a>
                        </li>
                        <li class="breadcrumb-item active">Basic</li>
                    </ol>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            @if ($errors->any())
                                <div class="alert alert-danger" role="alert">
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                        <span aria-hidden="true">×</span>
                                    </button>

                                    @foreach ($errors->all() as $error)
                                        {{ $error }}<br />
                                    @endforeach
                                </div>
                            @endif

                            <form class="form-horizontal form-label-left input_mask" method="post" id="report_add" action="{{route('report.save')}}"
                                autocomplete="off">
                                @csrf
                                <div class="row">
                                    <div class="col-md-3 col-sm-6 col-xs-6 form-group">
                                        <div class="form-group">
                                            <label for="All Users">All Users</label>
                                            <select name="all_users" id="all_users" class="form-control all_users">
                                                <option value="" disabled selected>- Selected -</option>
                                                <option value="1">Yes</option>
                                                <option value="0">No</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-3 col-sm-6 col-xs-6 form-group">
                                        <div class="form-group">
                                            <label for="Users">Users</label>
                                            {{-- <select name="users" id="users" class="form-control users" required> --}}
                                            <select class="form-control js-example-basic-multiple select2 users"
                                                name="users[]" id="users" multiple>
                                                @foreach ($users as $user)
                                                    <option value="{{ $user->id }}">
                                                        {{ $user->id }} - {{ $user->name }} - {{ $user->role }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>


                                    <div class="col-md-3 col-sm-6 col-xs-6 form-group">
                                        <div class="form-group">
                                            <label for="Month">Month</label>
                                            <input class="form-control month" id="month" name="month" type="month"
                                                value="{{ old('month') }}">
                                        </div>
                                    </div>




                                </div>

                                <div class="form-group row">
                                    <div class="col-md-9 col-sm-9 col-xs-12 col-md-offset-3">
                                        <button id="submitBtn" class="btn btn-primary mt-2" aria-label="Submit filter">
                                            Get Data
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

            </div>

        </div>
        <!-- #/ container -->
    </div>
@endsection

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {


        // $("#submitBtn").click(function(e) {
        //     e.preventDefault(); // Prevent the form from submitting normally

        //     // Gather form data
        //     const all_users = $(".all_users").val();
        //     const users = $(".users").val();
        //     const month = $(".month").val();


        //     // Send AJAX request
        //     $.ajax({
        //         type: "POST",
        //         url: "{{ route('report.save') }}",
        //         data: {
        //             _token: "{{ csrf_token() }}", // CSRF token
        //             all_users: all_users,
        //             users: users,
        //             month: month,
        //         },
        //         success: function(response) {
        //             // console.log(response);
        //             alert("Data save successfully!");
        //             $("#report_add")[0].reset();
        //             // window.location.href = "/admin/revenue/index"
        //             // console.log(response);
        //         },
        //         error: function(xhr) {
        //             // alert("An error occurred while processing the request.");
        //             console.error(xhr.responseText);
        //         },
        //     });
        // });

    });
</script>