@extends("agentportal.layouts.layout")

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

@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_LOCATION_ACCESS_REQ') }} -
                                     {{ $requestDetails->first_name ." ".$requestDetails->last_name }}
                                     (<span class="text-primary">{!! config('constants.LOCATION_ACCESS_REQ_STATUS')[$requestDetails->approval_status] !!}</span>)</h3>
                            </div>
                            <div class="card-toolbar">
                                <a href="{{ route('agentportal.location_access.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">
                                {{-- Teller 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>Teller 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">
                                                {!! $requestDetails->first_name ." ". $requestDetails->last_name !!}
                                            </span>
                                        </div>

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

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

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

                                        <div class="detailField">
                                            <span class="detail_label">{!! trans("message_lang.LBL_ID_DETAILS") !!}</span>
                                            <span class="detail_value">
                                                {!! isset($requestDetails->getIDType) ? trans('message_lang.' . $requestDetails->getIDType->LangCode) : 'Other' !!}
                                                ({!! $requestDetails->id_number ?? "-" !!})
                                            </span>
                                        </div>

                                        <div class="detailField">
                                            <span class="detail_label">{!! trans("message_lang.LBL_ID_CARD") !!} ({!! trans("message_lang.FRONT_DOCUMENT") !!})</span>
                                            <span class="detail_value">
                                                @if(isset($requestDetails->id_front_url))
                                                    <button type="button" class="btn btn-sm btn-outline-primary p-1 mb-1" onclick="fetchFile({!! $requestDetails->id !!}, 1)" style="cursor: pointer">
                                                        <i class="fas fa-folder"></i>
                                                    </button>
                                                @else
                                                    <small class="text-secondary">No Front Id</li>
                                                @endif
                                            </span>
                                        </div>

                                        <div class="detailField">
                                            <span class="detail_label">{!! trans("message_lang.LBL_ID_CARD") !!} ({!! trans("message_lang.BACK_DOCUMENT") !!})</span>
                                            <span class="detail_value">
                                                @if(isset($requestDetails->id_back_url))
                                                    <button type="button" class="btn btn-sm btn-outline-primary p-1 mb-1" onclick="fetchFile({!! $requestDetails->id !!})" style="cursor: pointer">
                                                        <i class="fas fa-folder"></i>
                                                    </button>
                                                @else
                                                    <small class="text-secondary">No Back Id</small>
                                                @endif
                                            </span>
                                        </div>

                                    </div>
                                </div>
                                {{-- end teller details --}}

                                {{-- Main Teller 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_MAIN_TELLER_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">{!! $requestDetails->getRequestingTeller->first_name !!}</span>
                                        </div>

                                        <div class="detailField">
                                            <span class="detail_label">{!! trans("message_lang.LBL_LOCATION_CODE") !!}</span>
                                            <span class="detail_value">{!! $requestDetails->getRequestingTeller->agentLocation->code !!}</span>
                                        </div>

                                        <div class="detailField">
                                            <span class="detail_label">{!! trans("message_lang.LBL_LOCATION_NAME") !!}</span>
                                            <span class="detail_value">{!! $requestDetails->getRequestingTeller->agentLocation->name !!}</span>
                                        </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_PROCESSING_ACTION") !!}</th>
                                                    <th>{!! trans("message_lang.LBL_COMMENTS") !!}</th>
                                                    <th>{!! trans("message_lang.LBL_DATE") !!}</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @forelse($requestDetails->getApprovalLogs as $logs)
                                                <tr>
                                                    <td>{!! $logs->getEmployee->first_name . " " . $logs->getEmployee->last_name !!}</td>
                                                    <td>{!! config('constants.ACCESS_REQUEST_PROCESSING_ACTIONS')[$logs->action_taken] !!}</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>

                                    {{-- review actions  --}}
                                    @if ($requestDetails->approval_status == 0)
                                    <div class="mb-2">
                                        <button type="button" class="btn btn-sm btn-primary" id="startProcessing" onclick="startLocationAccessReview()">
                                            {!! trans("message_lang.LBL_BEGIN_REVIEW") !!}
                                        </button>
                                    </div>
                                    @endif

                                    {{-- registration status update form  --}}
                                    <div class="mb-2 p-2" style="display: {{ in_array($requestDetails->approval_status, [$statuses['NEW'], $statuses['TELLER_CREATED']]) ? "none" : "" }}">
                                        <form action="{{ route("agentportal.location_access.updateStatus") }}" method="POST" id="statusUpdateForm">
                                            @csrf
                                            <input type="text" name="access_req_id" id="access_req_id" value="{{ $requestDetails->id }}" hidden>

                                            {{-- review action  --}}
                                            <div class="form-row mb-3">
                                                <div class="col-12 col-xl-6">
                                                    <label for="review_action">{!! trans("message_lang.LBL_REVIEW_ACTION") !!}</label>
                                                    <select name="review_action" id="review_action" class="form-control" required>
                                                        <option value="">Select Review Action</option>
                                                        @if ($requestDetails->approval_status == $statuses['NEW'])
                                                        <option value="1">{!! trans("message_lang.LBL_BEGIN_REVIEW") !!}</option>
                                                        @elseif(in_array($requestDetails->approval_status, [$statuses['UPDATE_REQUESTED'], $statuses['UNDER_REVIEW']]))
                                                        <option value="2">Approve</option>
                                                        <option value="3">Reject</option>
                                                        <option value="4">Request Modification</option>
                                                        @elseif(in_array($requestDetails->approval_status, [$statuses['REJECTED'], $statuses['UPDATE_REQUESTED']]))
                                                        <option value="2">Approve</option>
                                                        <option value="4">Request Modification</option>
                                                        @elseif($requestDetails->approval_status == $statuses['APPROVED'])
                                                        <option value="5">Create Teller</option>
                                                        @endif
                                                    </select>
                                                </div>
                                            </div>

                                            {{-- review comment  --}}
                                            <div class="form-row mb-2">
                                                <div class="col-12 col-xl-6">
                                                    <label for="review_reason">Review Comment</label>
                                                    <textarea name="review_reason" id="review_reason" 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>
                                </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 startLocationAccessReview()
    {
        // set the new status of the review form 0 to 1
        $("#review_action").val(1);
        $("#review_reason").val("Initiating the review process")

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

    $("#statusUpdateForm").submit(() => {
        $("#loading").show();
    })

    /** to be processed later */
    function fetchFile(requestId, fileType = 0) 
    {
        // show the loading 
        $("#loading").show();

        // set the url
        let url = `{{ url('agentportal/location-access/fetchFile') }}`;

        // prepare the payload
        let payload = {
            requestRef: requestId,
            isIDFront: fileType, // 0-false and 1-true
            _token: '{{csrf_token()}}'
        }

        // submit the request and process the response
        $.ajax({
            url: url,
            method: "POST",
            data: payload,
            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";

                    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");
                    }
                    
                } else {
                    alert("File not found on server!!!")
                }
            }
        })
    }

</script>
@endsection