@extends("agentportal.layouts.layout")

@section("title", trans('message_lang.LBL_AGENT_REGISTRATIONS'))

@section("page_style")
    <style>
        .hidden{
            display: none;
        }
        .detailField {
            display: grid;
            grid-template-columns: 1fr 2fr;
            grid-template-rows: 1fr;

            justify-content: "space-between";

            margin-bottom: 5px;
        }
        .detail_value {
            font-weight: bold;
        }

    </style>
@endsection

<div id="loading"  style="display:none;">
    <div id="image-loader">
        <img  src="{{ url('img/loading.gif')}}" alt="Loading..." />
    </div>
</div>

@section("content")

<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <!--begin::Entry-->
    <div class="d-flex flex-column-fluid">
        <!--begin::Container-->
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <!--begin::Card-->
                    <div class="card card-custom">
                        <div class="card-header">
                            <div class="card-title">
                                <h3 class="card-label">{{ trans('message_lang.LBL_REGISTRATION_DETAILS') }} -
                                     {{ $registrationDetails->firstName ." ".$registrationDetails->lastName }}
                                     (<span class="text-primary">{!! $statuses[$registrationDetails->status] !!}</span>)</h3>
                            </div>
                            <div class="card-toolbar">
                                <a href="{{ route('agentportal.agent_self_registration.editRegistrationDetails', [base64_encode($registrationDetails->id)]) }}" type="button" class="btn btn-primary">
                                    {!! trans('message_lang.BTN_EDIT') !!}
                                </a>
                                &nbsp;
                                <a href="{{ route('agentportal.agent_self_registration.listing') }}" type="button" class="btn btn-primary">
                                    {!! trans('message_lang.BTN_BACK') !!}
                                </a>
                            </div>
                        </div>

                        <div class="card-body">
                           
                            <div class="row mb-3 p-2">
                                {{-- Personal Details --}}
                                <div class="col-12 col-xl-5 shadow-sm mr-5 rounded-1 mb-2 p-3">
                                    {{-- heading --}}
                                    <div class="mb-2 border-bottom">
                                        <strong>Personal Details</strong>
                                    </div>

                                    {{-- section body --}}
                                    <div class="mb-2">
                                        <div class="detailField">
                                            <span class="detail_label">{!! trans("message_lang.LBL_FULL_NAME") !!}</span>
                                            <span class="detail_value">
                                                {!! $registrationDetails->firstName ." ". $registrationDetails->lastName !!}
                                            </span>
                                        </div>

                                        <div class="detailField">
                                            <span class="detail_label">{!! trans("message_lang.LBL_COUNTRY") !!}</span>
                                            <span class="detail_value">{!! $registrationDetails->country->name ?? "-" !!}</span>
                                        </div>

                                        <div class="detailField">
                                            <span class="detail_label">{!! trans("message_lang.LBL_ADDRESS") !!}</span>
                                            <span class="detail_value">{!! $registrationDetails->address .", ". $registrationDetails->city !!}</span>
                                        </div>

                                        <div class="detailField">
                                            <span class="detail_label">{!! trans("message_lang.LBL_PHONE_NUMBER") !!}</span>
                                            <span class="detail_value">{!! $registrationDetails->phoneNumber !!}</span>
                                        </div>

                                        <div class="detailField">
                                            <span class="detail_label">{!! trans("message_lang.LBL_EMAIL") !!}</span>
                                            <span class="detail_value">{!! $registrationDetails->emailAddress !!}</span>
                                        </div>

                                        <div class="detailField">
                                            <span class="detail_label">{!! trans("message_lang.LBL_ID_DETAILS") !!}</span>
                                            <span class="detail_value">
                                                {!! config("constants.SELF_REGISTER_ID_TYPES")[$registrationDetails->idType] !!}
                                                ({!! $registrationDetails->idNumber !!})
                                            </span>
                                        </div>

                                        <div class="detailField">
                                            <span class="detail_label">{!! trans("message_lang.LBL_ID_CARD") !!}</span>
                                            <span class="detail_value">
                                                @if(isset($personalDocs))
                                                    @foreach ($personalDocs as $doc)
                                                        <button type="button" class="btn btn-sm btn-outline-primary p-1 mb-1" onclick="fetchFileDetails({!! $doc->id !!})" style="cursor: pointer">
                                                            {{ $doc->documentName ?? "" }}
                                                            <i class="fas fa-folder"></i>
                                                        </button>
                                                    @endforeach
                                                @else
                                                    <small class="text-secondary">No ID card</li>
                                                @endif
                                            </span>
                                        </div>

                                        <div class="detailField">
                                            <span class="detail_label">{!! trans("message_lang.LBL_REFERRAL_CODE") !!}</span>
                                            <span class="detail_value">{!! $registrationDetails->referralCode ?? "-" !!}</span>
                                        </div>
                                    </div>
                                </div>
                                {{-- end personal details --}}

                                {{-- Business Details --}}
                                <div class="col-12 col-xl-6 shadow-sm rounded-1 p-3 mr-5 mb-2">
                                    {{-- heading --}}
                                    <div class="mb-2 border-bottom">
                                        <strong>{!! trans("message_lang.LBL_BUSINESS_DETAILS") !!}</strong>
                                    </div>

                                    {{-- section body --}}
                                    <div class="mb-2">
                                        <div class="detailField">
                                            <span class="detail_label">{!! trans("message_lang.LBL_BUSINESS_NAME") !!}</span>
                                            <span class="detail_value">{!! $registrationDetails->businessDetails->business_name !!}</span>
                                        </div>

                                        <div class="detailField">
                                            <span class="detail_label">{!! trans("message_lang.LBL_REGISTRATION_CERT") !!}</span>
                                            <div class="detail_value">
                                                <span class="mr-2">
                                                    {!! $registrationDetails->businessDetails->business_reg_cert_number ?? "-" !!}
                                                </span>
                                                @if (isset($businessDocuments) && isset($businessDocuments["BUSINESS_REG"]))
                                                    <button type="button" class="btn btn-sm btn-outline-primary p-1" onclick="fetchFileDetails({!! $businessDocuments['BUSINESS_REG']->id !!})">
                                                        {!! $businessDocuments["BUSINESS_REG"]->documentName ?? '-' !!}
                                                        <i class="fas fa-folder"></i>
                                                    </button>
                                                @else
                                                    <small class="text-muted">{!! trans('message_lang.LBL_NO_DOC_FOUND') !!}</small>
                                                @endif
                                            </div>
                                        </div>

                                        <div class="detailField">
                                            <span class="detail_label">{!! trans("message_lang.LBL_TAX_CERT") !!}</span>
                                            <div class="detail_value">
                                                <span class="mr-2">
                                                    {!! $registrationDetails->businessDetails->tax_cert_number ?? "-" !!}
                                                </span>
                                                @if (isset($businessDocuments) && isset($businessDocuments["TAX"]))
                                                    <button type="button" class="btn btn-sm btn-outline-primary p-1" onclick="fetchFileDetails({!! $businessDocuments['TAX']->id !!})">
                                                        {!! $businessDocuments["TAX"]->documentName ?? '-' !!}
                                                        <i class="fas fa-folder"></i>
                                                    </button>
                                                @else
                                                    <small class="text-muted">{!! trans('message_lang.LBL_NO_DOC_FOUND') !!}</small>
                                                @endif
                                            </div>
                                        </div>

                                        <div class="detailField">
                                            <span class="detail_label">{!! trans("message_lang.LBL_CITY_COUNCIL_LICENSE") !!}</span>
                                            <div class="detail_value">
                                                <span class="mr-2">
                                                    {!! $registrationDetails->businessDetails->city_council_license_no ?? "-" !!}
                                                </span>
                                                @if (isset($businessDocuments) && isset($businessDocuments["CITY_COUNCIL"]))
                                                    <button type="button" class="btn btn-sm btn-outline-primary p-1" onclick="fetchFileDetails({!! $businessDocuments['CITY_COUNCIL']->id !!})">
                                                        {!! $businessDocuments["CITY_COUNCIL"]->documentName ?? '-' !!}
                                                        <i class="fas fa-folder"></i>
                                                    </button>
                                                @else
                                                    <small class="text-muted">{!! trans('message_lang.LBL_NO_DOC_FOUND') !!}</small>
                                                @endif
                                            </div>
                                        </div>

                                        <div class="detailField">
                                            <span class="detail_label">{!! trans("message_lang.LBL_OTHER_DOCUMENTS") !!}</span>
                                            <div class="detail_value">
                                                @if (isset($businessDocuments) && isset($businessDocuments["OTHER"]))
                                                    <button type="button" class="btn btn-sm btn-outline-primary p-1" onclick="fetchFileDetails({!! $businessDocuments['OTHER']->id !!})">
                                                        {!! $businessDocuments["OTHER"]->documentName ?? '-' !!}
                                                        <i class="fas fa-folder"></i>
                                                    </button>
                                                @else
                                                    <small class="text-muted">{!! trans('message_lang.LBL_NO_DOC_FOUND') !!}</small>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {{-- end Business Details --}}
                                
                            </div>

                            <!-- processing actions -->
                            <div class="row mb-3 p-2">
                                <div class="col-12 shadow-sm p-2">
                                    <div class="mb-2">
                                        <strong>{!! trans("message_lang.LBL_PROCESSING_ACTION") !!}</strong>
                                    </div>

                                    <div class="mb-2">
                                        <table class="table table-hover table-sm table-boderless">
                                            <thead>
                                                <tr>
                                                    <th>{!! trans("message_lang.LBL_UPDATED_BY") !!}</th>
                                                    <th>{!! trans("message_lang.LBL_STATUS") !!}</th>
                                                    <th>{!! trans("message_lang.LBL_COMMENTS") !!}</th>
                                                    <th>{!! trans("message_lang.LBL_DATE") !!}</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @forelse($registrationDetails->updateLog as $logs)
                                                <tr>
                                                    <td>{!! $logs->employeeDetails->first_name . " " . $logs->employeeDetails->last_name !!}</td>
                                                    <td>{!! $statuses[$logs->updated_status] !!}</td>
                                                    <td>{!! $logs->comment ?? "-" !!}</td>
                                                    <td>{!! format_date_tz($logs->created_at) !!}</td>
                                                </tr>
                                                @empty
                                                <tr>
                                                    <td valign="top" colspan="5" style="text-align: center">{!! trans('message_lang.DATATABLE_LBL_NO_DATA_AVAILABLE') !!}</td>
                                                </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                    </div>

                                    @hasanyrole('administrator|compliance')
                                    {{-- review actions  --}}
                                    @if ($registrationDetails->status == 0)
                                    <div class="mb-2">
                                        <button type="button" class="btn btn-sm btn-primary" id="startProcessing" onclick="startAgentRegistrationReview()">
                                            {!! trans("message_lang.LBL_BEGIN_REVIEW") !!}
                                        </button>
                                    </div>
                                    @endif

                                    {{-- registration status update form  --}}
                                    <div class="mb-2 p-2" style="display: {{ in_array($registrationDetails->status, [config('constants.SELF_REGISTER_STATUS.NEW'), config('constants.SELF_REGISTER_STATUS.USER_REGISTERED')]) ? "none" : "" }}">
                                        <form action="{{ route("agentportal.agent_self_registration.updateStatus") }}" method="POST" id="statusUpdateForm">
                                            @csrf
                                            <input type="text" name="registration_ref" id="registration_ref" value="{{ $registrationDetails->id }}" hidden>

                                            {{-- review action  --}}
                                            <div class="form-row mb-3">
                                                <div class="col-12 col-xl-6">
                                                    <label for="new_status">{!! trans("message_lang.LBL_REVIEW_ACTION") !!}</label>
                                                    <select name="new_status" id="new_status" class="form-control" required>
                                                        <option value="">Select Review Action</option>
                                                        @if ($registrationDetails->status == config('constants.SELF_REGISTER_STATUS.NEW'))
                                                        <option value="1">{!! trans("message_lang.LBL_BEGIN_REVIEW") !!}</option>
                                                        @elseif (in_array($registrationDetails->status,[config('constants.SELF_REGISTER_STATUS.UNDER_REVIEW'),config('constants.SELF_REGISTER_STATUS.UPDATE_REQUESTED')]))
                                                        <option value="2">Approve</option>
                                                        <option value="3">Reject</option>
                                                        <option value="6">Update Requested</option>
                                                        @elseif($registrationDetails->status == config('constants.SELF_REGISTER_STATUS.REJECTED'))
                                                        <option value="2">Approve</option>
                                                        @elseif($registrationDetails->status == config('constants.SELF_REGISTER_STATUS.APPROVED'))
                                                        <option value="4">Create Location</option>
                                                        @elseif($registrationDetails->status == config('constants.SELF_REGISTER_STATUS.LOCATION_CREATED'))
                                                        <option value="5">Create Location User</option>
                                                        @endif
                                                    </select>
                                                </div>
                                            </div>

                                            {{-- review comment  --}}
                                            <div class="form-row mb-2">
                                                <div class="col-12 col-xl-6">
                                                    <label for="reviewComment">Review Comment</label>
                                                    <textarea name="reviewComment" id="reviewComment" cols="30" rows="4" class="form-control" 
                                                    placeholder="enter the reason for the selected action"></textarea>
                                                </div>
                                            </div>

                                            {{-- form controls  --}}
                                            <div class="form-row mb-2">
                                                <div class="col-12">
                                                    <button type="submit" class="btn btn-sm btn-primary" id="reviewSubmitBtn">
                                                        Submit
                                                    </button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    @endhasanyrole
                                </div>
                            </div>
                            

                            <!-- tmp image preview -->
                            <div class="mb-2">
                                {{-- <img id="selectedImg" src="" alt="test image"> --}}
                                <a id="selectedLink" href="" target="_blank" rel="noopener noreferrer"></a>
                            </div>

                            <!-- tmp modal for image -->
                            <div class="modal fade" id="img_modal">
                                <div class="modal-dialog modal-lg">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                                        </div>
                                        <div class="modal-body" style="overflow: auto">
                                            <img id="selectedImg" src="" alt="test image">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- tmp modal for pdf -->
                            <div class="modal fade" id="pdf_modal">
                                <div class="modal-dialog modal-lg">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                                        </div>
                                        <div class="modal-body" style="overflow: auto">
                                            <iframe id="renderedPdf" src="" frameborder="0" width="100%" height="800"></iframe>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <!--end::Card-->
                </div>
            </div>
        </div>
        <!--end::Container-->
    </div>
    <!--end::Entry-->
