@extends('frontend.layout.app')
@section('content')
    <!--Start breadcrumb area paroller-->
    <section class="breadcrumb-area">
        <div class="breadcrumb-area-bg"
            style="background-image: url({{ asset('frontend/images/breadcrumb/breadcrumb-1.jpg') }});"></div>
        <div class="container">
            <div class="row">
                <div class="col-xl-12">
                    <div class="inner-content text-center">
                        <div class="title">
                            <h2>Service Details</h2>
                        </div>
                        <div class="breadcrumb-menu">
                            <ul>
                                <li><a href="{{ route('front.index') }}">Home</a></li>
                                <li><i class="fa fa-angle-right" aria-hidden="true"></i></li>
                                <li class="active">Service Details</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--End breadcrumb area-->
    <section class="service-details-area">
        <div class="container">
            @if (Session::has('success'))
                <div class="alert alert-success alert-dismissible">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    <strong>{{ Session::get('success') }}</strong>
                </div>
            @endif
            <div class="row">
                <div class="col-lg-12">
                    <div class="service-details-content-box">
                        <div class="row">
                            <div class="col-lg-5">
                                <div class="service-details-image-box">
                                    <div class="service-details-main-image">
                                        <ul class="bxslider">
                                            <li>
                                                <div class="single-box clearfix">
                                                    <div class="img-holder">
                                                        <img src="{{ asset('/storage/service/' . $data->image) }}"
                                                            alt="Awesome Image">
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-7">
                                <div class="service-title">
                                    <h2>{{ $data->title }}</h2>
                                </div>
                                <div class="service-description">
                                    <p>{{ $data->description }}</p>
                                </div>

                                <div class="inner">
                                    <div class="button-box">
                                        <button type="button" class="btn-one" data-toggle="modal" data-target="#myModal">
                                            <span class="round"></span>
                                            <span class="txt">Enquiry Now</span>
                                        </button>
                                    </div>
                                    <div class="coupon-code-box">
                                        <h6>Contact: <span>+{{ websiteSetupValue('whats_app_number') }}</span></h6>
                                    </div>
                                    <!-- The Modal -->
                                    <div class="modal" id="myModal">
                                        <div class="modal-dialog">
                                            <div class="modal-content">

                                                <!-- Modal Header -->
                                                <div class="modal-header">
                                                    <button type="button" class="close"
                                                        data-dismiss="modal">&times;</button>
                                                </div>

                                                <!-- Modal body -->
                                                <div class="modal-body">
                                                    <div class="contact-style1_form">
                                                        <div class="contact-form">
                                                            <form action="{{ route('front.service-enquiry') }}"
                                                                method="POST" class="default-form2">
                                                                @csrf
                                                                <div class="row">
                                                                    <div class="col-xl-12">
                                                                        <div class="input-box-form">
                                                                            <input type="hidden" name="service"
                                                                                value="{{ $service_data->id }}">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="row">
                                                                    <div class="col-xl-12">
                                                                        <div class="input-box-form">
                                                                            <input type="text" name="name"
                                                                                value="" required
                                                                                placeholder="Full Name">
                                                                            <div class="icon">
                                                                                <i class="fa fa-user"
                                                                                    aria-hidden="true"></i>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-xl-12">
                                                                        <div class="input-box-form">
                                                                            <input type="email" name="email"
                                                                                value="" required placeholder="Email">
                                                                            <div class="icon">
                                                                                <i class="fa fa-envelope"
                                                                                    aria-hidden="true"></i>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="row">
                                                                    <div class="col-xl-12">
                                                                        <div class="input-box-form">
                                                                            <input type="text" name="phone"
                                                                                value="" required placeholder="Phone">
                                                                            <div class="icon">
                                                                                <i class="fa fa-phone"
                                                                                    aria-hidden="true"></i>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="row">
                                                                    <div class="col-xl-12">
                                                                        <div class="input-box-form">
                                                                            <input type="text" name="address"
                                                                                value="" required
                                                                                placeholder="address">
                                                                            <div class="icon">
                                                                                <i class="bi bi-house-door"></i>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="row">
                                                                    <div class="col-xl-12">
                                                                        <div class="input-box-form two">
                                                                            <textarea name="message" placeholder="Enter your message..." required></textarea>
                                                                            <div class="icon">
                                                                                <i class="fa fa-text-width"
                                                                                    aria-hidden="true"></i>
                                                                            </div>
                                                                        </div>
                                                                        <div class="button-box">
                                                                            <button type="submit" class="btn-one">
                                                                                <span class="round"></span>
                                                                                <span class="txt">Send Message</span>
                                                                            </button>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </form>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!-- Modal footer -->
                                                <div class="modal-footer">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </section>
@endsection