@extends('layouts.frontend')
@section('content')
<main>
<section class="banner-back-img-howto">
    <div class="inner-main-img">
        <div class="container">
            <div class="inner-banner-comn">
                <h1>Get a quote</h1>
            </div>
        </div>
    </div>
</section>

<section class="detail-show-all comn-padd-100 roof-box-main">
    <div class="container">


        <div class="select-product">
            <div class="heading-select-prod">
                <h3>select the product</h3>
                <p>Here, you can see which products are compatible with your car details. Switch between the
                    different products to compare prices.</p>
            </div>
            <div class="cards-select-product">
                <div class="row">
                    <div class="col-md-2">
                        <div class="first-check-box">
                            <input class="form-check-input" type="radio" name="flexRadioDefault"
                                id="gridCheck1">
                            <label class="form-check-label" for="gridCheck1">
                                <div class="inner-img-select-heading">
                                    <div class="inner-image-roof">
                                        <figure>
                                            <img src="{{ asset('frontend/images/roof1.png') }}" alt="">
                                        </figure>
                                    </div>
                                    <h4>Roof Box</h4>
                                </div>
                            </label>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="first-check-box">
                            <input class="form-check-input" type="radio" name="flexRadioDefault" id="Rear-box">
                            <label class="form-check-label" for="Rear-box">
                                <div class="inner-img-select-heading">
                                    <div class="inner-image-roof">
                                        <figure>
                                            <img src="{{ asset('frontend/images/rear.png') }}" alt="">
                                        </figure>
                                    </div>
                                    <h4>Rear box</h4>
                                </div>
                            </label>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="first-check-box">
                            <input class="form-check-input" type="radio" name="flexRadioDefault"
                                id="roof-bike-rack">
                            <label class="form-check-label" for="roof-bike-rack">
                                <div class="inner-img-select-heading">
                                    <div class="inner-image-roof">
                                        <figure>
                                            <img src="{{ asset('frontend/images/bike.png') }}" alt="">
                                        </figure>
                                    </div>
                                    <h4>roof bike rack</h4>
                                </div>
                            </label>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="first-check-box">
                            <input class="form-check-input" type="radio" name="flexRadioDefault"
                                id="clutch-bike-rack">
                            <label class="form-check-label" for="clutch-bike-rack">
                                <div class="inner-img-select-heading">
                                    <div class="inner-image-roof">
                                        <figure>
                                            <img src="{{ asset('frontend/images/ckutch.png') }}" alt="">
                                        </figure>
                                    </div>
                                    <h4>clutch bike rack</h4>
                                </div>
                            </label>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="first-check-box">
                            <input class="form-check-input" type="radio" name="flexRadioDefault"
                                id="Roof-Racks">
                            <label class="form-check-label" for="Roof-Racks">
                                <div class="inner-img-select-heading">
                                    <div class="inner-image-roof">
                                        <figure>
                                            <img src="{{ asset('frontend/images/ff.png') }}" alt="">
                                        </figure>
                                    </div>
                                    <h4>Roof Racks</h4>
                                </div>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="inner-data-detail">
            <div class="head-roof-box">
                <h3> roof box</h3>

            </div>
            <div class="price-detail-main">
                <div class="price-big d-flex">
                    <h3>8.00 €</h3>
                    <a data-bs-toggle="modal" data-bs-target="#exampleModal">View price breakdown</a>
                    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                        aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    ...
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary"
                                        data-bs-dismiss="modal">Close</button>
                                    <button type="button" class="btn btn-primary">Save changes</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <p>per day (tiered price), incl. VAT</p>
            </div>

            <div class="pick-location">
                <h3>Pickup Location</h3>
                <div class="pick-locati-name-icon d-flex">
                    <img src="{{ asset('frontend/images/loct.png') }}" alt="">
                    <p>Esperantostr. 10, 70197 Stuttgart</p>
                </div>
            </div>

            <div class="choose-car">
                <h3>Choose your car</h3>
                <form>
                    <div class="row">

                        <div class="col-md-6 inner-main-input">
                            <label for="inputEmail4" class="form-label">Manufacturer</label>
                            <select class="form-select" aria-label="Default select example">
                                <option selected>Select </option>
                                <option value="1">One</option>
                                <option value="2">Two</option>
                                <option value="3">Three</option>
                            </select>
                        </div>
                        <div class="col-md-6 inner-main-input">
                            <label for="inputEmail4" class="form-label">Year of Make</label>
                            <select class="form-select" aria-label="Default select example">
                                <option selected>Select </option>
                                <option value="1">One</option>
                                <option value="2">Two</option>
                                <option value="3">Three</option>
                            </select>
                        </div>
                        <div class="col-md-6 inner-main-input">
                            <label for="inputEmail4" class="form-label">Model</label>
                            <select class="form-select" aria-label="Default select example">
                                <option selected>Select </option>
                                <option value="1">One</option>
                                <option value="2">Two</option>
                                <option value="3">Three</option>
                            </select>
                        </div>
                        <div class="col-md-6 inner-main-input">
                            <label for="inputEmail4" class="form-label">Trailer Hitch</label>
                            <select class="form-select" aria-label="Default select example">
                                <option selected>Select</option>
                                <option value="1">Yes</option>
                                <option value="2">No</option>
                                <option value="3">Three</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>

            <div class="railing-type">
                <h3>railing type</h3>
                <p>The railing of you car based on you selected preference ad above.</p>
            </div>
            <div class="roof-name-detail">
                <figure>
                    <img src="{{ asset('frontend/images/roof.png') }}" alt="">
                </figure>
                <h4>Normal Roof</h4>
                <p>Empty vehicle roof, without railing and attachment points</p>
            </div>
            <div class="size-cards">
                <h3>Size</h3>
                <div class="row row-gap-4">
                    <div class="col-md-2">
                        <div class="inner-size-card">
                            <div class="upper-img-sunroof">
                                <figure>
                                    <img src="{{ asset('frontend/images/sunroof.png') }}" alt="">
                                </figure>
                            </div>
                            <div class="size-sunreef">
                                <p>S >400l</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="inner-size-card recomended">
                            <p class="recomend-text">Recommended</p>
                            <div class="upper-img-sunroof">
                                <figure>
                                    <img src="{{ asset('frontend/images/sunroof.png') }}" alt="">
                                </figure>
                            </div>
                            <div class="size-sunreef">
                                <p>M 400l - 420l</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="inner-size-card">
                            <div class="upper-img-sunroof">
                                <figure>
                                    <img src="{{ asset('frontend/images/sunroof.png') }}" alt="">
                                </figure>
                            </div>
                            <div class="size-sunreef">
                                <p>L 450l - 480l</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="inner-size-card">
                            <div class="upper-img-sunroof">
                                <figure>
                                    <img src="{{ asset('frontend/images/sunroof.png') }}" alt="">
                                </figure>
                            </div>
                            <div class="size-sunreef">
                                <p>XL 500l - 524l</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="inner-size-card disabled">
                            <div class="upper-img-sunroof">
                                <figure>
                                    <img src="{{ asset('frontend/images/sunroof.png') }}" alt="">
                                </figure>
                            </div>
                            <div class="size-sunreef">
                                <p>XXL 600l</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="choose-color">
                <div class="choose-car">
                    <h3 class="mb-2">Choose Color</h3>
                    <form class=" email-login">
                        <div class="row">

                            <div class="col-md-6 inner-main-input">

                                <select class="form-select" aria-label="Default select example">
                                    <option selected>Select </option>
                                    <option value="1">One</option>
                                    <option value="2">Two</option>
                                    <option value="3">Three</option>
                                </select>
                            </div>

                        </div>
                    </form>
                </div>
            </div>
            <div class="choose-rental-period">
                <h3>Choose your rental period</h3>
                <p>Add a rental period to calculate your rental price. Without a rental period, all
                    sizes and variations of the product remain available for purchase, which match your
                    car details.</p>
                <form class=" email-login">
                    <div class="row">

                        <div class="col-md-6 inner-main-input">
                            <label for="inputEmail4" class="form-label">From</label>
                            <input class="form-control" type="date" placeholder="">
                        </div>
                        <div class="col-md-6 inner-main-input">
                            <label for="inputEmail4" class="form-label">To</label>
                            <input class="form-control" type="date" placeholder="">
                        </div>

                    </div>
                </form>


                <div class="select-main-detail d-flex">
                    <div class="">
                        <div class="form-check mb-1">
                            <input class="form-check-input" type="checkbox" id="gridCheck">
                            <label class="form-check-label" for="gridCheck">
                                Carrier Included
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="gridCheck1">
                            <label class="form-check-label" for="gridCheck1">
                                Volkassko Insurance 25 €
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="calculated-rent">
                <div class="row align-items-end">
                    <div class="col-md-6">
                        <h3>Calculated rent</h3>
                        <p class="text-calc-rent">(including insured mounting service, Volkassko
                            Insurance and final cleaning)
                        </p>
                    </div>
                    <div class="col-md-6">
                        <div class="inner-number-days">
                            <p>Number of days: <span> 7</span></p>
                            <p class="mb-0">Total rent: <span> 56,00 €</span></p>
                        </div>
                    </div>
                </div>

            </div>

            <button class=" w-100 btn primary-btn">Rent Now</button>


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

@include('frontend.include.subscribe_news')
</main>
@endsection