@extends(BaseHelper::getAdminMasterLayoutTemplate())

@section('content')
    <x-core::alert type="warning">
        {{ trans('plugins/real-estate::account.unverified_account.moderate_alert_message') }}
    </x-core::alert>

    <div class="row flex-lg-row-reverse">
        <div class="col-md-4">
            <x-core::card class="mb-2">
                <x-core::card.body>
                    <div class="btn-list">
                        <x-core::button
                            type="button"
                            color="primary"
                            data-bs-toggle="modal"
                            data-bs-target="#approveModal"
                            icon="ti ti-check"
                        >
                            {{ trans('plugins/real-estate::account.unverified_account.approve') }}
                        </x-core::button>
                        <x-core::button
                            type="button"
                            data-bs-toggle="modal"
                            data-bs-target="#rejectModal"
                            icon="ti ti-x"
                        >
                            {{ trans('plugins/real-estate::account.unverified_account.reject') }}
                        </x-core::button>
                    </div>
                </x-core::card.body>
            </x-core::card>
        </div>
        <div class="col-md-8">
            <x-core::card>
                <x-core::card.header>
                    <x-core::card.title>{{ trans('plugins/kyc-document::kyc-document.admin.agent_personal_information') }}</x-core::card.title>
                </x-core::card.header>
                <x-core::card.body>
                    <x-core::datagrid>
                        <x-core::datagrid.item>
                            <x-slot:title>{{ trans('core/base::tables.name') }}</x-slot:title>
                            {{ $account->name }}
                        </x-core::datagrid.item>
                        <x-core::datagrid.item>
                            <x-slot:title>{{ trans('plugins/real-estate::account.form.email') }}</x-slot:title>
                            {{ $account->email }}
                        </x-core::datagrid.item>
                        <x-core::datagrid.item>
                            <x-slot:title>{{ trans('plugins/real-estate::account.phone') }}</x-slot:title>
                            {{ $account->phone }}
                        </x-core::datagrid.item>
                        @if($account->address)
                            <x-core::datagrid.item>
                                <x-slot:title>{{ trans('plugins/real-estate::account.address') }}</x-slot:title>
                                {{ $account->address }}
                            </x-core::datagrid.item>
                        @endif
                        <x-core::datagrid.item>
                            <x-slot:title>{{ trans('plugins/real-estate::account.dob') }}</x-slot:title>
                            {{ BaseHelper::formatDate($account->dob) }}
                        </x-core::datagrid.item>
                        <x-core::datagrid.item>
                            <x-slot:title>{{ trans('core/base::tables.created_at') }}</x-slot:title>
                            {{ BaseHelper::formatDateTime($account->created_at) }}
                        </x-core::datagrid.item>
                        <x-core::datagrid.item>
                            <x-slot:title>{{ trans('plugins/real-estate::account.credits') }}</x-slot:title>
                            {{ number_format($account->credits) }}
                        </x-core::datagrid.item>
                        @if($account->description)
                            <x-core::datagrid.item>
                                <x-slot:title>{{ trans('plugins/real-estate::account.description') }}</x-slot:title>
                                {{ $account->description }}
                            </x-core::datagrid.item>
                        @endif
                    </x-core::datagrid>
                </x-core::card.body>
            </x-core::card>

            <x-core::card class="mt-3">
                <x-core::card.header>
                    <x-core::card.title>{{ trans('plugins/kyc-document::kyc-document.admin.agent_kyc_document') }}</x-core::card.title>
                </x-core::card.header>
                <x-core::card.body>
                    <x-core::datagrid>
                        @foreach($kycDocuments as $documentType)
                            <x-core::datagrid.item>
                                <x-slot:title>
                                    {{ $documentType->name }}
                                    <x-core::icon style="cursor: pointer;" data-bs-toggle="tooltip" data-bs-original-title="{{ $documentType->description }}" name="ti ti-info-circle-filled" />
                                </x-slot:title>
                                @if(check_user_kyc_documents_exist(get_user_kyc_documents($account), $documentType->id))
                                    <div class="position-relative d-flex gap-2 mb-3" id="file-preview-{{ $documentType->id }}">
                                        <div>
                                            <a href="{{get_user_kyc_documents_file_path(get_user_kyc_documents($account), $documentType->id)}}" target="blank">
                                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#000" style="height: 2rem; width: 2rem">
                                                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"></path>
                                                </svg>
                                            </a>
                                        </div>
                                        <div class="d-flex align-items-center">
                                            <h4 class="mb-0">
                                                <a href="{{get_user_kyc_documents_file_path(get_user_kyc_documents($account), $documentType->id)}}" class="text-decoration-underline" style="color: var(--bb-primary);" target="blank">
                                                    <span>{{ $documentType->name }}.{{pathinfo(get_user_kyc_documents_file_path(get_user_kyc_documents($account), $documentType->id), PATHINFO_EXTENSION)}}</span>
                                                </a>
                                            </h4>
                                        </div>
                                    </div>
                                @else
                                {{'-'}}
                                @endif
                            </x-core::datagrid.item>
                        @endforeach
                    </x-core::datagrid>
            </x-core::card.body>
        </x-core::card>
        </div>
    </div>
