@extends('front.layout.app')
@section('beforeHeadClose')

   <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <style>
        .swal2-confirm {
            background-color: #29abe2 !important;
        }
        .contact-info-wrapper a:hover{color:#47acc6 !important;}
        </style>
@endsection
@section('content')
    
   <!-- Slider start -->
      @php
                $scwidget_company = get_widgets(81);
                $af_data = json_decode($scwidget_company->additional_field_data);
            @endphp
		<div class="secr-slider_wrapper"
    style="background: url('{{ asset_uploads('widgets/' . $scwidget_company->featured_image) }}') no-repeat top; background-size: cover;">
			<div class="slider-wrap slider-wrap-custom">
				<div class="container h-100 position-relative d-flex flex-column justify-content-center">
					<div class="row">
						<div class="col-lg-10 slider-text-col" data-aos="fade-up" data-aos-duration="1000">
							{!! $scwidget_company->content !!}
							<div class="main-btn"><a href="{{ $af_data->additional_field_2 }}">{{ $af_data->additional_field_1 }} <i
										class="fas fa-arrow-right ms-2"></i></a></div>
						</div>
					</div>


				</div>
			</div>

			<div class="threeboxes">
				<div class="container">

					<!-- 3 Boxes at the bottom -->
					<div class="row action-boxes action-boxes-container">

						@foreach ($get_all_texts as $text)
    <div class="col-lg-3 col-md-4 mb-4 mb-lg-0 px-2" data-aos="fade-up" data-aos-delay="100">
        <a href="#" class="text-decoration-none d-block">
            <div class="action-box text-white">
                <div class="content">
                    <div class="fw-bold mb-1 action-box-title">{{ $text->heading }}</div>
                    <p class="small m-0 text-white-75 action-box-desc">
                        {!! adjustUrl($text->content) !!}
                    </p>
                </div>
            </div>
        </a>
    </div>
@endforeach

<!--<div class="col-lg-3 col-md-4 mb-4 mb-lg-0 px-2" data-aos="fade-up" data-aos-delay="100">-->
<!--    <div class="r2v3-logo align-items-center bg-white border cert-card d-flex h-100 justify-content-center text-center"><a href="https://sustainableelectronics.org/find-an-r2-certified-facility/?type=byalias&amp;alias=SouthEast%20Computer%20Recyclers " rel="noopener noreferrer" target="_blank"><img alt="R2v3 Certified" class="img-fluid" src="https://serecycle.directory4listing.com/mlstorage/uploads/module/footer-badges/certified.webp"> </a> </div>-->
    
<!--    </div>-->
						


					</div>


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


		<!-- Slider end -->
		<main id="main">

<div class="certifications-wrap">
<div class="container mt-5">
<div class="row justify-content-center g-4">
                @foreach ($get_all_badges as $badge)
<div class="col-6 col-md-3 col-lg-3"
                        data-aos="fade-up"
                        data-aos-delay="{{ (($loop->iteration - 1) % 4 + 1) * 100 }}">
<div class="cert-card bg-white h-100">
                            @if($loop->last)
<a href="{{ $badge->additional_field_1 }}"
                                    target="_blank"
                                    rel="noopener noreferrer">
                            @endif
<img src="{{ asset_uploads('module/footer-badges/' . $badge->featured_img) }}"
                                title="{{ $badge->featured_img_title }}"
                                alt="{{ $badge->featured_img_alt }}"
                                class="img-fluid">
                            @if($loop->last)
</a>
                            @endif
</div>
</div>
                @endforeach
</div>
</div>
</div>
		
		
		<!---->

	
		    
             @php
                $scwidget_company = get_widgets(92);
                $af_data = json_decode($scwidget_company->additional_field_data);
            @endphp
			<!-- About SECR Section -->
			<section class="about-secr-section py-5">
				<div class="container about-container">
					<div class="about-flex-wrapper">
						<!-- Left: Image -->
						<div class="about-flex-item about-img-col mb-4 mb-lg-0" data-aos="fade-right">
							<div class="about-img-wrap h-100">
								<img src="{{ asset_uploads('widgets/' . $scwidget_company->featured_image) }}" alt="About SECR Recycle" class="img-fluid">
							</div>
						</div>

						{!! $scwidget_company->content !!}
					</div>
				</div>
			</section>

			<!-- Features Section -->
			<section class="features-section py-5">
				<div class="container">
					<div class="row text-center features-row">
						<!-- Feature 1 -->
						@foreach ($get_all_features as $feature)
    <div class="col-lg-3 col-md-6 mb-4 mb-lg-0 feature-col" data-aos="fade-up" data-aos-delay="100">
        <div class="feature-box px-xl-3">
            <div class="feature-icon mb-3">
                <img src="{{ asset_uploads('module/below-about-home/' . $feature->featured_img) }}"
                    title="{{ $feature->featured_img_title }}"
                    alt="{{ $feature->featured_img_alt }}">
            </div>
            <h3 class="feature-title">{{ $feature->heading }}</h3>
            <p class="feature-desc m-0">
                {!! adjustUrl($feature->content) !!}
            </p>
        </div>
    </div>
@endforeach
						<!-- Feature 2 -->
					
						<!-- Feature 3 -->
						
						<!-- Feature 4 -->
						
					</div>
				</div>
			</section>

			<!-- How We Can Help Section -->
               @php
                $scwidget_company = get_widgets(94);
                $af_data = json_decode($scwidget_company->additional_field_data);
            @endphp
			<section class="how-we-help-section py-5">
				<div class="container text-center mb-5">
					<div class="section-title" data-aos="fade-up">
							{!! $scwidget_company->content !!}
					</div>
				</div>

				<div class="container">
					<div class="row help-steps-row text-center mt-5">
						@foreach ($get_all_helps as $help)
    @if($loop->odd)
        <!-- Step {{ $help->additional_field_1 }} (Image Top) -->
        <div class="col-lg-3 col-md-6 mb-5 mb-lg-0 help-step-col" data-aos="fade-up"
            data-aos-delay="{{ $loop->iteration * 100 }}">

            <div class="help-img-box img-top mb-5">
                <a href="#" class="img-zoom-wrap d-block">
                    <img src="{{ asset_uploads('module/how-we-can-help/' . $help->featured_img) }}"
                       
                        alt="{{ $help->featured_img_alt }}"
                        class="img-fluid">
                </a>

                <div class="step-badge">
                    {{ str_pad($help->additional_field_1, 2, '0', STR_PAD_LEFT) }}
                </div>
            </div>

            <div class="help-text-box px-xl-2">
                <h3 class="sub-heading mb-3">
                    <a href="#" class="text-decoration-none sub-heading-link">
                        {{ $help->heading }}
                    </a>
                </h3>

                <p class="m-0">
                    {!! adjustUrl($help->content) !!}
                </p>
            </div>
        </div>
    @else
        <!-- Step {{ $help->additional_field_1 }} (Text Top) -->
        <div class="col-lg-3 col-md-6 mb-5 mb-lg-0 help-step-col d-flex flex-column"
            data-aos="fade-up"
            data-aos-delay="{{ $loop->iteration * 100 }}">

            <div class="help-text-box mb-4 order-1 order-lg-0 px-xl-2">
                <h3 class="sub-heading mb-3">
                    <a href="#" class="text-decoration-none sub-heading-link">
                        {{ $help->heading }}
                    </a>
                </h3>

                <p class="m-0">
                    {!! adjustUrl($help->content) !!}
                </p>
            </div>

            <div class="help-img-box img-bottom mt-auto order-0 order-lg-1">
                <div class="step-badge badge-top">
                    {{ str_pad($help->additional_field_1, 2, '0', STR_PAD_LEFT) }}
                </div>

                <a href="#" class="img-zoom-wrap d-block">
                    <img src="{{ asset_uploads('module/how-we-can-help/' . $help->featured_img) }}"
                      
                        alt="{{ $help->featured_img_alt }}"
                        class="img-fluid">
                </a>
            </div>
        </div>
    @endif
@endforeach

					
					</div>
				</div>
			</section>
			
			
			
			
			<!-- ITAD IT Asset Disposition Section -->
			  @php
                $scwidget_company = get_widgets(96);
                $af_data = json_decode($scwidget_company->additional_field_data);
            @endphp
			<section class="itad-section py-5 mb-4 mb-lg-2">
				{!! $scwidget_company->content !!}
			</section>
			
			<!-- ITAD IT Asset Disposition Section -->
			
			

			<!-- Accepted Items Section -->
			   @php
                $scwidget_company = get_widgets(95);
                $af_data = json_decode($scwidget_company->additional_field_data);
            @endphp
			<section class="accepted-items-section my-5">
				<div class="container accepted-container">
					<!-- Section Header -->
					<div class="row justify-content-center text-center mb-4 mb-lg-5">
						<div class="col-lg-8">
							<div class="section-title text-white" data-aos="fade-up">
									{!! $scwidget_company->content !!}
							</div>
						</div>
					</div>

					<!-- Section Content -->
					<div class="row align-items-center mb-4">
						<!-- Left Items -->
						@php
    $leftItems = $get_all_accepteditems->take(3);
    $rightItems = $get_all_accepteditems->slice(3, 3);
@endphp

<!-- Left Items -->
<div class="col-lg-4">
    @foreach ($leftItems as $item)
        <div class="accepted-item d-flex {{ !$loop->last ? 'mb-5 pb-2' : 'mb-5 mb-lg-0' }}"
            data-aos="fade-right"
            data-aos-delay="{{ $loop->iteration * 100 }}">

            <div class="item-icon me-4 flex-shrink-0">
                <img src="{{ asset_uploads('module/accepted-items/' . $item->featured_img) }}"
                    title="{{ $item->featured_img_title }}"
                    alt="{{ $item->featured_img_alt }}">
            </div>

            <div class="item-content">
                <h3 class="sub-heading text-white mb-2">
                    {{ $item->heading }}
                </h3>

                <p class="text-white-50 m-0">
                    {!! adjustUrl($item->content) !!}
                </p>
            </div>
        </div>
    @endforeach
</div>

<!-- Center Image -->
<div class="col-lg-4 text-center mb-3 mb-lg-0 order-first order-lg-0" data-aos="zoom-in">
    <img src="{{ asset_storage('front/images/recovery-icon.png') }}"
        alt="Recycle Logo"
        class="img-fluid center-glow-img">
</div>

<!-- Right Items -->
<div class="col-lg-4">
    @foreach ($rightItems as $item)
        <div class="accepted-item d-flex {{ !$loop->last ? 'mb-5 pb-2' : '' }}"
            data-aos="fade-left"
            data-aos-delay="{{ $loop->iteration * 100 }}">

            <div class="item-icon me-4 flex-shrink-0">
                <img src="{{ asset_uploads('module/accepted-items/' . $item->featured_img) }}"
                    title="{{ $item->featured_img_title }}"
                    alt="{{ $item->featured_img_alt }}">
            </div>

            <div class="item-content">
                <h3 class="sub-heading text-white mb-2">
                    {{ $item->heading }}
                </h3>

                <p class="text-white-50 m-0">
                    {!! adjustUrl($item->content) !!}
                </p>
            </div>
        </div>
    @endforeach
</div>
					</div>
				</div>
			</section>

			<!-- What We Do Section -->
               @php
                $scwidget_company = get_widgets(93);
                $af_data = json_decode($scwidget_company->additional_field_data);
            @endphp
			<section class="what-we-do-section">
				<div class="container">
					<div class="row align-items-center">
						<!-- Images Left -->
						{!! $scwidget_company->content !!}
					</div>
				</div>
			</section>


			<!-- Our Services Section -->
<section class="our-services-section py-5">
    <div class="container">

        <!-- Section Header -->
        <div class="section-title text-center" data-aos="fade-up">
            <h2 class="fw-bold mb-3">Our <span>Services</span></h2>
            <p class="mb-0">
                A comprehensive range of ITAD and recycling services built on internationally
                recognized standards — ensuring
                <span class="blocktext">
                    quality, security, environmental responsibility, and operational excellence.
                </span>
            </p>
        </div>

        <!-- Tabs Content -->
        <div class="services-tabs-wrapper mt-5">
            <div class="row align-items-start">

                <!-- Left: Dynamic Tab Buttons -->
                <div class="col-lg-6 mb-4 mb-lg-0" data-aos="fade-right" data-aos-delay="100">
                    <div class="nav flex-column services-nav" id="servicesTab" role="tablist">

                        @foreach ($get_all_services as $serviceObj)
                            <button class="nav-link service-tab-btn {{ $loop->first ? 'active' : '' }}"
                                id="tab-{{ $serviceObj->slug }}-btn"
                                data-bs-toggle="tab"
                                data-bs-target="#tab-{{ $serviceObj->slug }}"
                                type="button"
                                role="tab"
                                aria-controls="tab-{{ $serviceObj->slug }}"
                                aria-selected="{{ $loop->first ? 'true' : 'false' }}">

                                <h3 class="sub-heading m-0">
                                    {{ $serviceObj->title }}
                                   
                                </h3>

                                <i class="fa-solid fa-circle-chevron-right"></i>
                            </button>
                        @endforeach
                        
                        <div class="main-btn btn-dark d-flex justify-content-center mt-4">
                                    <a href="https://forms.zohopublic.com/SECRonlineforms/form/RFQRequestforQuote/formperma/p_X-1wMTTUfdhf6sHAKbt4eKe-TSeMcBkj--7CPP5CY"  target="_blank" class="text-decoration-none">
                                        SCHEDULE A FREE CONSULTATION
                                        <i class="fa fa-arrow-right"></i>
                                    </a>
                                </div>
                                
                                

                    </div>
                </div>

                <!-- Right: Dynamic Tab Content -->
                <div class="col-lg-6" data-aos="fade-left" data-aos-delay="200">
                    <div class="tab-content" id="servicesTabContent">

                        @foreach ($get_all_services as $serviceObj)
                            <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}"
                                id="tab-{{ $serviceObj->slug }}"
                                role="tabpanel"
                                aria-labelledby="tab-{{ $serviceObj->slug }}-btn">

                                <div class="service-tab-img mb-4">
                                    <img src="{{ asset_uploads('services/' . $serviceObj->featured_image) }}"
                                        title="{{ $serviceObj->featured_image_title }}"
                                        alt="{{ $serviceObj->featured_image_alt }}"
                                        class="img-fluid rounded-4">
                                </div>

                                <p class="mb-4">
                                    {!! $serviceObj->excerpt !!}
                                   
                                </p>

                                <div class="main-btn btn-dark d-flex justify-content-center">
                                    <a href="{{ url('service/' . $serviceObj->slug) }}" class="text-decoration-none">
                                        Read More
                                        <i class="fa fa-arrow-right"></i>
                                    </a>
                                </div>

                            </div>
                        @endforeach

                    </div>
                </div>

            </div>
        </div>

    </div>
