@extends('layouts.app')

@section('title', $form->name . ' - Submissions')

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center pt-3 pb-4 mb-4 border-bottom">
        <div>
            <h1 class="h2 mb-1">
                <i class="bi bi-file-earmark-text me-2 text-primary"></i>{{ $form->name }}
            </h1>
            <p class="text-muted mb-0">View all submissions for this payment form</p>
        </div>
        <div class="btn-group">
            <a href="{{ route('payment-forms.index', $website) }}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left me-2"></i>Back to Forms
            </a>
            <a href="{{ route('payment-forms.edit', [$website, $form]) }}" class="btn btn-outline-primary">
                <i class="bi bi-pencil me-2"></i>Edit Form
            </a>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-primary bg-opacity-10 rounded-3 p-3">
                                <i class="bi bi-file-earmark-check text-primary" style="font-size: 1.5rem;"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="text-muted mb-1">Total Submissions</h6>
                            <h3 class="mb-0">{{ $form->submission_count }}</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-success bg-opacity-10 rounded-3 p-3">
                                <i class="bi bi-currency-dollar text-success" style="font-size: 1.5rem;"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="text-muted mb-1">Total Collected</h6>
                            <h3 class="mb-0">RM {{ number_format($form->total_collected, 2) }}</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-info bg-opacity-10 rounded-3 p-3">
                                <i class="bi bi-graph-up text-info" style="font-size: 1.5rem;"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="text-muted mb-1">Average Amount</h6>
                            <h3 class="mb-0">RM {{ number_format($form->average_amount, 2) }}</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-warning bg-opacity-10 rounded-3 p-3">
                                <i class="bi bi-check-circle text-warning" style="font-size: 1.5rem;"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="text-muted mb-1">Paid Submissions</h6>
                            <h3 class="mb-0">{{ $submissions->where('payment_status', 'paid')->count() }}</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Submissions Table -->
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white border-bottom">
            <h5 class="mb-0">
                <i class="bi bi-list-ul me-2"></i>Submissions List
            </h5>
        </div>
        <div class="card-body p-0">
            @if($submissions->count() > 0)
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Reference</th>
                                <th>Customer</th>
                                <th>Amount</th>
                                <th>Payment Status</th>
                                <th>Payment Method</th>
                                <th>Submitted At</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($submissions as $submission)
                                <tr>
                                    <td>
                                        <strong>{{ $submission->submission_reference }}</strong>
                                    </td>
                                    <td>
                                        <div class="fw-semibold">{{ $submission->customer_name }}</div>
                                        <small class="text-muted">{{ $submission->customer_email }}</small>
                                        @if($submission->customer_phone)
                                            <br><small class="text-muted">{{ $submission->customer_phone }}</small>
                                        @endif
                                    </td>
                                    <td>
                                        <strong>RM {{ number_format($submission->amount, 2) }}</strong>
                                    </td>
                                    <td>
                                        @php
                                            $statusClass = match($submission->payment_status) {
                                                'pending' => 'warning',
                                                'paid' => 'success',
                                                'failed' => 'danger',
                                                'refunded' => 'info',
                                                default => 'secondary'
                                            };
                                        @endphp
                                        <span class="badge bg-{{ $statusClass }} {{ $statusClass === 'warning' ? 'text-dark' : '' }}">
                                            {{ ucfirst($submission->payment_status) }}
                                        </span>
                                        @if($submission->paid_at)
                                            <br><small class="text-muted">{{ $submission->paid_at->format('M d, Y H:i') }}</small>
                                        @endif
                                    </td>
                                    <td>
                                        @if($submission->payment_method)
                                            @if($submission->payment_method === 'chipin')
                                                <i class="bi bi-credit-card me-1 text-primary"></i>Online Payment
                                            @elseif($submission->payment_method === 'bank_transfer')
                                                <i class="bi bi-bank me-1 text-info"></i>Bank Transfer
                                            @elseif($submission->payment_method === 'cash_on_delivery')
                                                <i class="bi bi-cash-coin me-1 text-success"></i>Cash
                                            @else
                                                {{ ucfirst(str_replace('_', ' ', $submission->payment_method)) }}
                                            @endif
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                    <td>
                                        <div>{{ $submission->created_at->format('M d, Y') }}</div>
                                        <small class="text-muted">{{ $submission->created_at->format('H:i A') }}</small>
                                    </td>
                                    <td>
                                        <div class="btn-group btn-group-sm">
                                            <button type="button" class="btn btn-outline-primary"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#submissionModal{{ $submission->id }}"
                                                    title="View Details">
                                                <i class="bi bi-eye"></i>
                                            </button>
                                            @if($submission->order)
                                                <a href="{{ route('orders.show', [$website, $submission->order]) }}"
                                                   class="btn btn-outline-info"
                                                   title="View Order">
                                                    <i class="bi bi-receipt"></i>
                                                </a>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                @if($submissions->hasPages())
                    <div class="card-footer bg-white border-top">
                        {{ $submissions->links() }}
                    </div>
                @endif
            @else
                <div class="text-center py-5">
                    <i class="bi bi-inbox display-1 text-muted"></i>
                    <h3 class="mt-4">No Submissions Yet</h3>
                    <p class="text-muted">This payment form hasn't received any submissions.</p>
                    <a href="{{ $form->public_url }}" target="_blank" class="btn btn-primary mt-3">
                        <i class="bi bi-box-arrow-up-right me-2"></i>View Public Form
                    </a>
                </div>
            @endif
        </div>
    </div>