</div>
@endsection

@section("page_vendors")

@endsection

@section("page_script")
<script type="text/javascript">
    function startAgentRegistrationReview()
    {
        // set the new status of the review form to 1
        $("#new_status").val(1);

        console.log($("#new_status").val())

        // submit the form
        $("#statusUpdateForm").submit();
    }

    function fetchFileDetails(docId) 
    {
        console.log(docId);
        // show the loading 
        $("#loading").show();
        let url = `{{ url('agentportal/agent-self-registration/fetchFile/${docId}') }}`;
        $.ajax({
            url: url,
            method: "GET",
            response: "json",
            success: (res) => {
                // hide the loading activity
                $("#loading").hide();
                console.log(res);
                if(res.data && res.status) {
                    const file_content = res.data.file_content;
                    const file_name = res.data.file_name;

                    // extract the extension of the file
                    const file_parts = file_name.split(".");
                    const ext = file_parts.length ? file_parts[file_parts.length - 1] : "pdf";
                    console.log(ext, file_parts);

                    if(ext == "pdf") {
                        // the file is a pdf file, render the file and display in the pdf modal
                        const pdf = `data:application/pdf;base64, ${file_content}`;
                        $("#renderedPdf").prop("src", pdf).html(res.data.file_name)
                        $("#pdf_modal").modal("toggle");
                    } else {
                        // the file is an image or something else, render the image and display on the image modal
                        const src = `data:image/jpeg;base64, ${file_content}`;
                        $("#selectedImg").prop("src", src).html(res.data.file_name);
                        $("#img_modal").modal("toggle");
                    }
                    
                }
            }
        })
    }

</script>
@endsection