@push('title')
    Customer Profile - {{ $customer->name }}
@endpush
<style>
    .pagi .mt-4 {
        margin-top: 0 !important;
    }
</style>
<x-app-layout>
    <div class="row">
        <!-- Customer Sidebar -->
        <div class="col-xl-4 col-lg-5 col-md-5 order-1 order-md-0">
            <!-- Customer Card -->
            <div class="card mb-4">
                <div class="card-body">
                    <div class="user-avatar-section">
                        <div class="">
                            <div class="user-info">
                                <h5 class="mb-2">{{ $customer->name }}</h5>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex justify-content-between flex-wrap my-4 py-3 border-top border-bottom">
                        <div class="d-flex align-items-start me-4 mt-3 gap-3">
                            <span class="badge bg-label-success p-2 rounded"><i class='bx bxs-home bx-sm'></i></span>
                            <div>
                                <h5 class="mb-0">{{ $customer->sales->count() }}</h5>
                                <span>Total Sales</span>
                            </div>
                        </div>
                        <div class="d-flex align-items-start mt-3 gap-3">
                            <span class="badge bg-label-danger p-2 rounded"><i class='bx bxs-wallet bx-sm'></i></span>
                            <div>
                                <div class="mb-0">LKR {{ number_format($customer->sales->sum('due_amount'), 2) }}</div>
                                <span>Total Debt</span>
                            </div>
                        </div>
                    </div>
                    <div class="info-container">
                        <ul class="list-unstyled">
                            <li class="mb-3">
                                <span class="fw-bold me-2">Email:</span>
                                <span>{{ $customer->email ?? 'N/A' }}</span>
                            </li>
                            <li class="mb-3">
                                <span class="fw-bold me-2">Phone:</span>
                                <span>{{ $customer->phone }}</span>
                            </li>
                            <li class="mb-3">
                                <span class="fw-bold me-2">Country:</span>
                                <span>{{ $customer->country->name ?? 'N/A' }}</span>
                            </li>
                            <li class="mb-3">
                                <span class="fw-bold me-2">City:</span>
                                <span>{{ $customer->city ?? 'N/A' }}</span>
                            </li>
                            <li class="mb-3">
                                <span class="fw-bold me-2">Address:</span>
                                <span>{{ $customer->address }}</span>
                            </li>
                        </ul>
                        <div class="d-flex">
                            <div class="">
                                <a href="{{ route('customers.edit', $customer->id) }}" class="btn btn-primary me-3">Edit
                                    Profile</a>
                            </div>
                            @if($debt_sales->sum('due_amount') > 0)
                                <form action="{{ route('customers.send_reminder', $customer->id) }}" method="POST"
                                    class="d-inline">
                                    @csrf
                                    <button type="submit" class="btn btn-warning"
                                        onclick="return confirm('Are you sure you want to send a debt reminder SMS to this customer?')">Send
                                        Reminder</button>
                                </form>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Customer Content -->
        <div class="col-xl-8 col-lg-7 col-md-7 order-0 order-md-1">
            <!-- Tab Content -->
            <div class="">
                <!-- Sales History -->
                <div>
                    <div class="card">
                        <div class="card-header border-bottom">
                            <h5 class="card-title mb-0">Complete Sales History</h5>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-hover table-borderless table-striped">
                                <thead class="table-dark">
                                    <tr>
                                        <th>Invoice</th>
                                        <th>Date</th>
                                        <th>Warehouse</th>
                                        <th>Status</th>
                                        <th>Total (LKR)</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($sales_history as $sale)
                                        <tr>
                                            <td>{{ $sale->invoice_no }}</td>
                                            <td>{{ $sale->created_at->format('M d, Y') }}</td>
                                            <td>{{ $sale->warehouse->name }}</td>
                                            <td>
                                                @if($sale->payment_status == 2)
                                                    <span class="badge bg-label-success">Paid</span>
                                                @elseif($sale->payment_status == 1)
                                                    <span class="badge bg-label-warning">Partial</span>
                                                @else
                                                    <span class="badge bg-label-danger">Unpaid</span>
                                                @endif
                                            </td>
                                            <td><strong>{{ number_format($sale->grand_total, 2) }}</strong></td>
                                            <td class="text-end">
                                                <a href="{{ route('sales.show', $sale->id) }}"
                                                    class="btn btn-icon btn-primary">
                                                    <i class='bx bx-show'></i>
                                                </a>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="6" class="text-center py-4">No purchases recorded yet.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                        <div class="px-3 d-flex justify-content-end pagi">
                            {{ $sales_history->links('pagination::bootstrap-5') }}
                        </div>
                    </div>
                </div>

                <!-- Debt Log -->
                <div class="mt-4">
                    <div class="card">
                        <div class="card-header border-bottom d-flex justify-content-between">
                            <h5 class="card-title mb-0">Debt Log</h5>
                            <span class="fw-bold text-danger">Total Out: LKR
                                {{ number_format($debt_sales->sum('due_amount'), 2) }}</span>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-hover table-borderless table-striped">
                                <thead>
                                    <tr>
                                        <th>Invoice</th>
                                        <th>Grand Total</th>
                                        <th>Already Paid</th>
                                        <th>Remaining Due</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($debt_sales as $sale)
                                        <tr class="table-danger">
                                            <td>{{ $sale->invoice_no }}</td>
                                            <td>{{ number_format($sale->grand_total, 2) }}</td>
                                            <td class="text-success">{{ number_format($sale->paid_amount, 2) }}</td>
                                            <td class="text-danger fw-bold">{{ number_format($sale->due_amount, 2) }}</td>
                                            <td>
                                                @if($sale->payment_status == 1)
                                                    <span class="badge bg-warning">Partial</span>
                                                @else
                                                    <span class="badge bg-danger">Unpaid</span>
                                                @endif
                                            </td>
                                            <td class="text-nowrap">
                                                <a href="{{ route('sales.show', $sale->id) }}"
                                                    class="btn btn-sm btn-icon btn-label-primary me-1" title="View Details">
                                                    <i class='bx bx-show'></i>
                                                </a>
                                                @can('update_sale_management')
                                                    <button type="button" class="btn btn-sm btn-success" data-bs-toggle="modal"
                                                        data-bs-target="#markPaidModal-{{ $sale->id }}">
                                                        Mark as Paid
                                                    </button>
                                                @endcan
                                            </td>
                                        </tr>

                                        <!-- Add Payment Modal -->
                                        <div class="modal fade" id="markPaidModal-{{ $sale->id }}" tabindex="-1"
                                            aria-hidden="true">
                                            <div class="modal-dialog modal-dialog-centered" role="document">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title">Record Payment for {{ $sale->invoice_no }}
                                                        </h5>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                            aria-label="Close"></button>
                                                    </div>
                                                    <form action="{{ route('sales.add_payment', $sale->id) }}"
                                                        method="POST">
                                                        @csrf
                                                        <div class="modal-body text-start">
                                                            <div class="alert alert-info py-2 mb-3">
                                                                <div
                                                                    class="d-flex justify-content-between align-items-center mb-1">
                                                                    <span class="fw-bold">Total Due Balance:</span>
                                                                    <span class="h5 mb-0 fw-bold text-primary">LKR
                                                                        {{ number_format($sale->due_amount, 2) }}</span>
                                                                </div>
                                                            </div>

                                                            <div class="mb-3">
                                                                <label class="form-label">Payment Amount (LKR) *</label>
                                                                <input type="number" step="0.01"
                                                                    max="{{ $sale->due_amount }}" min="0.01" name="amount"
                                                                    class="form-control" required
                                                                    value="{{ $sale->due_amount }}">
                                                            </div>
                                                            <div class="mb-3">
                                                                <label class="form-label">Payment Date *</label>
                                                                <input type="date" name="payment_date" class="form-control"
                                                                    required value="{{ date('Y-m-d') }}">
                                                            </div>
                                                            <div class="mb-3">
                                                                <label class="form-label">Payment Method *</label>
                                                                <select name="payment_method" class="form-control" required>
                                                                    <option value="Cash">Cash</option>
                                                                    <option value="Card">Card</option>
                                                                    <option value="Bank Transfer">Bank Transfer</option>
                                                                    <option value="Cheque">Cheque</option>
                                                                </select>
                                                            </div>
                                                            <div class="mb-3">
                                                                <label class="form-label">Note / Reference No
                                                                    (Optional)</label>
                                                                <input type="text" name="note" class="form-control"
                                                                    placeholder="E.g. Cheque #, Transfer ID">
                                                            </div>
                                                        </div>
                                                        <div class="modal-footer justify-content-end border-top-0">
                                                            <button type="button" class="btn btn-label-secondary"
                                                                data-bs-dismiss="modal">Cancel</button>
                                                            <button type="submit" class="btn btn-primary">Save
                                                                Payment</button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    @empty
                                        <tr>
                                            <td colspan="6" class="text-center py-4">Congratulations! This customer has no
                                                outstanding debt.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Payments Ledger -->
            <div class="mt-4">
                <div class="card">
                    <div class="card-header border-bottom">
                        <h5 class="card-title mb-0">Payments Ledger</h5>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-hover table-borderless table-striped">
                            <thead class="table-dark">
                                <tr>
                                    <th>Date</th>
                                    <th>Invoice</th>
                                    <th>Method</th>
                                    <th>Note / Ref</th>
                                    <th class="text-end">Amount</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($payments_ledger as $payment)
                                    <tr>
                                        <td>{{ \Carbon\Carbon::parse($payment->payment_date)->format('M d, Y') }}</td>
                                        <td><a href="{{ route('sales.show', $payment->sale_id) }}"
                                                class="fw-bold">{{ $payment->sale->invoice_no }}</a></td>
                                        <td>{{ $payment->payment_method ?? 'Cash' }}</td>
                                        <td>{{ $payment->note ?? '-' }}</td>
                                        <td class="text-end fw-bold text-success">LKR
                                            {{ number_format($payment->amount, 2) }}
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5" class="text-center py-4">No partial payments recorded yet.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    <div class="px-3 d-flex justify-content-end pagi">
                        {{ $payments_ledger->links('pagination::bootstrap-5') }}
                    </div>
                </div>
            </div>

            <!-- SMS Log -->
            <div class="mt-4">
                <div class="card">
                    <div class="card-header border-bottom">
                        <h5 class="card-title mb-0">SMS Communications Log</h5>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-hover table-borderless table-striped">
                            <thead class="table-dark">
                                <tr>
                                    <th>Date & Time</th>
                                    <th>Category</th>
                                    <th>Status</th>
                                    <th>Message Payload</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($sms_logs as $log)
                                    <tr>
                                        <td class="text-nowrap">{{ $log->created_at->format('M d, Y h:i A') }}</td>
                                        <td>
                                            <span
                                                class="badge bg-label-secondary text-capitalize">{{ $log->category }}</span>
                                        </td>
                                        <td>
                                            @if($log->status === 'sent')
                                                <span class="badge bg-label-success">Sent</span>
                                            @else
                                                <span class="badge bg-label-danger">Failed</span>
                                            @endif
                                        </td>
                                        <td>
                                            <p class="mb-0 text-wrap text-muted"
                                                style="max-width: 400px; font-size: 0.85rem;">"{{ $log->message }}"</p>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" class="text-center py-4">No SMS history recorded for this customer.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    <div class="px-3 d-flex justify-content-end pagi">
                        {{ $sms_logs->links('pagination::bootstrap-5') }}
                    </div>
                </div>
            </div>

        </div>
    </div>
    </div>
</x-app-layout>