@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="settlementAccountSpecsTable">
                        <caption></caption>
                        <thead class="thead-dark">
                        <tr>
                            <th scope="col">S/N</th>
                            <th scope="col">Payment Channel</th>
                            <th scope="col">Bank</th>
                            <th scope="col">Account Number</th>
                            <th scope="col">Account Name</th>
                            <th scope="col">View History</th>
                            <th scope="col"></th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse($settlementAccountSpecifications as $settlementAccountSpec)
                            @php $settlementAccountSpec->update_route = route('settlement_account.update', ['settlementAccountSpec' => $settlementAccountSpec->id]); @endphp
                            <tr>
                                <td>{{ $loop->iteration }}</td>
                                <td class="nk-tb-col">{{ $settlementAccountSpec->transaction_channel_group->name }}</td>
                                <td class="nk-tb-col">{{ $settlementAccountSpec->bank ? $settlementAccountSpec->bank->name : ' - ' }}</td>
                                <td class="nk-tb-col">{{ $settlementAccountSpec->account_number ? $settlementAccountSpec->account_number->account_number : ' - ' }}</td>
                                <td class="nk-tb-col">{{ $settlementAccountSpec->account_number ? $settlementAccountSpec->account_number->name : ' - ' }}</td>
                                <td>
                                    <a href="javascript:void(0)" data-history-route="{{ route('api.settlement_account.history', ['settlementAccountSpec' => $settlementAccountSpec->id]) }}" class="btn btn-outline-primary btn-primary view-settlement-acct-history">History</a>
                                </td>
                                <td>
                                    <a href="javascript:void(0)" data-setting-details="{{ $settlementAccountSpec }}" class="btn btn-sm btn-primary settlement-acct-spec">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="settlementAccountUpdateModal">
        <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"> Modify Account Spec</h5>
                    <a href="javascript:void(0)" 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="settlementAccountUpdateForm">
                        @csrf
                        <input type="hidden" id="settlementAccountSpecId" name="setting_account_spec_id">
                        <input type="hidden" id="updateRoute" name="update_route">
                        <p class="font-weight-bold">Payment Channel :: <span id="paymentChannel"></span></p>
                        <div class="form-group">
                            <label class="form-label" for="accountNumber">Account Number</label>
                            <select class="form-select show-placeholder" id="accountNumber" name="account_number" data-placeholder="Select Account Number">
                                <option></option>
                                @foreach($accountNumbers as $acctNumber)
                                    <option value="{{ $acctNumber->id }}">{{ $acctNumber->bank->name }} :: {{ $acctNumber->account_number }}</option>
                                @endforeach
                            </select>
                            @error('account_number')
                            <span class="text-danger" role="alert">
                                <small>{{ $message }}</small>
                            </span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="reasonForChange"></label>
                            <textarea class="form-control show-placeholder" id="reasonForChange" name="reason_for_change" required
                                      placeholder="Please specify the change reason">{{ old('reason_for_change') }}</textarea>
                            @error('reason_for_change')
                            <span class="text-danger" role="alert">
                                <small>{{ $message }}</small>
                            </span>
                            @enderror
                        </div>
                        <button class="btn btn-success col-md-12 p-2" type="submit">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" tabindex="-1" id="settlementAccountHistoryModal">
        <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"> Settlement Account Spec</h5>
                    <a href="javascript:void(0)" class="close" data-dismiss="modal" aria-label="Close">
                        <em class="icon ni ni-cross"></em>
                    </a>
                </div>
                <div class="modal-body" id="history-modal-body">

                </div>
            </div>
        </div>
    </div>
@endsection

@section('more-scripts')
    <script src="{{ assetWithVersion('js/pages/settlement-accounts-specifications.js') }}"></script>
@endsection