@extends('frontend.layouts.app')

@section('title')

@endsection

@section('seo')
<title>Contact Us | Bonfire Charcoal: Ignite Culinary Excellence with Premium Briquets for Grilling Perfection</title>
<meta property="og:locale" content="en_US" />
<meta property="og:url" content="" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Bonfire Charcoal: Ignite Culinary Excellence with Premium Briquets for Grilling Perfection" />
<meta property="og:description" content="Experience the unmatched quality of Bonfire Charcoal Briquets, crafted since 1991 for grill enthusiasts and culinary businesses. Immerse yourself in the warmth and reliability of Bonfire, fostering togetherness and sustainable grilling practices. Elevate your BBQ with our premium charcoal and create unforgettable moments around the grill." />
<meta property="og:site_name" content="Bonfire Charcoal: Ignite Culinary Excellence with Premium Briquets for Grilling Perfection" />
<meta property="og:image" content="{{ asset('images/thumbnail.jpg') }}" />
<meta property="og:thumbnail" content="{{ asset('images/thumbnail.jpg') }}" />
<meta property="og:keywords" content="Bonfire Charcoal, Premium Charcoal Briquets, Grilling Excellence, Culinary Businesses, Sustainable Grilling, Quality BBQ Fuel, Family Togetherness, Grill Enthusiasts, Unforgettable BBQ Moments, Bonfire Legacy" />
@endsection

@section('content')
<div class="banner">
    <div class="row justify-content-center">
        <div class="col-lg-12 text-center">
            <h1 class="text-white" style="font-size: 75px; text-shadow: 2px 2px 3px #000000;">BROCHURE</h1>
        </div>
        <div class="col-lg-12">
            <div class="d-flex align-items-center justify-content-center">
                <h3 class="text-white mb-0" style="text-shadow: 2px 2px 3px #000000;">Home</h3>
                <img src="{{ asset('images/icon-header-1.png') }}" class="d-block align-middle img-fluid" alt="...">
                <h3 class="yellow mb-0" style="text-shadow: 2px 2px 3px #000000;">Brochure</h3>
            </div>
        </div>
    </div>
</div>

<style>
    .banner {
        background-image: url("{{ asset('images/banner-brochure.jpg') }}");
        height: 60vh;
        background-position: center;
        background-size: cover;

        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>

<div class="container py-5">
    @if (Session::has('success'))
    <div class="alert alert-success alert-dismissible">
        <h5> Success!</h5>
        {{ Session::get('success') }}
    </div>

    <h3>Click here to download your brochure</h3>
    <div class="col-lg-2">
        <a href="" class="btn btn-primary-3 fs-4 px-4 w-auto d-flex align-items-center justify-content-center">DOWNLOAD <i class="fa fa-file ms-2" aria-hidden="true"></i></a>
    </div>
    @endif

    <form action="{{url('submit-brochure')}}" method="POST">@csrf
        <div class="row justify-content-center">
            <div class="col-lg-6">
                <div class="shadow rounded-2 p-4">
                    <h5>Email</h5>
                    <input type="email" name="email" class="form-control rounded-0" id="email" style="border-width: 2px; height: 55px;">
                    @error('email')
                    <span class="text-danger">
                        {{ $message }}
                    </span>
                    @enderror
                </div>
            </div>
        </div>
        <br>
        <div class="row justify-content-center">
            <div class="col-lg-6">
                <div class="shadow rounded-2 p-4">
                    <h5>Full Name</h5>
                    <input type="text" name="name" class="form-control rounded-0" id="name" style="border-width: 2px; height: 55px;">
                    @error('name')
                    <span class="text-danger">
                        {{ $message }}
                    </span>
                    @enderror
                </div>
            </div>
        </div>
        <br>
        <div class="row justify-content-center">
            <div class="col-lg-6">
                <div class="shadow rounded-2 p-4">
                    <h5>Address</h5>
                    <input type="text" name="address" class="form-control rounded-0" id="address" style="border-width: 2px; height: 55px;">
                    @error('address')
                    <span class="text-danger">
                        {{ $message }}
                    </span>
                    @enderror
                </div>
            </div>
        </div>
        <br>
        <div class="row justify-content-center">
            <div class="col-lg-6">
                <div class="shadow rounded-2 p-4">
                    <h5>Contact Number</h5>
                    <input type="text" name="contact" class="form-control rounded-0" id="contact" style="border-width: 2px; height: 55px;">
                    @error('contact')
                    <span class="text-danger">
                        {{ $message }}
                    </span>
                    @enderror
                </div>
            </div>
        </div>
        <br>
        <div class="row justify-content-center">
            <div class="col-lg-6">
                <button type="submit" class="btn btn-outline-1 fs-4 px-4 w-auto d-flex align-items-center">
                    <span class="span-text mx-auto">Submit</span>
                </button>
            </div>
        </div>

    </form>
</div>


<script>
    // Get all input fields
    const inputFields = document.querySelectorAll('.form-control');

    // Iterate over each input field
    inputFields.forEach(input => {
        // Add event listeners for input focus and blur
        input.addEventListener('focus', function() {
            // Add border style when focused
            input.closest('.shadow').style.border = '2px solid #065fad';
        });

        input.addEventListener('blur', function() {
            // Reset border style to default when blurred
            input.closest('.shadow').style.border = '2px solid #fff';
        });
    });
</script>

@endsection