@extends('layouts.app')
@section('title', 'Send Image')

@section('content')
<div class="row g-4">
    {{-- Send form --}}
    <div class="col-lg-5">
        <div class="card">
            <div class="card-header fw-semibold"><i class="bi bi-send me-2"></i>Send to Panel</div>
            <div class="card-body">
                <form method="POST" action="{{ route('lis.send.send') }}" id="sendForm">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label">Target Device</label>
                        <select name="device_id" class="form-select" required>
                            <option value="all">📡 All Active Devices</option>
                            @foreach($devices as $d)
                                <option value="{{ $d->id }}">{{ $d->name }} — {{ $d->ip_address }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-4">
                        <label class="form-label">Mode</label>
                        <div class="d-flex gap-2">
                            <div class="flex-fill">
                                <input type="radio" name="mode" value="buka" class="btn-check" id="modeBuka" required>
                                <label for="modeBuka" class="btn btn-outline-success w-100 p-0 overflow-hidden" style="border-radius:8px">
                                    <div style="position:relative">
                                        <img src="{{ route('lis.panel-image', 'buka') }}"
                                             alt="BUKA"
                                             style="width:100%;height:100px;object-fit:cover;display:block;opacity:.85">
                                        <div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
                                                    background:rgba(0,0,0,.35);font-weight:700;font-size:1.1rem;color:#4ade80;
                                                    text-shadow:0 1px 4px #000">
                                            <i class="bi bi-circle-fill me-2" style="font-size:.7rem"></i>BUKA
                                        </div>
                                    </div>
                                </label>
                            </div>
                            <div class="flex-fill">
                                <input type="radio" name="mode" value="tutup" class="btn-check" id="modeTutup">
                                <label for="modeTutup" class="btn btn-outline-danger w-100 p-0 overflow-hidden" style="border-radius:8px">
                                    <div style="position:relative">
                                        <img src="{{ route('lis.panel-image', 'tutup') }}"
                                             alt="TUTUP"
                                             style="width:100%;height:100px;object-fit:cover;display:block;opacity:.85">
                                        <div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
                                                    background:rgba(0,0,0,.35);font-weight:700;font-size:1.1rem;color:#f87171;
                                                    text-shadow:0 1px 4px #000">
                                            <i class="bi bi-circle-fill me-2" style="font-size:.7rem"></i>TUTUP
                                        </div>
                                    </div>
                                </label>
                            </div>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary w-100" id="sendBtn">
                        <i class="bi bi-send me-2"></i>Send Now
                    </button>
                </form>

                {{-- Image info --}}
                <div class="mt-3 p-2" style="background:#0d1117;border:1px solid #1e2433;border-radius:6px;font-size:.75rem;color:#64748b">
                    <i class="bi bi-info-circle me-1"></i>
                    Images stored in <code>storage/app/images/</code>.
                    Replace <code>buka.jpg</code> / <code>tutup.jpg</code> to update panel content.
                </div>
            </div>
        </div>
    </div>

    {{-- Send results --}}
    <div class="col-lg-7">
        @if(session('send_results'))
        <div class="card mb-3">
            <div class="card-header fw-semibold"><i class="bi bi-clipboard-check me-2"></i>Send Results</div>
            <div class="card-body p-0">
                <table class="table mb-0">
                    <thead><tr><th>Device</th><th>IP</th><th>Status</th><th>Message</th><th>Duration</th></tr></thead>
                    <tbody>
                    @foreach(session('send_results') as $r)
                    <tr>
                        <td class="fw-semibold">{{ $r['device'] }}</td>
                        <td><code style="color:#7dd3fc">{{ $r['ip'] }}</code></td>
                        <td>
                            @if($r['success'])
                                <span class="badge bg-success">OK</span>
                            @else
                                <span class="badge bg-danger">FAIL</span>
                            @endif
                        </td>
                        <td style="font-size:.8rem">{{ $r['message'] }}</td>
                        <td style="font-size:.8rem">{{ $r['ms'] }} ms</td>
                    </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        @endif

        <div class="card">
            <div class="card-header fw-semibold"><i class="bi bi-clock-history me-2"></i>Recent Sends</div>
            <div class="card-body p-0">
                @php $recent = \App\Models\SendLog::with('device')->latest()->limit(15)->get(); @endphp
                @forelse($recent as $log)
                <div class="d-flex align-items-center px-3 py-2 border-bottom border-secondary border-opacity-25">
                    <i class="bi bi-{{ $log->success ? 'check-circle-fill text-success' : 'x-circle-fill text-danger' }} me-3"></i>
                    <div class="flex-grow-1">
                        <span class="fw-semibold" style="font-size:.875rem">{{ $log->device?->name }}</span>
                        <span class="badge badge-{{ $log->mode }} ms-2">{{ strtoupper($log->mode) }}</span>
                        @if(!$log->success)
                            <div class="text-danger" style="font-size:.75rem">{{ Str::limit($log->message, 60) }}</div>
                        @endif
                    </div>
                    <div class="text-secondary text-end" style="font-size:.75rem; white-space:nowrap">
                        {{ $log->duration_ms }} ms<br>{{ $log->created_at->diffForHumans() }}
                    </div>
                </div>
                @empty
                    <div class="text-center text-secondary py-4">No sends yet.</div>
                @endforelse
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.getElementById('sendForm').addEventListener('submit', function() {
    const btn = document.getElementById('sendBtn');
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Sending…';
});
</script>
@endpush