@extends('backend.layouts.design')

@section('content')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <nav aria-label="Breadcrumb navigation" class="col-md-12 small" role="navigation">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="/admin">Home</a></li>
                        <li class="breadcrumb-item" aria-current="page"><a href="{{ route('members.index') }}">members
                                information</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">{{ $member->fullname }}</li>

                    </ol>
                </nav>
            </div>

            <div class="row justify-content-start">
                <div class="col-md-6">
                    <div class="btn-group">
                        <button type="button" class="btn btn-primary btn-sm" data-toggle="modal"
                            data-target="#addRemarks{{ $member->id }}">
                            Add Remarks
                        </button>
                        <form class="form ml-2" method="POST" action="{{ route('members.updateStatus', $member->id) }}">
                            <input type="hidden" name="_method" value="PATCH">
                            {{ csrf_field() }}
                            <select class="form-control form-control-sm m-input" id="#status" name="status"
                                onchange="this.form.submit();">
                                <option value="active" {{ $member->status == 'active' ? 'selected' : '' }}>Active</option>
                                <option value="resigned" {{ $member->status == 'resigned' ? 'selected' : '' }}>Resigned
                                </option>
                                <option value="backslided" {{ $member->status == 'backslided' ? 'selected' : '' }}>
                                    Backslided</option>
                                <option value="expired" {{ $member->status == 'expired' ? 'selected' : '' }}>Expired
                                </option>
                            </select>
                            <div class="form-group-sm" id="datefield" style="display:none;">
                                <label for="date" class="small">Date</label>
                                <input type="date" class="form-control" name="status_date"
                                    value="{{ $member->status_date }}" onchange="this.form.submit();">
                            </div>
                        </form>
                    </div>
                </div>

                <div class="col-md-6 text-right">
                    <a type="button" href="{{ route('members.index') }}" class="btn btn-danger btn-sm">
                        <i class="fa fa-arrow-left"></i> Back
                    </a>
                </div>
            </div>

            <!-- Add remarks model -->
            <div class="modal fade" id="addRemarks{{ $member->id }}">
                <div class="modal-dialog modal-md">
                    <form action="{{ route('members.storeRemark') }}" method="POST" enctype="multipart/form-data">
                        {{ @csrf_field() }}
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title">Add Remarks</h4>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <div class="form-group">
                                    <label for="date">Date</label>
                                    <input type="hidden" class="form-control" name="member_id"
                                        value="{{ $member->id }}">
                                    <input type="date" class="form-control" id="date" name="date">
                                    @error('date')
                                        <label for="date" class="small text-red">{{ $message }}</label>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <label for="description">Description</label>
                                    <textarea name="description" id="description" class="form-control ckeditor"></textarea>
                                    @error('description')
                                        <label for="date" class="small text-red">{{ $message }}</label>
                                    @enderror
                                </div>
                            </div>
                            <div class="modal-footer justify-content-end">
                                <button type="submit" class="btn btn-primary">Save changes</button>
                            </div>
                        </div>
                        <!-- /.modal-content -->
                    </form>
                </div>
                <!-- /.modal-dialog -->
            </div>
            <!-- /.Add Remarks modal -->

        </div>
    </section>

    @include("backend.profile.main-content")

@endsection

@section('page-specific-js')
    <script src="{{ asset('backend/js/status/memberStatus.js') }}"></script>
    <script>
        $(function() {
            $(document).on('click', '[data-toggle="lightbox"]', function(event) {
                event.preventDefault();
                $(this).ekkoLightbox({
                    alwaysShowClose: true
                });
            });
        })
    </script>
@endsection