@extends('layouts.main')

@section('more-styles')
    <style>
        .input-span.checked:after, input[type=checkbox]:checked:after, input[type=radio]:checked:after {
            content: "";
        }
        .custom-control-label::before {
            background-color: #920A01;
        }
        .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
            border-color: #920A01;
        }
    </style>
@stop
@section('main-content')
    <section 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">
                        <a href="javascript:void(0)" id="mdaIntegrationSetupBtn" class="btn btn-warning float-right">Setup Integration</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-content collapse show">
                        <div class="card-body card-dashboard">
                            <table class="table table-bordered table-responsive" id="mdaIntegrationTable">
                                <caption></caption>
                                <thead class="thead-dark">
                                <tr>
                                    <th scope="col">S/N</th>
                                    <th scope="col">Name</th>
                                    <th scope="col">Ministry</th>
                                    <th scope="col">Departments</th>
                                    <th scope="col">Service</th>
                                    <th scope="col">Created At</th>
                                    <th scope="col"></th>
                                </tr>
                                </thead>
                                <tbody>
                                @forelse($mdaIntegrations as $integration)
                                    @php $integration->update_route = route('general_settings.update_mda_integration', ['mdaIntegration' => $integration->id]); @endphp
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td class="nk-tb-col">{{ $integration->display_name }}</td>
                                        <td class="nk-tb-col">{{ $integration->ministry ? $integration->ministry->display_name : ' - ' }}</td>
                                        <td class="nk-tb-col">{{ $integration->departmentNames() }}</td>
                                        <td class="nk-tb-col">{{ $integration->service ? $integration->service->name : ' - ' }}</td>
                                        <td class="nk-tb-col">{{ $integration->created_at->toDateTimeString() }}</td>
                                        <td>
                                            @if($authUser->isAppDev())
                                                <a href="javascript:void(0)" data-integration-details="{{ $integration }}" class="btn btn-sm btn-primary mdaIntegrationModBtn">Modify</a>
                                            @endif
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5" class="text-center">No Entries Found</td>
                                    </tr>
                                @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div><!-- .card -->
            </div><!-- .nk-block -->
        </div>
    </section>
    <div class="modal fade" tabindex="-1" id="mdaIntegrationCreationModal">
        <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"> Setup an Mda Integration</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="{{ route('general_settings.save_mda_integration') }}" method="POST" id="mdaIntegrationCreationForm">
                        @csrf
                        <input type="hidden" name="action_type" value="create">
                        <div class="form-group">
                            <label class="form-label" for="displayName">Display Name</label>
                            <input type="text" class="form-control form-control-lg" id="displayName" name="display_name" value="{{ old('display_name') }}" placeholder="Enter Display Name" required>
                            @if(old('action_type') === 'create')
                                @error('display_name')
                                <span class="text-danger" role="alert">
                                    <small>{{ $message }}</small>
                                </span>
                                @enderror
                            @endif
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="username">Username</label>
                            <input type="text" class="form-control form-control-lg" id="username" name="username" value="{{ old('username') }}" placeholder="Enter Username" required>
                            @if(old('action_type') === 'create')
                                @error('username')
                                <span class="text-danger" role="alert">
                                    <small>{{ $message }}</small>
                                </span>
                                @enderror
                            @endif
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="apiKeyString">
                                API Key <small>(The string provided would be encrypted to generate an API key)</small>
                            </label>
                            <input type="text" class="form-control form-control-lg" id="apiKeyString" name="api_key_string" value="{{ old('api_key_string') }}" placeholder="Enter Word to Generate API Key" required>
                            @if(old('action_type') === 'create')
                                @error('api_key_string')
                                <span class="text-danger" role="alert">
                                    <small>{{ $message }}</small>
                                </span>
                                @enderror
                            @endif
                        </div>
                        <div class="form-group mb-1">
                            <label class="form-label" for="assignMultipleDepartments">Does this integration cater for departments in more than one ministry?</label>
                            <br>
                            <div class="custom-control custom-switch">
                                <input type="checkbox" name="assign_multiple_departments" data-minimum-amount-field="minimum_amount"
                                       class="custom-control-input assign-multiple-departments" id="assignMultipleDepartments">
                                <label class="custom-control-label font-weight-bold" for="assignMultipleDepartments">No</label>
                            </div>
                            @if(old('action_type') === 'create')
                                @error('assign_multiple_departments')
                                <span class="text-danger" role="alert">
                                    <small>{{ $message }}</small>
                                </span>
                                @enderror
                            @endif
                        </div>
                        <div class="hidden" style="border: 1px solid #dbdfea; border-radius: 5px; padding: 1em;" id="multipleDepartmentsRow">
                            <div class="form-group">
                                <label class="form-label" for="multipleDepartmentsSelector">Departments</label>
                                <select class="form-select" id="multipleDepartmentsSelector" multiple name="multiple_departments[]" data-placeholder="Select Departments">