@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">QR Code Generator</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

                <div class="row">
                    <div class="col-md-6">
                        <form action="{{ route('qr.generate') }}" method="POST">
                            @csrf
                            <div class="mb-3">
                                <label for="url" class="form-label">Website</label>
                                <input type="text" class="form-control" id="url" name="url"
                                    placeholder="http://" value="{{ old('url', $url ?? '') }}" required>
                            </div>
                            <button type="submit" class="btn btn-green">🔄 Generate QR Code</button>
                        </form>
                    </div>
                    <div class="col-md-6 qr-preview">
                        @isset($qrPath)
                            <img src="{{ $qrPath }}" alt="QR Code" width="200" height="200">
                            <br>
                            <a href="{{ $qrPath }}" download="{{ $filename }}" class="mt-3 btn btn-secondary">⬇️
                                Download<br>JPG</a>
                        @endisset
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@include('vendorr.footer')