@endsection

@push('footer')
    <x-core::modal.action
        id="approveModal"
        type="primary"
        :title="trans('plugins/real-estate::account.unverified_account.approve_modal.title')"
        :description="trans('plugins/real-estate::account.unverified_account.approve_modal.description')"
        :form-action="route('account.unverified-accounts.approve', $account->getKey())"
        class="hide-model-body-close-button"
    >
        <x-slot:footer>
            <div class="w-100">
                <div class="row">
                    <div class="col">
                        <button type="submit" class="w-100 btn btn-primary">
                            {{ trans('plugins/real-estate::account.unverified_account.approve') }}
                        </button>
                    </div>
                    <div class="col">
                        <button
                            type="button"
                            class="w-100 btn"
                            data-bs-dismiss="modal"
                        >
                            {{ trans('core/base::base.close') }}
                        </button>
                    </div>
                </div>
            </div>
        </x-slot:footer>
    </x-core::modal.action>

    <x-core::modal.action
        id="rejectModal"
        type="danger"
        :title="trans('plugins/real-estate::account.unverified_account.reject_modal.title')"
        :form-action="route('account.unverified-accounts.reject', $account->getKey())"
        class="hide-model-body-close-button"
    >
        <div class="text-muted text-break">
            {{ trans('plugins/real-estate::account.unverified_account.reject_modal.description') }}
        </div>
        <div class="select--arrow mt-3 position-relative d-none">
            <select name="reject_type" class="form-control ">
                <option value="1">{{ trans('plugins/real-estate::account.unverified_account.reject_modal.personal_info') }}</option>
                <option value="2">{{ trans('plugins/real-estate::account.unverified_account.reject_modal.kyc_document') }}</option>
            </select>
            <i class="fas fa-angle-down position-absolute" style="top: 12px; right: 12px;"></i>
        </div>

        <textarea name="reason" rows="3" class="form-control mt-3" required></textarea>

        <x-slot:footer>
            <div class="w-100">
                <div class="row">
                    <div class="col">
                        <button type="submit" class="w-100 btn btn-danger">
                            {{ trans('plugins/real-estate::account.unverified_account.reject') }}
                        </button>
                    </div>
                    <div class="col">
                        <button
                            type="button"
                            class="w-100 btn"
                            data-bs-dismiss="modal"
                        >
                            {{ trans('core/base::base.close') }}
                        </button>
                    </div>
                </div>
            </div>
        </x-slot:footer>
    </x-core::modal.action>
    <style>
        .hide-model-body-close-button .modal-body .btn-close{
            display: none;
        }
    </style>
@endpush