@extends('vendor.layouts.master')
@section('content')
    <div class="d-flex {{ $property ? 'justify-content-between' : 'justify-content-end' }} align-items-center mb-4 breadcrumb-dashboard gap-3">
        @if ($property)
            <h6 class="m-0">{{ __(@$property->title) }}</h6>
        @endif
        <form class="search-wrapper">
            <div class="input-group">
                <input type="text" name="search" class="form--control" value="{{ request()->search }}" placeholder="@lang('Search by property')">
                <button class="btn--base btn" type="submit">
                    <span class="icon"><i class="la la-search"></i></span>
                </button>
            </div>
        </form>
    </div>

    <div class="table--responsive">
        <table class="table table--responsive--md">
            <thead>
                <tr>
                    <th>@lang('Investment Id')</th>
                    <th>@lang('User')</th>
                    <th>@lang('Invested Amount')</th>
                    <th>@lang('Due Amount')</th>
                    <th>@lang('Status')</th>
                    <th>@lang('Action')</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($invests as $invest)
                    <tr>
                        <td>
                            <span>{{ $invest->investment_id }}</span>
                        </td>
                        <td>
                            {{ $invest->user->username }}
                        </td>
                        <td><strong>{{ showAmount($invest->total_invest_amount) }}</strong>
                        </td>
                        <td><strong>{{ showAmount($invest->due_amount) }}</strong></td>
                        <td>@php echo $invest->investStatusBadge @endphp</td>
                        <td>
                            <div class="action-wrapper dropdown">
                                <button type="button" class="action-wrapper__btn btn-outline--base btn btn--sm" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                    <span class="icon">
                                        <i class="fa fa-ellipsis-v"></i>
                                    </span>
                                    @lang('Action')
                                </button>
                                <div class="dropdown-menu p-0 border-0 dropdown-menu-end">
                                    <div class="action-wrapper__menu w-100 ">
                                        @php
                                            if ($invest->profit_status == Status::COMPLETED) {
                                                $invest->badge_text = '<span class="badge badge--success">' . trans('Completed') . '</span>';
                                            } elseif ($invest->profit_status == Status::RUNNING) {
                                                $invest->badge_text = showDateTime($invest->next_profit_date, 'Y-m-d');
                                            } else {
                                                $invest->badge_text = '<span class="badge badge--warning">' . trans('Investment Running') . '</span>';
                                            }
                                        @endphp
                                        @if (count($invest->installments) > 0)
                                            <a href="{{ route('vendor.invest.installment.details', encrypt($invest->id)) }}" class="action-btn-link">
                                                <i class="las la-file-invoice-dollar"></i> @lang('Invoice')
                                            </a>
                                        @endif
                                        <a href="{{ route('vendor.invest.contract.download', $invest->id) }}" class="action-btn-link">
                                            <i class="las la-file-download"></i> @lang('Download')
                                        </a>
                                        <a href="{{ route('vendor.invest.profit.history') }}?search={{ $invest->investment_id }}" class="action-btn-link">
                                            <i class="fas fa-coins"></i> @lang('Profit Log')
                                        </a>

                                        <a href="javascript:void(0)" class="action-btn-link detailBtn" data-invest="{{ $invest }}">
                                            <i class="las la-desktop"></i> @lang('Detail')
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td class="text-center" colspan="100%">{{ __($emptyMessage) }}</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if ($invests->hasPages())
        <div class="custom--pagination">
            {{ $invests->links() }}
        </div>
    @endif

    <div class="modal fade custom--modal" id="detailModal">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">@lang('Investment Details')</h5>
                    <button aria-hidden="true" class="btn-close shadow-none" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="modal-form__header">
                        <ul class="list-group userData mb-2 list-group-flush"></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('style')
    <style>
        .dropdown-menu {
            margin-top: 10px;
        }

        .action-wrapper__menu {
            width: 120px;
            padding: 0px;
            background: hsl(var(--white));
            box-shadow: 0 0 5px hsl(var(--dark)/.1);
            display: flex;
            flex-direction: column;
            border-radius: 4px;
            font-size: 14px;
        }

        .action-wrapper {
            position: relative;
        }

        .action-wrapper__btn {
            padding: 6px 10px;
            font-size: 12px;
            border: 1px solid hsl(var(--dark)/.2);
        }



        .action-wrapper__menu.show {
            display: flex;
        }

        .action-btn-link {
            display: flex;
            align-items: center;
            gap: 6px;
            color: hsl(var(--dark));
            padding: 5px 10px;
            position: relative;
        }

        .action-btn-link:hover {
            background: hsl(var(--base)/.2);
        }

        .search-wrapper .form--control {
            padding: 0px 15px;
        }
    </style>
@endpush
@push('script')
    <script>
        (function($) {
            "use strict";
            $('.detailBtn').on('click', function() {
                let modal = $('#detailModal');
                let invest = $(this).data('invest');
                let curSymbol = '{{ gs('cur_sym') }}';
                let html = '';
                html += `<li class="list-group-item d-flex justify-content-between align-items-center">
                            <span class="list--group-text">@lang('Property')</span>
                            <span class="list--group-desc"><strong>${invest.property.title}</strong></span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <span class="list--group-text">@lang('Total Invest Amount')</span>
                            <span class="list--group-desc"><strong>${curSymbol}${Number(invest.total_invest_amount).toFixed(2)}</strong></span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <span class="list--group-text">@lang('Paid Amount')</span>
                            <span class="list--group-desc">${curSymbol}${Number(invest.paid_amount).toFixed(2)}</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <span class="list--group-text">@lang('Due Amount')</span>
                            <span class="list--group-desc">${curSymbol}${Number(invest.due_amount).toFixed(2)}</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <span class="list--group-text">@lang('Per Installment Amount')</span>
                            <span class="list--group-desc">${curSymbol}${Number(invest.per_installment_amount).toFixed(2)}</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <span class="list--group-text">@lang('Next Installment Date')</span>
                            <span class="list--group-desc">${invest.invest_status == 1 ?  formatTime(new Date(invest.installments[0].next_time)) : '<span class="badge badge--success">@lang('Completed')</span>'}</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <span class="list--group-text">@lang('Total Profit')</span>
                            <span class="list--group-desc"><strong>${curSymbol}${Number(invest.total_profit).toFixed(2)}</strong></span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <span class="list--group-text">@lang('Next Profit Date')</span>
                            <span class="list--group-desc">${invest.badge_text}</span>
                        </li>`;

                modal.find('.userData').html(html);
                modal.modal('show');
            });

            function formatTime(date) {
                const year = date.getFullYear();
                const month = String(date.getMonth() + 1).padStart(2, '0');
                const day = String(date.getDate()).padStart(2, '0');

                return `${year}-${month}-${day}`;
            }
        })(jQuery);
    </script>
@endpush