</section>

			<!-- Why Choose SECR Section -->
<section class="why-choose-section py-5">
    <div class="container">

        <div class="section-title text-center mb-5" data-aos="fade-up">
            <h2 class="fw-bold mb-3">Why Choose <span>SECR</span></h2>
            <p>
                Our commitment to excellence is backed by globally recognized certifications
                and proven processes that reflect our dedication to quality, security,
                environmental responsibility, and ethical practice.
            </p>
        </div>

        <div class="row gy-5 wcs-row justify-content-center mb-lg-0 mb-4">

            @foreach ($get_all_chooses as $choose)

                @if($loop->odd)
                    <!-- Odd Cards (1,3,5...) -->
                    <div class="col-lg-3 col-md-6 mb-4 mb-lg-0"
                        data-aos="fade-up"
                        data-aos-delay="{{ (($loop->iteration - 1) % 4 + 1) * 100 }}">

                        <div class="wcs-card wcs-card-blue">

                            <div class="wcs-badge">
                                {{ str_pad($choose->additional_field_1, 2, '0', STR_PAD_LEFT) }}
                            </div>

                            <h3 class="sub-heading">
                                {{ $choose->heading }}
                            </h3>

                            
                                {!! adjustUrl($choose->content) !!}
                           

                            <div class="wcs-icon-wrap">
                                <img src="{{ asset_uploads('module/why-choose/' . $choose->featured_img) }}"
                                    title="{{ $choose->featured_img_title }}"
                                    alt="{{ $choose->featured_img_alt }}">
                            </div>

                        </div>
                    </div>
                @else
                    <!-- Even Cards (2,4,6...) -->
                    <div class="col-lg-3 col-md-6 mb-4 mb-lg-0"
                        data-aos="fade-up"
                        data-aos-delay="{{ (($loop->iteration - 1) % 4 + 1) * 100 }}">

                        <div class="wcs-card wcs-card-green">

                            <div class="wcs-icon-wrap mb-auto">
                                <img src="{{ asset_uploads('module/why-choose/' . $choose->featured_img) }}"
                                    title="{{ $choose->featured_img_title }}"
                                    alt="{{ $choose->featured_img_alt }}">
                            </div>

                            <h3 class="sub-heading">
                                {{ $choose->heading }}
                            </h3>

                          
                                {!! adjustUrl($choose->content) !!}
                            

                            <div class="wcs-badge mt-3">
                                {{ str_pad($choose->additional_field_1, 2, '0', STR_PAD_LEFT) }}
                            </div>

                        </div>
                    </div>
                @endif

            @endforeach

        </div>

    </div>
