rest

<div class="milestone-client-card" x-data="window._{{ $m->uid }}">

<div class="p-4 shadow-lg hover:shadow-sm duration-500 border border-zinc-100 rounded-lg overflow-hidden bg-white dark:bg-zinc-800">

<div class="flex items-center justify-between mb-3">

{{-- description --}}

<div class="truncate font-bold px-2">

<span>{{ $m->description }}</span>

</div>

{{-- options --}}

<div class=" flex ">

<button type="button" data-dropdown-toggle="milestones-{{ $m->uid }}-actions-dropdown" data-dropdown-placement="left-start" class="inline-flex justify-center px-2 py-2 border border-gray-200 dark:border-zinc-700 shadow-sm text-xs font-medium rounded-full text-gray-700 dark:text-gray-300 bg-white dark:bg-zinc-800 hover:bg-gray-50 dark:hover:bg-zinc-900 focus:outline-none focus:ring-0">

<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">

<path stroke-linecap="round" stroke-linejoin="round" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />

</svg>

</button>

<div id="milestones-{{ $m->uid }}-actions-dropdown" class="z-10 hidden bg-white divide-y divide-gray-100 rounded shadow w-48 dark:bg-zinc-800">

<ul class="text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefault">

@if( $m->work)

<li>

<button id="button-view-work-card-{{ $m->uid }}" class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-zinc-700 w-full">

<svg class="ltr:mr-3 rtl:ml-3 text-gray-500 w-5 h-5" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

<path d="M20 2H4c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h3v3.767L13.277 18H20c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zm0 14h-7.277L9 18.233V16H4V4h16v12z">

</path>

<path d="M7 7h10v2H7zm0 4h7v2H7z"></path>

</svg>

<span class="text-xs font-medium text-gray-700 dark:text-gray-300">{{

__('messages.t_view_work') }}</span>

</button>

</li>

@endif

@if( $m->status === 'request')

<li>

<button wire:click="confirmPay('{{ $m->uid }}')" type="button" class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-zinc-700 w-full">

<svg class="ltr:mr-3 rtl:ml-3 text-gray-500 w-5 h-5" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

<path d="M12 15c-1.84 0-2-.86-2-1H8c0 .92.66 2.55 3 2.92V18h2v-1.08c2-.34 3-1.63 3-2.92 0-1.12-.52-3-4-3-2 0-2-.63-2-1s.7-1 2-1 1.39.64 1.4 1h2A3 3 0 0 0 13 7.12V6h-2v1.09C9 7.42 8 8.71 8 10c0 1.12.52 3 4 3 2 0 2 .68 2 1s-.62 1-2 1z">

</path>

<path d="M5 2H2v2h2v17a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V4h2V2H5zm13 18H6V4h12z">

</path>

</svg>

<span class="text-xs font-medium text-gray-700 dark:text-gray-300">{{

__('messages.t_deposit_funds') }}</span>

</button>

</li>

@endif

@if( $m->status === 'funded')

<li>

<button wire:click="confirmRelease('{{ $m->uid }}')" type="button" class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-zinc-700 w-full">

<svg class="ltr:mr-3 rtl:ml-3 text-gray-500 w-5 h-5" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

<path d="m10 15.586-3.293-3.293-1.414 1.414L10 18.414l9.707-9.707-1.414-1.414z">

</path>

</svg>

<span class="text-xs font-medium text-gray-700 dark:text-gray-300">{{

__('messages.t_release') }}</span>

</button>

</li>

@endif

</ul>

</div>

</div>

{{-- view work --}}

<x-forms.modal id="modal-view-work-card-{{ $m->uid }}" target="button-view-work-card-{{ $m->uid }}" uid="modal_{{ uid() }}" placement="center-center" size="max-w-2xl">

{{-- Modal heading --}}

<x-slot name="title">{{ __('messages.t_download_files')}}</x-slot>

{{-- Modal content --}}

<x-slot name="content">

{{-- Download files --}}

@if ($m->work)

<div class="-mt-4 rounded-t-md">

<div class="ltr:-ml-4 rtl:-mr-4 flex justify-between items-center flex-wrap sm:flex-nowrap">

<div class="ltr:ml-4 rtl:mr-4 mt-4">

<p class="text-sm font-medium text-gray-900 dark:text-gray-100">

{{ __('messages.t_always_scan_files_before_open_delivered_work') }}

</p>

</div>

</div>

</div>

<div class="">

{{-- File details --}}

@if ($m->work->attached_work)

<div class="flex items-center justify-between space-x-3 mb-6 rtl:space-x-reverse">

<div class="min-w-0 flex-1 flex items-center space-x-3 rtl:space-x-reverse">

<div class="flex-shrink-0">

<svg class="w-10" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">

