@extends('partials.main')
<!-- page title -->
@section('title')
Users
@endsection

@section('content')
<style>
    .modalb {
        background: #29aae3;
        color: white;
    }

    .modalb:hover {
        background: #0293d4;
        color: white;
    }



    .custom-search1 {
        border-radius: 20px;
        background: #ecf0fa;
        border: 1px solid #ecf0fa;
    }

    .custom-search .bt {
        margin-left: -35px;
        margin-top: 12px;
    }

</style>

<!-- breadcrumb -->
<div class="breadcrumb-header justify-content-between">
    <nav class="breadcrumb-4">
        <ol class="breadcrumb breadcrumb-style1">
            <li class="breadcrumb-item">
                <a href="{{ route('dashboard') }}">Dashboard</a>
            </li>
            <li class="breadcrumb-item active">users List</li>
        </ol>

    </nav>
    <div class="text-right">
        <a href="" role="button" class="btn  modalb p-1 px-2"><i class="mdi mdi-plus"></i> Add
            User</a>
    </div>
</div>
<!-- breadcrumb -->


<div class="card">
    <div class="card-body">
        <div class="container">
            <div class="row ">
                <div class="col-4 col-lg-2 "><input type="search" class="custom-search form-control "
                        placeholder="Search by name...">
                </div>
                <div class="col-4 col-lg-2 ">
                    <select name="" id="" required class=" custom-search form-control">
                        <option value="" selected disabled>Select Position</option>
                        <option value="">Federal </option>
                        <option value="">Provincial </option>
                        <option value="">Local Community </option>
                        <option value="">Other </option>
                    </select>
                </div>
                <div class="col-4 col-lg-2">
                    <select name="" id="" required class="custom-search form-control">
                        <option value="" selected disabled>Select Status</option>
                        <option value="">Pending </option>
                        <option value="">Active </option>
                        <option value="">Decline </option>
                    </select>
                </div>
                <div class="col-4 col-lg-2 ">
                    <select name="" id="" required class="custom-search form-control">
                        <option value="" selected disabled>Select State</option>
                        <option value="">Alberta </option>
                        <option value="">British Columbia </option>
                        <option value="">Manitoba </option>
                        <option value="">Labrador </option>
                        <option value="">Ontario </option>
                        <option value="">Saskatchewan </option>
                    </select>
                </div>
                <div class="col-4 col-lg-2 ">
                    <button class="btn btn-outline-danger btn-block "><i
                            class="fe fe-search"></i>
                        Filter</button>
                    </div>
                <div class="col-4 col-lg-2 ">
                    <button class="btn btn-danger btn-block">
                        Reset</button>
                    </div>
            </div>
        </div>
    </div>
</div>


<!-- row opened -->
<div class="row">
    <div class="col-sm-12 col-xl-4 col-lg-6 col-md-6 ">
        <div class="card user-wideget user-wideget-widget widget-user">
            <div class="widget-user-header modalb">
                <h3 class="widget-user-username">Vivian Barbot
                    <span style="float:right; font-size:12px;">
                        <a href="" title="Edit Request" class=" text-white "><i
                                class="far fa-edit"></i>
                        </a>
                        <a href="javascript:;" class="text-white btnDelete">
                            <i class="far fa-trash-alt"></i>
                        </a>
                    </span>
                </h3>
                <h5 class="widget-user-desc">Mayor</h5>
                <span class="badge rounded-pill bg-danger">Decline</span>
            </div>
            <div class="widget-user-image">
                <img src="../../assets/img/faces/17.jpg" class="brround" alt="User Avatar">
            </div>
            <div class="user-wideget-footer">
                <div class="row">
                    <div class="col-sm-4 border-right">
                        <div class="description-block">
                            <h5 class="description-header">$ 3,200</h5>
                            <span class="description-text">doantions</span>
                        </div>
                    </div>
                    <div class="col-sm-4 border-right">
                        <div class="description-block">
                            <h5 class="description-header"><i class="ti-user"></i> 1,300</h5>
                            <span class="description-text">members</span>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="description-block">
                            <h5 class="description-header">35</h5>
                            <span class="description-text">followers</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<!-- /row -->

<div class="row">
    <div class="col-4"></div>
    <div class="col-4">
        <ul class="pagination  mb-3 flex-wrap">
            <li class="page-item page-prev disabled">
                <a class="page-link" href="#" tabindex="-1">Prev</a>
            </li>
            <li class="page-item active"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item"><a class="page-link" href="#">4</a></li>
            <li class="page-item"><a class="page-link" href="#">5</a></li>
            <li class="page-item"><a class="page-link" href="#">6</a></li>
            <li class="page-item page-next">
                <a class="page-link" href="#">Next</a>
            </li>
        </ul>
    </div>
    <div class="col-4"></div>