</section>



			<!-- CTA Section -->
			  @php $settingArr = settingArr(); @endphp
			<section class="cta-section my-5">
				<div class="container">
					<div class="cta-wrap" data-aos="fade-up">
						<div class="row align-items-center">
							<div class="col-lg-6">
								<div class="section-title cta-title mb-4" data-aos="fade-up">
									<h3 class="fw-bold mb-0 text-white">Contact us for <span>more information</span> or
										to arrange a pickup.</h3>
								</div>

								<div class="cta-info-list mb-5">
									<div class="cta-info-item d-flex align-items-center mb-4">
										<div class="cta-icon">
											<i class="fa-solid fa-phone-volume"></i>
										</div>
										<div class="cta-text ms-4">
											<span class="d-block mb-1">Call or Text</span>
											<a href="tel:{{ $settingArr->mobile }}" class="text-white text-decoration-none"><strong
													class="h5 mb-0">{{ $settingArr->mobile }}</strong></a>
										</div>
									</div>

									<div class="cta-info-item d-flex align-items-center mb-4">
										<div class="cta-icon">
											<i class="fa-solid fa-envelope"></i>
										</div>
										<div class="cta-text emailbx ms-4">
											<span class="d-block mb-1">Email Us At</span>
											<a href="mailto:{{ $settingArr->email }}"
												class="text-white text-decoration-none"><strong
													class="h5 mb-0">{{ $settingArr->email }}</strong></a>
										</div>
									</div>

									<div class="cta-info-item d-flex align-items-center">
										<div class="cta-icon">
											<i class="fa-solid fa-location-dot"></i>
										</div>
										<div class="cta-text addressbx ms-4">
											<span class="d-block mb-1">Find Us</span>
											<a href="https://maps.google.com/?q=5910+Shiloh+Road+East,+Suite+117+Alpharetta,+GA+30005"
												target="_blank" class="text-white text-decoration-none"><strong
													class="h6 mb-0">{!! str_replace(chr(13), '<span class="blocktext">', $settingArr->address) !!}</strong></a>
										</div>
									</div>
								</div>

								<div class="main-btn border_btn"><a href="https://forms.zohopublic.com/SECRonlineforms/form/RFQRequestforQuote/formperma/p_X-1wMTTUfdhf6sHAKbt4eKe-TSeMcBkj--7CPP5CY"  target="_blank">REQUEST A FREE QUOTE <i
											class="fa-solid fa-arrow-right ms-2"></i></a></div>
							</div>
						</div>
					</div>
				</div>
			</section>


		<!-- Process Section -->
