@extends('layouts.admin')

@section('page-title', 'home-create')

@section('content')
<div class="container py-4">
    <h3 class="mb-4">Add Home Page Data</h3>

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    <form action="{{ route('home.store') }}" method="POST" class="dropzone" id="video-dropzone" enctype="multipart/form-data">
        @csrf

        <div class="mb-3">
            <label class="form-label">Hero Section Title</label>
            <input type="text" name="hero_title" class="form-control" required>
        </div>

        <!-- <div class="mb-3">
            <label class="form-label">Hero Banner Image</label>
            <input type="file" name="hero_banner_img" class="form-control">
        </div> -->

        <div class="mb-3">
            <label class="form-label">Hero Banner Video</label>
            <input type="file" name="hero_banner_video" class="form-control" accept="video/*">
            <small class="text-muted">Upload MP4, MOV, MKV, AVI (optional).</small>
        </div>

        <div class="mb-3">
            <label class="form-label">Built Title</label>
            <input type="text" name="built_title" class="form-control">
        </div>

        <div class="mb-3">
            <label class="form-label">Built Description</label>
            <textarea name="built_description" class="form-control"></textarea>
        </div>

        <div id="built-stats-wrapper">
            <div class="built-stat-item mb-3">
                <label>Stat Title:</label>
                <input type="text" name="built_stats[0][title]" class="form-control" placeholder="e.g. 500+ Projects">

                <label>Stat Icon:</label>
                <input type="file" name="built_stats[0][icon]" class="form-control">
            </div>
        </div>

        <button type="button" id="addStatBtn" class="btn btn-secondary">+ Add Another</button>



        <div class="mb-3">
            <label class="form-label">CEO Title</label>
            <input type="text" name="ceo_title" class="form-control">
        </div>

        <div class="mb-3">
            <label class="form-label">CEO Message</label>
            <textarea name="ceo_message" class="form-control"></textarea>
        </div>

        <div class="mb-3">
            <label class="form-label">CEO Name</label>
            <input type="text" name="ceo_name" class="form-control">
        </div>

        <div class="mb-3">
            <label class="form-label">CEO Designation</label>
            <input type="text" name="ceo_designation" class="form-control">
        </div>

        <div class="mb-3">
            <label class="form-label">CEO Image</label>
            <input type="file" name="ceo_image" class="form-control">
        </div>

        <hr>
        <h5>Mission & Vision Items</h5>
        <div id="missionVisionContainer">
            <div class="mission-item mb-3 border p-3 rounded">
                <label>Title</label>
                <input type="text" name="mission_vision_items[0][title]" class="form-control mb-2">
                <label>Description</label>
                <textarea name="mission_vision_items[0][description]" class="form-control mb-2"></textarea>
                <label>Image</label>
                <input type="file" name="mission_vision_items[0][image]" class="form-control">
            </div>
        </div>

        <button type="button" class="btn btn-sm btn-secondary mb-3" id="addMissionBtn">+ Add More</button>


        <hr>
        <h5 class="mt-4">SEO Meta Information</h5>

        <div class="mb-3">
            <label class="form-label">Meta Title</label>
            <input type="text" 
                name="meta_title" 
                class="form-control" 
                placeholder="Enter meta title (SEO)">
        </div>

        <div class="mb-3">
            <label class="form-label">Meta Description</label>
            <textarea name="meta_description" 
                    class="form-control" 
                    rows="3" 
                    placeholder="Enter meta description (SEO)"></textarea>
        </div>

        <div class="mb-3">
            <label class="form-label">Meta Keywords</label>
            <input type="text" 
                name="meta_keywords" 
                class="form-control" 
                placeholder="keyword1, keyword2, keyword3">
            <small class="text-muted">Comma-separated keywords</small>
        </div>


        <button type="submit" class="btn btn-primary w-100">Save Home Page Data</button>
    </form>
</div>

<script>
let count = 1;
document.getElementById('addMissionBtn').addEventListener('click', function() {
    const container = document.getElementById('missionVisionContainer');
    const html = `
        <div class="mission-item mb-3 border p-3 rounded">
            <label>Title</label>
            <input type="text" name="mission_vision_items[${count}][title]" class="form-control mb-2">
            <label>Description</label>
            <textarea name="mission_vision_items[${count}][description]" class="form-control mb-2"></textarea>
            <label>Image</label>
            <input type="file" name="mission_vision_items[${count}][image]" class="form-control">
        </div>`;
    container.insertAdjacentHTML('beforeend', html);
    count++;
});
</script>


<script>
Dropzone.options.videoDropzone = {
    paramName: "hero_banner_img",
    maxFilesize: 50,
    acceptedFiles: ".mp4,.mov,.avi,.mkv,.webm",
    chunking: true,
    forceChunking: true,
    chunkSize: 2 * 1024 * 1024,
    retryChunks: true,
    retryChunksLimit: 3,
    parallelChunkUploads: false,

    init: function() {
        this.on("sending", function(file, xhr, formData) {
            formData.append("_token", "{{ csrf_token() }}");
            formData.append("_method", "PUT");
        });

        this.on("success", function(file, response) {
            console.log("Upload finished", response);
        });

        this.on("error", function(file, response) {
            console.error("Upload error", response);
        });
    }
};
</script>

@endsection