@extends('layouts.app')
@section('title', 'Sales List')

@section('content')
<div class="container-fluid py-4">
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-3 gap-2">
        <h2 class="fw-bold text-dark mb-0">បញ្ចីរការលក់</h2>
        <a href="{{ route('sales.create') }}" class="btn btn-primary">
            <i class="bi bi-plus-circle me-1"></i> បន្ថែមការលក់
        </a>
    </div>

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    <div class="card shadow-sm border-0">
        <div class="card-body p-2 p-md-3">
            <div class="table-responsive">
                <table class="table table-striped align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>#</th>
                            <th>ថ្ងៃចេញវិក័យបត្រ</th>
                            <th>លេខវិក័យប័ត្រ</th>
                            <th>អតិថិជន</th>
                            <th>តម្លៃសរុប</th>
                            {{-- <th>ស្ថានភាពនៃការទូទាត់</th> --}}
                            <th>ការទូទាត់</th>
                            <th>លុយអាប់</th>
                            <th>បញ្ចុះតម្លៃ</th>
                            {{-- <th>សកម្មភាពនៃការទូទាត់</th> --}}
                            <th class="text-center">សកម្មភាព</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($sales as $key => $sale)
                            <tr>
                                <td>{{ $key + 1 }}</td>
                                <td>{{ $sale->created_at ?? 'N/A' }}</td>
                                <td class="text-truncate" style="max-width: 100px;">{{ $sale->reference_no ?? 'N/A' }}</td>
                                <td class="text-truncate" style="max-width: 120px;">{{ $sale->customer_name ?? 'N/A' }}</td>
                                <td>${{ number_format($sale->grand_total, 2) }}</td>
                                {{-- <td>
                                    @if($sale->sale_status == 'Completed')
                                        <span class="badge bg-success">Completed</span>
                                    @elseif($sale->sale_status == 'Pending')
                                        <span class="badge bg-warning">Pending</span>
                                    @elseif($sale->sale_status == 'Draft')
                                        <span class="badge bg-secondary">Draft</span>
                                    @endif
                                </td> --}}
                                <td>${{ number_format($sale->amount, 2) }}</td>
                                <td>${{ number_format($sale->balance ?? 0, 2) }}</td>
                                <td>${{ number_format($sale->order_discount ?? 0, 2) }}</td>
                                {{-- <td>
                                    @if($sale->payment_status == 'Paid')
                                        <span class="badge bg-success">Paid</span>
                                    @elseif($sale->payment_status == 'Due')
                                        <span class="badge bg-danger">Due</span>
                                    @elseif($sale->payment_status == 'Partial')
                                        <span class="badge bg-primary">Partial</span>
                                    @elseif($sale->payment_status == 'Pending')
                                        <span class="badge bg-warning">Pending</span>    
                                    @endif
                                </td> --}}
                                <td class="text-center d-flex flex-column flex-md-row justify-content-center gap-1">
                                    <button class="btn btn-info btn-sm view-sale-items" data-id="{{ $sale->id }}">
                                        <i class="bi bi-eye"></i> វិក័យបត្រ
                                    </button>
                                </td>

                            </tr>
                        @empty
                            <tr>
                                <td colspan="11" class="text-center text-muted py-3">No sales records found.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Modal for Sale Items -->
<div class="modal fade" id="saleItemsModal" tabindex="-1" aria-labelledby="saleItemsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Sale Items</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-2 p-md-3">
                <div class="table-responsive">
                    <table class="table table-bordered mb-0" id="saleItemsTable">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Product Name</th>
                                <th>Quantity</th>
                                <th>Price</th>
                                <th>Subtotal</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
$(document).ready(function() {
    $('.view-sale-items').click(function() {
        var saleId = $(this).data('id');
        // console.log(saleId);
        $.ajax({
            url: '/sales/' + saleId + '/items',
            type: 'GET',
            dataType: 'json',
            success: function(response) {
                var tbody = $('#saleItemsTable tbody');
                tbody.empty();

                if (response.items.length > 0) {
                    $.each(response.items, function(index, item) {
                        tbody.append(`
                            <tr>
                                <td>${index + 1}</td>
                                <td>${item.product_name}</td>
                                <td>${item.quantity}</td>
                                <td>$${item.price}</td>
                                <td>$${item.grand_total}</td>
                            </tr>
                        `);
                    });
                } else {
                    tbody.append('<tr><td colspan="6" class="text-center">No items found</td></tr>');
                }

                $('#saleItemsModal').modal('show');
            },
            error: function(err) {
                alert('Failed to fetch sale items.');
            }
        });
    });
});
</script>
@endsection