<section class="process-section py-4">
    <div class="container">

        <div class="section-title text-center mb-5" data-aos="fade-up">
            <h2 class="fw-bold mb-3">
                The SECR Secured ITAD &
                <span class="blocktext">Recycling Process</span>
            </h2>
        </div>

        <div class="row justify-content-center row-cols-1 row-cols-md-3 row-cols-lg-5 position-relative process-row mt-5">

            @foreach($get_all_processes as $process)

                <div class="col mb-4 text-center process-step"
                    data-aos="fade-up"
                    data-aos-delay="{{ $loop->iteration * 100 }}">

                    <div class="step-badge-wrap">

                        <span class="process-badge">
                            STEP {{ str_pad($process->additional_field_1, 2, '0', STR_PAD_LEFT) }}
                        </span>

                        @unless($loop->last)
                            <img src="{{ asset_storage('front/images/process-arrow.png') }}"
                                alt="arrow"
                                class="process-arrow {{ $loop->even ? 'process-arrow-up' : '' }} d-none d-lg-block">
                        @endunless

                    </div>

                    <div class="process-icon mb-4">
                        <img src="{{ asset_uploads('module/recycling-process/' . $process->featured_img) }}"
                            title="{{ $process->featured_img_title }}"
                            alt="{{ $process->featured_img_alt }}"
                            class="img-fluid">
                    </div>

                    <h3 class="sub-heading mb-3 px-xl-2">
                        {{ $process->heading }}
                    </h3>

                    <p>
                        {!! adjustUrl($process->content) !!}
                    </p>

                    @unless($loop->last)
                        <div class="straight-arrow d-block d-lg-none d-md-none">
                            <img src="{{ asset_storage('front/images/straight-arrow.png') }}" alt="arrow">
                        </div>
                    @endunless

                </div>

            @endforeach

        </div>

    </div>
