@extends('layouts.app')

@section('content')
    <div class="container py-5">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="card shadow rounded-4">
                    <div class="card-body p-5">
                        <h1 class="h3 fw-bold mb-4"><i class="fas fa-hashtag me-2"></i> Scrape Tweets</h1>

                        @if (session('status'))
                            <div class="alert alert-info border-start border-4 border-primary">
                                <pre class="mb-0 small text-dark">{{ session('status') }}</pre>
                            </div>
                        @endif

                        <form action="{{ route('scrap.tweets') }}" method="POST">
                            @csrf

                            <div class="mb-3">
                                <label class="form-label fw-semibold"><i class="fas fa-search me-1"></i> Versi iOS</label>
                                <select name="keyword" class="form-select @error('keyword') is-invalid @enderror">
                                    @foreach (['ios15', 'ios16', 'ios17'] as $v)
                                        <option value="{{ $v }}" {{ old('keyword') === $v ? 'selected' : '' }}>
                                            {{ strtoupper($v) }}</option>
                                    @endforeach
                                </select>
                                @error('keyword')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label class="form-label fw-semibold"><i class="fas fa-list-ol me-1"></i> Limit
                                    Tweet</label>
                                <input type="number" name="limit" min="1" value="{{ old('limit', 100) }}"
                                    class="form-control @error('limit') is-invalid @enderror">
                                @error('limit')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label class="form-label fw-semibold"><i class="fas fa-key me-1"></i> Twitter Token</label>
                                <div class="input-group">
                                    <input type="password" name="token"
                                        class="form-control @error('token') is-invalid @enderror"
                                        placeholder="Bearer token">
                                    <button type="button" class="btn btn-outline-secondary" onclick="toggleToken()"><i
                                            class="fas fa-eye" id="eye"></i></button>
                                </div>
                                @error('token')
                                    <div class="text-danger small mt-1">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="d-flex gap-3 mt-4">
                                <button class="btn btn-primary"><i class="fas fa-rocket me-1"></i> Mulai Scrape</button>

                                @php
                                    $fn = session('csv_filename');
                                    $filePath = public_path("tweets-data/{$fn}");
                                    $url = $fn && file_exists($filePath) ? asset("tweets-data/{$fn}") : null;
                                @endphp


@if ($url)
<a href="{{ $url }}" target="_blank" class="btn btn-success">
    <i class="fas fa-file-csv me-1"></i> Download CSV
</a>
@endif

                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        function toggleToken() {
            const i = document.getElementById('eye'),
                t = document.querySelector('input[name=token]');
            if (t.type === 'password') {
                t.type = 'text';
                i.classList.replace('fa-eye', 'fa-eye-slash');
            } else {
                t.type = 'password';
                i.classList.replace('fa-eye-slash', 'fa-eye');
            }
        }
    </script>
@endpush