@extends('front-layouts.front-master')

@section('title', 'Agrilink | Home')
@section('meta-description',
    'Agrilink is a platform for connecting agricultural businesses in Bangladesh. Discover
    products, services, and suppliers in the agriculture sector.')
@section('meta-keywords',
    'Agriculture, Agribusiness, Bangladesh, Agro Products, Farming, Livestock, Fisheries, Poultry,
    Agriculture Equipment')

@section('styles')
    <style>
        form .star-rating {
            direction: rtl;
            display: inline-flex;
        }

        form .star-rating .star {
            font-size: 2rem;
            color: #ddd;
            cursor: pointer;
            transition: color 0.2s;
            direction: ltr;
        }

        form .star-rating input[type="radio"] {
            display: none;
        }

        form .star-rating label.star:hover,
        form .star-rating label.star:hover~label.star,
        form .star-rating input[type="radio"]:checked~label.star {
            color: #ffc107;
        }
    </style>
    <style>
        .address-simple-table {
            width: 100%;
            border-collapse: collapse;
        }

        .address-simple-table td {
            padding: 0.4rem 0.6rem 0.4rem 0;
            font-size: 1rem;
            color: #222;
            vertical-align: top;
            border: none;
            word-break: break-word;
        }

        .address-simple-label {
            font-weight: 600;
            color: #4e54c8;
            min-width: 90px;
            white-space: nowrap;
        }

        .address-simple-value {
            color: #333;
        }

        @media (max-width: 575px) {

            .address-simple-table,
            .address-simple-table tr,
            .address-simple-table td {
                display: block;
                width: 100%;
                box-sizing: border-box;
            }

            .address-simple-table td {
                padding: 0.3rem 0 0.3rem 0;
            }
        }
    </style>
@endsection

@section('front-content')


    <div class="mb-3 inner-cat-banner">
        <div class='inner-detail-banner'>
            <div>
                <img src="{{ asset('frontend') }}/assets/images/agri_cat/slide__37752020-12-26_1608979506.jpg"
                    class="img-fluid w-100" style="height: 50vh;" alt="banner-image">
            </div>

            <div>
                <img src="{{ asset('frontend') }}/assets/images/agri_cat/slide__37752020-12-26_1608979506.jpg"
                    class="img-fluid w-100" style="height: 50vh;" alt="banner-image">
            </div>
            <!-- <div>
                           <img src="./assets/images/hero/hero-bg.jpg" class="img-fluid" alt="banner-image">
                          </div> -->
        </div>

        <div class="content">
            <div class="container">
                <div class="info">
                    {{-- <h3 class="text-white">Feed Industry</h3> --}}

                    <h1 class="text-white display-4" style="font-weight: 600;">Bashundhara Group</h1>


                    <div class="d-flex text-white align-items-center">
                        <i class="fa fa-phone mr-2" style="font-size:17px;" aria-hidden="true"></i>
                        <p style="color:#ffffffb4;"> +880 176859424, +880 1567769485</p>
                    </div>

                    <div class="d-flex text-white align-items-center">
                        <i class="fa fa-map-marker mr-2" style="font-size:17px;" aria-hidden="true"></i>
                        <p style="color:#ffffffb4;"> Amena Villa, House#27, Road#02, Sector#09, Uttara, Dhaka-1230.</p>
                    </div>

                    <div class="d-flex align-items-center">
                        <!-- <p class='rating text-white mr-3'>
                                                Estd.in N/A | 0 Ratings
                                            </p> -->
                        <div>
                            <div class="star-rating">
                                <label class="active" for="star1">★</label>
                                <label class="active" for="star2">★</label>
                                <label class="active" for="star3">★</label>
                                <label class="" for="star4">★</label>
                                <label class="" for="star5">★</label>
                            </div>
                        </div>
                    </div>

                    <nav aria-label="breadcrumb ">
                        <ol class="breadcrumb pl-0 bg-transparent">
                            <li class="breadcrumb-item"><a href="#" class="text-white">Home</a></li>
                            <li class="breadcrumb-item"><a href="#" class="text-white">Industry</a></li>
                            <li class="breadcrumb-item text-white active" aria-current="page">Bashundhara Group</li>
                        </ol>
                    </nav>

                </div>
                <div>
                    <div class="review-icon">
                        <a href="#" class='icon'>
                            <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
                            Verified
                        </a>
                        <a href="#" class='icon review-btn'>
                            <i class="fa fa-pencil" aria-hidden="true"></i>
                            Review
                        </a>
                        {{-- <a href="#" class='icon'>
                            <span>★★★</span>
                            Rating
                        </a> --}}
                        <a href="#" class='icon'>
                            <i class="fa fa-map-marker" aria-hidden="true"></i>
                            Map
                        </a>

                        <div style="position: relative;">
                            <button class="icon share-social py-3">
                                <i class="fa fa-share-alt-square" aria-hidden="true"></i>
                                Share

                            </button>
                            <div class="social-share-icon">
                                <div class="row g-0">
                                    <div class="col-6">
                                        <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
                                    </div>

                                    <div class="col-6">
                                        <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
                                    </div>

                                    <div class="col-6">
                                        <a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
                                    </div>

                                    <div class="col-6">
                                        <a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
                                    </div>

                                </div>

                            </div>
                        </div>


                    </div>
                </div>

            </div>
        </div>
    </div>


    <div class="row g-2 p-3">
        <div class="col-md-3">
            <div class="d-flex justify-content-center">
                <img src="{{ asset('frontend') }}/assets/images/agri_cat/bosundhora-logo.png" class="img-fluid pr-4"
                    alt="">
            </div>

            <div class="info px-2">
                <div class="d-flex align-items-center my-3">
                    <i class="fa fa-mobile icon mr-3" style="font-size:20px;" aria-hidden="true"></i>
                    <p class=""> +880 176859424</p>
                </div>



                <!-- Simple, Readable, Responsive Address Info Card -->

                <div class="card border-0 shadow-sm mb-3 bg-light">
                    <div class="card-body py-3 px-1">
                        <div class="d-flex align-items-center mb-2">
                            <i class="fa fa-map-marker mr-2" style="font-size:1.2rem;"></i>
                            <span class="fw-bold " style="font-size:1.05rem;">Business Address</span>
                        </div>
                        <div class="d-flex my-2">
                    {{-- <i class="fa fa-map-marker mt-1 mr-2" style="font-size:17px;" aria-hidden="true"></i> --}}
                    <small class="">
                        Amena Villa, House#27, Road#02, Sector#09, Uttara, Dhaka-1230.</small>
                </div>
                        <table class="address-simple-table">
                            <tr>
                                <td class="address-simple-label">Post Code</td>
                                <td>-</td>
                                <td class="address-simple-value">1230</td>
                            </tr>
                            <tr>
                                <td class="address-simple-label">Country</td>
                                <td>-</td>
                                <td class="address-simple-value">Bangladesh</td>
                            </tr>
                            <tr>
                                <td class="address-simple-label">Division</td>
                                <td>-</td>
                                <td class="address-simple-value">Dhaka</td>
                            </tr>
                            <tr>
                                <td class="address-simple-label">District</td>
                                <td>-</td>
                                <td class="address-simple-value">Dhaka</td>
                            </tr>
                            <tr>
                                <td class="address-simple-label">Area</td>
                                <td>-</td>
                                <td class="address-simple-value">Uttara</td>
                            </tr>
                        </table>
                    </div>
                </div>

                <hr>

                <div style="flex-direction:column;">
                    <div class="d-flex align-items-center">
                        <i class="fa fa-phone icon mr-3" style="font-size:17px;" aria-hidden="true"></i>
                        <p class=""> +880 176859424</p>
                    </div>

                    <div class="d-flex align-items-center my-1">
                        <i class="fa fa-envelope-o icon mr-3" style="font-size:17px;" aria-hidden="true"></i>
                        <p class=""> info@ananagro.com</p>
                    </div>

                    {{-- <a class="btn text-center my-2 font-weight-bold" href="#"><i class="fa fa-comments-o mr-2"
                            aria-hidden="true"></i> Send Message</a> --}}

                </div>

            </div>
        </div>
        <div class="col-md-9">

            <div class="row g-2">

                <div class="col-md-6">

                    <h1 class="text-dark display-5" style="font-weight: 600;">Industry</h1>

                    {{-- <div class="d-flex align-items-center mb-2">
                        <div>
                            <div class="star-rating">
                                <label class="active" for="star1">★</label>
                                <label class="active" for="star2">★</label>
                                <label class="active" for="star3">★</label>
                                <label class="" for="star4">★</label>
                                <label class="" for="star5">★</label>
                            </div>
                        </div>

                        <p class='font-weight-bold ml-3'>
                            3 Star Rating
                        </p>

                    </div> --}}
                    {{-- <div class="d-flex align-items-center">
                    <i class="fa fa-phone mr-3" style="font-size:17px;" aria-hidden="true"></i>
                    <p class=""> +880 176859424, +880 1567769485</p>
                </div>

                <div class="d-flex my-2">
                    <i class="fa fa-map-marker mt-1 mr-3" style="font-size:20px;" aria-hidden="true"></i>
                    <p class=""> Amena Villa, House#27, Road#02, Sector#09, Uttara, Dhaka-1230.</p>
                </div> --}}

                </div>

                <div class="col-md-6">
                    <div class="rate-fav my-3">
                        <!-- Rate This Button triggers modal -->
                        <button type="button" class="btn rate-btn" data-bs-toggle="modal"
                            data-bs-target="#ratingReviewModal">
                            <i class="fa fa-angle-right mr-2" style="font-size:20px;" aria-hidden="true"></i> Rate This
                        </button>
                        <!-- Rating & Review Modal -->
                        <div class="modal fade" id="ratingReviewModal" tabindex="-1"
                            aria-labelledby="ratingReviewModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h4 class="modal-title" id="ratingReviewModalLabel">Rate & Review</h4>
                                        <button type="button" class="btn btn-close" data-bs-dismiss="modal"
                                            aria-label="Close"><i class="fa fa-times" aria-hidden="true"></i></button>
                                    </div>
                                    <div class="modal-body">
                                        <form action="{{ route('rate.form') }}" method="POST">
                                            @csrf
                                            <div class="mb-3 text-center border py-2">
                                                <label class="form-label display-6 d-block mb-2"
                                                    style="font-weight: 600;">Your Rating</label>
                                                <div class="star-rating fs-2">
                                                    <input type="radio" name="rating" id="star5" value="5"
                                                        class="d-none">
                                                    <label for="star5" class="star">★</label>
                                                    <input type="radio" name="rating" id="star4" value="4"
                                                        class="d-none">
                                                    <label for="star4" class="star">★</label>
                                                    <input type="radio" name="rating" id="star3" value="3"
                                                        class="d-none">
                                                    <label for="star3" class="star">★</label>
                                                    <input type="radio" name="rating" id="star2" value="2"
                                                        class="d-none">
                                                    <label for="star2" class="star">★</label>
                                                    <input type="radio" name="rating" id="star1" value="1"
                                                        class="d-none">
                                                    <label for="star1" class="star">★</label>
                                                </div>
                                            </div>
                                            <div class="mb-3">
                                                <label for="reviewText" class="form-label">Your Review</label>
                                                <textarea class="form-control" id="reviewText" rows="3" placeholder="Write your review..."></textarea>
                                            </div>
                                            <div class="mb-2">
                                                <div class="g-recaptcha" data-sitekey="{{ env('RECAPCHA_SITE_KEY') }}">
                                                </div>
                                                @error('g-recaptcha-response')
                                                    <span class="text-danger">Recaptcha Required</span>
                                                @enderror
                                            </div>
                                            <div class="modal-footer justify-content-end px-0">
                                                {{-- <button type="button" class="btn px-5 btn-close btn-secondary" data-bs-dismiss="modal">Close</button> --}}
                                                <button type="submit" class="btn px-5 btn-primary">Submit</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Send Mail Button triggers new modal -->
                        <button type="button" class="btn fav-btn" data-bs-toggle="modal"
                            data-bs-target="#favMailModal">
                            <i class="fa fa-heart-o mr-2" style="font-size:17px;" aria-hidden="true"></i> Send Mail
                        </button>
                        <!-- Send Mail Modal -->
                        <div class="modal fade" id="favMailModal" tabindex="-1" aria-labelledby="favMailModalLabel"
                            aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h4 class="modal-title" id="favMailModalLabel">Send Mail</h4>
                                        <button type="button" class="btn btn-close" data-bs-dismiss="modal"
                                            aria-label="Close"><i class="fa fa-times" aria-hidden="true"></i></button>
                                    </div>
                                    <div class="modal-body">
                                        <form action="" method="POST">
                                            <div class="row g-2">
                                                <div class="col-md-6 mb-2">
                                                    <label for="favName" class="form-label">Name</label>
                                                    <input type="text" class="form-control" id="favName"
                                                        name="favName" placeholder="Your Name" required>
                                                </div>
                                                <div class="col-md-6 mb-2">
                                                    <label for="favEmail" class="form-label">Email</label>
                                                    <input type="email" class="form-control" id="favEmail"
                                                        name="favEmail" placeholder="Your Email" required>
                                                </div>
                                            </div>

                                            <div class="mb-2">
                                                <label for="favPageLink" class="form-label">Page Link</label>
                                                <input type="url" class="form-control" id="favPageLink"
                                                    name="favPageLink" placeholder="Page Link" required>
                                            </div>
                                            <div class="mb-2">
                                                <label for="favDescription" class="form-label">Description</label>
                                                <textarea class="form-control" id="favDescription" name="favDescription" rows="3"
                                                    placeholder="Write your message..." required></textarea>
                                            </div>
                                            <div class="mb-2">
                                                <div class="g-recaptcha" data-sitekey="{{ env('RECAPCHA_SITE_KEY') }}">
                                                </div>
                                                @error('g-recaptcha-response')
                                                    <span class="text-danger">Recaptcha Required</span>
                                                @enderror
                                            </div>
                                            <div class="modal-footer justify-content-end px-0">
                                                {{-- <button type="button" class="btn px-5 btn-close btn-secondary" data-bs-dismiss="modal">Close</button> --}}
                                                <button type="submit" class="btn px-5 btn-primary">Send Mail</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                    {{-- <div class="row g-3 p-2">

                        <div class="col-md-4">
                            <a class="light-box" data-gall="myGallery" title="Image 2"
                                href="{{ asset('frontend') }}/assets/images/agri_cat/gal__46322020-12-26_1608980451.jpg">

                                <img src="{{ asset('frontend') }}/assets/images/agri_cat/gal__46322020-12-26_1608980451.jpg"
                                    class="img-fluid rounded" />

                            </a>
                        </div>

                        <div class="col-md-4">
                            <a class="light-box" data-gall="myGallery" title="Image 3"
                                href="{{ asset('frontend') }}/assets/images/agri_cat/gal__77322020-12-26_1608980456.jpg">

                                <img src="{{ asset('frontend') }}/assets/images/agri_cat/gal__77322020-12-26_1608980456.jpg"
                                    class="img-fluid rounded" />

                            </a>
                        </div>

                    </div> --}}

                </div>
            </div>



            <!-- Address Info Card Section -->
            <div class="row g-3 p-2">
                <div class="col-12 mb-3">
                    <div class="card shadow-sm border-0 bg-light">
                        <div class="card-body py-3 px-4">
                            <div class="row g-3 align-items-center">
                                <div class="col-6 col-md-2">
                                    <div class="text-center">
                                        <div class="fw-bold text-secondary small">Post Code</div>
                                        <div class="fs-5 text-dark">1230</div>
                                    </div>
                                </div>
                                <div class="col-6 col-md-2">
                                    <div class="text-center">
                                        <div class="fw-bold text-secondary small">Country</div>
                                        <div class="fs-5 text-dark">Bangladesh</div>
                                    </div>
                                </div>
                                <div class="col-6 col-md-2">
                                    <div class="text-center">
                                        <div class="fw-bold text-secondary small">Division</div>
                                        <div class="fs-5 text-dark">Dhaka</div>
                                    </div>
                                </div>
                                <div class="col-6 col-md-2">
                                    <div class="text-center">
                                        <div class="fw-bold text-secondary small">District</div>
                                        <div class="fs-5 text-dark">Dhaka</div>
                                    </div>
                                </div>
                                <div class="col-6 col-md-2">
                                    <div class="text-center">
                                        <div class="fw-bold text-secondary small">Area</div>
                                        <div class="fs-5 text-dark">Uttara</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Address Info Card Section -->

            <div class="row g-3 p-2">
                <div class="col-md-2">
                    <a class="light-box" data-gall="myGallery" title="Image 2"
                        href="{{ asset('frontend') }}/assets/images/agri_cat/sample-image-1.jfif">
                        <img src="{{ asset('frontend') }}/assets/images/agri_cat/sample-image-1.jfif"
                            class="img-fluid rounded" />
                    </a>
                </div>
                <div class="col-md-2">
                    <a class="light-box" data-gall="myGallery" title="Image 3"
                        href="{{ asset('frontend') }}/assets/images/agri_cat/sample-image-2.jpg">
                        <img src="{{ asset('frontend') }}/assets/images/agri_cat/sample-image-2.jpg"
                            class="img-fluid rounded" />
                    </a>
                </div>
                <div class="col-md-2">
                    <a class="light-box" data-gall="myGallery" title="Image 2"
                        href="{{ asset('frontend') }}/assets/images/agri_cat/sample-image-3.jfif">
                        <img src="{{ asset('frontend') }}/assets/images/agri_cat/sample-image-3.jfif"
                            class="img-fluid rounded" />
                    </a>
                </div>
            </div>
            <br>
            <h2 class="text-dark mb-2" style="font-weight:600;">
                Bashundhara Group
            </h2>

            <div>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum qui ab adipisci quisquam aliquid ipsam
                perferendis eum quos. Aperiam molestiae beatae veritatis accusantium fugiat sequi architecto sapiente soluta
                quae officia est porro aspernatur accusamus repellat deserunt aliquam quas quod, consequuntur quis sit?
                Illum, provident totam. Ea nulla reiciendis a similique quam, minima libero, laborum et, adipisci blanditiis
                sequi iusto sunt recusandae voluptatibus at alias corrupti eveniet minus nesciunt consequatur qui quia ipsa?
                Optio quam quas aut animi provident tenetur, quis sit neque? Rerum voluptates eos porro iste assumenda fugit
                perspiciatis deleniti excepturi labore quaerat ab, ducimus, reiciendis consectetur, beatae error!
                Perferendis, excepturi, dignissimos minus optio necessitatibus similique a sequi molestias officia dolores
                dicta nesciunt quo voluptas vitae accusamus aperiam ab maxime non. Magnam nostrum laboriosam modi dolore
                culpa quis aperiam a harum! Debitis ea quisquam consectetur aperiam rerum sint neque, ratione doloribus amet
                recusandae ipsam quasi eos quis, velit corrupti incidunt saepe sapiente pariatur numquam optio, culpa
                cupiditate. Dicta dolore animi totam pariatur rem voluptates sequi aliquam? Vel tenetur reprehenderit alias
                in id, quam aliquam eaque voluptatibus, repudiandae asperiores dolorem tempore perspiciatis iste corrupti,
                mollitia distinctio quidem? Consequatur ab rem, quo culpa placeat molestiae illo expedita sequi soluta cum
                dolorem aperiam? Laboriosam, saepe eveniet. Ut dolorum quo placeat beatae hic ex enim saepe corrupti, error
                in doloribus obcaecati a alias possimus sequi cum at, animi deserunt. Quia perspiciatis suscipit asperiores
                nulla eos rem architecto officiis quas totam eum, vitae neque dolor unde excepturi in deserunt quibusdam
                quidem doloremque? Delectus, reiciendis.
            </div>



        </div>
    </div>



@endsection
@section('front-js')



    <script>
        var myModal = new bootstrap.Modal(document.getElementById('ratingReviewModal'));
        var favModal = new bootstrap.Modal(document.getElementById('favMailModal'));

        // Show rating/review modal
        $('.rate-btn, .review-btn').click(function() {
            myModal.show();
        });

        // Show send mail modal
        $('.fav-btn').click(function() {
            favModal.show();
        });

        // Hide modals on btn-close click (if not using data-bs-dismiss)
        $('.btn-close').click(function() {
            myModal.hide();
            favModal.hide();
        });
    </script>
@endsection