</section>

			<!-- Industries we serve Section -->
			<!-- Industries Section -->
<section class="industries-section">
    <div class="container">

        <div class="section-title text-center mb-4" data-aos="fade-up">
            <h2 class="fw-bold mb-2">Industries <span>We Serve</span></h2>
            <p>
                Trusted across regulated, data-sensitive sectors that demand certified ITAD
                and documented compliance.
            </p>
        </div>

        <div class="row g-4 justify-content-center">

            @foreach ($get_all_serves as $serve)
                <div class="col-lg-3 col-md-6 col-sm-12"
                    data-aos="fade-up"
                    data-aos-delay="{{ (($loop->iteration - 1) % 4 + 1) * 100 }}">

                    <div class="industry-card h-100 bg-white overflow-hidden">

                        <div class="industry-img-wrapper overflow-hidden">
                            <img src="{{ asset_uploads('module/industries-we-serve/' . $serve->featured_img) }}"
                                title="{{ $serve->featured_img_title }}"
                                alt="{{ $serve->featured_img_alt }}"
                                class="img-fluid w-100 industry-img transition-all">
                        </div>

                        <div class="industry-content text-center">
                            <h3 class="sub-heading mb-3">
                                {{ $serve->heading }}
                            </h3>

                           
                                {!! adjustUrl($serve->content) !!}
                          
                        </div>

                    </div>
                </div>
            @endforeach

        </div>

    </div>
