@section('title')
Transaction View
@stop
<div>
    <div class="content-header">
        <h1> 
            @lang("transactions.transaction") - <span class="text-primary">TX-{{ $transaction->id }}</span> - 
            @if($transaction->status == "UNPAID" || $transaction->status == "DRAFT") 
               <span class="text-danger">Unpaid</span> 
               @if($payment_issue)
                    <button wire:click="paymentIssueFix()" class="btn btn-sm btn-warning print-invoice" style="float: right;">Fix Payment Issue</button>
               @else
                    @if(sizeof($external_payments) == 0)
                        @if ($transaction->service->name == "Rental")
                                @if ($transaction->service->sub_category == "Vehicle")
                                    <a href="{{url('m/rental/transaction/'.$transaction->id.'?rentalType=vehicle')}}" class="btn btn-sm btn-info print-invoice" style="float: right;">@lang("payment.pay")</a>
                                @else
                                    <a href="{{url('m/rental/transaction/'.$transaction->id.'?rentalType=property')}}" class="btn btn-sm btn-info print-invoice" style="float: right;">@lang("payment.pay")</a>
                                @endif
                        @else
                            <a href="{{url('m/'.$serviceSlug.'/transaction/'.$transaction->id)}}" class="btn btn-sm btn-info print-invoice" style="float: right;">@lang("payment.pay")</a>
                        @endif
                    @else
                        @if ($access_payment_details)
                            <span class="text-danger" style="float:right; font-size: medium;">@lang('message.error.check_payments')</span>
                        @else
                            <span class="text-danger" style="float:right; font-size: medium;">@lang('message.error.payment_failed_contact')</span>
                        @endif
                    @endif
               @endif
            @else 
               <span class="text-success">Paid</span>
            @endif
        </h1>
    </div>
    <div wire:loading><div class="loading-modal" style="display: block;"><span class="loading_text">Loading Please Wait...</span></div></div>
    <div class="content clearfix">
        <div class="mt-2 mb-3 body current" id="coform-p-0" role="tabpanel" aria-labelledby="coform-h-0" aria-hidden="false">
            
            
            <div class="form-group">
                <div class="row">
                    
                    <div class="panel panel-success">

                        <div class="panel-body">
                            @if (session('status'))
                                <div id='wizard-error' class='validation' style='display;color:green;padding-bottom: 10px;'> {{ session('status') }}</div>
                            @endif
                            @if (session('error'))
                                <div id='wizard-error' class='validation text-danger' style='display;padding-bottom: 10px;'> {{ session('error') }}</div>
                            @endif
                            <div class="row">

                                <div class="bs-example">
                                    <ul class="nav nav-pills" style="margin-bottom: 15px;">
                                        <li class="{{$sale_details_tab}}">
                                            <a href="#trndetails" data-toggle="tab" aria-expanded="true">@lang("transactions.sale_details")</a>
                                        </li>
                                        <li class="">
                                            <a href="#property" data-toggle="tab" aria-expanded="true">@lang("mof." . $serviceSlug . "_details")</a>
                                        </li>                                        
                                        <li class="dropdown1 {{$seller_tab}}">
                                            <a href="#seller" data-toggle="tab" aria-expanded="false">@lang("customer.seller_details")</a>
                                        </li>         
                                        <li class="dropdown1 {{$buyer_tab}}">
                                            <a href="#buyer" data-toggle="tab" aria-expanded="false">@lang("customer.buyer_details")</a>
                                        </li>                                                       
                                        <li class="dropdown2 {{$third_party_seller_tab}}">
                                            <a href="#sellerThirdPartys" data-toggle="tab" aria-expanded="false">@lang("customer.seller_third_party")</a>
                                        </li>      
                                        <li class="dropdown2 {{$third_party_buyer_tab}}">
                                            <a href="#buyerThirdPartys" data-toggle="tab" aria-expanded="false">@lang("customer.buyer_third_party")</a>
                                        </li>     
                                        <li class="dropdown2 {{$guarantor_tab}}">
                                            <a href="#guarantors" data-toggle="tab" aria-expanded="false">@lang("mof.guarantors")</a>
                                        </li>                                     
                                        <li class="dropdown2 {{$documents_tab}}">
                                            <a href="#documents" data-toggle="tab" aria-expanded="false">@lang("documents.documents")  </a>
                                        </li>
                                        @if($access_payment_details)
                                        <li class="dropdown2 {{$payment_details_tab}}">
                                            <a href="#payment_details" data-toggle="tab" aria-expanded="false">@lang("mof.payment_details")  </a>
                                        </li>        
                                        @endif                                                                                                   
                                    </ul>
                                    <div id="myTabContent" class="tab-content">
                                        <div class="tab-pane fade {{$sale_details_tab}} in" id="trndetails">
                                            <p class="m-r-6">
                                                @include("livewire.transaction.$serviceSlug._saleview")       
                                                @include("admin.admin.common-audit-partial")                                         
                                            </p>
                                        </div>    

                                        <div class="tab-pane fade" id="property">
                                            <p class="m-r-6">
                                                @include("livewire.common._" . $serviceSlug . "view")
                                            </p>
                                        </div>                                          

                                        <div class="tab-pane fade {{$seller_tab}} in" id="seller">
                                            <p class="m-r-6">
                                                @include('livewire.common._customerlistview', ["customers" => $sellers, "reference" =>  App\Config\AppConstants::SELLER])                                           
                                            </p>
                                        </div>

                                        <div class="tab-pane fade {{$buyer_tab}} in" id="buyer">
                                            <p class="m-r-6">
                                                @include('livewire.common._customerlistview', ["customers" => $buyers, "reference" =>  App\Config\AppConstants::BUYER])                                               
                                            </p>
                                        </div>                                        

                                        <div class="tab-pane fade {{$third_party_seller_tab}} in" id="sellerThirdPartys">
                                            <p class="m-r-6">
                                                @include('livewire.common._customerlistview', ["customers" => $sellerThirdPartys,  "reference" =>  App\Config\AppConstants::SELLER_THIRD_PARTY])                                                  
                                            </p>
                                        </div>

                                        <div class="tab-pane fade {{$third_party_buyer_tab}} in" id="buyerThirdPartys">
                                            <p class="m-r-6">
                                                @include('livewire.common._customerlistview', ["customers" => $buyerThirdPartys,  "reference" =>  App\Config\AppConstants::BUYER_THIRD_PARTY])                                                
                                            </p>
                                        </div>      
                                        
                                        <div class="tab-pane fade {{$guarantor_tab}} in" id="guarantors">
                                            <p class="m-r-6">
                                                @include('livewire.common._customerlistview', ["customers" => $guarantors,  "reference" =>  App\Config\AppConstants::GUARANTOR])                                                
                                            </p>
                                        </div>      

                                        <div class="tab-pane fade {{$documents_tab}} in" id="documents">
                                            <p class="m-r-6">
                                                @if ($upload_document)
                                                    @livewire("document.document-upload-component", ["transactionId" => $transaction->id, "userId" => $user_id])
                                                @endif
                                                @include("livewire.common._transaction_documents") 
                                            </p>
                                        </div>    
                                        @if($access_payment_details)
                                        <div class="tab-pane fade {{$payment_details_tab}} in" id="payment_details">
                                            <p class="m-r-6">
                                                @include('livewire.common._external_payments', ["external_payments" => $external_payments]) 
                                                @include('livewire.transaction._external_payment_confirmation_model')                                               
                                            </p>
                                        </div> 
                                        @endif
                                    </div>
                                </div>                                
                                
                            </div>
                        </div>
                    </div>                
                </div>
            </div>     
 
        </div>                                                
    </div>
</div>
@section('footer_scripts')
<link rel="stylesheet" type="text/css" href="{{ asset('assets/vendors/bootstrap-datepicker/css/bootstrap-datepicker.css') }}">
<script type="text/javascript" src="{{ asset('assets/vendors/bootstrap-datepicker/js/bootstrap-datepicker.js') }}" ></script>
<script type="text/javascript">     
    $(document).ready(function(){
        initDatePicker();
    });

    window.addEventListener('js-event', event => {initDatePicker()})

    function initDatePicker() {
        $('#settlement_date').datepicker({
            format: 'dd-mm-yyyy',
            autoclose: true,
            todayHighlight: true
        }).datepicker("setDate", new Date());
    }

</script>
<script>
    $(document).ready(function() {
        $(".wrapper").addClass("hide_menu");                          
    });
</script>  

<script type="text/javascript">

    $(document).ready(function(){
        $('#print-view-modal').on('shown.bs.modal', function () {
            $(".modal-backdrop.in").hide();
        });
    });
    
</script>    
@stop