@extends("layouts.admin.app")
@section("page-title")
{{__("create-user-points")}}
@endSection
@section("page-nav-title")
<div class="app-title">
    <div>
        <h1><i class="fa fa-dashboard"></i>{{__("users-points")}}</h1>
        <p>{{__("all-users-points")}}</p>
    </div>

    <ul class="app-breadcrumb breadcrumb">
        <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
        <li class="breadcrumb-item"><a href="#">{{__("Dashboard")}}</a></li>
        <li class="breadcrumb-item"><a href="{{route("admin.points.index")}}">{{__("users-points")}}</a></li>
        <li class="breadcrumb-item"><a href="#">{{__("Create")}}</a></li>
    </ul>
</div>
@endsection

@section("css-links")
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;600;700;800;900&display=swap"
    rel="stylesheet">
@if(\Illuminate\Support\Facades\App::getLocale() == "en")
<style>
.input-hidden {
    position: absolute;
    left: -9999px;
}
</style>
@else
<style>
.input-hidden {
    position: absolute;
    right: -9999px;
}
</style>
@endif
<style>
input[type=radio]:checked+label {
    border: 1px solid #fff;
    background: #2196F3;
    color: #fff;
}

input[type=radio]+label {
    border: 1px solid #2196F3;
    width: 150px;
    height: 150px;
    transition: 500ms all;
    border-radius: 12px;
    font-weight: bold;
    text-align: center;
    padding: 14% 15px;
    font-size: 1rem;
    font-family: 'Cairo', sans-serif;
}
</style>
@endsection

@section("content")

<div class="row">
    <div class="col-lg-10 m-auto">
        <div class="buttons-group">
            <a href="{{route("admin.points.index")}}" class="btn btn-secondary"><i
                    class="fa fa-chevron-circle-left"></i>{{__("Back")}} </a>
        </div>
        <div class="tile">
            <h3 class="tile-title">{{__("users-points")}}</h3>
            <div class="tile-body">
                <form method="post" id="sendForm" action="{{route("admin.points.store")}}" enctype="multipart/form-data">
                    @csrf
                    <div class="row">

                        {{-- <div class="col-lg-6 showUser">
                            <div class="form-group">
                                <label for="exampleSelect1">{{__("Users")}}</label>
                                <select class="form-control change-user userData UsersTypesSelect" id="users"
                                    name="user">
                                    <option></option>
                                    @foreach ($users as $user)
                                    <option value="{{$user->id}}" @if(old('user')==$user->id) selected
                                        @endif>{{$user->first_name." ".$user->last_name}}</option>
                                    @endforeach
                                </select>
                            </div>
                            @error("user")
                            <div class="input-error">{{$message}}</div>
                            @enderror
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label class="control-label">{{__("user-points")}} </label>
                                <input class="form-control" type="number" name="user_points" id="user_points"
                                    placeholder="{{__("points value")}}" value="{{old('user_points')}}" readonly>
                            </div>
                            @error("user_points")
                            <div class="input-error">{{$message}}</div>
                            @enderror
                        </div> --}}
                        <div class="col-lg-5">
                            <div class="form-group">
                                <label class="control-label">{{__("Enter the Amount")}} </label>
                                <input class="form-control" type="number" name="amount" placeholder="Enter the Amount"
                                    value="{{old('amount')}}">
                            </div>
                            @error("amount")
                            <div class="input-error">{{$message}}</div>
                            @enderror
                        </div>
                        <div class="col-lg-7">
                            <div class="table-responsive" id="form_status">
                                <table class="table table-hover table-bordered text-center" id="sampleTable">
                                    <thead>
                                    <tr>
                                        <th>
                                            <input type="checkbox" id="select-all"> <!-- Select All Checkbox -->
                                            <label for="select-all">{{ __("Select All") }}</label>
                                        </th>
                                        <th>{{ __("Phone Number") }}</th>
                                        <th>{{ __("points") }}</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($users as $user)
                                        <tr>
                                            <td>
                                                <input type="checkbox" class="user-checkbox form-control" name="id[]" value="{{ $user->id }}">
                                            </td>
                                            <td>
                                                {{ $user->first_name . " " . $user->last_name . " (" . ($user->client ? $user->client->phone_number : ($user->vendor ? $user->vendor->phone_number : ($user->driver ? $user->driver->phone_number : Null))) . ")" }}
                                            </td>
                                            <td>
                                                {{ $user->total_points }}
                                            </td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                                @error("id")
                                <div class="input-error text-danger">{{ __("Must select at least one") }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    {{-- <input type="hidden" name="selected_ids" id="selected_ids"> --}}
                    <div class="tile-footer">
                        <button type="submit" class="btn btn-primary">
                            <i class="fa fa-fw fa-lg fa-check-circle"></i> {{__("Create")}}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection

@section("scripts")


<script type="text/javascript">
$(document).ready(function() {
    $(".change-user").on('change', function() {
        var user_id = $(this).val();
        if (user_id) {
            $.ajax({
                url: "{{ route('ajax.points.GetUser') }}",
                type: "GET",
                data: {
                    "user_id": user_id
                },
                success: function(response) {
                    $('#user_points').val(response.data);
                },
            });
        }
    });
  
    const table = $('#sampleTable').DataTable();

        // Track selected rows across all pages
        let selectedIds = new Set();

        // Handle "Select All" checkbox (for all pages)
        $('#select-all').on('click', function() {
            const isChecked = this.checked;
            
            // Toggle all checkboxes (across all pages)
            table.rows().every(function() {
                const dataId = $(this.node()).find('.user-checkbox').val();
                if (isChecked) {
                    selectedIds.add(dataId);
                } else {
                    selectedIds.delete(dataId);
                }
                $(this.node()).find('.user-checkbox').prop('checked', isChecked);
            });

            // Sync the "Select All" checkbox with the state of the selection
            $('#select-all').prop('checked', isChecked);
        });

        // Handle individual checkbox clicks (for a specific row)
        $('#sampleTable tbody').on('change', '.user-checkbox', function() {
            const dataId = $(this).val();

            // Add or remove the selected ID from the set
            if (this.checked) {
                selectedIds.add(dataId);
            } else {
                selectedIds.delete(dataId);
            }

            // If all rows are checked, update "Select All" checkbox
            const allChecked = table.rows().every(function() {
                const rowId = $(this.node()).find('.user-checkbox').val();
                if (!selectedIds.has(rowId)) {
                    return false;
                }
            }).length === table.rows().count();

            // Set the "Select All" checkbox based on whether all rows are selected
            $('#select-all').prop('checked', allChecked);
        });

        // To send selectedIds to the controller when the form is submitted
        $('#sendForm').on('submit', function(event) {
            event.preventDefault();

            // Append the selected IDs as hidden input field before form submission
            $('<input />').attr('type', 'hidden')
                .attr('name', 'selectedUserIds')
                .attr('value', Array.from(selectedIds).join(','))
                .appendTo('#sendForm');
            
            // Submit the form
            this.submit();
        });

});

</script>
<script type="text/javascript" src="{{asset("assets/js/plugins/select2.min.js")}}"></script>
<script type="text/javascript" src="{{asset("assets/js/plugins/jquery.dataTables.min.js")}}"></script>
<script type="text/javascript" src="{{asset("assets/js/plugins/dataTables.bootstrap.min.js")}}"></script>
{{-- <script type="text/javascript">$('#sampleTable').DataTable();</script> --}}
<script type="text/javascript">
$(".UsersTypesSelect").select2({
        placeholder: "{{__('select-user')}}",
        width: "100%",
    });
</script>
@endsection