</section>

			<!-- Contact Form Start -->
			<section class="quote-form">
				<div class="container">
					<div class="row">
						<div class="col-lg-5 mb-5 mb-lg-0" data-aos="fade-right">
							<div
								class="valuation-form-wrapper p-4 p-md-5 h-100 d-flex flex-column justify-content-center">
								<div class="section-title" data-aos="fade-up">
									<h3 class="fw-bold text-white mb-4">Send Us a <span class="blocktext">Message
											</span></h3>
								</div>
		<form action="#" method="POST" id="valuationForm" class="valuation-form">
    @csrf
    <input type="hidden" name="form_type" value="valuation">

    <div class="row g-3 mb-3">
        <div class="col-md-6">
            <input
                type="text"
                class="form-control valuation-input"
                name="name"
                id="v_name"
                placeholder="Full Name *"
                value="{{ old('name') }}">
        </div>

        <div class="col-md-6">
            <input
                type="email"
                class="form-control valuation-input"
                name="email"
                id="v_email"
                placeholder="Email Address *"
                value="{{ old('email') }}">
        </div>
    </div>

    <div class="row g-3 mb-3">
        <div class="col-md-6">
            <input
                type="text"
                class="form-control valuation-input"
                name="phone"
                id="v_phone"
                placeholder="Phone Number"
                value="{{ old('phone') }}">
        </div>

        <div class="col-md-6">
            <input
                type="text"
                class="form-control valuation-input"
                name="company"
                id="v_company"
                placeholder="Company Name"
                value="{{ old('company') }}">
        </div>
    </div>

    <div class="mb-3">
        <select
            class="form-select valuation-input"
            name="subject"
            id="v_subject">
            <option value="">Reason for your inquiry?</option>
            <option value="IT Asset Disposition (ITAD)">IT Asset Disposition (ITAD)</option>
            <option value="Data Destruction">Data Destruction</option>
            <option value="Electronics Recycling">Electronics Recycling</option>
            <option value="Buy-Back Program">Buy-Back Program</option>
            <option value="Other">Other</option>
        </select>
    </div>

    <div class="mb-4">
        <textarea
            class="form-control valuation-input"
            rows="4"
            name="comments"
            id="v_comments"
            placeholder="Your Message">{{ old('comments') }}</textarea>
    </div>

    <div class="mb-4">
        <div class="g-recaptcha"
             data-sitekey="{{ config('recaptcha.siteKey') }}"></div>
    </div>

    <button
        type="button"
        onclick="$('#valuationForm').submit();"
        class="btn valuation-submit-btn fw-bold w-100 py-3 rounded-pill text-white">
        Send
        <i class="fas fa-arrow-right ms-2"></i>
    </button>
