@extends('layouts.app')

@section('title', 'SMS Logs')

@section('content')
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="mb-0"><i class="bi bi-journal-text me-2"></i>SMS Logs</h4>
        <button class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#testSendModal">
            <i class="bi bi-send me-1"></i>Test Send
        </button>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show">{{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show">{{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    {{-- Stats Cards --}}
    <div class="row g-3 mb-4">
        <div class="col-md-2">
            <div class="card text-center">
                <div class="card-body py-2">
                    <div class="fs-5 fw-bold">{{ number_format($stats['total']) }}</div>
                    <small class="text-muted">Total</small>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card text-center border-secondary">
                <div class="card-body py-2">
                    <div class="fs-5 fw-bold text-secondary">{{ number_format($stats['queued']) }}</div>
                    <small class="text-muted">Queued</small>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card text-center border-info">
                <div class="card-body py-2">
                    <div class="fs-5 fw-bold text-info">{{ number_format($stats['sent']) }}</div>
                    <small class="text-muted">Sent</small>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card text-center border-success">
                <div class="card-body py-2">
                    <div class="fs-5 fw-bold text-success">{{ number_format($stats['delivered']) }}</div>
                    <small class="text-muted">Delivered</small>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card text-center border-danger">
                <div class="card-body py-2">
                    <div class="fs-5 fw-bold text-danger">{{ number_format($stats['failed']) }}</div>
                    <small class="text-muted">Failed</small>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card text-center border-warning">
                <div class="card-body py-2">
                    <div class="fs-5 fw-bold text-warning">৳ {{ number_format($stats['cost'], 2) }}</div>
                    <small class="text-muted">Cost</small>
                </div>
            </div>
        </div>
    </div>

    {{-- Filters --}}
    <div class="card mb-3">
        <div class="card-body py-2">
            <form method="GET" class="row g-2 align-items-end">
                <div class="col-md-2">
                    <label class="form-label mb-0 small">From</label>
                    <input type="date" name="from" class="form-control form-control-sm" value="{{ request('from') }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label mb-0 small">To</label>
                    <input type="date" name="to" class="form-control form-control-sm" value="{{ request('to') }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label mb-0 small">Status</label>
                    <select name="status" class="form-select form-select-sm">
                        <option value="">All</option>
                        @foreach (['queued', 'sent', 'delivered', 'failed'] as $s)
                            <option value="{{ $s }}" {{ request('status') === $s ? 'selected' : '' }}>
                                {{ ucfirst($s) }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label mb-0 small">Template</label>
                    <select name="template_id" class="form-select form-select-sm">
                        <option value="">All</option>
                        @foreach ($templates as $t)
                            <option value="{{ $t->id }}" {{ request('template_id') == $t->id ? 'selected' : '' }}>
                                {{ $t->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label mb-0 small">Recipient</label>
                    <input type="text" name="recipient" class="form-control form-control-sm" placeholder="01XXXXXXXXX"
                        value="{{ request('recipient') }}">
                </div>
                <div class="col-md-2 d-flex gap-2">
                    <button class="btn btn-sm btn-primary"><i class="bi bi-funnel me-1"></i>Filter</button>
                    <a href="{{ route('sms.logs') }}" class="btn btn-sm btn-outline-secondary">Clear</a>
                </div>
            </form>
        </div>
    </div>

    {{-- Log Table --}}
    <div class="card">
        <div class="card-body p-0">
            <table class="table table-hover mb-0 small">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Time</th>
                        <th>Recipient</th>
                        <th>Template</th>
                        <th>Message</th>
                        <th>Status</th>
                        <th>SMS</th>
                        <th>Cost</th>
                        <th>Sent At</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($logs as $log)
                        <tr>
                            <td>{{ $log->id }}</td>
                            <td class="text-nowrap">{{ $log->created_at?->format('d M H:i') }}</td>
                            <td>
                                <strong>{{ $log->recipient_mobile }}</strong>
                                @if ($log->recipient_name)
                                    <br><small class="text-muted">{{ $log->recipient_name }}</small>
                                @endif
                            </td>
                            <td>
                                @if ($log->template)
                                    <span class="badge bg-light text-dark">{{ $log->template->name }}</span>
                                @else
                                    <span class="text-muted">—</span>
                                @endif
                            </td>
                            <td>
                                <span
                                    style="max-width:250px;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis"
                                    title="{{ $log->message_body }}">
                                    {{ $log->message_body }}
                                </span>
                            </td>
                            <td>
                                <span class="badge {{ $log->status_badge }}">{{ ucfirst($log->status) }}</span>
                            </td>
                            <td>{{ $log->sms_count }}</td>
                            <td>৳{{ number_format($log->sms_cost, 2) }}</td>
                            <td>{{ $log->sent_at?->format('d M H:i') ?? '—' }}</td>
                            <td>
                                @if ($log->status === 'failed')
                                    <form action="{{ route('sms.retry', $log) }}" method="POST" class="d-inline">
                                        @csrf
                                        <button class="btn btn-sm btn-outline-warning" title="Retry">
                                            <i class="bi bi-arrow-clockwise"></i>
                                        </button>
                                    </form>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="10" class="text-center text-muted py-4">No SMS logs found.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if ($logs->hasPages())
            <div class="card-footer">{{ $logs->links() }}</div>
        @endif
    </div>

    {{-- Test Send Modal --}}
    <div class="modal fade" id="testSendModal" tabindex="-1">
        <div class="modal-dialog">
            <form method="POST" action="{{ route('sms.test') }}">
                @csrf
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title"><i class="bi bi-send me-2"></i>Test SMS</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label">Recipient Phone *</label>
                            <input type="text" name="recipient" class="form-control" required placeholder="01XXXXXXXXX"
                                maxlength="15">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Use Template (optional)</label>
                            <select name="template_id" class="form-select" id="testTemplate">
                                <option value="">— Custom Message —</option>
                                @foreach ($templates as $t)
                                    <option value="{{ $t->id }}">{{ $t->name }} ({{ $t->type }})</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3" id="customMessageDiv">
                            <label class="form-label">Message *</label>
                            <textarea name="message" class="form-control" rows="4" maxlength="1000"
                                placeholder="Your test message here..."></textarea>
                        </div>
                        <div class="alert alert-warning small py-2 mb-0">
                            <i class="bi bi-exclamation-triangle me-1"></i>
                            This sends an <strong>immediate</strong> SMS via the configured gateway.
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-send me-1"></i>Send Now
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const sel = document.getElementById('testTemplate');
            const div = document.getElementById('customMessageDiv');
            sel.addEventListener('change', function () {
                div.style.display = this.value ? 'none' : 'block';
            });
        });
    </script>
@endsection