@extends('layouts.app')
@section('content')
    <div class="main__container">
        <div class="contract__header">
            <div class="left__">
                <p>Contract ID: {{ $contract->contract_id }}</p>
                <span>RFQ ID: <span>{{ $contract->rfq->ref_id }}</span></span>
            </div>
            <div class="right__">
                <span>RFQ ID: {{ $contract->rfq->ref_id }}</span>
                <p>{{ number_format($contract->total_price, 2) }} {{ $contract->currency }}</p>
            </div>
        </div>
        <div class="contract__container">
            <div class="switcher">
                <ul>
                    <li class="active"><a href="#">{{ $contract->seller->company->name }}</a></li>
                </ul>
            </div>
            @php
                $expirationDate = \Carbon\Carbon::parse($contract->expiration_date);
                $daysUntilExpiration = now()->diffInDays($expirationDate, false);
            @endphp
            <div class="container">
                <div class="tab">
                    <div class="outer__info">
                        <div class="content__data">
                            <div class="list__">
                                <div class="elem__list">
                                    <p>Product</p>
                                    <div class="value">
                                        <p>{{ $contract->rfq->defaultProduct->name }}</p>
                                    </div>
                                </div>
                                <div class="elem__list">
                                    <p>Type</p>
                                    <div class="value">
                                        <p>{{ $contract->rfq->palletization == 'US'
                                            ? ' US (40"x48")'
                                            : ($contract->rfq->palletization == 'EU/Asia'
                                                ? ' EU/Asia'
                                                : ($contract->rfq->palletization == 'EU'
                                                    ? ' EU (800mmx1200mm)'
                                                    : '')) }}
                                        </p>

                                    </div>
                                </div>
                                <div class="elem__list">
                                    <p>Processing Type</p>
                                    <div class="value">
                                        <p>{{ $contract->processing_type ?? 'Undefined' }}</p>
                                    </div>
                                </div>
                                <div class="elem__list">
                                    <p>Description</p>
                                    <div class="value">
                                        <p>{{ $contract->description ?? 'Undefined' }}</p>
                                    </div>
                                </div>
                                <div class="elem__list">
                                    <p>Issue Date</p>
                                    <div class="value">
                                        <p>{{ \Carbon\Carbon::parse($contract->created_at)->format('Y-m-d') }}</p>
                                    </div>
                                </div>
                                <div class="elem__list">
                                    <p>Exp. Date</p>
                                    <div class="value">
                                        <p>{{ $contract->expiration_date }}
                                            @if ($daysUntilExpiration > 0)
                                                - <span>expires in {{ $daysUntilExpiration }} days</span>
                                            @elseif($daysUntilExpiration == 0)
                                                - <span>expires today</span>
                                            @else
                                                - <span>expired</span>
                                            @endif
                                        </p>
                                    </div>
                                </div>
                                <div class="elem__list">
                                    <p>Port Origin</p>
                                    <div class="value">
                                        <p>{{ $contract->port_origin }}</p>
                                    </div>
                                </div>
                                <div class="elem__list">
                                    <p>Port Destination</p>
                                    <div class="value">
                                        <p>{{ $contract->port_destination }}</p>
                                    </div>
                                </div>
                                <div class="elem__list">
                                    <p>Incoterm</p>
                                    <div class="value">
                                        <p>{{ $contract->incoterm }}</p>
                                    </div>
                                </div>
                            </div>

                            <div class="table__info">
                                <div class="table__wrapper ">
                                    <table class="regular-table">
                                        <tr>
                                            <th>POs</th>
                                            <th>Volume</th>
                                            <th>Arrival Date</th>
                                            <th>Status</th>
                                        </tr>
                                        @forelse ($contract->pos as $po)
                                            <tr class="contract__info--button" onclick="getPOInfo({{ $po->id }})">
                                                <td>
                                                    <p class="po__code">PO {{ $po->po_id }}</p>
                                                </td>
                                                <td>
                                                    <p class="medium">{{ $po->volume_kg }} Kg</p>
                                                </td>
                                                <td>
                                                    <p class="medium">{{ $po->arrival_date }}</p>
                                                </td>
                                                <td>
                                                    @if ($po->status == 0)
                                                        <p class="status progress">
                                                            <span class="dot"></span> In progress
                                                        </p>
                                                    @elseif($po->status == 1)
                                                        <p class="status completed">
                                                            <span class="dot"></span> Delivered
                                                        </p>
                                                    @else
                                                        <p class="status canceled">
                                                            <span class="dot"></span> Canceled
                                                        </p>
                                                    @endif
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="4">
                                                    <div class="no-data-message">
                                                        <form action="{{ route('storeFiles') }}" method="post"
                                                            enctype="multipart/form-data" class="file-upload-form">
                                                            @csrf
                                                            <input type="hidden" name="contract_id"
                                                                value="{{ $contract->id }}">

                                                            <div class="file-upload-wrapper">
                                                                <input type="file" name="po_file" id="po_file"
                                                                    class="file-upload-input">
                                                                <label for="po_file" class="file-upload-label">
                                                                    Choose a file
                                                                </label>
                                                                <span class="file-name">No file chosen</span>
                                                            </div>

                                                            <div>
                                                                <button type="submit" class="submit-btn">Upload</button>
                                                            </div>
                                                        </form>

                                                    </div>
                                                    @foreach ($posFiles as $file)
                                                        <div>
                                                            <a
                                                                href="{{ route('files.download', ['file' => $file->file_path]) }}">Download
                                                                {{ $file->file_name }}</a>
                                                        </div>
                                                    @endforeach

                                                </td>
                                            </tr>
                                        @endforelse
                                    </table>
                                </div>
                            </div>
                            <div class="assets">
                                <div class="assets">
                                    <div class="elem__asset">
                                        <p>Files</p>
                                        <div class="grid__">
                                            @foreach ($contract->files as $file)
                                                <div class="el__">
                                                    <span>
                                                        <img src="{{ asset('img/pdf.svg') }}" alt="file icon">
                                                        <!-- Assuming all files are pdf for now -->
                                                    </span>
                                                    <div class="desc__">
                                                        <p><a href="{{ route('download.file', $file->id) }}"
                                                                download>{{ $file->file_name }}</a>
                                                        </p>
                                                        <span>{{ $file->file_size }}MB </span>
                                                        <!-- assuming file_size is stored in MB -->
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="summary">
                            <h6>Summary</h6>
                            <div class="summary__grid">
                                <div class="elem__summary">
                                    <p>Price offered (in {{ $contract->currency }})</p>
                                    <span>{{ number_format($contract->price_per_kg, 2) }}</span>

                                </div>
                                <div class="elem__summary">
                                    <p>Volume (in {{ $contract->unit }})</p>
                                    <span>{{ number_format($contract->volume_kg, 2) }}</span>
                                </div>
                                <div class="elem__summary">
                                    <p>Payment term</p>
                                    <span>{{ $contract->payment_term }}</span>
                                </div>

                                <div class="total__">
                                    <p>Total</p>
                                    <span>{{ number_format($contract->total_price, 2) }} {{ $contract->currency }}</span>
                                </div>
                            </div>
                            <form id="contractForm" action="{{ route('contractStatus') }}" method="post">
                                @csrf
                                <input type="hidden" id="status" name="status" value="">
                                <input type="hidden" name="contract_id" value="{{ $contract->id }}">

                                <div class="controls">
                                    @if ($contract->status == 0)
                                        <!-- Active -->
                                        <a href="#" class="outline-btn" onclick="submitForm(1)">Pause Contract</a>
                                        <a href="#" class="reject outline-btn" onclick="submitForm(2)">Cancel
                                            Contract</a>
                                    @elseif($contract->status == 1)
                                        <!-- Paused -->
                                        <a href="#" class="outline-btn" onclick="submitForm(0)">Unpause Contract</a>
                                        <a href="#" class="reject outline-btn" onclick="submitForm(2)">Cancel
                                            Contract</a>
                                    @elseif($contract->status == 2)
                                        <!-- Canceled -->
                                        <a href="#" class="reject outline-btn readonly-btn" disabled>Canceled
                                            Contract</a>
                                    @elseif($contract->status == 3)
                                        <!-- Completed -->
                                        <a href="#" class="outline-btn readonly-btn" disabled>Completed Contract</a>
                                    @endif
                                </div>

                            </form>
                            <div class="by__clicking">
                                <p>By clicking on “Accept Offer”, you agree to our <br>
                                    <a href="#">Terms and Conditions of Use.</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @if (isset($po))
        <div class="modal__wrapper" style="display:none" id="contract__info">
            <div class="inner__modal">
                <div class="modal__box contract__info">
                    <a href="#" class="close__modal"><img src="{{ asset('img/close.svg') }}" alt="close"></a>
                    <h6 id="po_id">PO ID: </h6>
                    <div class="grid">
                        <div class="el">
                            <span>Product</span>
                            <p id="product_name"></p>
                        </div>
                        <div class="el">
                            <span>Provider</span>
                            <p id="provider"></p>
                        </div>
                        <div class="el">
                            <span>Volume</span>
                            <p id="volume_kg"> Kg</p>
                        </div>
                        <div class="el">
                            <span>Arrival Date</span>
                            <p id="arrival_date"></p>
                        </div>
                    </div>
                    <div class="assets">
                        <div class="assets">
                            <div class="elem__asset">
                                <p>Files</p>
                                <div class="grid__">
                                    @foreach ($contract->files as $file)
                                        <div class="el__">
                                            <span>
                                                <img src="{{ asset('img/pdf.svg') }}" alt="file icon">
                                                <!-- Assuming all files are pdf for now -->
                                            </span>
                                            <div class="desc__">
                                                <p><a href="{{ asset($file->file_path) }}"
                                                        download>{{ $file->file_name }}</a></p>
                                                <span>{{ $file->file_size }}MB </span>
                                                <!-- assuming file_size is stored in MB -->
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="comments">
                        <p>Comments (2)</p>
                        <div class="comments__list">
                            <div class="elem__comment">
                                <div class="comment__head">
                                    <div class="profile">
                                        <span><img src="{{ asset('img/avatar1.png') }}" alt="avatar"><span
                                                class="offline"></span></span>
                                        <p>PO Agent</p>
                                    </div>
                                    <div class="spacer"></div>
                                    <div class="date">6 hour</div>
                                </div>
                                <div class="comment__text">
                                    <p>We are facing a small problem at the port, We may have a 2 day delay, will keep you
                                        updated.</p>
                                </div>
                            </div>

                            <div class="elem__comment">
                                <div class="comment__head">
                                    <div class="profile">
                                        <span><img src="{{ asset('img/avatar1.png') }}" alt="avatar"><span
                                                class="offline"></span></span>
                                        <p>PO Agent</p>
                                    </div>
                                    <div class="spacer"></div>
                                    <div class="date">6 hour</div>
                                </div>
                                <div class="comment__text">
                                    <p>We are facing a small problem at the port, We may have a 2 day delay, will keep you
                                        updated.</p>
                                </div>
                            </div>
                        </div>
                        <form action="">
                            <div class="group__input">
                                <input type="text" placeholder="Write a comment..">
                                <a href="#" class='regular-btn'>Send</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    @else
    @endif

    <script>
        function submitForm(statusValue) {
            document.getElementById('status').value = statusValue;
            document.getElementById('contractForm').submit();
        }

        function getPOInfo(poId) {
            $.ajax({
                url: base_url + "/get-po-info/" + poId,
                success: function(response) {
                    if (response.success) { // instead of response.result
                        var po = response.po;
                        $('#po_id').text("PO ID: " + po.po_id);
                        $('#product_name').text(po.contract.rfq.default_product.name);
                        $('#arrival_date').text(po.arrival_date);
                        $('#volume_kg').text(po.volume_kg);
                        $('#provider').text(po.contract.seller.company.name);
                        $("#contract__info").show();
                    }
                },
                error: function(reasons) {
                    console.log(reasons);
                }
            });
        }

        document.getElementById('po_file').addEventListener('change', function() {
            const fileName = this.value.split('\\').pop();
            document.querySelector('.file-name').textContent = fileName || "No file chosen";
        });
    </script>
    <style>
        .no-data-message {
            text-align: center;
            color: #999999;
        }

        .readonly-btn {
            cursor: not-allowed;
        }

        .file-upload-form {
            font-family: 'Arial', sans-serif;
            max-width: 400px;
            margin: 20px auto;
        }

        .file-upload-wrapper {
            position: relative;
            margin-bottom: 20px;
        }

        .file-upload-input {
            display: none;
            /* Hide the default input */
        }

        .file-upload-label {
            background-color: #4CAF50;
            color: #fff;
            padding: 10px 25px;
            cursor: pointer;
            border-radius: 5px;
            text-align: center;
            display: inline-block;
        }

        .file-upload-label:hover {
            background-color: #45a049;
        }

        .file-name {
            display: inline-block;
            margin-left: 10px;
            vertical-align: middle;
        }

        .submit-btn {
            background-color: #4CAF50;
            color: #fff;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
            border-radius: 5px;
            font-size: 16px;
        }

        .submit-btn:hover {
            background-color: #45a049;
        }
    </style>
@endsection