@extends('layouts.app')

@section('content')
    <div class="container">
        <h2>Add Analysis</h2>

        <form method="POST" action="{{ route('admin.app-analysis.store') }}" enctype="multipart/form-data">
            @csrf
            <input type="text" name="title" class="form-control mb-3" placeholder="Title">
            <button type="button" class="btn btn-info mb-3" onclick="generateAI()">
                🧠 Auto Generate with AI
            </button>
            <textarea name="intro" class="form-control mb-3" placeholder="Intro"></textarea>
            <textarea name="idea" class="form-control mb-3" placeholder="Idea"></textarea>
            <textarea name="how_it_works" class="form-control mb-3" placeholder="How it works"></textarea>
            <textarea name="why_amazing" class="form-control mb-3" placeholder="Why amazing"></textarea>
            <textarea name="technical" class="form-control mb-3" placeholder="Technical"></textarea>
            <textarea name="architecture" class="form-control mb-3" placeholder="Architecture"></textarea>
            <textarea name="steps" class="form-control mb-3" placeholder="Steps"></textarea>
            <input type="text" name="topic" class="form-control mb-3" placeholder="Topic">
            <div class="mb-3">
                <label class="form-label">Upload Drawing Image</label>

                <input type="file" name="drawing_file" class="form-control" onchange="console.log(this.files)">
            </div>
            <div class="col-md-6 mb-3">
                <label>Namer</label>
                <input type="text" name="name" class="form-control" value="{{ old('name') }}">
            </div>
            <div class="mb-3">
                <label>News Title</label>
                <input type="text" name="news_title" class="form-control"
                    value="{{ old('news_title', $analysis->news_title ?? '') }}">
            </div>

            <div class="mb-3">
                <label>News URL</label>
                <input type="url" name="news_url" class="form-control"
                    value="{{ old('news_url', $analysis->news_url ?? '') }}">
            </div>
            <div class="mb-3">
                <label>AI Image</label>
                <input type="file" name="ai_image" class="form-control">
            </div>
            {{-- <div class="col-md-6 mb-3">
                <label>App Name</label>
                <input type="text" name="name" class="form-control" value="{{ old('name') }}">
            </div> --}}

            <div class="col-md-6 mb-3">
                <label>Website</label>
                <input type="url" name="website" class="form-control" value="{{ old('website') }}">
            </div>

            <div class="col-md-6 mb-3">
                <label>Founder</label>
                <input type="text" name="founder" class="form-control" value="{{ old('founder') }}">
            </div>

            <div class="col-md-6 mb-3">
                <label>AI Credit Image</label>
                <input type="text" name="headquarters" class="form-control" value="{{ old('headquarters') }}">
            </div>

            <div class="col-md-6 mb-3">
                <label>News Website Name</label>
                <input type="text" name="origin" class="form-control" value="{{ old('origin') }}">
            </div>

            <div class="col-md-6 mb-3">
                <label>Image Credit</label>
                <input type="text" name="industry" class="form-control" value="{{ old('industry') }}">
            </div>

            <div class="col-md-6 mb-3">
                <label>Similar App</label>
                <input type="text" name="coverage" class="form-control" placeholder="e.g. Pan-African"
                    value="{{ old('coverage') }}">
            </div>

            <div class="col-md-6 mb-3">
                <label>Email</label>
                <input type="email" name="contact_email" class="form-control" value="{{ old('contact_email') }}">
            </div>

            <div class="col-md-6 mb-3">
                <label>Phone</label>
                <input type="text" name="contact_phone" class="form-control" value="{{ old('contact_phone') }}">
            </div>

            <div class="col-12 mb-3">
                <label>Description of Similar Apss</label>
                <textarea name="description" class="form-control" rows="4">{{ old('description') }}</textarea>
            </div>

    </div>
    <textarea name="brief_description" class="form-control mb-3" placeholder="Brief Description"></textarea>
    <textarea name="full_description" class="form-control mb-3" placeholder="Full Description"></textarea>

    <input type="text" name="topic_image" class="form-control mb-3" placeholder="Topic Image URL">
    <!-- OR Logo URL -->
    <input type="file" name="logo_file" class="form-control mb-3">
    <input type="text" name="logo_url" class="form-control mb-3" placeholder="Paste Logo URL">
    <button type="submit" id="saveBtn" class="btn btn-success mt-4 mb-4">
        Save
    </button>
    </form>
    <script>
        function generateAI() {
            let title = document.querySelector('input[name="title"]').value;
            let btn = document.getElementById('saveBtn');
            btn.disabled = true;
            btn.innerText = "Generating...";
            fetch("{{ route('admin.app-analysis.ai') }}", {
                    method: "POST",
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        title: title
                    })
                })
                .then(res => res.json())
                .then(data => {

                    document.querySelector('textarea[name="intro"]').value = data.intro;
                    document.querySelector('textarea[name="idea"]').value = data.idea;
                    document.querySelector('textarea[name="how_it_works"]').value = data.how_it_works;
                    document.querySelector('textarea[name="why_amazing"]').value = data.why_amazing;
                    document.querySelector('textarea[name="technical"]').value = data.technical;
                    document.querySelector('textarea[name="architecture"]').value = data.architecture;
                    document.querySelector('textarea[name="steps"]').value = data.steps;
                    document.querySelector('textarea[name="global_examples"]').value = data.global_examples;

                    btn.disabled = false;
                    btn.innerText = "Save";
                })
                .catch(err => {
                    console.error(err);
                    btn.disabled = false;
                    btn.innerText = "Save";
                });
        }
        document.querySelector('form').addEventListener('submit', function() {
            console.log("Submitting intro:", document.querySelector('textarea[name="intro"]').value);
        });
    </script>
    </div>
@endsection