@extends('layouts.main')

@section('more-styles')
    <style>
        .input-span.checked:after, input[type=checkbox]:checked:after, input[type=radio]:checked:after {
            content: "";
        }
    </style>
@stop
@section('main-content')
    <div class="nk-content-inner">
        <div class="nk-content-body">
            <div class="nk-block" style="margin-top: 20px">
                <div class="card card-bordered card-stretch">
                    <table class="table table-bordered table-responsive" id="ministryMapperTable">
                        <caption></caption>
                        <thead class="thead-dark">
                        <tr>
                            <th scope="col">S/N</th>
                            <th scope="col">Ministry Name</th>
                            <th scope="col">Ministry ID</th>
                            <th scope="col"></th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse($mapperData as $data)
                            @php $data->update_route = route('general_settings.update_ministry_mapper', ['mapperId' => $data->id]); @endphp
                            <tr>
                                <td>{{ $loop->iteration }}</td>
                                <td class="nk-tb-col">{{ $data->ministry_name }}</td>
                                <td class="nk-tb-col">{{ $data->ministry_id }}</td>
                                <td>
                                    <a href="javascript:void(0)" data-mapper="{{ $data }}" class="btn btn-sm btn-primary mapper-update-btn">Modify</a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-center">No Entries Found</td>
                            </tr>
                        @endforelse
                        </tbody>
                    </table>
                </div><!-- .card -->
            </div><!-- .nk-block -->
        </div>
    </div>

    <div class="modal fade" tabindex="-1" id="ministryMapperUpdateModal">
        <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"> Edit "<span id="ministryName"></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" id="documents-modal-body">
                    <form action="" method="POST" id="ministryMapperUpdateForm" data-matched-ministries="{{ collect($matchedMinistries) }}">
                        @csrf
                        <input type="hidden" name="action_type" value="edit">
                        <input type="hidden" id="ministry_name" name="ministry_name">
                        <input type="hidden" id="updateRoute" name="update_route">
                        <div class="form-group">
                            <label class="form-label" for="ministryId">Ministry ID</label>
                            <select class="form-select show-placeholder" id="ministryId" name="ministry_id" data-placeholder="Select Ministry ID">
                                <option></option>
                                @foreach($ministries as $ministry)
                                <option value="{{ $ministry->id }}">{{ $ministry->display_name }}</option>
                                @endforeach
                            </select>
                            @if(old('action_type') === 'edit')
                                @error('ministry_id')
                                <span class="text-danger" role="alert">
                                    <small>{{ $message }}</small>
                                </span>
                                @enderror
                            @endif
                        </div>
                        <button class="btn btn-success col-md-12 p-2" type="submit">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('more-scripts')
    <script src="{{ asset('js/pages/ministries-mapper.js') }}"></script>
@endsection