@extends('layouts.app')

@section('title', 'Detail Transaksi - ' . $pembelian->nomor_transaksi)

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="corporate-header">
                <div class="row align-items-center">
                    <div class="col-md-8">
                        <h1 class="h3 mb-0 text-gray-800">
                            <i class="fas fa-receipt text-primary me-2"></i>
                            Detail Transaksi
                        </h1>
                        <p class="text-muted small mb-0">{{ $pembelian->nomor_transaksi }}</p>
                    </div>
                    <div class="col-md-4 text-end">
                        <a href="{{ route('pembelians.index') }}" class="btn btn-secondary btn-sm me-1">
                            <i class="fas fa-arrow-left me-1"></i>
                            Kembali
                        </a>
                        <a href="{{ route('pembelians.edit', $pembelian) }}" class="btn btn-warning btn-sm me-1">
                            <i class="fas fa-edit me-1"></i>
                            Edit
                        </a>
                        <div class="btn-group">
                            <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-bs-toggle="dropdown">
                                <i class="fas fa-cog me-1"></i>
                                Aksi
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end">
                                <li>
                                    <a class="dropdown-item" href="{{ route('pembelians.invoice-preview', $pembelian) }}" target="_blank">
                                        <i class="fas fa-file-pdf me-2"></i>Preview Invoice
                                    </a>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="{{ route('pembelians.print', $pembelian) }}" target="_blank">
                                        <i class="fas fa-print me-2"></i>Print Invoice
                                    </a>
                                </li>
                                @if($pembelian->nomor_hp)
                                <li>
                                    <a class="dropdown-item send-whatsapp-btn" href="#"
                                       data-pembelian-id="{{ $pembelian->id }}">
                                        <i class="fab fa-whatsapp me-2"></i>Kirim WhatsApp
                                    </a>
                                </li>
                                @endif
                                @if($pembelian->status_pembayaran !== 'lunas')
                                <li><hr class="dropdown-divider"></li>
                                <li>
                                    <a class="dropdown-item confirm-payment-btn" href="#"
                                       data-pembelian-id="{{ $pembelian->id }}">
                                        <i class="fas fa-check me-2"></i>Konfirmasi Pembayaran
                                    </a>
                                </li>
                                @endif
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <i class="fas fa-check-circle me-2"></i>
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            <div class="row">
                <!-- Informasi Transaksi -->
                <div class="col-lg-8">
                    <!-- Info Pembeli -->
                    <div class="card mb-3">
                        <div class="card-header">
                            <h6 class="card-title mb-0">
                                <i class="fas fa-user me-2"></i>
                                Informasi Pembeli
                            </h6>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <table class="table table-borderless table-sm">
                                        <tr>
                                            <td width="40%"><strong>Nama:</strong></td>
                                            <td>{{ $pembelian->nama_pembeli_display }}</td>
                                        </tr>
                                        @if($pembelian->nomor_hp)
                                        <tr>
                                            <td><strong>No. HP:</strong></td>
                                            <td>{{ $pembelian->nomor_hp }}</td>
                                        </tr>
                                        @endif
                                        @if($pembelian->alamat_pembeli_display)
                                        <tr>
                                            <td><strong>Alamat:</strong></td>
                                            <td>{{ $pembelian->alamat_pembeli_display }}</td>
                                        </tr>
                                        @endif
                                    </table>
                                </div>
                                <div class="col-md-6">
                                    <table class="table table-borderless table-sm">
                                        <tr>
                                            <td width="40%"><strong>Tanggal:</strong></td>
                                            <td>{{ \Carbon\Carbon::parse($pembelian->tanggal_pembelian)->format('d F Y') }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>Tipe Transaksi:</strong></td>
                                            <td>{!! $pembelian->tipe_transaksi_badge !!}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>Status Bayar:</strong></td>
                                            <td>{!! $pembelian->status_pembayaran_badge !!}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>Metode Bayar:</strong></td>
                                            <td>{{ ucfirst(str_replace('_', ' ', $pembelian->metode_pembayaran)) }}</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Item Pembelian -->
                    <div class="card mb-3">
                        <div class="card-header">
                            <h6 class="card-title mb-0">
                                <i class="fas fa-shopping-basket me-2"></i>
                                Item Pembelian ({{ $pembelian->items->count() }} item)
                            </h6>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead class="table-light">
                                        <tr>
                                            <th>#</th>
                                            <th>Item</th>
                                            <th>Harga Satuan</th>
                                            <th>Qty</th>
                                            <th>Diskon</th>
                                            <th>Subtotal</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($pembelian->items as $index => $item)
                                            <tr>
                                                <td>{{ $index + 1 }}</td>
                                                <td>
                                                    <div>
                                                        <strong>{{ $item->nama_item }}</strong>
                                                        <br>
                                                        {!! $item->item_type_badge !!}
                                                        @if($item->deskripsi_item)
                                                            <br><small class="text-muted">{{ $item->deskripsi_item }}</small>
                                                        @endif
                                                    </div>
                                                </td>
                                                <td>{{ $item->harga_satuan_format }}</td>
                                                <td>{{ $item->quantity }} {{ $item->unit }}</td>
                                                <td>
                                                    @if($item->diskon_item_persen > 0)
                                                        {{ $item->diskon_item_persen }}%
                                                        <br><small class="text-muted">{{ $item->diskon_item_amount_format }}</small>
                                                    @else
                                                        -
                                                    @endif
                                                </td>
                                                <td><strong>{{ $item->subtotal_item_format }}</strong></td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <!-- Catatan -->
                    @if($pembelian->catatan)
                    <div class="card mb-3">
                        <div class="card-header">
                            <h6 class="card-title mb-0">
                                <i class="fas fa-sticky-note me-2"></i>
                                Catatan Transaksi
                            </h6>
                        </div>
                        <div class="card-body">
                            <p class="mb-0">{{ $pembelian->catatan }}</p>
                        </div>
                    </div>
                    @endif
                </div>

                <!-- Ringkasan & Aksi -->
                <div class="col-lg-4">
                    <!-- Ringkasan Pembayaran -->
                    <div class="card mb-3">
                        <div class="card-header">
                            <h6 class="card-title mb-0">
                                <i class="fas fa-calculator me-2"></i>
                                Ringkasan Pembayaran
                            </h6>
                        </div>
                        <div class="card-body">
                            <table class="table table-borderless table-sm">
                                <tr>
                                    <td>Subtotal:</td>
                                    <td class="text-end">{{ $pembelian->subtotal_format }}</td>
                                </tr>
                                @if($pembelian->diskon_persen > 0)
                                <tr>
                                    <td>Diskon ({{ $pembelian->diskon_persen }}%):</td>
                                    <td class="text-end text-danger">-{{ $pembelian->diskon_amount_format }}</td>
                                </tr>
                                @endif
                                @if($pembelian->ppn_persen > 0)
                                <tr>
                                    <td>PPN ({{ $pembelian->ppn_persen }}%):</td>
                                    <td class="text-end">{{ $pembelian->ppn_amount_format }}</td>
                                </tr>
                                @endif
                                @if($pembelian->biaya_lain > 0)
                                <tr>
                                    <td>
                                        Biaya Lain:
                                        @if($pembelian->keterangan_biaya_lain)
                                            <br><small class="text-muted">{{ $pembelian->keterangan_biaya_lain }}</small>
                                        @endif
                                    </td>
                                    <td class="text-end">{{ number_format($pembelian->biaya_lain, 0, ',', '.') }}</td>
                                </tr>
                                @endif
                                <tr class="border-top">
                                    <td><strong>Total Bayar:</strong></td>
                                    <td class="text-end"><strong class="text-primary fs-5">{{ $pembelian->total_amount_format }}</strong></td>
                                </tr>
                            </table>
                        </div>
                    </div>

                    <!-- Informasi Pembayaran -->
                    @if($pembelian->status_pembayaran === 'lunas' && $pembelian->tanggal_bayar)
                    <div class="card mb-3">
                        <div class="card-header">
                            <h6 class="card-title mb-0">
                                <i class="fas fa-check-circle me-2 text-success"></i>
                                Informasi Pembayaran
                            </h6>
                        </div>
                        <div class="card-body">
                            <table class="table table-borderless table-sm">
                                <tr>
                                    <td width="40%"><strong>Tanggal Bayar:</strong></td>
                                    <td>{{ \Carbon\Carbon::parse($pembelian->tanggal_bayar)->format('d F Y') }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Metode:</strong></td>
                                    <td>{{ ucfirst(str_replace('_', ' ', $pembelian->metode_pembayaran)) }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Status:</strong></td>
                                    <td>{!! $pembelian->status_pembayaran_badge !!}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    @endif

                    <!-- Invoice Template -->
                    @if($pembelian->template_invoice)
                    <div class="card mb-3">
                        <div class="card-header">
                            <h6 class="card-title mb-0">
                                <i class="fas fa-file-invoice me-2"></i>
                                Template Invoice
                            </h6>
                        </div>
                        <div class="card-body">
                            <p class="mb-1"><strong>{{ $pembelian->templateInvoice->nama_template }}</strong></p>
                            <small class="text-muted">{{ $pembelian->templateInvoice->deskripsi }}</small>
                        </div>
                    </div>
                    @endif

                    <!-- Log Aktivitas -->
                    <div class="card mb-3">
                        <div class="card-header">
                            <h6 class="card-title mb-0">
                                <i class="fas fa-history me-2"></i>
                                Log Aktivitas
                            </h6>
                        </div>
                        <div class="card-body">
                            <div class="timeline">
                                <div class="timeline-item">
                                    <div class="timeline-marker bg-primary"></div>
                                    <div class="timeline-content">
                                        <h6 class="timeline-title">Transaksi Dibuat</h6>
                                        <p class="timeline-text">{{ \Carbon\Carbon::parse($pembelian->created_at)->format('d F Y, H:i') }}</p>
                                    </div>
                                </div>
                                
                                @if($pembelian->status_pembayaran === 'lunas' && $pembelian->tanggal_bayar)
                                <div class="timeline-item">
                                    <div class="timeline-marker bg-success"></div>
                                    <div class="timeline-content">
                                        <h6 class="timeline-title">Pembayaran Lunas</h6>
                                        <p class="timeline-text">{{ \Carbon\Carbon::parse($pembelian->tanggal_bayar)->format('d F Y') }}</p>
                                    </div>
                                </div>
                                @endif
                                
                                @if($pembelian->updated_at != $pembelian->created_at)
                                <div class="timeline-item">
                                    <div class="timeline-marker bg-warning"></div>
                                    <div class="timeline-content">
                                        <h6 class="timeline-title">Terakhir Diupdate</h6>
                                        <p class="timeline-text">{{ \Carbon\Carbon::parse($pembelian->updated_at)->format('d F Y, H:i') }}</p>
                                    </div>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Konfirmasi Pembayaran -->
<div class="modal fade" id="confirmPaymentModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Konfirmasi Pembayaran</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="confirmPaymentForm" method="POST" action="{{ route('pembelians.confirm-payment', $pembelian) }}">
                @csrf
                <div class="modal-body">
                    <p>Konfirmasi pembayaran untuk transaksi <strong>{{ $pembelian->nomor_transaksi }}</strong> dengan total <strong>{{ $pembelian->total_amount_format }}</strong>?</p>
                    
                    <div class="mb-3">
                        <label class="form-label">Tanggal Pembayaran</label>
                        <input type="date" class="form-control" name="tanggal_bayar" 
                               value="{{ date('Y-m-d') }}" required>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Metode Pembayaran</label>
                        <select class="form-select" name="metode_pembayaran" required>
                            <option value="tunai" {{ $pembelian->metode_pembayaran == 'tunai' ? 'selected' : '' }}>Tunai</option>
                            <option value="transfer" {{ $pembelian->metode_pembayaran == 'transfer' ? 'selected' : '' }}>Transfer</option>
                            <option value="kartu_kredit" {{ $pembelian->metode_pembayaran == 'kartu_kredit' ? 'selected' : '' }}>Kartu Kredit</option>
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Catatan (Opsional)</label>
                        <textarea class="form-control" name="catatan_pembayaran" rows="3" 
                                  placeholder="Catatan tambahan pembayaran..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-success">
                        <i class="fas fa-check me-1"></i>Konfirmasi Pembayaran
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Konfirmasi Pembayaran
    $('.confirm-payment-btn').on('click', function(e) {
        e.preventDefault();
        $('#confirmPaymentModal').modal('show');
    });

    // Kirim WhatsApp
    $('.send-whatsapp-btn').on('click', function(e) {
        e.preventDefault();
        const pembelianId = $(this).data('pembelian-id');
        
        if (confirm('Kirim invoice via WhatsApp?')) {
            $.post(`/pembelians/${pembelianId}/send-invoice`, {
                _token: '{{ csrf_token() }}'
            })
            .done(function(response) {
                if (response.success) {
                    alert('Invoice berhasil dikirim via WhatsApp!');
                } else {
                    alert('Gagal mengirim invoice: ' + response.message);
                }
            })
            .fail(function() {
                alert('Terjadi kesalahan saat mengirim invoice!');
            });
        }
    });
});
</script>
@endpush

@push('styles')
<style>
.timeline {
    position: relative;
    padding: 0;
    list-style: none;
}

.timeline-item {
    position: relative;
    margin-bottom: 1rem;
    padding-left: 2rem;
}

.timeline-marker {
    position: absolute;
    left: 0;
    top: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.timeline-content {
    padding-left: 0.5rem;
}

.timeline-title {
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.timeline-text {
    margin-bottom: 0;
    font-size: 0.75rem;
    color: #6c757d;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 20px;
    bottom: -1rem;
    width: 2px;
    background-color: #e9ecef;
}

.timeline-item:last-child::before {
    display: none;
}
</style>
@endpush