<x-app-layout>
<x-slot name="header">
<div class="flex flex-1 justify-between ">
<h1 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
{{ __('Job Details') }}
</h1>
<a href="{{route('printers.show', $job->printer->id)}}" class="inline-flex items-center px-4 py-2 bg-gray-800 dark:bg-gray-200 border border-transparent rounded-md font-semibold text-xs text-white dark:text-gray-800 uppercase tracking-widest hover:bg-gray-700 ">Back</a>
</div>
</x-slot>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class=" overflow-hidden shadow-lg bg-white m-2 rounded-lg">
<div class="grid items-start gap-6 grid-cols-1 p-4 px-6">
<div class="flex flex-1 justify-between border-b-2 pb-4">
<h5 class="text-lg text-black font-medium leading-none">Printer Details</h5>
<span class="rounded-lg animate-pulse w-4 h-4 inline-block bg-{{$job->printer->smtp_status?'green':($job->printer->smtp_active?'red':'blue')}}-600"></span>
</div>
<div class="flex-1 text-md text-sm uppercase flex-col flex-gap-4 items-center justify-between">
<p class="mb-3 "><span class="font-bold"> Equipment ID : </span> {{ $job->printer->equipment_id }}</p>
<p class="mb-3 "><span class="font-bold"> Model : </span> {{ $job->printer->model_name }}</p>
<p class="mb-3 "><span class="font-bold"> Serial Number : </span> {{ $job->printer->serial_number }}</p>
<p class="mb-3 "><span class="font-bold"> Reading Date : </span> {{ $job->mail_date }}</p>
<p class="mb-3 "><span class="font-bold"> Mail ID : </span> {{ $job->mail_id }}</p>
</div>
</div>
</div>
<div class=" overflow-hidden sm:rounded-lg">
<div class=" overflow-hidden">
<div class="grid items-start gap-6 grid-cols-2 p-2">
<div class="shadow-lg w-full bg-white border border-gray-200 rounded-lg shadow">
<div class="flex p-4 text-white bg-[#28166fbd] rounded-t-lg items-center justify-between">
<h5 class="text-md font-medium leading-none">Printed Pages</h5>
</div>
<div class="flow-root">
<ul role="list" class="divide-y divide-gray-200 dark:divide-gray-700 px-3">
<li class="py-3 sm:py-3">
<div class="flex items-center">
<div class="flex-1 min-w-0">
<p class="text-sm text-gray-900 truncate">
Copier
</p>
</div>
<div class="inline-flex text-sm items-center text-base text-gray-900 ">
{{ $job->printed_copier }}
</div>
</div>
</li>
<li class="py-3 sm:py-3">
<div class="flex items-center">
<div class="flex-1 min-w-0">
<p class="text-sm text-gray-900 truncate ">
Printer
</p>
</div>
<div class="inline-flex text-sm items-center text-base text-gray-900 ">
{{ $job->printed_printer }}
</div>
</div>
</li>
<li class="py-3 sm:py-3">
<div class="flex items-center">
<div class="flex-1 min-w-0">
<p class="text-sm text-gray-900 font-semibold truncate ">
Total
</p>
</div>
<div class="inline-flex font-semibold text-sm items-center text-base text-gray-900">
{{ $job->printed_total }}
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="shadow-lg w-full bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
<div class="flex p-4 text-white bg-[#28166fbd] rounded-t-lg items-center justify-between">
<h5 class="text-md font-medium leading-none">Scanned Pages</h5>
</div>
<div class="flow-root">
<ul role="list" class="divide-y divide-gray-200 dark:divide-gray-700 px-3">
<li class="py-3 sm:py-3">
<div class="flex items-center">
<div class="flex-1 min-w-0">
<p class="text-sm text-gray-900 truncate ">
Copier
</p>
</div>
<div class="inline-flex text-sm items-center text-base text-gray-900">
{{ $job->scanned_copier }}
</div>
</div>
</li>
<li class="py-3 sm:py-3">
<div class="flex items-center">
<div class="flex-1 min-w-0">
<p class="text-sm text-gray-900 truncate ">
Printer
</p>
</div>
<div class="inline-flex text-sm items-center text-base text-gray-900">
{{ $job->scanned_printer }}
</div>
</div>
</li>
<li class="py-3 sm:py-3">
<div class="flex items-center">
<div class="flex-1 min-w-0">
<p class="text-sm text-gray-900 font-semibold truncate ">
Total
</p>
</div>
<div class="inline-flex font-semibold text-sm items-center text-base text-gray-900">
{{ $job->scanned_total }}
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="shadow-lg w-full bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
<div class="flex p-4 text-white bg-[#28166fbd] rounded-t-lg items-center justify-between">
<h5 class="text-md font-medium leading-none">Counters by Duplex</h5>
</div>
<div class="flow-root">
<ul role="list" class="divide-y divide-gray-200 dark:divide-gray-700 px-3">
<li class="py-3 sm:py-3">
<div class="flex items-center">
<div class="flex-1 min-w-0">
<p class="text-sm text-gray-900 truncate ">
1-sided
</p>
</div>
<div class="inline-flex text-sm items-center text-base text-gray-900">
{{ $job->paper_duplex_1_side }}
</div>
</div>
</li>
<li class="py-3 sm:py-3">
<div class="flex items-center">
<div class="flex-1 min-w-0">
<p class="text-sm text-gray-900 truncate ">
2-sided
</p>
</div>
<div class="inline-flex text-sm items-center text-base text-gray-900">
{{ $job->paper_duplex_2_side }}
</div>
</div>
</li>
<li class="py-3 sm:py-3">
<div class="flex items-center">
<div class="flex-1 min-w-0">
<p class="text-sm text-gray-900 font-semibold truncate">
Total
</p>
</div>
<div class="inline-flex font-semibold text-sm items-center text-base text-gray-900">
{{ $job->paper_combine_total }}
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="shadow-lg w-full bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
<div class="flex p-4 text-white bg-[#28166fbd] rounded-t-lg items-center justify-between">
<h5 class="text-md font-medium leading-none">Counters by Duplex</h5>
</div>
<div class="flow-root">
<ul role="list" class="divide-y divide-gray-200 dark:divide-gray-700 px-3">
<li class="py-3 sm:py-3">
<div class="flex items-center">
<div class="flex-1 min-w-0">
<p class="text-sm text-gray-900 truncate ">
1-sided
</p>
</div>
<div class="inline-flex text-sm items-center text-base text-gray-900">
{{ $job->paper_duplex_1_side }}
</div>
</div>
</li>
<li class="py-3 sm:py-3">
<div class="flex items-center">
<div class="flex-1 min-w-0">
<p class="text-sm text-gray-900 truncate ">
2-sided
</p>
</div>
<div class="inline-flex text-sm items-center text-base text-gray-900">
{{ $job->paper_duplex_2_side }}
</div>
</div>
</li>
<li class="py-3 sm:py-3">
<div class="flex items-center">
<div class="flex-1 min-w-0">
<p class="text-sm font-semibold text-gray-900 truncate ">
Total
</p>
</div>
<div class="inline-flex font-semibold text-sm items-center text-base text-gray-900">
{{ $job->paper_combine_total }}
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="shadow-lg w-full bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
<div class="flex p-4 text-white bg-[#28166fbd] rounded-t-lg items-center justify-between">
<h5 class="text-md font-medium leading-none">Counters by Paper Size</h5>
</div>
<div class="flow-root">
<ul role="list" class="divide-y divide-gray-200 dark:divide-gray-700 px-3">
<li class="py-3 sm:py-3">
<div class="flex items-center">
<div class="flex-1 min-w-0">
<p class="text-sm text-gray-900 truncate ">
A4
</p>
</div>
<div class="inline-flex text-sm items-center text-base text-gray-900">
{{ $job->paper_size_a4 }}
</div>
</div>
</li>
<li class="py-3 sm:py-3">
<div class="flex items-center">
<div class="flex-1 min-w-0">
<p class="text-sm text-gray-900 truncate ">
B5
</p>
</div>
<div class="inline-flex text-sm items-center text-base text-gray-900">
{{ $job->paper_size_b5 }}
</div>
</div>
</li>
<li class="py-3 sm:py-3">
<div class="flex items-center">
<div class="flex-1 min-w-0">
<p class="text-sm text-gray-900 truncate ">
A5
</p>
</div>
<div class="inline-flex text-sm items-center text-base text-gray-900">
{{ $job->paper_size_a5 }}
</div>
</div>
</li>
<li class="py-3 sm:py-3">
<div class="flex items-center">
<div class="flex-1 min-w-0">
<p class="text-sm text-gray-900 truncate ">
Folio
</p>
</div>
<div class="inline-flex text-sm items-center text-base text-gray-900">
{{ $job->paper_size_folio }}
</div>
</div>
</li>
<li class="py-3 sm:py-3">
<div class="flex items-center">
<div class="flex-1 min-w-0">
<p class="text-sm text-gray-900 truncate ">
Legal
</p>
</div>
<div class="inline-flex text-sm items-center text-base text-gray-900">
{{ $job->paper_size_legal }}
</div>
</div>
</li>
<li class="py-3 sm:py-3">
<div class="flex items-center">
<div class="flex-1 min-w-0">
<p class="text-sm text-gray-900 truncate ">
Letter
</p>
</div>
<div class="inline-flex text-sm items-center text-base text-gray-900">
{{ $job->paper_size_letter }}
</div>
</div>
</li>
<li class="py-3 sm:py-3">
<div class="flex items-center">
<div class="flex-1 min-w-0">
<p class="text-sm text-gray-900 truncate ">
Statement
</p>
</div>
<div class="inline-flex text-sm items-center text-base text-gray-900">
{{ $job->paper_size_statement }}
</div>
</div>
</li>
<li class="py-3 sm:py-3">
<div class="flex items-center">
<div class="flex-1 min-w-0">
<p class="text-sm text-gray-900 truncate ">
Other(Double)
</p>
</div>
<div class="inline-flex text-sm items-center text-base text-gray-900">
{{ $job->paper_size_other_double }}
</div>
</div>
</li>
<li class="py-3 sm:py-3">
<div class="flex items-center">
<div class="flex-1 min-w-0">
<p class="text-sm text-gray-900 truncate ">
Other(Single)
</p>
</div>
<div class="inline-flex text-sm items-center text-base text-gray-900">
{{ $job->paper_size_other_single }}
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="shadow-lg w-full bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
<div class="flex p-4 text-white bg-[#28166fbd] rounded-t-lg items-center justify-between">
<h5 class="text-md font-medium leading-none">Counters by Combine</h5>
</div>
<div class="flow-root">
<ul role="list" class="divide-y divide-gray-200 dark:divide-gray-700 px-3">
<li class="py-3 sm:py-3">
<div class="flex items-center">
<div class="flex-1 min-w-0">
<p class="text-sm text-gray-900 truncate ">
None
</p>
</div>
<div class="inline-flex text-sm items-center text-base text-gray-900">
{{ $job->paper_combine_none }}
</div>
</div>
</li>
<li class="py-3 sm:py-3">
<div class="flex items-center">
<div class="flex-1 min-w-0">
<p class="text-sm text-gray-900 truncate ">
2 in 1
</p>
</div>
<div class="inline-flex text-sm items-center text-base text-gray-900">
{{ $job->paper_combine_2_in_1 }}
</div>
</div>
</li>
<li class="py-3 sm:py-3">
<div class="flex items-center">
<div class="flex-1 min-w-0">
<p class="text-sm text-gray-900 truncate ">
4 in 1
</p>
</div>
<div class="inline-flex text-sm items-center text-base text-gray-900">
{{ $job->paper_combine_4_in_1 }}
</div>
</div>
</li>
<li class="py-3 sm:py-3">
<div class="flex items-center">
<div class="flex-1 min-w-0">
<p class="text-sm text-gray-900 truncate font-semibold ">
Total
</p>
</div>
<div class="inline-flex font-semibold text-sm items-center text-base text-gray-900">
{{ $job->paper_combine_total }}
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</x-app-layout>