<path style="fill:#ECEDEF;" d="M100.641,0c-14.139,0-25.6,11.461-25.6,25.6v460.8c0,14.139,11.461,25.6,25.6,25.6h375.467c14.139,0,25.6-11.461,25.6-25.6V85.333L416.375,0H100.641z">

</path>

<path style="fill:#D9DCDF;" d="M441.975,85.333h59.733L416.375,0v59.733C416.375,73.872,427.836,85.333,441.975,85.333z">

</path>

<path style="fill:#C6CACF;" d="M399.308,42.667H75.041v153.6h324.267c4.713,0,8.533-3.821,8.533-8.533V51.2C407.841,46.487,404.02,42.667,399.308,42.667z">

</path>

<path style="fill:#FFC44F;" d="M382.241,179.2H18.843c-7.602,0-11.41-9.191-6.034-14.567L75.041,102.4L12.809,40.167C7.433,34.791,11.241,25.6,18.843,25.6h363.398c4.713,0,8.533,3.821,8.533,8.533v136.533C390.775,175.379,386.954,179.2,382.241,179.2z">

</path>

<g>

<path style="fill:#FFFFFF;" d="M194.508,128H170.06l31.003-37.203c2.119-2.544,2.577-6.084,1.173-9.083c-1.405-2.998-4.417-4.914-7.728-4.914h-42.667c-4.713,0-8.533,3.821-8.533,8.533s3.821,8.533,8.533,8.533h24.448l-31.003,37.203c-2.119,2.544-2.577,6.084-1.173,9.083c1.405,2.998,4.417,4.914,7.728,4.914h42.667c4.713,0,8.533-3.821,8.533-8.533S199.22,128,194.508,128z">

</path>

<path style="fill:#FFFFFF;" d="M220.108,76.8c-4.713,0-8.533,3.821-8.533,8.533v51.2c0,4.713,3.821,8.533,8.533,8.533c4.713,0,8.533-3.821,8.533-8.533v-51.2C228.641,80.621,224.82,76.8,220.108,76.8z">

</path>

<path style="fill:#FFFFFF;" d="M279.841,76.8h-34.133c-4.713,0-8.533,3.821-8.533,8.533v51.2c0,4.713,3.821,8.533,8.533,8.533c4.713,0,8.533-3.821,8.533-8.533v-17.067h25.6c4.713,0,8.533-3.821,8.533-8.533v-25.6C288.375,80.621,284.554,76.8,279.841,76.8z M271.308,102.4h-17.067v-8.533h17.067V102.4z">

</path>

</g>

<path style="fill:#A1A7AF;" d="M416.37,332.8c-1.927,0-3.863-0.649-5.458-1.978l-51.2-42.667c-1.946-1.621-3.071-4.023-3.071-6.556s1.125-4.934,3.071-6.556l51.2-42.667c3.62-3.017,9.001-2.527,12.018,1.092c3.018,3.621,2.528,9.002-1.092,12.019L378.504,281.6l43.333,36.111c3.621,3.018,4.111,8.398,1.092,12.019C421.243,331.755,418.815,332.8,416.37,332.8z">

</path>

<g>

<path style="fill:#55606E;" d="M313.975,315.733c-4.713,0-8.533-3.821-8.533-8.533v-25.6c0-4.713,3.821-8.533,8.533-8.533s8.533,3.821,8.533,8.533v25.6C322.508,311.913,318.687,315.733,313.975,315.733z">

</path>

<path style="fill:#55606E;" d="M365.175,273.067h-17.067V256c0-4.713-3.821-8.533-8.533-8.533c-4.713,0-8.533,3.821-8.533,8.533v17.067h-34.133V256c0-4.713-3.821-8.533-8.533-8.533s-8.533,3.821-8.533,8.533v17.067h-34.133V256c0-4.713-3.821-8.533-8.533-8.533c-4.713,0-8.533,3.821-8.533,8.533v17.067h-34.133V256c0-4.713-3.821-8.533-8.533-8.533c-4.713,0-8.533,3.821-8.533,8.533v17.067h-17.067c-4.713,0-8.533,3.821-8.533,8.533c0,4.713,3.821,8.533,8.533,8.533h42.667V307.2c0,4.713,3.821,8.533,8.533,8.533c4.713,0,8.533-3.821,8.533-8.533v-17.067h34.133V307.2c0,4.713,3.821,8.533,8.533,8.533s8.533-3.821,8.533-8.533v-17.067h93.867c4.713,0,8.533-3.821,8.533-8.533C373.708,276.887,369.887,273.067,365.175,273.067z">

</path>

<path style="fill:#55606E;" d="M365.175,349.333c-4.419,0-8-3.582-8-8V281.6c0-4.418,3.581-8,8-8c4.419,0,8,3.582,8,8v59.733C373.175,345.751,369.594,349.333,365.175,349.333z">

</path>

</g>

