@extends('frontend.layouts.master')

@section('content')
    <div class="hero-details-img">
        <div class="container">
            <div class="row text-center">
                <div class="col-md-12">
                    <div class="hero-block-content">
                        <h1 class="hero-block-content-title text-white pb-1 m-0">{{ $service->title }}</h1>
                        <div class="breadcrumb-div">
                            <nav aria-label="breadcrumb" style="--bs-breadcrumb-divider: '>';">
                                <ol class="breadcrumb m-0 d-flex justify-content-center">
                                    <li class="breadcrumb-item"><a href="{{ route('frontend.index') }}"
                                            class="breadcrumb-item-link fs-5">Home</a>
                                    </li>
                                    <li class="breadcrumb-item text-white fs-5" aria-current="page">{{ $service->title }}</li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="main-content py-5">
        <div class="container">
            <div class="row g-0">
                <div class="col-lg-8">
                    <div class="main-content-detail descr_detail">
                        <img src="{{ asset($service->service_detail_image) }}" class="img-fluid">
                        <h2 class="fw-bold pt-3 pb-3 m-0 fs-4">Overview</h2>
                        <p class="fw-normal">{!! $service->longdescription !!}</p>
                        <!-- <div class="accordion">
                                <div class="accordion" id="accordionPanelsStayOpenExample">
                                    <div class="accordion-item">
                                        <h2 class="accordion-header" id="panelsStayOpen-headingOne">
                                            <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                                data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true"
                                                aria-controls="panelsStayOpen-collapseOne">
                                                <b> Maecenas sagttis quam interdum malesuada</b>
                                            </button>
                                        </h2>
                                        <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show"
                                            aria-labelledby="panelsStayOpen-headingOne">
                                            <div class="accordion-body">
                                                <strong>This is the first item's accordion body.</strong> It is shown by
                                                default, until the collapse plugin adds the appropriate classes that we use
                                                to style each element. These classes control the overall appearance, as well
                                                as the showing and hiding via CSS transitions. You can modify any of this
                                                with custom CSS or overriding our default variables. It's also worth noting
                                                that just about any HTML can go within the <code>.accordion-body</code>,
                                                though the transition does limit overflow.
                                            </div>
                                        </div>
                                    </div>
                                    <div class="accordion-item">
                                        <h2 class="accordion-header" id="panelsStayOpen-headingTwo">
                                            <button class="accordion-button collapsed" type="button"
                                                data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo"
                                                aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo">
                                                <b>Service engage is compan provide solution</b>
                                            </button>
                                        </h2>
                                        <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse"
                                            aria-labelledby="panelsStayOpen-headingTwo">
                                            <div class="accordion-body">
                                                <strong>This is the second item's accordion body.</strong> It is hidden by
                                                default, until the collapse plugin adds the appropriate classes that we use
                                                to style each element. These classes control the overall appearance, as well
                                                as the showing and hiding via CSS transitions. You can modify any of this
                                                with custom CSS or overriding our default variables. It's also worth noting
                                                that just about any HTML can go within the <code>.accordion-body</code>,
                                                though the transition does limit overflow.
                                            </div>
                                        </div>
                                    </div>
                                    <div class="accordion-item">
                                        <h2 class="accordion-header" id="panelsStayOpen-headingThree">
                                            <button class="accordion-button collapsed" type="button"
                                                data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree"
                                                aria-expanded="false" aria-controls="panelsStayOpen-collapseThree">
                                                <b>Companies marketing with in customers</b>
                                            </button>
                                        </h2>
                                        <div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse"
                                            aria-labelledby="panelsStayOpen-headingThree">
                                            <div class="accordion-body">
                                                <strong>This is the third item's accordion body.</strong> It is hidden by
                                                default, until the collapse plugin adds the appropriate classes that we use
                                                to style each element. These classes control the overall appearance, as well
                                                as the showing and hiding via CSS transitions. You can modify any of this
                                                with custom CSS or overriding our default variables. It's also worth noting
                                                that just about any HTML can go within the <code>.accordion-body</code>,
                                                though the transition does limit overflow.
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div> -->
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="sidebar what-we-offer ps-md-3">
                        <div class="p-4 bg-white enquiry mb-4">
                            <h2 class="fw-bold pt-3 pb-3 m-0 fs-4">Enquire Now</h2>
                            <form action="{{ route('enquiry.store') }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                <div class="row">
                                    <input type="hidden" name="type" value="1">
                                    <div class="col-sm-6">
                                        <input type="text" name="name" class="form-control mb-4" placeholder="Your Name *"
                                            required="">
                                    </div>
                                    <div class="col-sm-6">
                                        <input type="email" name="email" class="form-control mb-4"
                                            placeholder="Your Email *" required="">
                                    </div>
                                    <div class="col-sm-6">
                                        <input type="text" name="number" class="form-control mb-4"
                                            placeholder="Your Phone *" required="">
                                    </div>
                                    <div class="col-sm-6">
                                        <input type="text" name="address" class="form-control mb-4"
                                            placeholder="Your Address" required="">
                                    </div>
                                    <div class="col-sm-12 mb-3">
                                        <select class="form-select form-control" name="loan_type" id="loan_type">
                                            <option value="">Select Loan</option>
                                            <option value="MSME Business Loans">
                                                MSME Business Loans
                                            </option>
                                            <option value="Subsidy & Incentives">Subsidy & Incentives</option>
                                            <option value="Retail Loans">Retail Loans</option>
                                            <option value="Turnkey Projects">Turnkey Projects</option>
                                        </select>
                                    </div>
                                    <div class="col-sm-12 ">
                                        <textarea name="message" cols="40" rows="4" class="form-control mb-4" placeholder="Message"
                                            required=""></textarea>
                                    </div>
    
                                    <div class="send-message">
                                        <button type="submit" class="nav-btn bg-white border-0 p-2">Send Message</button>
                                    </div>
    
                                </div>
                            </form>
                        </div>
                        {{-- <div class="service-card-block bg-block bg-block_1 w-100 mb-4 mt-5">
                            <div class="service-card-block-content ">
                                <a class="nav-btn bg-white py-3">Download Brochure</a>
                            </div>
                        </div> --}}
                        <ul class="navlist p-0 m-0 d-block">
                            <h3 class="pb-3 fw-bold m-0">Other Services</h3>
                            @foreach ($servicedetails as $servicedetails)
                                <li class="navlist-inneritem-items d-flex mb-2">
                                    <span class="pe-3"><i class="bi bi-check-lg"></i></span>
                                    <a class="fw-normal"
                                        href="{{ route('frontend.service-details.index', $servicedetails->slug) }}">{{ $servicedetails->title }}</a>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection