@extends('admin.layouts.app')

@section('content')
    <div class="page-header">
        <div class="page-title">
            <h4>Store Issue Requisition</h4>
            <ul class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('store-issue-requisitions.index') }}">Store Issue
                        Requisitions</a></li>
                <li class="breadcrumb-item active">View Store Issue Requisition</li>
            </ul>
        </div>
        {{-- <div class="text-right">
            <button class="btn btn-primary" onclick="printWithTimestamp()">Print Store Issue Requisition</button>
        </div> --}}
        <div class="d-flex align-items-center gap-2">
            {{-- Previous Button --}}
            @if ($previous)
                <a href="{{ route('store-issue-requisitions.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 PO
                </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 PO code or date..." onkeyup="filterPOs()" oninput="filterPOs()">
                    </li>
                    <li>
                        <hr class="dropdown-divider">
                    </li>
                    @foreach ($allSIRs as $po)
                        <li>
                            <a class="dropdown-item po-item {{ $po->id == $requisition->id ? 'active fw-bold' : '' }}"
                                href="{{ route('store-issue-requisitions.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('store-issue-requisitions.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('store-issue-requisitions.edit', $requisition->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>
    <!-- Print Button -->

    <!-- Card Component -->
    <div class="card">
        <div class="card-body">
            @if ($requisition->is_approved == 1)
                <span
                    class="position-absolute top-0 end-0 ps-2 mt-2 pe-3 bg-success text-light approved-target">{{ $requisition->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($requisition->company->logo_path ? 'images/company/' . $requisition->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">{{ $requisition->company->name }}</h5>
                            <p class="fs-6 mb-0">{{ $requisition->company->address }}</p>
                            <p class="fs-6 mb-0">{{ $requisition->company->phone }}</p>
                        </div>
                    </div>
                </div>
                <div class="col-auto text-end print-header">
                    <h2 class="fs-5 fw-bold">Store Issue Requisition</h2>
                    <p class="fs-6 mb-0">{{ $requisition->code }}</p>
                    <p class="fs-6 mb-0">Month: {{ $requisition->created_at->format('d M, Y') }}</p>
                </div>
            </div>

            <table class="table mt-3">
                <tr>
                    <th>Name / Product</th>
                    <td colspan="4">
                        {{ $requisition->chart_of_account->particular ?? $requisition->product_variation->product->brand_name }}
                    </td>
                </tr>
                <tr>
                    <th>Batch No</th>
                    <td>{{ $requisition->batch->batch_no ?? 'N/A' }}</td>
                    <th>Batch Size</th>
                    <td>{{ $requisition->batch->batch_size ?? 'N/A' }}</td>
                    <th class="w-50"></th>
                </tr>
            </table>

            <table class="table table-bordered table-hover mt-3">
                <thead class="">
                    <tr>
                        <th>#</th>
                        <th>Code</th>
                        <th>Description</th>
                        <th>Quantity</th>
                        @if ($requisition->is_production == 1)
                            <th>GRN Item Batch #</th>
                        @endif
                        <th>Unit</th>
                        <th>Price</th>
                        <th>Total</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($requisition->items as $item)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>{{ $item->product->code ?? ($item->raw_material_item->code ?? $item->product_variation->product->name . ' | ' . $item->product_variation->packingType->name . ' | ' . $item->product_variation->packSize->name) }}
                            </td>
                            <td>{{ $item->product->name ?? ($item->raw_material_item->name ?? $item->product_variation->product->code) }}
                            </td>
                            <td>{{ $item->quantity }}</td>
                            @if ($requisition->is_production == 1)
                                <td>
                                    {{ $item->batch?->batch ?? '-' }}
                                </td>
                            @endif
                            <td>{{ $item->unit }}</td>
                            <td>{{ $item->unit_price }}</td>
                            <td>{{ $item->total }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            <div class="signature-section" style="margin-top: 45px;">
                <div style="display: flex; justify-content: space-around; align-items: end;">
                    <div style="width: 166px; text-align: center;">
                        <hr style="width: 100%; border-top: 1px solid black;">
                        <span style="font-size: 14px; margin-top: 10px;">Raised by</span>
                    </div>
                    <div style="width: 166px; text-align: center;">
                        <hr style="width: 100%; border-top: 1px solid black;">
                        <span style="font-size: 14px; margin-top: 10px;">Authorised by</span>
                    </div>
                    <div style="width: 166px; text-align: center;">
                        <hr style="width: 100%; border-top: 1px solid black;">
                        <span style="font-size: 14px; margin-top: 10px;">Issued by</span>
                    </div>
                    <div style="width: 166px; text-align: center;">
                        <hr style="width: 100%; border-top: 1px solid black;">
                        <span style="font-size: 14px; margin-top: 10px;">Received by</span>
                    </div>
                    <div style="width: 166px; text-align: center;">
                        <hr style="width: 100%; border-top: 1px solid black;">
                        <span style="font-size: 14px; margin-top: 10px;">Approved by</span>
                    </div>
                </div>
                <br>
                <div id="printTimestampContainer"></div>
            </div>
            {{-- <div class="signature-section" style="display: flex; justify-content: space-around; margin-top: 45px;">
                <div style="width: 166px; text-align: center;">
                    <hr style="width: 100%;">
                    <span style="font-size: 14px; margin-top: 10px;">Raised by</span>
                </div>
                <div style="width: 166px; text-align: center;">
                    <hr style="width: 100%;">
                    <span style="font-size: 14px; margin-top: 10px;">Authorised by</span>
                </div>
                <div style="width: 166px; text-align: center;">
                    <hr style="width: 100%;">
                    <span style="font-size: 14px; margin-top: 10px;">Issued by</span>
                </div>
                <div style="width: 166px; text-align: center;">
                    <hr style="width: 100%;">
                    <span style="font-size: 14px; margin-top: 10px;">Received by</span>
                </div>
                <div style="width: 166px; text-align: center;">
                    <hr style="width: 100%;">
                    <span style="font-size: 14px; margin-top: 10px;">Approved by</span>
                </div>
                <br>
                <!-- Print timestamp will be added here -->
                <div id="printTimestampContainer"></div>
            </div> --}}

        </div>
    </div>
@endsection

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

    @media print {
        @page {
            margin: 3% !important;
        }

        .signature-section {
            position: fixed;
            bottom: 10px;
            left: 0;
            width: 100%;
        }

        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>
