@extends('layouts.app')
@section('content')
    <div class="main__container">
        <div class="contract__header">
            <div class="left__">
                <p>Contract ID: {{ $selectedContract->contract_id }}</p>
                <span>RFQ ID: <span>{{ $selectedContract->rfq->ref_id }}</span></span>
            </div>
            <div class="right__">
                <span>RFQ ID: {{ $selectedContract->rfq->ref_id }}</span>
                <p>{{ number_format($selectedContract->total_price, 2) }} {{ $selectedContract->currency }}</p>
            </div>
        </div>
        <div class="contract__container">
            <div class="contract__container">
                <div class="switcher">
                    <ul>
                        @foreach ($contracts as $contract)
                            <li class="{{ $contract->id == $selectedContract->id ? 'active' : '' }}">
                                <a href="{{ url('master_contract/' . $selectedContract->rfq_id . '/' . $contract->id) }}">
                                    @if (auth()->user()->role == 'buyer')
                                        {{ $contract->seller->company->name }}
                                    @else
                                        {{ $contract->buyer->company->name }}
                                    @endif
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
            @php
                $expirationDate = \Carbon\Carbon::parse($selectedContract->expiration_date);
                $daysUntilExpiration = now()->diffInDays($expirationDate, false);
            @endphp
            <div id="contractDetails" 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>{{ $selectedContract->rfq->defaultProduct->name }}</p>
                                    </div>
                                </div>
                                <div class="elem__list">
                                    <p>Type</p>
                                    <div class="value">
                                        <p>{{ $selectedContract->rfq->palletization == 'US'
                                            ? ' US (40"x48")'
                                            : ($selectedContract->rfq->palletization == 'EU/Asia'
                                                ? ' EU/Asia'
                                                : ($selectedContract->rfq->palletization == 'EU'
                                                    ? ' EU (800mmx1200mm)'
                                                    : '')) }}
                                        </p>
                                    </div>
                                </div>
                                <div class="elem__list">
                                    <p>Processing Type</p>
                                    <div class="value">
                                        <p>{{ $selectedContract->processing_type ?? 'Undefined' }}</p>
                                    </div>
                                </div>
                                <div class="elem__list">
                                    <p>Description</p>
                                    <div class="value">
                                        <p>{{ $selectedContract->description ?? 'Undefined' }}</p>
                                    </div>
                                </div>
                                <div class="elem__list">
                                    <p>Issue Date</p>
                                    <div class="value">
                                        <p>{{ \Carbon\Carbon::parse($selectedContract->created_at)->format('Y-m-d') }}</p>
                                    </div>
                                </div>
                                <div class="elem__list">
                                    <p>Exp. Date</p>
                                    <div class="value">
                                        <p>{{ $selectedContract->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>{{ $selectedContract->port_origin }}</p>
                                    </div>
                                </div>
                                <div class="elem__list">
                                    <p>Port Destination</p>
                                    <div class="value">
                                        <p>{{ $selectedContract->port_destination }}</p>
                                    </div>
                                </div>
                                <div class="elem__list">
                                    <p>Incoterm</p>
                                    <div class="value">
                                        <p>{{ $selectedContract->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 ($selectedContract->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">
                                                        <p>There are no POS yet.</p>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforelse
                                    </table>
                                </div>
                            </div>
                            <div class="assets">
                                <div class="assets">
                                    <div class="elem__asset">
                                        <p>Files</p>
                                        <div class="grid__">
                                            @foreach ($selectedContract->files as $file)
                                                <div class="el__">
                                                    <span>
                                                        <img src="{{ asset('img/pdf.svg') }}" alt="file icon">
                                                        <div class="desc__">
                                                            <p><a href="{{ asset($file->file_path) }}"
                                                                    download>{{ $file->file_name }}</a></p>
                                                            <span>{{ $file->file_size }}MB </span>
                                                        </div>
                                                    </span>
                                                </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
                                        {{ $selectedContract->currency ?? $selectedContract->rfq->currency }})</p>
                                    <span>{{ number_format($selectedContract->price_per_kg, 2) }}</span>
                                </div>
                                <div class="elem__summary">
                                    <p>Volume (in {{ $selectedContract->unit ?? $selectedContract->rfq->unit }})</p>
                                    <span>{{ number_format($selectedContract->volume_kg, 2) }}</span>
                                </div>
                                <div class="elem__summary">
                                    <p>Payment term</p>
                                    <span>{{ $selectedContract->payment_term }}</span>
                                </div>

                                <div class="total__">
                                    <p>Total</p>
                                    <span>{{ number_format($selectedContract->total_price, 2) }}
                                        {{ $selectedContract->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="{{ $selectedContract->id }}">

                                <div class="controls">
                                    @if ($selectedContract->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($selectedContract->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($selectedContract->status == 2)
                                        <!-- Canceled -->
                                        <a href="#" class="reject outline-btn readonly-btn" disabled>Canceled
                                            Contract</a>
                                    @elseif($selectedContract->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 ($selectedContract->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);
                }
            });
        }
    </script>
    <style>
        .no-data-message {
            text-align: center;
            color: #999999;
        }

        .readonly-btn {
            cursor: not-allowed;
        }
    </style>
@endsection