@extends('vendor.layouts.master')
@section('content')
    <div class="mb-4 breadcrumb-dashboard">
        <div class="flex-between gap-2">
            <h6 class="page-title">@lang('Property: ') {{ __(@$invest->property->title) }}</h6>
            <div class="flex-align flex-nowrap gap-2 export-btn">
                <a href="{{ route('vendor.invest.installment.download.excel', $invest->id) }}">
                    <i class="fa-solid fa-file-excel"></i>
                    @lang('Download Excel')</a> |
                <a href="{{ route('vendor.invest.installment.download.pdf', $invest->id) }}">
                    <i class="fa-solid fa-file-pdf"></i>
                    @lang('Download Pdf')
                </a>
            </div>
        </div>
        <div class="my-xxl-5 my-3">
            <div class="row g-xl-4 g-3">
                <div class="col-xxl-3 col-sm-6 col-xsm-6">
                    <div class="investment-widget-item base">
                        <div class="investment-widget-icon">
                            <i class="fa-solid fa-coins"></i>
                        </div>
                        <div class="investment-widget-info">
                            <p class="investment-widget-title">
                                @lang('Per installment amount')
                            </p>
                            <h4 class="investment-widget-number">{{ showAmount(@$invest->per_installment_amount) }}</h4>
                        </div>
                    </div>
                </div>
                <div class="col-xxl-3 col-sm-6 col-xsm-6">
                    <div class="investment-widget-item success">
                        <div class="investment-widget-icon">
                            <i class="fa-solid fa-landmark"></i>
                        </div>
                        <div class="investment-widget-info">
                            <p class="investment-widget-title">
                                @lang('Total invest amount')
                            </p>
                            <h4 class="investment-widget-number">{{ showAmount(@$invest->total_invest_amount) }}</h4>
                        </div>
                    </div>
                </div>
                <div class="col-xxl-3 col-sm-6 col-xsm-6">
                    <div class="investment-widget-item info">
                        <div class="investment-widget-icon">
                            <i class="fa-solid fa-receipt"></i>
                        </div>
                        <div class="investment-widget-info">
                            <p class="investment-widget-title">
                                @lang('Paid amount')
                            </p>
                            <h4 class="investment-widget-number">{{ showAmount(@$invest->paid_amount) }}</h4>
                        </div>
                    </div>
                </div>
                <div class="col-xxl-3 col-sm-6 col-xsm-6">
                    <div class="investment-widget-item danger">
                        <div class="investment-widget-icon">
                            <i class="fa-solid fa-money-bill-transfer"></i>
                        </div>
                        <div class="investment-widget-info">
                            <p class="investment-widget-title">
                                @lang('Due amount')
                            </p>
                            <h4 class="investment-widget-number">{{ showAmount(@$invest->due_amount) }}</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="table-responsive">
        <table class="table table--responsive--md">
            <thead>
                <tr>
                    <th>@lang('Installment Date')</th>
                    <th>@lang('Paid Date')</th>
                    <th>@lang('Late Fee')</th>
                    <th>@lang('Status')</th>
                </tr>
            </thead>
            <tbody>
                @forelse($invest->installments as $key => $installment)
                    @php
                        $disabled = '';
                        if ($installment->status == Status::INSTALLMENT_SUCCESS || @$invest->installments[$key - 1]->status == Status::INSTALLMENT_PENDING) {
                            $disabled = 'disabled';
                            if ($key == 0 && $invest->installments[$key]->status == Status::INSTALLMENT_PENDING) {
                                $disabled = '';
                            }
                        }
                    @endphp
                    <tr>
                        <td>
                            <div>
                                {{ showDateTime($installment->next_time, 'Y-m-d') }}<br>
                                <span class="small">{{ diffForHumans($installment->next_time) }}</span>
                            </div>
                        </td>
                        <td>
                            <div>
                                @if ($installment->paid_time)
                                    {{ showDateTime($installment->paid_time, 'Y-m-d') }}<br>
                                    <span class="small">{{ diffForHumans($installment->paid_time) }}</span>
                                @else
                                    @lang('N/A')
                                @endif
                            </div>
                        </td>
                        <td>{{ showAmount($installment->late_fee) }}</td>
                        <td>
                            @if ($installment->status == Status::INSTALLMENT_SUCCESS)
                                <span class="badge badge--success">@lang('Completed')</span>
                            @else
                                <span class="badge badge--warning">@lang('Due')</span>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td class="text-muted text-center" colspan="100%">{{ __($emptyMessage) }}
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>


    @include($activeTemplate . 'partials.installment_modal')
@endsection

@push('script')
    <script>
        (function($) {
            "use strict";

            $(document).on('click', '#installmentBtn', function() {
                let action = $(this).data().action;
                let installment = $(this).data().installment;
                var modal = $('#installmentModal');
                modal.find('input[name="installment_amount"]').val((
                        {{ getAmount(@$invest->per_installment_amount) }} + parseInt(installment.late_fee))
                    .toFixed(2));
                if (installment.late_fee > 0) {
                    modal.find('.lateFeeWarning').addClass('d-block');
                    modal.find('.lateFeeWarning').removeClass('d-none');
                }
                modal.find('form').attr('action', action);
                modal.modal('show');
            });
        })(jQuery);
    </script>
@endpush

@push('style')
    <style>
        .investment-widget-item {
            border-radius: 10px;
            width: 100%;
            padding: 17px;
            position: relative;
            overflow: hidden;
            z-index: 1;
            border: 1px solid hsl(var(--theme)/0.22);
            height: 100%;
        }

        @media screen and (min-width: 426px) and (max-width: 768px) {
            .investment-widget-item {
                padding: 10px;
            }
        }

        @media screen and (max-width: 425px) {
            .export-btn a {
                font-size: 14px;
            }
        }

        .investment-widget-icon {
            position: absolute;
            right: 6px;
            bottom: -10px;
            color: hsl(var(--theme)/0.25);
            font-size: 45px;
            z-index: -1;
        }

        .investment-widget-info {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;
        }

        .investment-widget-number {
            margin-bottom: 0px;
            font-size: clamp(1.25rem, 1.0335rem + 0.3902vw, 1.5rem);
            color: hsl(var(--dark)/0.7);
        }

        .investment-widget-title {
            padding-bottom: 8px;
            color: #000;
            font-weight: 500;
        }

        .investment-widget-item.success {
            --theme: var(--success);
        }

        .investment-widget-item.info {
            --theme: var(--info);
        }

        .investment-widget-item.danger {
            --theme: var(--danger);
        }

        .investment-widget-item.warning {
            --theme: var(--warning);
        }

        .investment-widget-item.base {
            --theme: var(--base);
        }

        .investment-widget-item.base-two {
            --theme: var(--base-two);
        }
    </style>
@endpush