</div>



<!-- Edit users Modal -->
<div class="modal" id="editusersmodal">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content modal-content-demo">
            <div class="modal-body pd-20 pd-sm-40">
                <button type="button" class="close pos-absolute t-15 r-20 tx-26" data-bs-dismiss="modal"
                    aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h5 class="modal-title mg-b-5">Edit Account</h5>
                <p class="mg-b-20">Edit user information.</p>
                <form action="" id='editusers' class='mt-3'>
                    <div class="form-group">
                        <select name="" id="" class="form-control" required>
                            <option value="" selected disabled>--select status--</option>
                            <option value="">Active</option>
                            <option value="">inactive</option>
                            <option value="">Pending</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <select name="" id="" class="form-control" required>
                            <option value="" disabled selected>-- Please select position --</option>
                            <option value="">Mayor</option>
                            <option value="">Reeve</option>
                            <option value="">Councilor</option>
                            <option value="">MLA</option>
                            <option value="">School Board</option>
                            <option value="">Trustee</option>
                            <option value="">Federal Senate</option>
                            <option value="">Federal Member of Parliament</option>
                            <option value="">Indigenous Chef</option>
                            <option value="">Indigenous Councilor</option>
                        </select>
                    </div>
                    <button class="btn modalb btn-block" id="btnSubmit"> <i class="fa fa-spinner editspin"
                            style="display:none;"></i>Edit user</button>
                </form>
            </div>
        </div>
    </div><!-- modal -->


    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.1.10/dist/sweetalert2.all.min.js"></script>

    <script type="text/javascript">
        // Delete

        $(document).on('click', '.btnDelete', function (e) {
            var users = $(this).attr('id');
            Swal.fire({
                    title: "Are you sure?",
                    text: "You will not be able to recover this user!",
                    type: "warning",
                    buttons: true,
                    confirmButtonColor: "#ff5e5e",
                    confirmButtonText: "Yes, delete it!",
                    closeOnConfirm: false,
                    dangerMode: true,
                    showCancelButton: true
                })
                .then((deleteThis) => {
                    if (deleteThis.isConfirmed) {
                        $.ajax({
                            url: '',
                            type: "GET",
                            dataType: "JSON",
                            data: {
                                users: users

                            },
                            success: function (response) {

                                if (response["status"] == "fail") {
                                    Swal.fire("Failed!", "Failed to delete users.",
                                        "error");
                                } else if (response["status"] == "success") {
                                    Swal.fire("Deleted!", "users has been deleted.",
                                        "success");

                                    // Using .reload() method.
                                    location.reload();
                                }
                            },
                            error: function (error) {
                                console.log(error);
                            },
                            async: false
                        });
                    } else {
                        Swal.close();
                    }
                });
        });

        //  ADD users
        $("#addusers").on('submit', (function (e) {
            // alert('asd');
            e.preventDefault();
            $.ajax({
                url: "",
                type: "post",
                data: new FormData(this),
                dataType: "JSON",
                processData: false,
                contentType: false,
                cache: false,
                beforeSend: function () {
                    $("#btnSubmit").attr('disabled', true);
                    $(".usersspin").css('display', 'inline-block');
                },
                complete: function () {
                    $("#btnSubmit").attr('disabled', false);
                    $(".usersspin").css('display', 'none');
                },
                success: function (response) {
                    console.log(response)
                    if (response["status"] == "fail") {
                        toastr.error('Not Found', response["msg"])
                    } else if (response["status"] == "success") {
                        toastr.success('Found', response["msg"])
                        $("#addusers")[0].reset();
                    }
                },
                error: function (error) {
                    console.log(error);
                }
            });
        }));

        function disableAlert(alr) {
            $("#" + alr).css("display", "none");
        }

        // edit users
        $("#editusers").on('submit', (function (e) {
            // alert('asd');
            e.preventDefault();
            $.ajax({
                url: "",
                type: "post",
                data: new FormData(this),
                dataType: "JSON",
                processData: false,
                contentType: false,
                cache: false,
                beforeSend: function () {
                    $("#btnSubmit").attr('disabled', true);
                    $(".editspin").css('display', 'inline-block');
                },
                complete: function () {
                    $("#btnSubmit").attr('disabled', false);
                    $(".editspin").css('display', 'none');
                },
                success: function (response) {
                    console.log(response)
                    if (response["status"] == "fail") {
                        toastr.error('Not Found', response["msg"])
                    } else if (response["status"] == "success") {
                        toastr.success('Found', response["msg"])
                        $("#editusers")[0].reset();
                    }
                },
                error: function (error) {
                    console.log(error);
                }
            });
        }));

        function disableAlert(alr) {
            $("#" + alr).css("display", "none");
        }

    </script>




    @endsection