@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 Bike Rack</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="choose-color mt-4">
                    <div class="choose-car">
                        <h3 class="mb-2">Choose Number of Bicycles</h3>
                        <form class=" email-login">
                            <div class="row">

                                <div class="col-md-6 inner-main-input">
                                    <label for="inputEmail4" class="form-label">Select Number of bicycles</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>
                        </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">
                                <input class="form-check-input" type="checkbox" id="gridCheck56">
                                <label class="form-check-label" for="gridCheck56">
                                    Carrier Included
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="gridCheck55">
                                <label class="form-check-label" for="gridCheck55">
                                    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, <br> 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