@include('vendorr.header')
<style>
    body {
        background-color: #f4f4f4;
    }

    .qr-container {
        margin-top: 80px;
    }

    .btn-green {
        background-color: #28a745;
        color: white;
    }

    .btn-green:hover {
        background-color: #218838;
    }

    .qr-preview {
        text-align: center;
    }

    .qr-preview img {
        margin-top: 20px;
    }
</style>
<!-- MAIN-CONTENT -->
<div class="main-content app-content">
    <div class="main-container container-fluid">
        <div class="breadcrumb-header justify-content-between">
            <div class="my-auto">
                <h4 class="page-title">Broucher Creator</h4>
            </div>
            <div class="d-flex my-xl-auto right-content align-items-center">
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                {{-- Validation Errors --}}
                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

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

                {{-- Error Message --}}
                @if (session('error'))
                    <div class="alert alert-danger">
                        {{ session('error') }}
                    </div>
                @endif

                <h2>Brochure Company Details</h2>
                <p class="text-end"><a href="/my/products" class="btn btn-primary">Add Products</a> <a href="/brochures" class="btn btn-primary">Created Brouchers</a></p>
                <form id="brochureForm" action="{{ route('brochures.store') }}" method="POST"
                    enctype="multipart/form-data">
                    @csrf

                    <div id="step-1" class="step">
                        <h4>Step 1: Company Information</h4>
                        <div style="display: flex; gap: 40px; flex-wrap: wrap">
                            <div style="flex: 1; min-width: 300px">
                                <label>Company Name:</label>
                                <input type="text" name="company_name" class="form-control" required>

                                <label>Contact Person:</label>
                                <input type="text" name="contact_person" class="form-control">

                                <label>Email:</label>
                                <input type="email" name="email" class="form-control">

                                <label>Mobile Number:</label>
                                <input type="text" name="mobile" class="form-control">

                                <label>Year of Establishment:</label>
                                <input type="text" name="establishment_year" class="form-control">

                                <label>Major Markets Covered:</label>
                                <input type="text" name="major_markets" class="form-control">
                            </div>

                            <div style="flex: 1; min-width: 300px">
                                <label>Company Logo:</label>
                                <input type="file" name="logo" accept="image/*" class="form-control">

                                <label>About Us:</label>
                                <textarea name="about_text" class="form-control" rows="3"></textarea>

                                <label>Register Address:</label>
                                <textarea name="address" class="form-control" rows="2"></textarea>

                                <label>Ownership Type:</label>
                                <select name="ownership" class="form-control">
                                    <option value="Proprietorship">Proprietorship</option>
                                    <option value="Partnership">Partnership</option>
                                    <option value="Limited company">Limited company</option>
                                </select>

                                <label>Annual Turnover:</label>
                                <select name="turnover" class="form-control">
                                    <option value="< 1 Crore">Rs. Less than 1 Crore</option>
                                    <option value="1-5 Crore">Rs. 1-5 Crore</option>
                                    <option value="> 5 Crore">More than 5 Crore</option>
                                </select>
                            </div>
                        </div>
                        <br>
                        <button type="button" class="btn btn-primary" onclick="nextStep(2)">Next</button>
                    </div>

                    <div id="step-2" class="step" style="display: none">
                        <h4>Step 2: Template and Colors</h4>
                        <label>Choose Template:</label><br>
                        @foreach ($templates as $template)
                            <label>
                                <input type="radio" name="template_id" value="{{ $template->id }}" required>
                                <img src="{{ asset('storage/' . $template->thumbnail) }}" alt="{{ $template->name }}"
                                    width="100">
                            </label>
                        @endforeach

                        <br><br>
                        <label>Primary Color:</label>
                        <input type="color" name="primary_color" required><br><br>

                        <label>Secondary Color:</label>
                        <input type="color" name="secondary_color"><br><br>

                        <button type="button" class="btn btn-secondary" onclick="nextStep(1)">Back</button>
                        <button type="button" class="btn btn-primary" onclick="nextStep(3)">Next</button>
                    </div>

                    <div id="step-3" class="step" style="display: none">
                        <h4>Step 3: Banner and Products</h4>
                        <label>Upload Main Banner Image:</label>
                        <input type="file" name="image" accept="image/*"><br><br>

                        <label>Select Products:</label><br>
                        @foreach ($products as $product)
                            <input type="checkbox" name="product_ids[]" value="{{ $product->id }}">
                            {{ $product->name }}<br>
                        @endforeach
                        <div id="productError" style="color: red; display: none;">Select or Add products</div>

                        <br>
                        <button type="button" class="btn btn-secondary" onclick="nextStep(2)">Back</button>
                        <button type="submit" class="btn btn-success">Submit</button>
                    </div>
                </form>

                <script>
                    function nextStep(step) {
                        document.querySelectorAll('.step').forEach(div => div.style.display = 'none');
                        document.getElementById('step-' + step).style.display = 'block';
                    }
                </script>
            </div>
        </div>
    </div>
</div>
@include('vendorr.footer')

<script>
    document.getElementById('brochureForm').addEventListener('submit', function (e) {
        const selectedProducts = document.querySelectorAll('input[name="product_ids[]"]:checked');
        const errorDiv = document.getElementById('productError');
        if (selectedProducts.length === 0) {
            e.preventDefault();
            errorDiv.style.display = 'block';
        } else {
            errorDiv.style.display = 'none';
        }
    });
</script>