@extends("template.layouts.simple.master")
@section('content')
    <div class="page-body">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-header">
                            <form action="{{route("users-excel-export")}}" method="post">
                                @csrf
                                <div class="row">
                                    <div class="col-sm-3">
                                        <label for="">Select Role</label>
                                        <select name="roles" id="roles" class="form-select">
                                            <option value="">Choose..</option>
                                            @foreach($roles as $r)
                                                <option value="{{$r->name}}"
                                                >{{$r->name}}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-sm-2">
                                        <label for="">From</label>
                                        <input type="date" class="form-control" name="from_date">
                                    </div>
                                    <div class="col-sm-2">
                                        <label for="">To</label>
                                        <input type="date" class="form-control" name="to_date">
                                    </div>
                                    <div class="col-sm-2">
                                        <label for="">Select Interval</label>
                                        <select name="interval" id="interval" class="form-select">
                                            <option value="">Choose..</option>
                                            @foreach($intervals as $i)
                                                <option value="{{$i->no_of_days}}"
                                                >{{$i->description}}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-sm-3 mt-4">
                                        <button class="btn-success btn " name="excel_btn">
                                            Excel
                                        </button>
                                        <a href="{{route("users-index")}}" class="btn-danger btn ">
                                            Reload
                                        </a>
                                    </div>

                                </div>
                            </form>
                        </div>
                        <div class="card-body">
                            <div class="overflow-auto">
                                <table class="user_table table-bordered">
                                    <thead>
                                    <tr>
                                        <th>Sno</th>
                                        <th>Name</th>
                                        <th>Role</th>
                                        <th>Email</th>
                                        <th>Password</th>
                                        <th>Gender</th>
                                        <th>Mobile No</th>
                                        <th>Block Status</th>
                                        @can("edit user profile")
                                            <th>Action</th>
                                        @endcan
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($users as $u)
                                        <tr>
                                            <td>{{$u->id}}.</td>
                                            <td>{{$u->name}}</td>
                                            <td>
                                                @php
                                                    $user = \App\Models\User::findOrFail($u->id);
                                                    $role = $user->getRoleNames()
                                                @endphp
                                                @foreach($role as $r)
                                                    <div class="fw-bold ">
                                                        {{$r}}
                                                    </div>
                                                @endforeach
                                            </td>
                                            <td>{{$u->email}}</td>
                                            <td>{{$u->password2}}</td>
                                            <td>{{$u->gender}}</td>
                                            <td>{{$u->mobile_no}}</td>
                                            <td class="text-center">
                                                <div class="media-body">
                                                    <label class="switch">
                                                        <input type="checkbox" @if($u->status == 1)
                                                            checked
                                                               @endif class="active_inactive_status_checkbox"
                                                               data-id="{{$u->id}}"><span
                                                            class="switch-state"
                                                        ></span>
                                                    </label>
                                                </div>
                                                @if($u->status == 1)
                                                    <div class="text-center fw-bold text-success">Active</div>
                                                @else
                                                    <div class="text-center fw-bold text-danger">Block</div>
                                                @endif
                                            </td>
                                            <td>
                                                @can("edit user profile")
                                                    <a href="{{route("users-add" , ["key" =>0 , "id"=>$u->id])}}">
                                                        <i
                                                            class="fa fa-edit fs-4"></i>
                                                    </a>
                                                @endcan
                                                @can("delete users")
                                                    <i class="fs-4 fa fa-trash delete_btn" data-id="{{$u->id}}"></i>
                                                @endcan
                                            </td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                            <div>
                                {{{$users->links()}}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @include("master.notification")
    </div>
@endsection
{{--@include("")--}}
@section("scripts")
    @include("master.notification_show_hide")
    <script>
        $(document).ready(function () {

            let table = $(".user_table").DataTable({
                paging: false
            })


            function blockUserFunction() {
                $(".active_inactive_status_checkbox").change(function (e) {
                    e.preventDefault();
                    const id = $(this).data("id");
                    const checkbox = $(this);
                    let status = "";
                    if ($(this).is(':checked')) {
                        status = 1;
                    } else {
                        status = 0;
                    }
                    console.log(status)
                    Swal.fire({
                        title: 'Are you sure?',
                        text: "You won't be able to revert this!",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Yes'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            $.ajax({
                                url: "{{route('user-active-inactive-status-update')}}",
                                type: "POST",
                                data: {
                                    "_token": "{{ csrf_token() }}", // Add the CSRF token to the data
                                    "id": id,
                                    "status": status
                                },
                                success: function (data) {
                                    console.log(data);
                                    if (data.response == 1) {
                                        Swal.fire(
                                            'Done!',
                                            'Work Done Successfully.',
                                            'success'
                                        )
                                        location.reload();
                                    } else {
                                        Swal.fire({
                                            icon: 'error',
                                            title: 'Oops...',
                                            text: 'Something went wrong!',
                                        })
                                    }
                                }
                            })

                        } else {
                            $(checkbox).prop("checked", true);
                        }
                    })

                })

            }

            function deleteUserFunction() {
                $(".delete_btn").click(function (e) {
                    e.preventDefault();
                    const id = $(this).data("id");

                    Swal.fire({
                        title: 'Are you sure?',
                        text: "You won't be able to revert this!",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Yes, delete it!'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            $.ajax({
                                url: "{{route('destroy-user')}}",
                                type: "POST",
                                data: {
                                    "_token": "{{ csrf_token() }}", // Add the CSRF token to the data
                                    "id": id
                                },
                                success: function (data) {
                                    console.log(data);
                                    if (data.response == 1) {
                                        Swal.fire(
                                            'Deleted!',
                                            'Data has been deleted.',
                                            'success'
                                        )
                                        location.reload();
                                    } else {
                                        Swal.fire({
                                            icon: 'error',
                                            title: 'Oops...',
                                            text: 'Something went wrong!',
                                        })
                                    }
                                }
                            })

                        }
                    })

                })
            }

            $('#DataTables_Table_0_filter input').addClass("border border-dark");

            $('#DataTables_Table_0_filter input').on('keyup', function () {
                let searchVal = $(this).val();
                let filteredData = table.rows({
                    search: 'applied'
                }).data();
                let count = filteredData.length;
                if (count == 0) {
                    $.ajax({
                        url: "{{route("searching-in-users-datatable")}}",
                        type: "post",
                        data: {
                            "_token": "{{ csrf_token() }}", // Add the CSRF token to the data
                            "searchVal": searchVal
                        },
                        success: function (data) {
                            console.log(data)
                            if (data.response != 0) {
                                render_tr(data.response);
                            } else {
                                console.log("not found");
                            }
                        },
                        error: function (data) {
                            console.log(data);
                        }
                    })
                } else {
                    console.log("found");
                }
            })


            function render_tr(arr) {
                table.clear()
                arr.forEach((element) => {
                    console.log(element);
                    let status = "";
                    let checked = "";
                    if (element.status == 1) {
                        status = `<div class="text-center fw-bold text-success">Active</div>`;
                        checked = "checked"
                    } else {
                        status = `<div class="text-center fw-bold text-danger">Block</div>`;
                        checked = "";
                    }
                    let roles = "";
                    element.get_user_roles.forEach((r) => {
                        roles = r.name;
                    })

                    let editBtn = `
                          <a href="{{route("users-add" , ["key" =>0 , "id"=>'user_id'])}}">
                            <i class="fa fa-edit fs-4"></i>
                          </a>
                    `.replace("user_id", element.id);

                    let tr = `<tr>
                        <td>${element.id}</td>
                        <td>${element.name}</td>
                        <td>${roles}</td>
                        <td>${element.email}</td>
                        <td>${element.password2}</td>
                        <td>${element.gender}</td>
                        <td>${element.mobile_no}</td>
                        <td>
                            <div class="media-body">
                               <label class="switch">
                                   <input type="checkbox" class="active_inactive_status_checkbox" ${checked} data-id="${element.id}">
                                        <span class="switch-state" ></span>
                               </label>
                            </div>
                            ${status}
                        </td>
                        <td>
                        @can("edit user profile")
                    ${editBtn}
                        @endcan
                    @can("delete users")
                    <i class="fs-4 fa fa-trash delete_btn" data-id="${element.id}"></i>
                                @endcan
                    </td>
                </tr>`;
                    table.row.add($(tr)).draw();
                    deleteUserFunction();
                    blockUserFunction();
                })
            }

            $("#roles").select2({
                width: "100%",
                dropdownParent: $("#roles").parent("div"),
                placeholder: "Select Role",
            })


            deleteUserFunction();
            blockUserFunction();
        })
    </script>

@endsection