<!DOCTYPE html>
<html lang="{{ request('lang', 'en') }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>@lang('purchaseRequisition::lang.response_submitted')</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <style>
        body { padding: 20px; background: #f4f4f4; }
        .product-image { max-width: 100px; cursor: pointer; }
        .fullscreen-modal { display: none; position: fixed; z-index: 9999; padding-top: 50px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.9); }
        .fullscreen-modal img { margin: auto; display: block; max-width: 90%; max-height: 90%; }
        .close-fullscreen { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; cursor: pointer; }
        .extra-part-cell { max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .extra-part-trigger { cursor: pointer; }
        .extra-part-trigger:hover { text-decoration: underline; }
        /* Language switcher */
        .lang-switcher { float: right; margin-top: -2px; }
        .lang-switcher a { color: #fff; opacity: 0.75; font-size: 12px; margin-left: 6px; border: 1px solid rgba(255,255,255,0.5); border-radius: 3px; padding: 2px 7px; text-decoration: none; }
        .lang-switcher a.active, .lang-switcher a:hover { opacity: 1; background: rgba(255,255,255,0.2); }
    </style>
</head>
<body>
    @php $currentLang = request('lang', 'en'); @endphp

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-success">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            @lang('purchaseRequisition::lang.response_submitted_successfully')
                            <span class="lang-switcher">
                                <a href="?lang=en" class="{{ $currentLang === 'en' ? 'active' : '' }}">EN</a>
                                <a href="?lang=zh" class="{{ $currentLang === 'zh' ? 'active' : '' }}">中文</a>
                            </span>
                        </h3>
                    </div>
                    <div class="panel-body">
                        <div class="alert alert-success">
                            @if(session('success'))
                                {{ session('success') }}
                            @else
                                @lang('purchaseRequisition::lang.your_response_has_been_submitted')
                            @endif
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <p><strong>@lang('purchaseRequisition::lang.reference_no'):</strong> {{ $response->ref_no ?? $response->prRequest->ref_no }}</p>
                                <p><strong>@lang('purchaseRequisition::lang.date'):</strong> {{ \Carbon\Carbon::parse($response->prRequest->transaction_date)->format('Y-m-d') }}</p>
                            </div>
                            <div class="col-md-6">
                                <p><strong>@lang('purchaseRequisition::lang.submitted_at'):</strong> {{ $response->submitted_at ? \Carbon\Carbon::parse($response->submitted_at)->format('Y-m-d H:i:s') : '-' }}</p>
                                <p><strong>@lang('purchaseRequisition::lang.status'):</strong>
                                    <span class="label label-success">{{ ucfirst($response->status) }}</span>
                                </p>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <p><strong>@lang('purchaseRequisition::lang.currency'):</strong> {{ $response->currency ? $response->currency->name . ' (' . $response->currency->symbol . ')' : '-' }}</p>
                            </div>
                        </div>

                        @if(isset($supplierProducts) && count($supplierProducts) > 0)
                        <h4>@lang('purchaseRequisition::lang.products')</h4>
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th>@lang('purchaseRequisition::lang.product')</th>
                                        <th>@lang('purchaseRequisition::lang.sku')</th>
                                        <th style="max-width: 120px;">@lang('purchaseRequisition::lang.extra_part_number') <i class="glyphicon glyphicon-info-sign" title="@lang('purchaseRequisition::lang.click_to_view_full_content')"></i></th>
                                        <th>@lang('purchaseRequisition::lang.image')</th>
                                        <th>@lang('purchaseRequisition::lang.notes')</th>
                                        <th>@lang('purchaseRequisition::lang.required_qty')</th>
                                        <th>@lang('purchaseRequisition::lang.available_qty')</th>
                                        <th>@lang('purchaseRequisition::lang.price')</th>
                                        <th>@lang('purchaseRequisition::lang.supplier_notes')</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($supplierProducts as $item)
                                    @php
                                        $extraPart = $item['pr_product']->product->product_custom_field4 ?? '-';
                                        $extraPartClass = ($extraPart && $extraPart !== '-' && strlen($extraPart) > 15) ? 'extra-part-trigger' : '';
                                    @endphp
                                    <tr>
                                        <td>{{ $item['pr_product']->product->name }}@if($item['pr_product']->product->type == 'variable' && $item['pr_product']->variation && !in_array(strtoupper(trim($item['pr_product']->variation->name)), ['DUMMY', ''])) {{ $item['pr_product']->variation->name }}@endif</td>
                                        <td>{{ $item['pr_product']->variation->sub_sku ?? $item['pr_product']->product->sku ?? '-' }}</td>
                                        <td class="extra-part-cell {{ $extraPartClass }}" title="{{ $extraPart }}" data-full-text="{{ $extraPart }}">{{ $extraPart }}</td>
                                        <td>
                                            @if(!empty($item['pr_product']->product->image))
                                            <img src="{{ $item['pr_product']->product->image_url }}" class="product-image" alt="Product">
                                            @else
                                            -
                                            @endif
                                        </td>
                                        <td>{{ $item['pr_product']->notes ?? '-' }}</td>
                                        <td>{{ number_format($item['pr_product']->required_quantity, 2) }}</td>
                                        <td>{{ number_format($item['supplier_product']->available_qty, 2) }}</td>
                                        <td>{{ number_format($item['supplier_product']->supplier_price, 2) }}</td>
                                        <td>{{ $item['supplier_product']->supplier_notes ?? '-' }}</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        @endif

                        <div class="text-center" style="margin-top: 30px;">
                            <p class="text-muted">
                                <small>@lang('purchaseRequisition::lang.you_cannot_edit_this_response')</small>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Fullscreen Image Modal -->
    <div id="fullscreen_modal" class="fullscreen-modal">
        <span class="close-fullscreen">&times;</span>
        <img id="fullscreen_image" src="">
    </div>

    <!-- Extra Part Number Modal -->
    <div class="modal fade" id="extra_part_modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                    <h4 class="modal-title">@lang('purchaseRequisition::lang.extra_part_number')</h4>
                </div>
                <div class="modal-body">
                    <p id="extra_part_content" style="word-wrap: break-word;"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">@lang('purchaseRequisition::lang.close')</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script>
    $(document).ready(function() {
        // Fullscreen image
        $('.product-image').click(function() {
            $('#fullscreen_image').attr('src', $(this).attr('src'));
            $('#fullscreen_modal').show();
        });

        $('.close-fullscreen').click(function() {
            $('#fullscreen_modal').hide();
        });

        // Extra part number click - show full text in modal
        $(document).on('click', '.extra-part-trigger', function(e) {
            var fullText = $(this).data('full-text');
            if (fullText && fullText !== '-') {
                $('#extra_part_content').text(fullText);
                $('#extra_part_modal').modal('show');
            }
        });
    });
    </script>
</body>
</html>
