@extends('admin.admin')
@section('adminContent')
    <!-- Bread crumb and right sidebar toggle -->
    <!-- ============================================================== -->
    <div class="row page-titles">
        <div class="col-md-5 align-self-center">
            <h3 class="text-themecolor">Event List</h3>
        </div>
        <div class="text-right col-md-7" style="line-height: 4.5;">
            <a class=" waves-effect waves-light btn-warning btn" href="{{ URL::to('admin/addMembership') }}">Add Membership</a>
        </div>

        <div>
            <button class="right-side-toggle waves-effect waves-light btn-inverse btn btn-circle btn-sm pull-right m-l-10"><i
                    class="ti-settings text-white"></i></button>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- End Bread crumb and right sidebar toggle -->
    <!-- ============================================================== -->
    <!-- ============================================================== -->
    <!-- Container fluid  -->
    <!-- ============================================================== -->
    <div class="container-fluid">


        <div class="row">
            @if ($errors->any())
                <p class="alert alert-danger">
                    {{ $errors }}
                </p>
            @endif
            <div class="col-12">
                <div class="card card-default">
                    <div class="card-header">
                        <div class="card-actions">
                            <a class="" data-action="collapse"><i class="ti-minus"></i></a>
                            <a class="btn-minimize" data-action="expand"><i class="mdi mdi-arrow-expand"></i></a>
                            <a class="btn-close" data-action="close"><i class="ti-close"></i></a>
                        </div>
                        <h4 class="card-title m-b-0">Membership List</h4>
                    </div>
                    <div class="card-body collapse show">
                        <div class="table-responsive">
                            <table class="table product-overview">
                                <thead>
                                    <tr>
                                        <th>Image</th>
                                        <th>Plan</th>
                                        <th>Price</th>
                                        <th>Label</th>
                                        <th>Created Date</th>
                                        <th>Status</th>
                                        <th class="tdaction">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @include('./../partial/filter/filter_membership_list')
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- End Container fluid  -->
    <!-- ============================================================== -->


    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="text-center">Edit Membership</h3>
                </div>
                <form action="{{ url('admin/edit-membership') }}" enctype="multipart/form-data" method="post">
                    @csrf
                    @method('PUT')
                    <div class="modal-body">
                        <div class="mb-3">
                            <div class="form-group">
                                <label class="control-label">Plan</label>
                                <input type="text" name="plan" id="plan" class="form-control" />
                                <input type="text" name="id" id="id" hidden class="form-control" />
                            </div>
                            <div class="form-group">
                                <label class="control-label">Price</label>
                                <input type="text" name="price" id="price" class="form-control">
                            </div>
                            <div class="form-group">
                                <label class="control-label">Label</label>
                                <input type="text" name="price_label" id="price_label" class="form-control" />
                            </div>
                            <div class="form-group">
                                <label class="control-label">Select Images</label>
                                <input type="file" name="image" class="form-control">
                                <img src="" id="image" width="80" height="80" title="privious photo"
                                    alt="">
                            </div>
                            <div class="form-check my-3 form-switch">
                                <input class="form-check-input" name="status" type="checkbox" value="1"
                                    id="flexSwitchCheckChecked" role="switch">
                                <!-- <input type="checkbox" name="status" id="flexSwitchCheckChecked" class="js-switch" data-color="#ffb22b" value="active" data-size="small" /> -->
                                <label class="form-check-label" for="flexSwitchCheckChecked">Active</label>
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-close btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Update</button>
                    </div>
            </div>
            </form>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            $(document).on('click', '.pagination a', function(event) {
                event.preventDefault();
                var page = $(this).attr('href').split('page=')[1];
                fetch_data(page);
            });

            function fetch_data(page) {
                $.ajax({
                    type: 'get',
                    url: "/admin/membership-list?page=" + page,
                    success: function(data) {
                        console.log(data)
                        if (data.data) {
                            $('tbody').empty();
                            $("tbody").html(data.data);
                        } else {
                            $("tbody").html(
                                '  <tr><td colspan="16" class="text-center"> No Records Found !</td></tr>'
                            );
                        }
                    },
                    error: function(error) {
                        console.log(error);
                    }


                });
            }


            $('#searchuser').keyup(function(e) {
                e.preventDefault();
                var formData = $('#searchuser').val();
                $.ajax({
                    type: 'get',
                    url: "/admin/membership-list",
                    data: {
                        'search': formData
                    },
                    success: function(data) {
                        console.log(data)
                        if (data.data) {
                            $('tbody').empty();
                            $("tbody").html(data.data);
                        } else {
                            $("tbody").html(
                                '  <tr><td colspan="16" class="text-center"> No Records Found !</td></tr>'
                            );
                        }
                    },
                    error: function(error) {
                        console.log(error);
                    }


                });
            });
            $(document).on('click', '.editBtn', function() {
                let user_id = $(this).val();
                $('#exampleModal').modal('show');
                $.ajax({
                    type: 'get',
                    url: "get-membership/" + user_id,
                    success: function(response) {
                        $('#plan').val(response.plan);
                        $('#price').val(response.price);
                        $('#price_label').val(response.price_label);
                        $('#image').attr('src', "{{ asset('storage/membership') }}" + "/" +
                            response.image);
                        if (response.status == 1) {
                            $('#flexSwitchCheckChecked').attr('checked', 'true');
                        } else {
                            $('#flexSwitchCheckChecked').removeAttr('checked');
                        }
                        $('#id').val(response.id);
                    }
                });
            })
            $('.btn-close').on('click', function() {
                $('#exampleModal').modal('hide');
            });
        })
    </script>
@stop