@extends('layout.app')

@section('content')






    <section class="section_1">
        <div class="container">

            <div class="row">
                @include('components.menu_mobile')

                @include('components.menu_accordion' ,['opened'=>false])

                <div class="col-lg-9 col-md-12  ">
                    <div class="page_card ">
                        <div class="page_title">
                            <img src="assets/images/solar_195.png" alt="">
                            <span>Photovoltaic Systems</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </section>
    <section>

        <div class="container">

            <div class="row">
                <div class="col-md-6 ">
                    <div class="product_details_image" style="background: url('assets/images/solar_101.png');"></div>
                    <div class="div_product_images">
                        <div class="small_image" style="background: url('assets/images/solar_99.png');"></div>
                        <div class="small_image" style="background: url('assets/images/solar_99.png');"></div>
                        <div class="small_image" style="background: url('assets/images/solar_99.png');"></div>
                        <div class="small_image" style="background: url('assets/images/solar_99.png');"></div>
                        <div class="small_image" style="background: url('assets/images/solar_99.png');"></div>
                    </div>
                </div>

                <div class="col-md-6 relative">

                    <a href="" class="fave_link2">
                        <img src="assets/images/solar_141.png" alt="">
                    </a>
                    <h1 class="produc_d_title">Photovoltaic 120v</h1>



                    <p class="produc_d_desc">Solar Panel 100w 200w Solid 18V Rigid Glass Solar Panel 120W Maximum
                        Power Monocrystalline Cell 12V 24V Battery Charge</p>
                    <h3 class="produc_d_price">USD 53.46</h3>

                    <div class="group_radios">
                        <label for="">Model</label>

                        <div class="radios orange_radios">
                            <div>
                                <input type="radio" name="xxxxxx" value="Model" checked>
                                <span>Model</span>
                            </div>

                            <div>
                                <input type="radio" name="xxxxxx" value="Model2">
                                <span>Model2</span>
                            </div>

                            <div>
                                <input type="radio" name="xxxxxx" value="Model3">
                                <span>Model3</span>
                            </div>

                        </div>


                    </div>



                    <div class="group_radios">
                        <label for="">Watts</label>

                        <div class="radios orange_radios">
                            <div>
                                <input type="radio" name="xxxxxx2" value="120 Watt" checked>
                                <span>120 Watt</span>
                            </div>


                            <div>
                                <input type="radio" name="xxxxxx2" value="100Watt">
                                <span>100Watt</span>
                            </div>



                            <div>
                                <input type="radio" name="xxxxxx2" value="200Watt">
                                <span>200Watt</span>
                            </div>



                            <div>
                                <input type="radio" name="xxxxxx2" value="285Watt">
                                <span>285Watt</span>
                            </div>



                            <div>
                                <input type="radio" name="xxxxxx2" value="335Watt">
                                <span>335Watt</span>
                            </div>






                        </div>


                    </div>


                    <div class="group_radios">
                        <label for="">Available Dimensions</label>

                        <div class="radios orange_radios">
                            <div>
                                <input type="radio" name="xxxxxx3" value="120 Watt" checked>
                                <span>99 x 164 </span>
                            </div>

                            <div>
                                <input type="radio" name="xxxxxx3" value="100Watt">
                                <span>99 x 196</span>
                            </div>

                        </div>
                    </div>




                </div>


            </div>
        </div>

    </section>
    <section>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="section_title">
                        You Might Also Need
                    </div>
                </div>
            </div>

            <div class="row">
                @include('components.product_cell' , ['j'=>4])
                <div class="col-md-12 see_mode_col">
                    <a href="javasctipt:void(0)" class="see_more"> View More <i
                            class="icon-arrow-down22 mr-3 icon-2x"></i></a>
                </div>

            </div>


        </div>
    </section>
    <section>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="section_title">
                        You Might Also Need Accesories
                    </div>
                </div>
            </div>


            <div class="row">
                @include('components.product_cell' , ['j'=>4])
                <div class="col-md-12 see_mode_col">
                    <a href="javasctipt:void(0)" class="see_more"> View More <i
                            class="icon-arrow-down22 mr-3 icon-2x"></i></a>
                </div>

            </div>


        </div>
    </section>



    <section>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="section_company_ad">

                        <div class="row">


                            <div class="order-1 order-md-0 col-lg-9 col-md-8 solar_col">


                                <div class="solar_card">
                                    <div class="bg_image" style="background: url('assets/images/solar_99.png')"></div>
                                    <div class="d-inline">
                                        <span class="price">280.00 USD</span>
                                    </div>
                                </div>

                                <div class="solar_card">
                                    <div class="bg_image" style="background: url('assets/images/solar_99.png')"></div>
                                    <div class="d-inline">
                                        <span class="price">280.00 USD</span>
                                    </div>
                                </div>

                                <div class="solar_card">
                                    <div class="bg_image" style="background: url('assets/images/solar_99.png')"></div>
                                    <div class="d-inline">
                                        <span class="price">280.00 USD</span>
                                    </div>
                                </div>

                                <div class="solar_card d-none d-lg-block">
                                    <div class="bg_image" style="background: url('assets/images/solar_99.png')"></div>
                                    <div class="d-inline">
                                        <span class="price">280.00 USD</span>
                                    </div>
                                </div>
                            </div>



                            <div class="order-0 order-md-1 col-lg-3 col-md-4">
                                <div class="solar_card2">
                                    <img src="assets/images/solar_93.png" alt="">
                                    <p>Photovoltaic Company</p>
                                    <a href="company" class="orange_btn">Visit the Company </a>
                                </div>
                            </div>



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

        </div>
    </section>





    <section class="over_view_section">
        <div class="container">
            <div class="row">
                <div class="col-md-12">

                    <div class="white_div15">


                        <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="Overview-tab" data-toggle="pill" href="#Overview"
                                   role="tab" aria-controls="Overview" aria-selected="true">Overview</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="Specifications-tab" data-toggle="pill" href="#Specifications"
                                   role="tab" aria-controls="Specifications" aria-selected="false">Specifications</a>
                            </li>
                        </ul>


                        <div class="tab-content" id="pills-tabContent">
                            <div class="tab-pane fade show active" id="Overview" role="tabpanel"
                                 aria-labelledby="Overview-tab">
                                <p class="OverviewText">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                                    eiusmod tempor
                                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                                    Lorem ipsum dolor sit amet, consectetur adipiscing
                                    elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
                                    minim veniam, quis nostrud Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                                    sed do eiusmod tempor incididunt</p>



                                <div class="OverviewGallery">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <img src="assets/images/solar_108.png">
                                        </div>

                                        <div class="col-md-6">
                                            <img src="assets/images/solar_108.png">
                                        </div>
                                    </div>



                                    <div class="row">
                                        <div class="col-md-3">
                                            <img src="assets/images/solar_108.png">
                                        </div>

                                        <div class="col-md-3">
                                            <img src="assets/images/solar_108.png">
                                        </div>

                                        <div class="col-md-3">
                                            <img src="assets/images/solar_108.png">
                                        </div>


                                        <div class="col-md-3">
                                            <img src="assets/images/solar_108.png">
                                        </div>

                                    </div>




                                    <div class="row">
                                        <div class="col-md-2">
                                            <img src="assets/images/solar_108.png">
                                        </div>

                                        <div class="col-md-2">
                                            <img src="assets/images/solar_108.png">
                                        </div>

                                        <div class="col-md-2">
                                            <img src="assets/images/solar_108.png">
                                        </div>


                                        <div class="col-md-2">
                                            <img src="assets/images/solar_108.png">
                                        </div>

                                        <div class="col-md-2">
                                            <img src="assets/images/solar_108.png">
                                        </div>

                                        <div class="col-md-2">
                                            <img src="assets/images/solar_108.png">
                                        </div>


                                    </div>








                                </div>

                            </div>
                            <div class="tab-pane fade" id="Specifications" role="tabpanel"
                                 aria-labelledby="Specifications-tab">


                                <div class="row">
                                    <div class="col-md-6">

                                        <div class="key_and_val_div black_text">

                                            <div class="key_and_val_item">
                                                <span class="key">Brand Name</span>
                                                <span class="val">CNSDPV</span>
                                            </div>


                                            <div class="key_and_val_item">
                                                <span class="key">Origin</span>
                                                <span class="val">CN</span>
                                            </div>



                                            <div class="key_and_val_item">
                                                <span class="key">Foldable Solar Panel</span>
                                                <span class="val">No</span>
                                            </div>



                                            <div class="key_and_val_item">
                                                <span class="key">Number of Panels</span>
                                                <span class="val">1</span>
                                            </div>



                                            <div class="key_and_val_item">
                                                <span class="key">Flexible Solar Panel</span>
                                                <span class="val">Yes</span>
                                            </div>


                                            <div class="key_and_val_item">
                                                <span class="key">Certification</span>
                                                <span class="val">CE</span>
                                            </div>




                                        </div>



                                    </div>


                                    <div class="col-md-6">

                                        <div class="key_and_val_div black_text">

                                            <div class="key_and_val_item">
                                                <span class="key">Nominal Capacity</span>
                                                <span class="val">100W</span>
                                            </div>


                                            <div class="key_and_val_item">
                                                <span class="key">Size</span>
                                                <span class="val">1165MM*541MM*30MM</span>
                                            </div>

                                            <div class="key_and_val_item">
                                                <span class="key">Model Number</span>
                                                <span class="val">CNSDPV100(36)-M5</span>
                                            </div>

                                            <div class="key_and_val_item">
                                                <span class="key">Number of Cells</span>
                                                <span class="val">36PCS</span>
                                            </div>

                                            <div class="key_and_val_item">
                                                <span class="key">Material</span>
                                                <span class="val">Monocrystalline Silicon</span>
                                            </div>

                                            <div class="key_and_val_item">
                                                <span class="key">Max. Power</span>
                                                <span class="val">120</span>
                                            </div>



                                        </div>



                                    </div>



                                </div>


                            </div>
                        </div>




                    </div>

                </div>
            </div>

        </div>
    </section>





@endsection