@extends('backend.layouts.app')
@section('content')
    <div class="container">
        <div class="block">
            <div class="block-header block-header-default">
                <h3 class="block-title"><b>Member Table</b></h3>
                <a data-toggle="modal" data-target="#modal-large" class="btn btn-sm btn-alt-primary">
                    <i class="fa fa-plus mr-5"></i>Add Member
                </a>
            </div>
            <div class="block-content block-content-full">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped table-vcenter js-dataTable-full">
                        <thead>
                            <tr>
                                <th class="text-center">S/L &nbsp;</th>
                                <th class="text-center">Member Name &nbsp;</th>
                                <th class="text-center">Image &nbsp;</th>
                                <th class="text-center">Status &nbsp;</th>
                                <th class="text-center">Action &nbsp;</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php $sl = 1; @endphp
                            @foreach ($members as $member)
                                <tr>
                                    <td class="text-center">{{ $sl++ }}</td>
                                    <td class="text-center">{{ $member->name }}</td>
                                    <td class="text-center">
                                        <img style="width: 50px; height: 50px;"
                                            src="{{ $member->image ? '/' . $member->image : '/asset/backend_asset/assets/media/photos/file-image-svgrepo-com.png' }}">
                                    </td>
                                    <td class="text-center">
                                        @if ($member->status == 1)
                                            <span class="badge badge-success">Active</span>
                                        @else
                                            <span class="badge badge-danger">Inactive</span>
                                        @endif
                                    </td>
                                    <td class="text-center icon-statte">
                                        <form action="{{ route('member.delete', $member->id) }}" method="post"
                                            accept-charset="utf-8">
                                            <a href="{{ route('member.status', $member->id) }}"
                                                class="btn btn-circle mr-5 mb-5 {{ $member->status == 1 ? 'btn-alt-success' : 'btn-alt-danger' }}">
                                                <i
                                                    class="fa fa-refresh {{ $member->status == 1 ? 'text-success' : 'text-danger' }}"></i>
                                            </a>

                                            <a data-toggle="modal" data-target="#modal-edit" id="editmember"
                                                data="{{ $member->id }}" class="btn btn-circle btn-alt-info mr-5 mb-5">
                                                <i class="fa fa-edit"></i>
                                            </a>
                                            @csrf
                                            @method('delete')
                                            <button type="submit"
                                                class="btn btn-circle btn-alt-danger mr-5 mb-5 delete-confirm"
                                                onclick="deleteItem();">
                                                <i class="fa fa-trash-o"></i>
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- member add modal -->
    <div class="modal show" id="modal-large" tabindex="-1" role="dialog" aria-labelledby="modal-large">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="block block-themed block-transparent mb-0">
                    <div class="block-header bg-primary-dark">
                        <h3 class="block-title">Add Member</h3>
                        <div class="block-options">
                            <button type="button" class="btn-block-option" data-dismiss="modal" aria-label="Close">
                                <i class="si si-close"></i>
                            </button>
                        </div>
                    </div>
                    <div class="block-content">
                        <div class="modal-body">
                            <form action="{{ route('member.store') }}" method="post" enctype="multipart/form-data">
                                @csrf
                                <div class="form-group row">
                                    <label class="col-12" for="editor">Member Name: </label>
                                    <div class="col-lg-12">
                                        <input type="text" name="name" class="form-control"
                                            placeholder="Enter Member Name">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-12">Feature Image <span class="text-danger">*</span></label>
                                    <div class="col-lg-12">
                                        <input type='file' class="form-group" required name="image"
                                            onchange="readURL(this);" />
                                        <img id="blah"
                                            src="/asset/backend_asset/assets/media/photos/file-image-svgrepo-com.png"
                                            height="200" width="250" alt="member" /><br>
                                    </div>

                                </div>
                                <div class="form-group text-right">
                                    <button type="submit"
                                        class="btn btn-square btn-primary min-width-125 mb-10 mt-20">Submit</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end member add modal -->

    <!-- edit member edit modal -->
    <div class="modal show" id="modal-edit" tabindex="-1" role="dialog" aria-labelledby="modal-large">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="block block-themed block-transparent mb-0">
                    <div class="block-header bg-primary-dark">
                        <h3 class="block-title">Edit Member</h3>
                        <div class="block-options">
                            <button type="button" class="btn-block-option" data-dismiss="modal" aria-label="Close">
                                <i class="si si-close"></i>
                            </button>
                        </div>
                    </div>
                    <div class="block-content">
                        <div class="modal-body">
                            <form action="{{ route('member.update') }}" method="post" enctype="multipart/form-data">
                                @csrf
                                <input type="hidden" name="id" id="member_id">
                                <div class="form-group row">
                                    <label class="col-12" for="editor">Member Name: </label>
                                    <div class="col-lg-12">
                                        <input type="text" id="member_title" name="name" class="form-control"
                                            placeholder="Enter Member Name">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-12">Feature Image <span class="text-danger">*</span></label>
                                    <div class="col-md-12">
                                        <input type='file' class="form-group" name="image"
                                            onchange="readURL2(this);" />
                                        <img id="blah2" class="member_image" src="" height="200"
                                            width="250" alt="category" /><br>
                                    </div>
                                </div>
                                <div class="form-group text-right">
                                    <button type="submit"
                                        class="btn btn-square btn-primary min-width-125 mb-10 mt-20">Update</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end member edit modal -->
@endsection
@section('script')
    <script type="text/javascript">
        $(document).on("click", "#editmember", function() {
            let id = $(this).attr("data");
            console.log(id);
            $.ajax({
                url: "/admin/member/edit/" + id,
                type: "get",
                dataType: "json",
                success: function(response) {
                    console.log(response);
                    $("#member_id").val(response.id);
                    $("#member_title").val(response.name);
                    $('.member_image').attr('src', response.image ? '/' + response.image :
                        '/asset/backend_asset/assets/media/photos/file-image-svgrepo-com.png');
                }
            })
        })

        function deleteItem() {
            alert("If you click ok!! Then item remove from record");
        }
    </script>
    <script type="text/javascript">
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('#blah')
                        .attr('src', e.target.result);
                };
                reader.readAsDataURL(input.files[0]);
            }
        }

        function readURL2(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('#blah2')
                        .attr('src', e.target.result);
                };
                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>
@endsection