@extends('front.include.app')
@section('content')
    <section>
        <div class="container">
            <form id="multiStepForm" class="mein-step-form" action="{{ route('collaborations.store') }}" method="POST"
                enctype="multipart/form-data">
                @csrf
                <!-- Step Indicators -->
                <div class="step-indicator mb-4">
                    <div class="active">1</div>
                    <div>2</div>
                    <div>3</div>
                    <div>4</div>
                    <div>5</div>
                    <div>6</div>
                </div>

                <!-- Step 1: Personal Information -->
                <div class="step-section active">
                    <h4>1. Personal Information</h4>
                    <div class="form-group">
                        <label>Name of Artist</label>
                        <input type="text" class="form-control" name="artistName" required>
                    </div>
                    <div class="form-group">
                        <label>Name of Brand</label>
                        <input type="text" class="form-control" name="brandName" required>
                    </div>
                    <div class="form-group">
                        <label>Email Address</label>
                        <input type="email" class="form-control" name="email" id="email" required>
                        <small id="error" style="color:red; display:none;">Invalid Email</small>
                    </div>
                    <div class="form-group">
                        <label>Phone Number</label>
                        <input type="text" name="phone" id="phone" class="form-control" value="" required>
                        <div id="phone-error" style="color: red; display: none;"></div>
                    </div>
                    <div class="form-group">
                        <label>Social Media Handles</label>
                        <input type="text" class="form-control" name="socialMedia" required>
                    </div>
                </div>

                <!-- Step 2: Shoot Details -->
                <div class="step-section">
                    <h4>2. Shoot Details</h4>
                    <div class="form-group">
                        <label>Date of Shoot</label>
                        <input type="date" class="form-control" min="{{ \Carbon\Carbon::today()->toDateString() }}"
                            name="shootDate" required>
                    </div>
                    <div class="form-group">
                        <label>Time of Shoot</label>
                        <input type="time" class="form-control" name="shootTime" required>
                    </div>
                    <div class="form-group">
                        <label>Number of Guests</label>
                        <input type="number" class="form-control" name="guests" min="0">
                    </div>
                </div>

                <div class="step-section">
                    <h4 class="mb-3">3. Collaboration Details</h4>

                    <div class="form-check mb-2">
                        <input class="form-check-input" type="checkbox" name="agreement" id="agreement" required>
                        <label class="form-check-label" for="agreement">
                            I agree to the Collaboration Agreement
                        </label>
                    </div>

                    <div class="form-check mb-2">
                        <input class="form-check-input" type="checkbox" name="liability" id="liability" required>
                        <label class="form-check-label" for="liability">
                            I agree to the Liability Waivers for Guests
                        </label>
                    </div>

                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="deposit" id="deposit">
                        <label class="form-check-label" for="deposit">
                            Yes, I would like to leave a deposit
                        </label>
                    </div>
                </div>

                <!-- Step 4: Additional Notes -->
                <div class="step-section">
                    <h4>4. Additional Notes</h4>
                    <div class="form-group">
                        <label>Message / Notes for the Studio</label>
                        <textarea class="form-control" name="notes" rows="4"></textarea>
                    </div>
                </div>

                <!-- Step 5: Portfolio Upload -->
                <div class="step-section">
                    <h4>5. Portfolio</h4>
                    <div class="form-group">
                        <label>Upload Portfolio Images</label>
                        <input type="file" name="portfolioImages[]" id="portfolioImages" multiple required>
                        <small class="form-text text-muted">Max size: 5MB per image. Allowed: JPG, PNG.</small>
                    </div>
                    <div id="imagePreview" class="mt-3"></div>
                </div>

                <!-- Step 6: Submit -->
                <div class="step-section">
                    <h4>6. Submit</h4>
                    <p>Review your information before submitting.</p>
                </div>

                <!-- Navigation Buttons -->
                <div class="step-buttons">
                    <button type="button" class="preveiodn" id="prevBtn">Previous</button>
                    <button type="button" class="nextbtn" id="nextBtn">Next</button>
                    <button type="submit" class="nextbtn" id="submit-button" style="display:none;">Submit Request</button>
                </div>

            </form>
        </div>
    </section>

    <section class="brand-sec contact-brand">
        <div class="container">
            <div class="row justify-content-center text-center">
                <div class="col-md-12" data-aos="fade-up" data-duration="4000">
                    <div class="brand-content">
                        <h2 class="mainHead text-white">We Help Brands Big And Small Think Up Great Ideas And Transform
                            Them <br> Into Videos And Marketing Tactics <br> That Work</h2>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="insta-sec">
        <div class="container">
            <div class="row justify-content-center text-center">
                <div class="col-md-5">
                    <div class="insta-content" data-aos="fade-up" data-duration="4000">
                        <a href="">follow on instagram<i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script>
        const steps = document.querySelectorAll(".step-section");
        const indicators = document.querySelectorAll(".step-indicator div");
        let currentStep = 0;

        function showStep(stepIndex) {
            steps.forEach((s, i) => {
                s.classList.toggle("active", i === stepIndex);
                indicators[i].classList.toggle("active", i === stepIndex);
            });

            const nextBtn = document.getElementById("nextBtn");
            const submitBtn = document.getElementById("submit-button");

            if (stepIndex === 5) {
                nextBtn.style.display = "none";
                submitBtn.style.display = "inline-block";
            } else {
                nextBtn.style.display = "inline-block";
                submitBtn.style.display = "none";
            }
        }

        document.getElementById("nextBtn").addEventListener("click", () => {
            const inputs = steps[currentStep].querySelectorAll("input, textarea, select");
            for (let input of inputs) {
                if (!input.checkValidity()) {
                    input.reportValidity();
                    return;
                }
            }
            if (currentStep < steps.length - 1) {
                currentStep++;
                showStep(currentStep);
            }
        });

        document.getElementById("prevBtn").addEventListener("click", () => {
            if (currentStep > 0) {
                currentStep--;
                showStep(currentStep);
            }
        });

        document.addEventListener("DOMContentLoaded", function() {
            const input = document.getElementById("phone");
            const errorDiv = document.getElementById("phone-error");
            const nextBtn = document.getElementById("nextBtn");

            input.addEventListener("input", function() {
                this.value = this.value.replace(/\D/g, '');

                if (this.value.length < 10) {
                    errorDiv.textContent = "Phone number must be at least 10 digits.";
                    errorDiv.style.display = "block";
                    input.style.borderColor = "red";
                    nextBtn.disabled = true;
                } else {
                    errorDiv.style.display = "none";
                    input.style.borderColor = "green";
                    nextBtn.disabled = false;
                }
            });

            input.addEventListener("blur", function() {
                if (this.value.length > 10) {
                    this.value = this.value.slice(0, 10);
                }
            });
        });

        document.getElementById("email").addEventListener("input", function() {
            let email = this.value;
            let regex = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$/i;
            let error = document.getElementById("error");

            if (regex.test(email)) {
                error.style.display = "none";
                this.style.borderColor = "green";
            } else {
                error.style.display = "block";
                this.style.borderColor = "red";
            }
        });

        const portfolioImage = document.getElementById("portfolioImages");
        portfolioImage.addEventListener("change", function() {
            const preview = document.getElementById("imagePreview");
            const nextBtn = document.getElementById("nextBtn");
            const prevBtn = document.getElementById("prevBtn");
            preview.innerHTML = "";
            let valid = true;

            Array.from(this.files).forEach(file => {
                if (file.size > 5 * 1024 * 1024) {
                    alert(`"${file.name}" exceeds 5MB limit`);
                    valid = false;
                    this.value = "";
                    return;
                }
                if (!["image/jpeg", "image/png"].includes(file.type)) {
                    alert(`"${file.name}" is not a valid format`);
                    valid = false;
                    this.value = "";
                    return;
                }

                const reader = new FileReader();
                reader.onload = e => {
                    const img = document.createElement("img");
                    img.src = e.target.result;
                    img.style.maxWidth = "100px";
                    img.classList.add("mr-2", "mb-2");
                    preview.appendChild(img);
                };
                reader.readAsDataURL(file);
            });

            if (!valid || this.files.length === 0) {
                preview.innerHTML = "";
            }

        });
    </script>
@endsection