</form>
							</div>
						</div>

						<div class="col-lg-7" data-aos="fade-left">
							<div class="calendly-inline-widget"
								data-url="https://calendly.com/secrecycler/secr-introduction-to-itad"
								style="position: relative;min-width:320px;height:700px;" data-processed="true">
								<div class="calendly-spinner">
									<div class="calendly-bounce1"></div>
									<div class="calendly-bounce2"></div>
									<div class="calendly-bounce3"></div>
								</div><iframe
									src="https://calendly.com/secrecycler/secr-introduction-to-itad?embed_domain=secrecyclers.com&amp;embed_type=Inline"
									width="100%" height="100%" frameborder="0"
									title="Select a Date &amp; Time - Calendly"></iframe>
							</div>
						</div>


					</div>
				</div>
			</section>
			<!-- Contact Form Start -->
			<!-- Certifications Section -->
<!--			<div class="certifications-wrap">-->
<!--				<div class="container mb-5">-->
<!--					<div class="row justify-content-center g-4">-->
<!--    @foreach ($get_all_badges as $badge)-->
<!--        <div class="col-6 col-md-3 col-lg-3"-->
<!--            data-aos="fade-up"-->
<!--            data-aos-delay="{{ (($loop->iteration - 1) % 4 + 1) * 100 }}">-->

