<!-- ROW START -->
<div class="row">
    <!--  USER CARDS START -->
    <div class="col-sm-9 mb-4 mb-xl-0 mb-lg-4 mb-md-0">

        <x-cards.data :title="__('modules.deal.dealInfo')">

            <x-slot name="action">
                <div class="dropdown">
                    <button class="btn f-14 px-0 py-0 text-dark-grey dropdown-toggle" type="button"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="fa fa-ellipsis-h"></i>
                    </button>

                    <div class="dropdown-menu dropdown-menu-right border-grey rounded b-shadow-4 p-0"
                        aria-labelledby="dropdownMenuLink" tabindex="0">
                        <a class="dropdown-item openRightModal"
                            href="{{ route('deals.edit', $deal->id) }}">@lang('app.edit')</a>
                        @if (
                            $deleteLeadPermission == 'all'
                            || ($deleteLeadPermission == 'added' && user()->id == $deal->added_by)
                            || ($deleteLeadPermission == 'owned' && !is_null($deal->agent_id) && user()->id == $deal->leadAgent->user->id)
                            || ($deleteLeadPermission == 'both' && ((!is_null($deal->agent_id) && user()->id == $deal->leadAgent->user->id)
                                    || user()->id == $deal->added_by))
                        )
                            <a class="dropdown-item delete-table-row" href="javascript:;" data-id="{{ $deal->id }}">
                                    @lang('app.delete')
                                </a>
                        @endif

                    </div>
                </div>
            </x-slot>

            <p class="f-w-500">
                <x-status style="color: {{ $deal->pipeline->label_color }}" color="yellow" :value="$deal->pipeline->name" /> <i class="bi bi-arrow-right mx-"></i> <x-status style="color: {{ $deal->leadStage->label_color }}" color="yellow" :value="$deal->leadStage->name" />
            </p>
            <x-cards.data-row :label="__('modules.deal.dealName')" :value="$deal->name ?? '--'" />

            <x-cards.data-row :label="__('modules.leadContact.leadContact')" :value="$deal->contact->client_name_salutation ?? '--'" />

            <x-cards.data-row :label="__('app.email')" :value="$deal->contact->client_email ?? '--'" />

            <x-cards.data-row :label="__('modules.lead.companyName')" :value="!empty($deal->contact->company_name) ? $deal->contact->company_name : '--'" />

            <div class="col-12 px-0 pb-3 d-flex">
                <p class="mb-0 text-lightest f-14 w-30 d-inline-block text-capitalize">
                    @lang('modules.deal.dealAgent')</p>
                <p class="mb-0 text-dark-grey f-14">
                    @if (!is_null($deal->leadAgent))
                        <x-employee :user="$deal->leadAgent->user" />
                    @else
                        --
                    @endif
                </p>
            </div>

            <div class="col-12 px-0 pb-3 d-flex">
                <p class="mb-0 text-lightest f-14 w-30 d-inline-block text-capitalize">{{ __('app.added').' '.__('app.by') }}</p>
                <p class="mb-0 text-dark-grey f-14">
                    @if (!is_null($deal->addedBy))
                        <x-employee :user="$deal->addedBy" />
                    @else
                        --
                    @endif
                </p>
            </div>

            @if ($deal->leadStatus)
                <div class="col-12 px-0 pb-3 d-flex">
                    <p class="mb-0 text-lightest f-14 w-30 d-inline-block text-capitalize">@lang('app.status')</p>
                    <p class="mb-0 text-dark-grey f-14">
                        <x-status :value="$deal->leadStatus->type"
                            :style="'color:'.$deal->leadStatus->label_color" />
                    </p>

                </div>
            @endif

            <x-cards.data-row :label="__('modules.deal.closeDate')" :value="($deal->close_date) ? $deal->close_date->translatedFormat(company()->date_format) : '--'" />
            <x-cards.data-row :label="__('modules.deal.dealValue')" :value="($deal->value) ? currency_format($deal->value, $deal->currency_id) : '--'" />

            <x-cards.data-row :label="__('modules.lead.products')" :value="($productNames) ? implode(', ' , $productNames) : '--'" />

            {{-- Custom fields data --}}
            <x-forms.custom-field-show :fields="$fields" :model="$deal"></x-forms.custom-field-show>

        </x-cards.data>
    </div>
    <!--  USER CARDS END -->

    <div class="col-sm-3">


        <x-cards.data  :title="__('modules.leadContact.leadDetails')">

            <x-cards.data-row :label="__('modules.leadContact.leadContact')" value="<a href='{{ route('lead-contact.show', $deal->contact->id) }}' class='text-darkest-grey'>{{ $deal->contact->client_name_salutation }}</a>" />

            <x-cards.data-row :label="__('app.email')" :value="$deal->contact->client_email ?? '--'" />
            <x-cards.data-row :label="__('modules.lead.mobile')" :value="$deal->contact->mobile ?? '--'" />

            <x-cards.data-row :label="__('modules.lead.companyName')" :value="!empty($deal->contact->company_name) ? $deal->contact->company_name : '--'" />
            
            <div class="d-flex">
                @if ($deal->contact->client_email)
                <x-forms.link-secondary class="mr-3" link='mailto:{{ $deal->contact->client_email }}' icon="envelope">@lang('app.email')</x-forms.link-secondary>
                @endif

                @if ($deal->contact->mobile )
                <x-forms.button-secondary class="btn-copy" data-clipboard-text="{{ $deal->contact->mobile }}" icon="phone">@lang('app.mobile')</x-forms.button-secondary>
                @endif
            </div>

        </x-cards.data>
    </div>
</div>
<!-- ROW END -->
<script src="{{ asset('vendor/jquery/clipboard.min.js') }}"></script>

<script>
var clipboard = new ClipboardJS('.btn-copy');

clipboard.on('success', function(e) {
    Swal.fire({
        icon: 'success',
        text: '@lang("app.phoneCopied")',
        toast: true,
        position: 'top-end',
        timer: 3000,
        timerProgressBar: true,
        showConfirmButton: false,
        customClass: {
            confirmButton: 'btn btn-primary',
        },
        showClass: {
            popup: 'swal2-noanimation',
            backdrop: 'swal2-noanimation'
        },
    })
});
</script>