@extends('admin.layouts.app')

@section('title', 'View Finished GRN')

@section('content')
    <div class="page-header">
        <div class="page-title">
            <h4>Finished Goods Receiving Note</h4>
            <ul class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('finished-goods-receivings.index') }}">Finished Goods Receiving
                        Notes</a></li>
                <li class="breadcrumb-item active">View Finished Goods Receiving Note</li>
            </ul>
        </div>
        <div class="d-flex align-items-center gap-2">
            @if (auth()->user()->hasPermission('Finished Goods Receiving Create'))
                <a href="{{ route('finished-goods-receivings.create') }}" class="btn btn-added">
                    <img src="{{ asset('assets/img/icons/plus.svg') }}" alt="img" class="me-1">Create New
                </a>
            @endif
            {{-- Previous Button --}}
            @if ($previous)
                <a href="{{ route('finished-goods-receivings.show', $previous->id) }}" class="btn btn-outline-secondary">
                    &laquo; Previous
                </a>
            @else
                <button class="btn btn-outline-secondary" disabled>&laquo; Previous</button>
            @endif

            {{-- Jump to Specific PO Dropdown --}}
            <div class="dropdown">
                <button class="btn btn-primary dropdown-toggle" type="button" id="jumpToPODropdown"
                    data-bs-toggle="dropdown" aria-expanded="false">
                    Jump to FGRN
                </button>
                <ul class="dropdown-menu" aria-labelledby="jumpToPODropdown"
                    style="max-height: 300px; overflow-y: auto; min-width: 300px;">
                    <li class="px-3 py-2">
                        <input type="text" class="form-control form-control-sm" id="poSearchInput"
                            placeholder="Search code..." onkeyup="filterPOs()" oninput="filterPOs()">
                    </li>
                    <li>
                        <hr class="dropdown-divider">
                    </li>
                    @foreach ($all as $po)
                        <li>
                            <a class="dropdown-item po-item {{ $po->id == $finishedGoodsReceiving->id ? 'active fw-bold' : '' }}"
                                href="{{ route('finished-goods-receivings.show', $po->id) }}"
                                data-po-code="{{ strtolower($po->code) }}"
                                data-po-date="{{ $po->created_at->format('d/m/Y') }}">
                                <span>{{ $po->code }}</span>
                            </a>
                        </li>
                    @endforeach
                </ul>
            </div>

            {{-- Next Button --}}
            @if ($next)
                <a href="{{ route('finished-goods-receivings.show', $next->id) }}" class="btn btn-outline-secondary">
                    Next &raquo;
                </a>
            @else
                <button class="btn btn-outline-secondary" disabled>Next &raquo;</button>
            @endif

            {{-- Edit Button --}}
            <a href="{{ route('finished-goods-receivings.edit', $finishedGoodsReceiving->id) }}"
                class="btn btn-light btn-outline-secondary">
                <img src="{{ asset('assets/img/icons/edit.svg') }}" alt="Edit">
            </a>

            {{-- Print Button --}}
            <button class="btn btn-light btn-outline-secondary" onclick="printWithTimestamp()">
                <img src="{{ asset('assets/img/icons/printer.svg') }}" alt="Print">
            </button>
        </div>
        {{-- <div class="text-right">
            <button class="btn btn-primary" onclick="printWithTimestamp()">Print Finished Goods Receiving Note</button>
        </div> --}}
    </div>
    <!-- Print Button -->

    <!-- Card Component -->
    <div class="card">
        <div class="card-body">
            @if ($finishedGoodsReceiving->is_approved == 1)
                <span
                    class="position-absolute top-0 end-0 ps-2 mt-2 pe-3 bg-success text-light approved-target">{{ $finishedGoodsReceiving->is_approved == 1 ? 'Approved' : '' }}</span>
            @endif
            <div class="row justify-content-between">
                <div class="col-auto">
                    <div class="d-flex">
                        <div class="flex-shrink-0">
                            <img src="{{ asset($finishedGoodsReceiving->company->logo_path ? 'images/company/' . $finishedGoodsReceiving->company->logo_path : 'images/company/logo.png') }}"
                                class="mb-2" style="height: 80px">
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h5 class="fw-bold">{{ $finishedGoodsReceiving->company->name }}</h5>
                            <p class="fs-6 mb-0">{{ $finishedGoodsReceiving->company->address }}</p>
                            <p class="fs-6 mb-0">{{ $finishedGoodsReceiving->company->phone }}</p>
                        </div>
                    </div>
                </div>
                <div class="col-auto text-end print-header">
                    <h2 class="fs-5 fw-bold">Finished Goods Receiving Note</h2>
                    <p class="fs-6 mb-0">{{ $finishedGoodsReceiving->code }}</p>
                    <p class="fs-6 mb-0">Date: {{ $finishedGoodsReceiving->created_at->format('d M, Y') }}</p>
                </div>
            </div>

            <table class="table mt-3">
                <tr>
                    <th>Batch No</th>
                    <td>{{ $finishedGoodsReceiving->batch->batch_no }}</td>
                    <th>MFG Date</th>
                    <td>{{ $finishedGoodsReceiving->batch->mfg_date ? \Carbon\Carbon::parse($finishedGoodsReceiving->batch->mfg_date)->format('d M, Y') : '-' }}
                    </td>
                    <th>EXP Date</th>
                    <td>{{ $finishedGoodsReceiving->batch->exp_date ? \Carbon\Carbon::parse($finishedGoodsReceiving->batch->exp_date)->format('d M, Y') : '-' }}
                    </td>
                    <th>Particular</th>
                    <td class="w-50">
                        {{ ($finishedGoodsReceiving->product->code ? $finishedGoodsReceiving->product->code . ' - ' : '') . $finishedGoodsReceiving->product->brand_name }}
                        @if ($finishedGoodsReceiving->batch->sub_chart_of_account->name)
                            {{ $finishedGoodsReceiving->batch->sub_chart_of_account->name }}
                        @endif
                    </td>
                </tr>
            </table>

            <table class="table table-striped mt-3">
                <thead class="table-primary">
                    <tr>
                        <th>#</th>
                        <th>Code</th>
                        <th>Description</th>
                        <th>Quantity</th>
                        <th>Unit</th>
                        <th>Price</th>
                        <th>Total</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($finishedGoodsReceiving->items as $item)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>{{ $item->productVariation->code }}</td>
                            <td>{{ $item->productVariation->product->brand_name . ' | ' . $item->productVariation->packingType->name . ' | ' . $item->productVariation->packSize->name }}
                            </td>
                            <td>{{ $item->quantity_received }}</td>
                            <td>{{ $item->unit }}</td>
                            <td>{{ $item->unit_price }}</td>
                            <td>{{ $item->total }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            <div style="margin-top: 15px;">
                <div style="text-align: center;">
                    <h5>Marketing Certificate</h5>
                </div>
                <ol style="list-style: decimal; padding-left: 20px;">
                    <li style="margin-top: 15px;">
                        It is certified that the above product has been formulated and tested in our supervision in
                        accordance with the pharmacopial requirements of the product and is fit for human consumption, hence
                        released for marketing.
                        <div style="display: flex; justify-content: space-between; margin-top: 40px;">
                            <div style="width: 266px; text-align: center;">
                                <hr style="width: 100%;">
                                <span style="font-size: 14px; margin-top: 10px;">Production Manager (Sign/Stamp)</span>
                            </div>
                            <div style="width: 266px; text-align: center;">
                                <hr style="width: 100%;">
                                <span style="font-size: 14px; margin-top: 10px;">Quality Control Manager (Sign/Stamp)</span>
                            </div>
                        </div>
                    </li>
                    <li style="margin-top: 15px;">
                        It is certified that the above product has been formulated, tested and packed in my supervision
                        while complying with the requirements of CGMP, hence released for marketing.
                        <div style="display: flex; justify-content: center; margin-top: 40px;">
                            <div style="width: 266px; text-align: center;">
                                <hr style="width: 100%;">
                                <span style="font-size: 14px; margin-top: 10px;">Quality Assurance Manager
                                    (Sign/Stamp)</span>
                            </div>
                        </div>
                    </li>
                    <li style="margin-top: 15px;">
                        Based on above recommendations product is released for sale in market
                        <div style="display: flex; justify-content: space-around; margin-top: 40px;">
                            <div style="width: 266px; text-align: center;">
                                <hr style="width: 100%;">
                                <span style="font-size: 14px; margin-top: 10px;">Received by Store Keeper</span>
                            </div>
                            <div style="width: 266px; text-align: center;">
                                <hr style="width: 100%;">
                                <span style="font-size: 14px; margin-top: 10px;">Accepted by W.H Manager</span>
                            </div>
                            <div style="width: 266px; text-align: center;">
                                <hr style="width: 100%;">
                                <span style="font-size: 14px; margin-top: 10px;">Approved by Cheif Executive</span>
                            </div>
                        </div>
                    </li>
                </ol>
            </div>

            <!-- Print timestamp will be added here -->
            <div id="printTimestampContainer"></div>
        </div>
    </div>
@endsection

<style>
    .print-header {
        margin-top: 10px !important;
    }

    @media print {
        @page {
            margin: 0;
        }

        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        body * {
            visibility: hidden;
        }

        .card-body,
        .card-body * {
            visibility: visible;
        }

        .card-body {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
        }

        .table-primary th {
            background-color: transparent !important;
            -webkit-print-color-adjust: exact;
            color-adjust: exact;
        }

        .approved-target {
            background-color: transparent !important;
            -webkit-print-color-adjust: exact;
            color-adjust: exact;
        }

        .print-header {
            margin-top: 15px !important;
        }
    }
</style>