<!--            <div class="cert-card text-center bg-white border h-100 d-flex align-items-center justify-content-center">-->
<!--                <img src="{{ asset_uploads('module/footer-badges/' . $badge->featured_img) }}"-->
<!--                    title="{{ $badge->featured_img_title }}"-->
<!--                    alt="{{ $badge->featured_img_alt }}"-->
<!--                    class="img-fluid">-->
<!--            </div>-->

<!--        </div>-->
<!--    @endforeach-->
<!--</div>-->
<!--				</div>-->
<!--			</div>-->





		</main>
<!-- End Clients Area --> @endsection
@section('beforeBodyClose')
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>
<script>

    
document.getElementById('v_phone').addEventListener('input', function (e) {
    let value = e.target.value.replace(/\D/g, '');

    if (value.length > 10) {
        value = value.substring(0, 10);
    }

    if (value.length > 6) {
        value = value.replace(/(\d{3})(\d{3})(\d+)/, '$1-$2-$3');
    } else if (value.length > 3) {
        value = value.replace(/(\d{3})(\d+)/, '$1-$2');
    }

    e.target.value = value;
});
</script>

<script>
$(document).ready(function () {

    $("#valuationForm").validate({

        // Don't ignore the hidden reCAPTCHA field
        ignore: ":hidden:not([name='g-recaptcha-response'])",

        rules: {
            name: {
                required: true
            },
           
            email: {
                required: true,
                email: true
            },
            phone: {
                required: true
            },
            "g-recaptcha-response": {
                required: true
            }
        },

        messages: {
            name: {
                required: "Please enter your  name"
            },
          
            email: {
                required: "Please provide your email",
                email: "Please provide a valid email"
            },
            phone: {
                required: "Please provide your phone number"
            },
            "g-recaptcha-response": {
                required: "Please verify that you are not a robot."
            }
        },

        invalidHandler: function (event, validator) {

            if (validator.numberOfInvalids()) {

                let errorList = '<div class="text-start ps-3">';

                $.each(validator.errorList, function (index, error) {
                    errorList += '<span class="text-danger">*</span> ' + error.message + '<br>';
                });

                errorList += '</div>';

                Swal.fire({
                    title: "Please fill the following fields:",
                    html: errorList
                });
            }
        },

        errorPlacement: function (error, element) {

            if (element.attr("name") === "g-recaptcha-response") {
                return false;
            }

            return false;
        },

        submitHandler: function () {
            submitValuationAjax();
        }

    });

    $('#v_phone').inputmask("999-999-9999");

});

// Called when reCAPTCHA is successfully completed
function captchaVerified() {
    $("#valuationForm").validate().element("[name='g-recaptcha-response']");
}

function submitValuationAjax() {

    let url = "{{ base_url() }}contact-us";

    let formData = new FormData($('#valuationForm')[0]);

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $.ajax({

        url: url,
        type: "POST",
        data: formData,
        cache: false,
        contentType: false,
        processData: false,

        success: function (data) {

            data = JSON.parse(data);

            if (data.status) {

                $("#valuationForm").trigger("reset");

                if (typeof grecaptcha !== "undefined") {
                    grecaptcha.reset();
                }

                Swal.fire({
                    title: "Thank you!",
                    html: "Your Form has been submitted successfully.",
                    timer: 2000,
                    timerProgressBar: false
                });

            } else {

                Swal.fire({
                    title: "Sorry!",
                    html: data.error,
                    timer: 2000,
                    timerProgressBar: true
                });

            }

        },

        error: function (data) {

            if (data.status == 422) {

                let responseText = $.parseJSON(data.responseText);

                let errorList = '<div class="text-start ps-3">';

                $.each(responseText.errors, function (index, value) {
                    errorList += '<span class="text-danger">*</span> ' + value + '<br>';
                });

                errorList += '</div>';

                Swal.fire({
                    title: "Please fill the following fields:",
                    html: errorList
                });

            } else {

                Swal.fire({
                    title: "Error!",
                    text: "Something went wrong. Please try again."
                });

            }

        }

    });

}
    </script>
@endsection