</div>

<!-- Submission Detail Modals -->
@foreach($submissions as $submission)
<div class="modal fade" id="submissionModal{{ $submission->id }}" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="bi bi-file-earmark-text me-2"></i>Submission Details
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <!-- Reference & Status -->
                <div class="row mb-4">
                    <div class="col-md-6">
                        <label class="form-label text-muted">Submission Reference</label>
                        <div class="fw-semibold">{{ $submission->submission_reference }}</div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label text-muted">Status</label>
                        <div>
                            @php
                                $statusClass = match($submission->payment_status) {
                                    'pending' => 'warning',
                                    'paid' => 'success',
                                    'failed' => 'danger',
                                    'refunded' => 'info',
                                    default => 'secondary'
                                };
                            @endphp
                            <span class="badge bg-{{ $statusClass }} {{ $statusClass === 'warning' ? 'text-dark' : '' }} fs-6">
                                {{ ucfirst($submission->payment_status) }}
                            </span>
                        </div>
                    </div>
                </div>

                <!-- Customer Information -->
                <div class="card mb-3">
                    <div class="card-header">
                        <h6 class="mb-0"><i class="bi bi-person me-2"></i>Customer Information</h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-2">
                                <label class="form-label text-muted">Name</label>
                                <div class="fw-semibold">{{ $submission->customer_name }}</div>
                            </div>
                            <div class="col-md-6 mb-2">
                                <label class="form-label text-muted">Email</label>
                                <div class="fw-semibold">
                                    <a href="mailto:{{ $submission->customer_email }}">{{ $submission->customer_email }}</a>
                                </div>
                            </div>
                            @if($submission->customer_phone)
                                <div class="col-md-6 mb-2">
                                    <label class="form-label text-muted">Phone</label>
                                    <div class="fw-semibold">
                                        <a href="tel:{{ $submission->customer_phone }}">{{ $submission->customer_phone }}</a>
                                    </div>
                                </div>
                            @endif
                        </div>

                        @if($submission->billing_address)
                            <div class="mt-3">
                                <label class="form-label text-muted">Billing Address</label>
                                <div class="fw-semibold">{{ $submission->billing_address }}</div>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Payment Information -->
                <div class="card mb-3">
                    <div class="card-header">
                        <h6 class="mb-0"><i class="bi bi-credit-card me-2"></i>Payment Information</h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-2">
                                <label class="form-label text-muted">Amount</label>
                                <div class="fw-semibold fs-4 text-primary">RM {{ number_format($submission->amount, 2) }}</div>
                            </div>
                            <div class="col-md-6 mb-2">
                                <label class="form-label text-muted">Payment Method</label>
                                <div class="fw-semibold">
                                    @if($submission->payment_method === 'chipin')
                                        <i class="bi bi-credit-card me-1 text-primary"></i>Online Payment (ChipIn)
                                    @elseif($submission->payment_method === 'bank_transfer')
                                        <i class="bi bi-bank me-1 text-info"></i>Bank Transfer
                                    @elseif($submission->payment_method === 'cash_on_delivery')
                                        <i class="bi bi-cash-coin me-1 text-success"></i>Pay at Counter
                                    @else
                                        {{ ucfirst(str_replace('_', ' ', $submission->payment_method ?? 'N/A')) }}
                                    @endif
                                </div>
                            </div>
                            @if($submission->payment_reference)
                                <div class="col-md-6 mb-2">
                                    <label class="form-label text-muted">Payment Reference</label>
                                    <div class="fw-semibold">{{ $submission->payment_reference }}</div>
                                </div>
                            @endif
                            @if($submission->paid_at)
                                <div class="col-md-6 mb-2">
                                    <label class="form-label text-muted">Paid At</label>
                                    <div class="fw-semibold">{{ $submission->paid_at->format('M d, Y H:i A') }}</div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- Form Data -->
                @php
                    $formFields = $submission->getFormFieldsWithLabels();
                @endphp
                @if(count($formFields) > 0)
                    <div class="card mb-3">
                        <div class="card-header">
                            <h6 class="mb-0"><i class="bi bi-list-check me-2"></i>Form Responses</h6>
                        </div>
                        <div class="card-body">
                            <dl class="row mb-0">
                                @foreach($formFields as $field)
                                    <dt class="col-sm-4">{{ $field['label'] }}</dt>
                                    <dd class="col-sm-8">
                                        @if($field['type'] === 'file' && is_string($field['value']))
                                            <a href="{{ asset('storage/' . $field['value']) }}" target="_blank" class="text-decoration-none">
                                                <i class="bi bi-file-earmark me-1"></i>View File
                                            </a>
                                        @elseif(is_array($field['value']))
                                            {{ implode(', ', $field['value']) }}
                                        @else
                                            {{ $field['value'] }}
                                        @endif
                                    </dd>
                                @endforeach
                            </dl>
                        </div>
                    </div>
                @endif

                <!-- Message -->
                @if($submission->message)
                    <div class="card mb-3">
                        <div class="card-header">
                            <h6 class="mb-0"><i class="bi bi-chat-text me-2"></i>Message</h6>
                        </div>
                        <div class="card-body">
                            <p class="mb-0">{{ $submission->message }}</p>
                        </div>
                    </div>
                @endif

                <!-- Technical Info -->
                <div class="card">
                    <div class="card-header">
                        <h6 class="mb-0"><i class="bi bi-info-circle me-2"></i>Technical Information</h6>
                    </div>
                    <div class="card-body">
                        <div class="row small">
                            <div class="col-md-6 mb-2">
                                <label class="text-muted">Submitted At</label>
                                <div>{{ $submission->created_at->format('M d, Y H:i:s A') }}</div>
                            </div>
                            @if($submission->ip_address)
                                <div class="col-md-6 mb-2">
                                    <label class="text-muted">IP Address</label>
                                    <div>{{ $submission->ip_address }}</div>
                                </div>
                            @endif
                            @if($submission->source)
                                <div class="col-md-6 mb-2">
                                    <label class="text-muted">Source</label>
                                    <div>{{ $submission->source }}</div>
                                </div>
                            @endif
                            @if($submission->order_id)
                                <div class="col-md-6 mb-2">
                                    <label class="text-muted">Order</label>
                                    <div>
                                        <a href="{{ route('orders.show', [$website, $submission->order]) }}">
                                            {{ $submission->order->order_number }}
                                        </a>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                @if($submission->order)
                    <a href="{{ route('orders.show', [$website, $submission->order]) }}" class="btn btn-primary">
                        <i class="bi bi-receipt me-2"></i>View Order
                    </a>
                @endif
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endforeach
@endsection