@extends('layouts.main')

@section('main-content')

    <div class="main-content-section thin-section-border">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header page-title-row">
                        <button type="button" class="btn btn-success float-right" data-toggle="modal" data-target="#createComplaintCategory">Create Category</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-content collapse show">
                        <div class="card-body">
                            <div class="col-md-12 mb-2">
                                {{ $complaintCategories->appends(old())->links() }}
                            </div>
                            <table class="table table-bordered">
                                <caption></caption>
                                <thead class="bg-custom-green text-white">
                                <tr>
                                    <th scope="col">Name</th>
                                    <th scope="col">Description</th>
                                    <th scope="col">Required Approvals</th>
                                    <th scope="col">Created By</th>
                                    <th scope="col">Created At</th>
                                    <th scope="col">Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($complaintCategories as $category)
                                    @php $category->updateRoute = route('complaint.update_category', ['complaintCategory' => $category->id]); @endphp
                                    <tr>
                                        <td>{{ $category->display_name }}</td>
                                        <td>{{ $category->description }}</td>
                                        <td>{{ $category->required_approvals }}</td>
                                        <td>{{ $category->createdBy->Fullname }}</td>
                                        <td>{{ $category->created_at }}</td>
                                        {{--<td class="nk-tb-col"><span class="badge {{$ministry->is_active ? 'badge-success' : 'badge-danger' }}">{{ $ministry->is_active ? 'Active' : 'Inactive' }}</span></td>--}}
                                        <td class="nk-tb-col">
                                            <div class="drodown">
                                                <a href="#" class="dropdown-toggle btn btn-icon btn-trigger" data-toggle="dropdown"><em class="icon ni ni-more-h"></em></a>
                                                <div class="dropdown-menu dropdown-menu-right">
                                                    <ul class="link-list-opt no-bdr">
                                                        <li><a href="javascript:void(0)" id="categoryEditButton-{{$category->id}}" onclick="editComplaintCategory({{$category}})"><em class="icon ni ni-edit"></em><span>Edit Details</span></a></li>
                                                        <li><a href="javascript:void(0)" onclick="return BaseHelper.submitActionForm('{{ route('complaint.delete_category', ['category' => $category->id]) }}', null,true)"><em class="icon ni ni-trash"></em><span>Delete</span></a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                            <div class="col-md-12">
                                {{ $complaintCategories->appends(old())->links() }}
                            </div>

                        </div>
                    </div>
                </div>
            </div><!-- .nk-block -->

        </div>
    </div>

    @php
        $isEdit = collect(old('type'))->contains('edit');
    @endphp

    <!-- Create Complain Category Modal Form -->
    <div class="modal fade" tabindex="-1" id="createComplaintCategory">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header text-center bg-custom-green text-white">
                    <h5 class="modal-title">Create Complaint Category</h5>
                    <a href="#" class="close" data-dismiss="modal" aria-label="Close">
                        <em class="icon ni ni-cross"></em>
                    </a>
                </div>
                <div class="modal-body">
                    <form action="{{ route('complaint.save_category') }}" class="form-validate" method="POST" id="createComplaintCategoryForm">
                        @csrf
                        <input type="hidden" name="request_type" value="create_category">
                        <div class="form-group">
                            <label class="form-label" for="display_name">Name</label>
                            <input type="text" class="form-control form-control-lg" id="display_name" name="display_name"
                                   value="{{ old('display_name') }}" placeholder="Enter category name" required>
                            @error('display_name')
                            <span class="text-danger" role="alert">
                                <small>{{ $message }}</small>
                            </span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="description">Description</label>
                            <textarea class="form-control form-control-lg" name="description" id="description">{{ old('description') }}</textarea>
                            @error('description')
                            <span class="text-danger" role="alert">
                                <small>{{ $message }}</small>
                            </span>
                            @enderror
                        </div>
                        {{--<div class="form-group">--}}
                            {{--<label class="form-label" for="gender">Required Approvals</label>--}}
                            {{--<input type="number" class="form-control form-control-lg" id="required_approvals" name="required_approvals"--}}
                                   {{--value="{{ old('required_approvals') }}" placeholder="Enter required approvals" required>--}}
                            {{--@error('required_approvals')--}}
                            {{--<span class="text-danger" role="alert">--}}
                                {{--<small>{{ $message }}</small>--}}
                            {{--</span>--}}
                            {{--@enderror--}}
                        {{--</div>--}}

                        <div class="form-group">
                            <button type="submit" class="btn btn-lg btn-success btn-block">Create Complaint Category</button>
                        </div>
                    </form><!-- form -->
                </div>
            </div>
        </div>
    </div>

    <!-- Update Complaint Category Modal Form -->
    <div class="modal fade" tabindex="-1" id="updateComplaintCategory">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header text-center bg-custom-green text-white">
                    <h5 class="modal-title">Update Category: <span id="category_name"></span></h5>
                    <a href="#" class="close" data-dismiss="modal" aria-label="Close">
                        <em class="icon ni ni-cross"></em>
                    </a>
                </div>
                <div class="modal-body">
                    <form action="" class="form-validate" method="POST" id="updateComplaintCategoryForm">
                        @csrf
                        <input type="hidden" name="request_type" value="update_category">
                        <input type="hidden" id="category_id" name="category_id" value="">
                        <div class="form-group">
                            <label class="form-label" for="edit_display_name">Name</label>
                            <input type="text" class="form-control form-control-lg" id="edit_display_name" name="edit_display_name"
                                   value="{{ old('edit_display_name') }}" placeholder="Enter category name" required>
                            @error('display_name')
                            <span class="text-danger" role="alert">
                                <small>{{ $message }}</small>
                            </span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="edit_description">Description</label>
                            <textarea class="form-control form-control-lg" name="edit_description" id="edit_description">{{ old('edit_description') }}</textarea>
                            @error('description')
                            <span class="text-danger" role="alert">
                                <small>{{ $message }}</small>
                            </span>
                            @enderror
                        </div>
                        {{--<div class="form-group">--}}
                            {{--<label class="form-label" for="edit_required_approvals">Required Approvals</label>--}}
                            {{--<input type="number" class="form-control form-control-lg" id="edit_required_approvals" name="edit_required_approvals"--}}
                                   {{--value="{{ old('required_approvals') }}" placeholder="Enter required approvals" required>--}}
                            {{--@error('required_approvals')--}}
                            {{--<span class="text-danger" role="alert">--}}
                                {{--<small>{{ $message }}</small>--}}
                            {{--</span>--}}
                            {{--@enderror--}}
                        {{--</div>--}}

                        <div class="form-group">
                            <button type="submit" class="btn btn-lg btn-success btn-block">Update Category</button>
                        </div>
                    </form><!-- form -->
                </div>
            </div>
        </div>
    </div>
@endsection

@section('more-scripts')
    <script>
        const oldData = {!! collect(old())  !!};
        let oldCategory = null;
        $(document).ready(function () {
            @if(old('request_type') == 'create_category' || request('show_creation_popup') === 'yes')
                $('#createComplaintCategory').modal('show');
            @elseif(old('request_type') == 'update_category')
                const ID = '#categoryEditButton-{{old('category_id')}}';
                $(ID).trigger('click');
            @endif
        });

        function editComplaintCategory(category) {
            if(!Array.isArray(oldData)){
                let oldCategory = oldData;
                Object.assign(category, {
                    display_name: oldCategory.edit_display_name,
                    description: oldCategory.edit_description,
                    required_approvals: oldCategory.edit_required_approvals,
                })
            }
            $('#category_name').html(category.display_name);
            $('#category_id').val(category.id);
            $('#edit_display_name').val(category.display_name);
            $('#edit_description').html(category.description);
            $('#edit_required_approvals').val(category.required_approvals);
            $('#updateComplaintCategoryForm').attr('action', category.updateRoute);
            $('#updateComplaintCategory').modal('show');
        }
    </script>
@endsection