@extends('layouts.main')

@section('content')
<div class="container">
    <div class="mx-auto max-w-2xl">
        <h1 class="text-3xl font-bold mb-6">Add New Facebook Dashboard</h1>

        @if(session('error'))
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
                {{ session('error') }}
            </div>
        @endif

        @if(isset($error))
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
                {{ $error }}
            </div>
        @endif

        <div class="bg-white rounded-lg shadow p-6">
            <form action="{{ route('facebook.create') }}" method="POST">
                @csrf
                
                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-bold mb-2" for="facebook_page_id">
                        Select Facebook Page
                    </label>
                    @if(count($pages) > 0)
                        <select name="facebook_page_id" 
                                id="facebook_page_id" 
                                class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                                required
                                onchange="updateDashboardInfo(this)">
                            <option value="">Select a page...</option>
                            @foreach($pages as $page)
                                <option value="{{ $page['id'] }}" 
                                        data-name="{{ $page['name'] }}"
                                        data-category="{{ $page['category'] }}"
                                        data-followers="{{ number_format($page['fan_count']) }}"
                                        data-token="{{ $page['access_token'] }}">
                                    {{ $page['name'] }} ({{ $page['category'] }} - {{ number_format($page['fan_count']) }} followers)
                                </option>
                            @endforeach
                        </select>
                    @else
                        <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4">
                            <p class="text-yellow-700">
                                No Facebook pages found. Make sure you have admin access to at least one Facebook page.
                            </p>
                        </div>
                    @endif
                    @error('facebook_page_id')
                        <p class="text-red-500 text-xs italic">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Hidden input for page token -->
                <input type="hidden" name="page_token" id="page_token">

                <div class="mb-6">
                    <label class="block text-gray-700 text-sm font-bold mb-2" for="name">
                        Dashboard Name
                    </label>
                    <input type="text" 
                           name="name" 
                           id="name" 
                           class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                           placeholder="Dashboard name will be auto-filled when you select a page"
                           required>
                    @error('name')
                        <p class="text-red-500 text-xs italic">{{ $message }}</p>
                    @enderror
                </div>

                <div class="flex items-center justify-between">
                    <button type="submit" 
                            class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
                        Create Dashboard
                    </button>
                    <a href="{{ route('facebook.dashboard') }}" 
                       class="text-blue-500 hover:text-blue-800">
                        Cancel
                    </a>
                </div>
            </form>
        </div>

        <div class="mt-6 bg-blue-50 border-l-4 border-blue-500 p-4">
            <h2 class="text-blue-800 font-bold">How to get started:</h2>
            <ol class="list-decimal ml-4 mt-2 text-blue-800">
                <li>Select one of your Facebook pages from the dropdown</li>
                <li>The dashboard name will be automatically filled</li>
                <li>Click "Create Dashboard" to start monitoring your page</li>
            </ol>
        </div>
    </div>
</div>

<script>
function updateDashboardInfo(select) {
    const option = select.options[select.selectedIndex];
    if (option.value) {
        const name = option.getAttribute('data-name');
        const token = option.getAttribute('data-token');
        document.getElementById('name').value = name + ' Dashboard';
        document.getElementById('page_token').value = token;
    } else {
        document.getElementById('name').value = '';
        document.getElementById('page_token').value = '';
    }
}
</script>
@endsection