@extends('admin.layouts.master')
@section('title', 'Company Orders')

@section('content')
<div class="modal fade" id="viewPromisesModal" tabindex="-1" aria-labelledby="viewPromisesModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="viewPromisesModalLabel">Payment Promises</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>Promise Date</th>
                                    <th>Remarks</th>
                                </tr>
                            </thead>
                            <tbody id="promisesListBody"></tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <section class="content">
        <div class="container-fluid">

            <div class="row">
                <div class="col-md-12">
                    <div class="card card-outline card-primary mt-2">
                        <div class="card-header">
                            <h3 class="card-title">Company Info</h3>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-3">
                                    <b>Company Name:</b> {{ $company->company }}
                                </div>
                                <div class="col-md-3">
                                    <b>Customer:</b> {{ $company->name }}
                                </div>
                                <div class="col-md-3">
                                    <b>Email:</b> {{ $company->email }}
                                </div>
                                <div class="col-md-3">
                                    <b>Phone No:</b> {{ $company->phone }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card card-warning mt-2">
                        <div class="card-header">
                            <h3 class="card-title mt-1">{{ __('Pending Orders') }}</h3>
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body">
                            <table class="table table-striped table-bordered table-sm">
                                <thead>
                                    <tr>
                                        <th scope="col">#</th>
                                        <th scope="col">Issue Date</th>
                                        <th scope="col">Order No</th>
                                        <th scope="col">Amount</th>
                                        <th scope="col">Due Date</th>
                                        <th scope="col">Promises</th>

                                    </tr>
                                </thead>
                                <tbody>
                                    @php use Carbon\Carbon;
                                    $sumTotalAmount = 0;
                                    @endphp
                                    @foreach ($orders as $id => $order)
                                        @php
                
                                            // $totalAmount = optional($order->invoice->order)->total_amount ?? 0;
                                            // $sumTotalAmount += $totalAmount;
                                            $latestPromise = $order->invoice?->promises
                                                ->sortByDesc('promise_date')
                                                ->first();
                                        @endphp
                                        <tr>
                                            <td>
                                                {{ ++$id }}
                                            </td>
                                            <td>
                                               {{ $order->invoice ? \Carbon\Carbon::parse($order->invoice->date)->format('d M, Y') : '' }}
                                            </td>
                                            <td>
                                                {{ $order->order_number }}
                                            </td>
                                            <td>
                                                <a href="{{ route('admin.invoice.create', $order->id) }}">{{ $order->grand_total }}</a>
                                            </td>
                                            <td>
                                                 {{ $order->invoice ? \Carbon\Carbon::parse($order->invoice->due_date)->format('d M, Y') : '' }}
                                            </td>
                                            <td>
                                                
                                                @if ($order->invoice?->promises->count() > 0)
                                                    <button class="badge bg-primary view-promises-btn btn"
                                                        data-invoice-id="{{ $order->invoice->id }}">{{ $order->invoice->promises->count() }}
                                                        Promises</button>
                                                    <br>
                                                    <small>Latest:
                                                        {{ $latestPromise ? Carbon::parse($latestPromise->promise_date)->format('d M Y') : 'N/A' }}</small>
                                                @else
                                                    <span class="text-muted">No Promises</span>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                    <tr>
                                        <td colspan="3">

                                        </td>
                                        <td colspan="3">
                                            <b>Total: </b>{{ $orders->sum('grand_total') }}
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.row -->
    </section>
@endsection
@section('js')
<script>
    
    $(document).on('click', '.view-promises-btn', function () {
                const invoiceId = $(this).data('invoice-id');
                const modal = $('#viewPromisesModal');
                const promisesBody = $('#promisesListBody');

                // Validate invoiceId
                if (!invoiceId || isNaN(invoiceId)) {
                    promisesBody.html(`
                        <tr>
                            <td colspan="2" class="text-center py-4 text-danger">
                                <i class="bi bi-exclamation-octagon me-2"></i>
                                Invalid invoice ID
                            </td>
                        </tr>
                    `);
                    modal.modal('show');
                    return;
                }

                // Show modal with loading state
                promisesBody.html(`
                    <tr>
                        <td colspan="2" class="text-center py-4">
                            <div class="d-flex justify-content-center align-items-center">
                                <div class="spinner-border text-primary me-2" role="status"></div>
                                <span>Loading promises...</span>
                            </div>
                        </td>
                    </tr>
                `);
                modal.modal('show');

                $.ajax({
                    url: `/admin/finance/invoices/${invoiceId}/promises`, // Ideally, use a named route (e.g., from Laravel's route('invoices.promises', invoiceId))
                    type: 'GET',
                    dataType: 'json',
                    success: function (response) {
                        if (!response.success || !response.data?.length) {
                            promisesBody.html(`
                                <tr>
                                    <td colspan="2" class="text-center py-4 text-muted">
                                        <i class="bi bi-info-circle me-2"></i>
                                        No promises found for this invoice
                                    </td>
                                </tr>
                            `);
                            return;
                        }

                        const html = response.data.map((promise, index) => `
                            <tr>
                                <td class="fw-medium">${promise.formatted_date}</td>
                                <td>${promise.remarks ? $('<div/>').text(promise.remarks).html() : '<span class="text-muted">No remarks</span>'}</td>
                            </tr>
                        `).join('');
                        promisesBody.html(html);
                    },
                    error: function (xhr) {
    let errorMessage = 'An unexpected error occurred.';

    // Handle Laravel validation errors (422 Unprocessable Entity)
    if (xhr.status === 422 && xhr.responseJSON?.errors) {
        errorMessage = Object.values(xhr.responseJSON.errors)
            .flat()
            .join('<br>');
    }

    // Handle custom errors (like: return response()->json(['error' => 'Custom message'], 400))
    else if (xhr.responseJSON?.error) {
        errorMessage = xhr.responseJSON.error;
    }

    // Handle other server errors
    else if (xhr.responseJSON?.message) {
        errorMessage = xhr.responseJSON.message;
    }

    // Fallback: status text (e.g., 500 Internal Server Error)
    else if (xhr.statusText) {
        errorMessage = xhr.statusText;
    }

    promisesBody.html(`
        <tr>
            <td colspan="2" class="text-center py-4 text-danger">
                <i class="bi bi-exclamation-octagon me-2"></i>
                ${errorMessage}
            </td>
        </tr>
    `);
}

                });
            });
            // Handle Add Promise form submission
</script>
@endsection