<path style="fill:#F79F4D;" d="M333.54,364.434l25.6-25.6c3.332-3.332,8.736-3.332,12.068,0l25.6,25.6c1.6,1.6,2.499,3.771,2.499,6.034V460.8c0,4.713-3.821,8.533-8.533,8.533h-51.2c-4.713,0-8.533-3.821-8.533-8.533v-90.332C331.041,368.205,331.94,366.034,333.54,364.434z">

</path>

<polygon style="fill:#FFC44F;" points="339.575,460.8 339.575,370.467 365.175,344.867 390.775,370.467 390.775,460.8 ">

</polygon>

<g>

<path style="fill:#BF722A;" d="M365.175,451.733c-4.419,0-8-3.582-8-8v-17.067c0-4.418,3.581-8,8-8c4.419,0,8,3.582,8,8v17.067C373.175,448.151,369.594,451.733,365.175,451.733z">

</path>

<path style="fill:#BF722A;" d="M365.175,400.533c-4.419,0-8-3.582-8-8v-17.067c0-4.418,3.581-8,8-8c4.419,0,8,3.582,8,8v17.067C373.175,396.951,369.594,400.533,365.175,400.533z">

</path>

</g>

</svg>

</div>

<div class="min-w-0 flex-1">

<p class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate pb-2">

{{

$m->work->attached_work['id']

}}.{{

$m->work->attached_work['extension']

}}

</p>

<p class="text-xs font-[400] text-gray-400 truncate">

{{

human_filesize($m->work->attached_work['size'])

}}

</p>

</div>

</div>

</div>

@endif

{{-- Download button --}}

@if ($m->work->attached_work)

<a href="{{ url('uploads/projectDelivered/' . $m->project->uid . '/' . $m->work->id . '/' . $m->work->attached_work['id']) }}" target="_blank" class="w-full inline-flex items-center justify-center py-3 px-4 border border-transparent rounded-full bg-gray-100 dark:bg-zinc-800 dark:hover:bg-zinc-900 hover:bg-gray-200 focus:outline-none focus:ring-0 mb-6">

<span class="text-sm font-medium text-gray-700 dark:text-gray-400">

{{ __('messages.t_download') }}

</span>

</a>

@endif

{{-- Message from seller --}}

@if ($m->work->quick_response)

<div class="flex flex-col space-y-4 overflow-y-auto">

<div class="flex items-center">

<div class="flex flex-col space-y-2 text-sm ltr:ml-2 rtl:mr-2 order-2 items-center">

<div>

<span class="px-4 py-2 rounded-lg italic inline-block bg-gray-100 dark:bg-zinc-600 text-gray-900 dark:text-gray-200 w-full">

{{ $m->work->quick_response }}

</span>

</div>

</div>

<img src="{{ placeholder_img() }}" data-src="{{ src($role->awarded_bid->user->avatar) }}" alt="{{ $role->awarded_bid->user->username }}" class="w-10 h-10 rounded-full order-1 object-cover lazy">

</div>

</div>

@endif

</div>

@endif

</x-slot>

</x-forms.modal>

</div>

<div class="flex space-x-4">

<div class="flex flex-col">

<span class="text-2xs text-gray-400">{{ __('messages.t_date') }}</span>

<span class="text-xs text-gray-800">{{format_date($m->created_at, 'd/m/Y')}}</span>

</div>

<div class="flex flex-col">

<span class="text-2xs text-gray-400">{{ __('messages.t_subtotal') }}</span>

<span class="text-xs text-gray-800">

@money(convertToNumber($m->amount), settings('currency')->code, true)

</span>

</div>

<div class="flex flex-col">

<span class="text-2xs text-gray-400">{{ __('messages.t_total') }}</span>

<span class="text-xs text-gray-800">

@money(convertToNumber($m->amount) +

convertToNumber($m->employer_commission), settings('currency')->code, true)

</span>

</div>

{{-- status --}}

<div class="flex flex-col">

<span class="text-2xs text-gray-400">{{ __('messages.t_status') }}</span>

@switch($m->status)

{{-- Requested --}}

@case('request')

<span class="inline-flex items-center text-xs tracking-wide font-medium text-yellow-400 dark:bg-transparent dark:text-amber-400">

{{ __('messages.t_requested') }}

</span>

@break

{{-- Paid --}}

@case('paid')

<span class="inline-flex items-center text-xs tracking-wide font-medium text-green-400 dark:bg-transparent dark:text-green-400">

{{ __('messages.t_paid') }}

</span>

@break

{{-- Funded --}}

@case('funded')

<span class="inline-flex items-center text-xs tracking-wide font-medium text-purple-400 dark:bg-transparent dark:text-purple-400">

{{ __('messages.t_funded') }}

</span>

@break

@default

@endswitch

</div>

</div>

</div>

</div>

@push('styles')

<style>

.w-\[70\%\] {

width: 70%;

}

</style>

@endpush