@extends('admin.layouts.main')

@section('title')
Kua Sale Detail
@endsection

@section('content')
<main>
    <div class="two-col" v-cloak>
        @include('admin.common.sidebar')
        <div class="right-sec detail-page">
            <div class="breadcumb-bar">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="javascript:void(0)">Finance</a></li>
                        <li class="breadcrumb-item"><a href="javascript:void(0)">Branch Sales List</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Details</li>
                    </ol>
                </nav>
            </div>
            <div class="bg-white profile-header">
                <div class="profile-detail">
                    <div class="job-details">
                        <div class="about d-flex align-items-center">
                            <h2 class="job-name mb-0" v-if="itemData.customer_id != null">@{{ itemData.lead_type == 'business' ? (itemData.business_name) ? itemData.business_name[0].toUpperCase() + itemData.business_name.slice(1) : '-' : (itemData.kua_customer && itemData.kua_customer.full_name != null) ? itemData.kua_customer.full_name[0].toUpperCase() + itemData.kua_customer.full_name.slice(1) : itemData.customer_name }} - @{{ itemData.kua_product ? itemData.kua_product.product_name[0].toUpperCase() + itemData.kua_product.product_name.slice(1) : '-' }}</h2>
                            <h2 class="job-name mb-0" v-else>@{{ itemData.lead_type == 'business' ? (itemData.business_name) ? itemData.business_name[0].toUpperCase() + itemData.business_name.slice(1) : '-' : (itemData.customer_name) ? itemData.customer_name[0].toUpperCase() + itemData.customer_name.slice(1) : '-' }} - @{{ itemData.kua_product ? itemData.kua_product.product_name[0].toUpperCase() + itemData.kua_product.product_name.slice(1) : '-' }}</h2>
                            <div class="candidate-tags ml-3">
                                <a href="javascript:void(0)"><span class="em-badge dark-green">{{ $saleData->lead_status }}</span></a>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="detail-actions text-right">
                        <a href="javascript:void(0)"><i class="material-icons gray">edit</i></a>
                        <a href="javascript:void(0)" class="mr-2"><i class="material-icons gray">delete</i></a>
                        <div>
                            <label class="switch">
                                <input type="checkbox">
                                <span class="slider round"></span>
                            </label>
                        </div>
                    </div> -->
                </div>
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#prject-detail">Details</a>
                    </li>
                </ul>
            </div>
            <div class="detail-content">
                <!-- Tab panes -->
                <div class="tab-content">
                    <div id="prject-detail" class="tab-pane fade show active">
                        <!-- Lead Information of the Sale start -->
                        <div class="tab-content box d-block mb-4">
                            <div class="row">
                                <div class="col-lg-12">
                                    <!-- <div class="btn-group-em float-right mt-3" role="group">
                                        <button type="button" class="btn btn-bordered btn-sm">Edit</button>
                                    </div> -->
                                    <h3 class="detail-heading">Lead Information of the Sale</h3>
                                    <div class="row info">
                                        <div class="col-md-6 form-group">
                                            <label class="control-label gray">Customer Name</label>
                                            <p class="display-info" v-if="itemData.customer_id != null">@{{ itemData.lead_type == 'business' ? (itemData.business_name) ? itemData.business_name[0].toUpperCase() + itemData.business_name.slice(1) : '-' : (itemData.kua_customer && itemData.kua_customer.full_name) ? itemData.kua_customer.full_name[0].toUpperCase() + itemData.kua_customer.full_name.slice(1) : itemData.customer_name }}</p>
                                            <p class="display-info" v-else>@{{ itemData.lead_type == 'business' ? (itemData.business_name) ? itemData.business_name[0].toUpperCase() + itemData.business_name.slice(1) : '-' : (itemData.customer_name) ? itemData.customer_name[0].toUpperCase() + itemData.customer_name.slice(1) : '-' }}</p>
                                        </div>
                                        <div class="col-md-6 form-group">
                                            <label class="control-label gray">Customer Number</label>
                                            <p class="display-info">@{{ itemData.kua_customer && itemData.kua_customer.phone_number ? itemData.kua_customer.phone_number : '-' }}</p>
                                        </div>
                                    </div>
                                    <div class="row info">
                                        <div class="col-md-6 form-group">
                                            <label class="control-label gray">Customer Type</label>
                                            <p class="display-info" v-if="itemData.customer_id != null">@{{ itemData.kua_customer ? itemData.kua_customer.customer_type[0].toUpperCase() + itemData.kua_customer.customer_type.slice(1) : '-' }}</p>
                                            <p class="display-info" v-else>@{{ itemData.lead_type ? itemData.lead_type[0].toUpperCase() + itemData.lead_type.slice(1) : '-' }}</p>
                                        </div>
                                        <div class="col-md-6 form-group">
                                            <label class="control-label gray">Location</label>
                                            <p class="display-info">@{{ itemData.kua_region ? itemData.kua_region.region_name : '-' }}</p>
                                        </div>
                                    </div>
                                    <div class="row info">
                                        <div class="col-md-6 form-group">
                                            <label class="control-label gray">Agent</label>
                                            <p class="display-info">@{{ itemData.kua_agent ? itemData.kua_agent.full_name[0].toUpperCase() + itemData.kua_agent.full_name.slice(1) : '-' }}</p>
                                        </div>
                                        <div class="col-md-6 form-group">
                                            <label class="control-label gray">Date of LG</label>
                                            <p class="display-info">@{{ itemData.formatted_created_at ? itemData.formatted_created_at : '-' }}</p>
                                        </div>
                                    </div>
                                    <div class="row info">
                                        <div class="col-md-6 form-group">
                                            <label class="control-label gray">Date of Close Sale</label>
                                            <p class="display-info">@{{ itemData.formatted_expected_closure_date ? itemData.formatted_expected_closure_date : '-' }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Lead Information of the Sale end -->
                        <!-- Product Information start -->
                        <div class="tab-content box d-block mb-4">
                            <div class="row">
                                <div class="col-lg-12">
                                    <!-- <div class="btn-group-em float-right mt-3" role="group">
                                        <button type="button" class="btn btn-bordered btn-sm">Edit</button>
                                    </div> -->
                                    <h3 class="detail-heading">Product Information</h3>
                                    <div class="row info">
                                        <div class="col-md-6 form-group">
                                            <label class="control-label gray">Client</label>
                                            <p class="display-info">@{{ itemData.kua_company ? itemData.kua_company.name[0].toUpperCase() + itemData.kua_company.name.slice(1) : '-' }}</p>
                                        </div>
                                        <div class="col-md-6 form-group">
                                            <label class="control-label gray">Product Name</label>
                                            <p class="display-info">@{{ itemData.kua_product ? itemData.kua_product.product_name[0].toUpperCase() + itemData.kua_product.product_name.slice(1) : '-' }}</p>
                                        </div>
                                    </div>
                                    <div class="row info">
                                        <div class="col-md-6 form-group">
                                            <label class="control-label gray">Product Reference Number</label>
                                            <p class="display-info">@{{ getReferenceNumber() }}</p>
                                        </div>
                                        <div class="col-md-6 form-group">
                                            <label class="control-label gray">Sales Date</label>
                                            <p class="display-info">@{{ getSaleDate() }}</p>
                                        </div>
                                    </div>
                                    <div class="row info">
                                        <div class="col-md-6 form-group">
                                            <label class="control-label gray">Start Date</label>
                                            <p class="display-info">@{{ getStartDate() }}</p>
                                        </div>
                                        <div class="col-md-6 form-group">
                                            <label class="control-label gray">End Date</label>
                                            <p class="display-info">@{{ getEndDate() }}</p>
                                        </div>
                                    </div>
                                    <div class="row info">
                                        <div class="col-md-6 form-group">
                                            <label class="control-label gray">Asset Number</label>
                                            <p class="display-info">@{{ getAssetNumber() }}</p>
                                        </div>
                                        <div class="col-md-6 form-group">
                                            <label class="control-label gray">Sales Amount</label>
                                            <p class="display-info">@{{ itemData.sales_amount ? itemData.sales_amount : 0 }}</p>
                                        </div>
                                    </div>

                                    <template v-if="kua_sale_completion_questions.length > 0">
                                        <h3 class="detail-heading">Product Sale Completion form Information</h3>
                                        <div class="row info">
                                            <template v-for="(question, index) in kua_sale_completion_questions">
                                                <div class="col-md-6 form-group d-flex align-items-center" v-if="question.kua_product_question && question.kua_product_question.question_type === 'document' || question.kua_product_question.question_type === 'image'">
                                                    <div class="w-50">
                                                        <label class="control-label gray">@{{ question.question }}</label>
                                                        <p class="display-info">@{{ question.answer ? question.answer : '-' }}</p>
                                                    </div>
                                                    <div v-if="question.kua_sales_question_documents.length > 0">
                                                        <a :href="question.kua_sales_question_documents[0].kua_document_url" class="" target="_blank"><i class="material-icons gray">get_app</i></a>
                                                    </div>
                                                </div>
                                                <div class="col-md-6 form-group" v-else>
                                                    <label class="control-label gray">@{{ question.question }}</label>
                                                    <p class="display-info">@{{ getFormatedAnswer(question) }}</p>
                                                </div>
                                            </template>
                                        </div>
                                    </template>
                                </div>
                            </div>
                        </div>
                        <!-- Product Information end -->
                        <!-- Customer Information start -->
                        <div class="tab-content box d-block mb-4">
                            <div class="row">
                                <div class="col-lg-12">
                                    <!-- <div class="btn-group-em float-right mt-3" role="group">
                                        <button type="button" class="btn btn-bordered btn-sm">Edit</button>
                                    </div> -->
                                    <h3 class="detail-heading">Customer Information</h3>
                                    <div class="row info">
                                        <div class="col-md-4 form-group">
                                            <label class="control-label gray">Customer TIN</label>
                                            <p class="display-info">@{{ itemData.kua_customer ? itemData.kua_customer.tin : '-' }}</p>
                                        </div>
                                        <div class="col-md-4 form-group">
                                            <label class="control-label gray">ID Type</label>
                                            <p class="display-info">@{{ (itemData.kua_customer && itemData.kua_customer.national_id_type != null && itemData.kua_customer.kua_national_id_type) ? itemData.kua_customer.kua_national_id_type.title : '-' }}</p>
                                        </div>
                                        <div class="col-md-4 form-group">
                                            <label class="control-label gray">Nida Number</label>
                                            <p class="display-info">@{{ (itemData.kua_customer && itemData.kua_customer.national_id_number != null) ? itemData.kua_customer.national_id_number : '-' }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Customer Information end -->
                        <!--  Attachments start -->
                        <div class="tab-content box d-block mb-4">
                            <div class="row">
                                <div class="col-lg-12">
                                    <!-- <div class="btn-group-em float-right mt-3" role="group">
                                        <button type="button" class="btn btn-bordered btn-sm">Edit</button>
                                    </div> -->
                                    <h3 class="detail-heading">Attachments</h3>
                                    <div class="row info">
                                        @if($saleData->kuaCustomer->customer_type == 'individual')
                                        <div class="col-md-6 form-group d-flex align-items-center">
                                            <div class="w-50">
                                                <label class="control-label gray">Customer ID</label>
                                                <p class="display-info">
                                                    @php
                                                    $idDocumentUrl = '';
                                                    if($saleData->kuaCustomer->customer_type == 'individual') {
                                                    $idDocumentUrl = $saleData->kuaCustomer->kuaCustomerDocuments->firstWhere('type', 'id_document');
                                                    $idDocumentUrl = $idDocumentUrl ? $idDocumentUrl->getKuaDocumentUrlAttribute() : null;
                                                    }

                                                    $idDocumentUrl = $idDocumentUrl ? $idDocumentUrl : 'javascript:void(0)';
                                                    @endphp
                                                    {{ $saleData->kuaCustomer->customer_type == 'individual' && $saleData->kuaCustomer->id_document ? $saleData->kuaCustomer->id_document : '-' }}
                                                </p>
                                            </div>
                                            @if($idDocumentUrl != 'javascript:void(0)')
                                            <div>
                                                <a href="{{ $idDocumentUrl }}" class="" target="_blank"><i class="material-icons gray">get_app</i></a>
                                            </div>
                                            @endif
                                        </div>
                                        @endif
                                        <div class="col-md-6 form-group d-flex align-items-center">
                                            <div class="w-50">
                                                <label class="control-label gray">Proof of Payment</label>
                                                <p class="display-info">
                                                    @php

                                                    $proofOfPaymentDoc = collect($saleData->kuaSaleCompletion ?? [])
                                                    ->first(function ($doc) {
                                                    return isset($doc->question) && strtolower($doc->question) === 'proof of payment';
                                                    });

                                                    if ($proofOfPaymentDoc) {
                                                    $proofOfPayment = $proofOfPaymentDoc->kuaSalesQuestionDocuments('type', 'question_document');
                                                    $proofOfPayment = $proofOfPayment->first() ?? null;
                                                    $proofOfPayment = $proofOfPayment ? $proofOfPayment->getKuaDocumentUrlAttribute() : null;
                                                    } else {
                                                    $proofOfPayment = null;
                                                    }

                                                    $proofOfPayment = $proofOfPayment ? $proofOfPayment : 'javascript:void(0)';
                                                    @endphp
                                                    {{ $proofOfPaymentDoc && $proofOfPaymentDoc->answer ? $proofOfPaymentDoc->answer : '-' }}
                                                </p>
                                            </div>
                                            @if($proofOfPayment != 'javascript:void(0)')
                                            <div>
                                                <a href="{{ $proofOfPayment }}" class="" target="_blank"><i class="material-icons gray">get_app</i></a>
                                            </div>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="row info">
                                        <div class="col-md-6 form-group d-flex align-items-center">
                                            <div class="w-50">
                                                <label class="control-label gray">Product Form</label>
                                                <p class="display-info">
                                                    @php

                                                    $productFormDoc = collect($saleData->kuaSaleCompletion ?? [])
                                                    ->first(function ($doc) {
                                                    return isset($doc->question) && strtolower($doc->question) === 'product form';
                                                    });

                                                    if ($productFormDoc) {
                                                    $productFormUrl = $productFormDoc->kuaSalesQuestionDocuments('type', 'question_document');
                                                    $productFormUrl = $productFormUrl->first() ?? null;
                                                    $productFormUrl = $productFormUrl ? $productFormUrl->getKuaDocumentUrlAttribute() : null;
                                                    } else {
                                                    $productFormUrl = null;
                                                    }

                                                    $productFormUrl = $productFormUrl ? $productFormUrl : 'javascript:void(0)';
                                                    @endphp
                                                    {{ $productFormDoc && $productFormDoc->answer ? $productFormDoc->answer : '-' }}
                                                </p>
                                            </div>
                                            @if($productFormUrl != 'javascript:void(0)')
                                            <div>
                                                <a href="{{ $productFormUrl }}" class="" target="_blank"><i class="material-icons gray">get_app</i></a>
                                            </div>
                                            @endif
                                        </div>
                                        <div class="col-md-6 form-group d-flex align-items-center">
                                            <div class="w-50">
                                                <label class="control-label gray">Proof of Branding</label>
                                                <p class="display-info">
                                                    @php

                                                    $proofOfBrandingDoc = collect($saleData->kuaSaleCompletion ?? [])
                                                    ->first(function ($doc) {
                                                    return isset($doc->question) && strtolower($doc->question) === 'proof of branding';
                                                    });
                                                    if ($proofOfBrandingDoc) {
                                                    $proofOfBrandingUrl = $proofOfBrandingDoc->kuaSalesQuestionDocuments('type', 'question_document');
                                                    $proofOfBrandingUrl = $proofOfBrandingUrl->first() ?? null;
                                                    $proofOfBrandingUrl = $proofOfBrandingUrl ? $proofOfBrandingUrl->getKuaDocumentUrlAttribute() : null;
                                                    } else {
                                                    $proofOfBrandingUrl = null;
                                                    }

                                                    $proofOfBrandingUrl = $proofOfBrandingUrl ? $proofOfBrandingUrl : 'javascript:void(0)';
                                                    @endphp

                                                    {{ $proofOfBrandingDoc && $proofOfBrandingDoc->answer ? $proofOfBrandingDoc->answer : '-' }}
                                                </p>
                                            </div>
                                            @if($proofOfBrandingUrl != 'javascript:void(0)')
                                            <div>
                                                <a href="{{ $proofOfBrandingUrl }}" class="" target="_blank"><i class="material-icons gray">get_app</i></a>
                                            </div>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="row info">
                                        @if($saleData->kuaCustomer->customer_type == 'business')
                                        <div class="col-md-6 form-group d-flex align-items-center">
                                            <div class="w-50">
                                                <label class="control-label gray">Business Licence</label>
                                                <p class="display-info">
                                                    @php
                                                    $businessLicenceUrl = 'javascript:void(0)';
                                                    if($saleData->kuaCustomer->type == 'business') {

                                                    $businessLicenceDoc = $saleData->kuaCustomer->kuaCustomerDocuments->firstWhere('type', 'business_licence');
                                                    $businessLicenceUrl = $businessLicenceDoc ? $businessLicenceDoc->getKuaDocumentUrlAttribute() : null;
                                                    $businessLicenceUrl = $businessLicenceUrl ? $businessLicenceUrl : 'javascript:void(0)';
                                                    }
                                                    @endphp

                                                    {{ $saleData->kuaCustomer->business_licence ?? '-' }}
                                                </p>
                                            </div>
                                            @if($businessLicenceUrl != 'javascript:void(0)')
                                            <div>
                                                <a href="{{ $businessLicenceUrl }}" class="" target="_blank"><i class="material-icons gray">get_app</i></a>
                                            </div>
                                            @endif
                                        </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Attachments end -->
                        <!-- Branch Information start -->
                        <div class="tab-content box d-block mb-4">
                            <div class="row">
                                <div class="col-lg-12">
                                    <!-- <div class="btn-group-em float-right mt-3" role="group">
                                        <button type="button" class="btn btn-bordered btn-sm">Edit</button>
                                    </div> -->
                                    <h3 class="detail-heading">Branch Information</h3>
                                    <div class="row info">
                                        <div class="col-md-6 form-group">
                                            <label class="control-label gray">Received Date</label>
                                            <p class="display-info">@{{ getBranchReceivedDate() }}</p>
                                        </div>
                                        <div class="col-md-6 form-group">
                                            <label class="control-label gray">Received By</label>
                                            <p class="display-info">@{{ getBranchReceivedBy() }}</p>
                                        </div>
                                    </div>
                                    <div class="row info">
                                        <div class="col-md-6 form-group">
                                            <label class="control-label gray">Branch Status</label>
                                            <p class="display-info">@{{ itemData.branch_status ? itemData.branch_status : '-' }}</p>
                                        </div>
                                        <div class="col-md-6 form-group">
                                            <label class="control-label gray">HQ Sent Date</label>
                                            <p class="display-info">@{{ getDispatchHQDate() }}</p>
                                        </div>
                                    </div>
                                    <div class="row info">
                                        <div class="col-md-6 form-group">
                                            <label class="control-label gray">Branch Notes</label>
                                            <p class="display-info">@{{ getBranchRejectionNote() }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Branch Information end -->
                        <!-- Headquarter Information start -->
                        @if($panel == 'hq')
                        <div class="tab-content box d-block mb-4">
                            <div class="row">
                                <div class="col-lg-12">
                                    <!-- <div class="btn-group-em float-right mt-3" role="group">
                                        <button type="button" class="btn btn-bordered btn-sm">Edit</button>
                                    </div> -->
                                    <h3 class="detail-heading">Headquarter Information</h3>
                                    <div class="row info">
                                        <div class="col-md-6 form-group">
                                            <label class="control-label gray">HQ Submitted By</label>
                                            <p class="display-info">@{{ getDispatchHQBy() }}</p>
                                        </div>
                                        <div class="col-md-6 form-group">
                                            <label class="control-label gray">HQ Received Date</label>
                                            <p class="display-info">@{{ getHQReceivedDate() }}</p>
                                        </div>
                                    </div>
                                    <div class="row info">
                                        <div class="col-md-6 form-group">
                                            <label class="control-label gray">HQ Received By</label>
                                            <p class="display-info">@{{ getHQReceivedBy() }}</p>
                                        </div>
                                        <div class="col-md-6 form-group">
                                            <label class="control-label gray">HQ Status</label>
                                            <p class="display-info">@{{ itemData.hq_status ? itemData.hq_status : '-' }}</p>
                                        </div>
                                    </div>
                                    <div class="row info">
                                        <div class="col-md-6 form-group">
                                            <label class="control-label gray">HQ Notes</label>
                                            <p class="display-info">@{{ getHqRejectionNote() }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endif
                        <!-- Headquarter Information end -->
                        
                        <!-- Reject with Reason start -->
                        <!-- <div class="tab-content box d-block mb-4">
                            <div class="row">
                                <div class="col-lg-12">
                                    <h3 class="detail-heading">Reject with Reason</h3>
                                    <div class="row info">
                                        <div class="col-md-12 form-group">
                                            <label class="control-label gray">Reject Type</label>
                                            <p class="display-info">@{{ '-' }}</p>
                                        </div>
                                    </div>
                                    <div class="row info">
                                        <div class="col-md-12 form-group">
                                            <label class="control-label gray">Comment</label>
                                            <p class="display-info">@{{ '-' }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> -->
                        <!-- Reject with Reason end -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</main>
@endsection

@push('pageJs')
<script>
    var kuaSalesDetailUrl = "{{ route('kua-sales.getDetail', ['id' => $saleData->id]) }}";
</script>

<script src="{{ asset('js/admin/kua_branch_hq_sales_detail.js') }}"></script>
@endpush