@extends('layouts.app')

@section('content')
    <div class="container products-intro ">
        <div class="row">
            <div class="col-sm-12 col-md-6 mb-5">
                <h2 class="d-block d-md-none">Marble</h2>
                <h6 class="d-block d-md-none product-number mb-2">{{$product->code}}</h6>
                <div id="productsInnerCarousel" class="carousel slide" data-ride="carousel">
                    <div class="carousel-inner">
                        @foreach($product->images as $image)
                            @if ($loop->first)
                                <div class="carousel-item active">
                                    @else
                                        <div class="carousel-item">
                                            @endif
                                            <img src="{{asset('/uploads/products/'.$product->id.'/'.$image->path)}}" class="d-block w-100"
                                                 alt="">
                                        </div>
                                        @endforeach
                                </div>
                                <ol class="carousel-indicators">
                                    @foreach($product->images as $index=>$image)
                                        @if ($loop->first)
                                            <li data-target="#productsInnerCarousel" data-slide-to="0" class="ml-0 active">
                                        @else
                                            <li data-target="#productsInnerCarousel" data-slide-to="{{$index}}" class="ml-0">
                                                @endif
                                                <div class="active-border-top"></div>
                                                <div class="active-border-bottom"></div>
                                                <div class="products-carousel-indicators"
                                                     style="background-image:url('{{asset('/uploads/products/'.$product->id.'/'.$image->path)}}')"></div>
                                            </li>
                                            @endforeach
                                </ol>
                    </div>

                </div>
                <div class="col-sm-12 col-md-6">
                    <div class="d-none d-md-block product-name">Marble</div>
                    <h6 class="d-none d-md-block product-number">{{$product->code}}</h6>
                    <ul class="nav icons-list">

                        @foreach(explode('|',$product->icons) as $id)
                            @if($id=='')
                                @continue
                            @endif
                            <li class="nav-item icon-item">
                                <img src="{{asset('svg/icons/'.$id.'.svg')}}"><br/>
                                <span>{{__('options.icons')[$id]}}</span>
                            </li>
                        @endforeach
                    </ul>
                    <p class="text-product-in">Finish:
                        @foreach(explode('|',$product->finish) as $id)
                            @if($id=='')
                                @continue
                            @endif
                            {{__('options.finish')[$id]}},
                        @endforeach
                    </p>
                    <p class="text-product-in">1m<sup>2</sup> Price: &nbsp; <span
                                class="price">{{$product->price}} GEL</span></p>
                    <button class="btn fill-the-form" type="button" data-toggle="modal" data-target="#FillTheFormModal">Fill
                        the form
                    </button>
                </div>
            </div>
        </div>
    </div>
        <!----------////////// end banner section  -------------->

    <!----------  start product list section  -------------->
    <section id="products_list">
        <div class="container">
            <div class="row">

                <div class="col-12">
                    <div class="row">
                        <div class="col-12 other-products">Other Products</div>
                        <div class="col-6 col-md-3 product-list-item">
                            <div class="product-list-image" style="background-image:url(images/3.png);"></div>
                            <a href="#"><h3>CREMA MARBLE LIGHT 40 FRL</h3></a>
                        </div>
                        <div class="col-6 col-md-3 product-list-item">
                            <div class="product-list-image" style="background-image:url(images/7.png);"></div>
                            <a href="#"><h3>BIANCO CARRARA</h3></a>
                        </div>
                        <div class="col-6 col-md-3 product-list-item">
                            <div class="product-list-image" style="background-image:url(images/marbel.jpg);"></div>
                            <a href="#"><h3>STATUARIETTO</h3></a>
                        </div>
                        <div class="col-6 col-md-3 product-list-item">
                            <div class="product-list-image" style="background-image:url(images/11.jpg);"></div>
                            <a href="#"><h3>ARABESCATO PINK</h3></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!----------////////// end section  -------------->

    <!-------//////////// filter modal  ------->
    <div class="modal fade" id="myModalBottom" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
         style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-bottom">
            <div class="modal-content">
                <div class="modal-header" id="modalBottomHeader">
                    <h5 class="filter-btn">Filter</h5>
                    <h5 class="filter-btn text-right">Clear all</h5>

                </div>
                <div class="modal-body p-4">
                    <!---collapse--->
                    <div class="accordion" id="accordionExampleMobile">
                        <div class="card">
                            <div class="filter-title" id="headingOneMobile">
                                <button class="btn btn-link" type="button" data-toggle="collapse"
                                        data-target="#collapseOneMobile" aria-expanded="false"
                                        aria-controls="collapseOneMobile">
                                    Materials
                                </button>

                            </div>

                            <div id="collapseOneMobile" class="collapse" aria-labelledby="headingOneMobile"
                                 data-parent="#accordionExampleMobile">
                                <div class="card-body">
                                    <label class="checkbox-container">
                                        <input type="checkbox" checked="checked">
                                        <span class="checkmark"></span>
                                        Marble
                                    </label>

                                    <label class="checkbox-container">
                                        <input type="checkbox">
                                        <span class="checkmark"></span>
                                        Travertini
                                    </label>

                                    <label class="checkbox-container">
                                        <input type="checkbox">
                                        <span class="checkmark"></span>
                                        Granit
                                    </label>

                                    <label class="checkbox-container">
                                        <input type="checkbox">
                                        <span class="checkmark"></span>
                                        Onix
                                    </label>
                                    <label class="checkbox-container">
                                        <input type="checkbox">
                                        <span class="checkmark"></span>
                                        Limestone
                                    </label>
                                    <label class="checkbox-container">
                                        <input type="checkbox">
                                        <span class="checkmark"></span>
                                        Sandstone
                                    </label>
                                    <label class="checkbox-container">
                                        <input type="checkbox">
                                        <span class="checkmark"></span>
                                        Georgian stone
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="filter-title" id="headingTwoMobile">

                                <button class="btn btn-link collapsed" type="button" data-toggle="collapse"
                                        data-target="#collapseTwoMobile" aria-expanded="false"
                                        aria-controls="collapseTwoMobile">
                                    Color
                                </button>

                            </div>
                            <div id="collapseTwoMobile" class="collapse" aria-labelledby="headingTwoMobile"
                                 data-parent="#accordionExampleMobile">
                                <div class="card-body pt-0 pb-0">
                                    <label class="color-checkbox-container"
                                           style="background-color:#ffffff; border:1px solid #707070;">
                                        <input type="checkbox">
                                        <span class="checkmark"></span>
                                    </label>

                                    <label class="color-checkbox-container" style="background-color:#b9ab9a;">
                                        <input type="checkbox">
                                        <span class="checkmark"></span>
                                    </label>

                                    <label class="color-checkbox-container" style="background-color:#e6c8cc;">
                                        <input type="checkbox">
                                        <span class="checkmark"></span>
                                    </label>
                                    <label class="color-checkbox-container" style="background-color:#000000;">
                                        <input type="checkbox">
                                        <span class="checkmark"></span>
                                    </label>

                                    <label class="color-checkbox-container" style="background-color:#a82313;">
                                        <input type="checkbox" checked>
                                        <span class="checkmark"></span>
                                    </label>

                                    <label class="color-checkbox-container" style="background-color:#ffa801;">
                                        <input type="checkbox">
                                        <span class="checkmark"></span>
                                    </label>
                                    <label class="color-checkbox-container" style="background-color:#b4b6b4;">
                                        <input type="checkbox">
                                        <span class="checkmark"></span>
                                    </label>
                                    <label class="color-checkbox-container" style="background-color:#4e6986;">
                                        <input type="checkbox">
                                        <span class="checkmark"></span>
                                    </label>

                                    <label class="color-checkbox-container" style="background-color:#b07a60;">
                                        <input type="checkbox">
                                        <span class="checkmark"></span>
                                    </label>

                                    <label class="color-checkbox-container" style="background-color:#7d897c;">
                                        <input type="checkbox">
                                        <span class="checkmark"></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="filter-title" id="headingThreeMobile">

                                <button class="btn btn-link collapsed" type="button" data-toggle="collapse"
                                        data-target="#collapseThreeMobile" aria-expanded="false"
                                        aria-controls="collapseThreeMobile">
                                    Finish
                                    <i class="fas fa-chevron-down"></i>

                                </button>

                            </div>
                            <div id="collapseThreeMobile" class="collapse" aria-labelledby="headingThreeMobile"
                                 data-parent="#accordionExampleMobile">
                                <div class="card-body">
                                    <label class="checkbox-container">
                                        <input type="checkbox" checked="checked">
                                        <span class="checkmark"></span>
                                        Sand Blast
                                    </label>

                                    <label class="checkbox-container">
                                        <input type="checkbox">
                                        <span class="checkmark"></span>
                                        Brushed
                                    </label>

                                    <label class="checkbox-container">
                                        <input type="checkbox">
                                        <span class="checkmark"></span>
                                        Flamed
                                    </label>

                                    <label class="checkbox-container">
                                        <input type="checkbox">
                                        <span class="checkmark"></span>
                                        Brush Hammered
                                    </label>
                                    <label class="checkbox-container">
                                        <input type="checkbox">
                                        <span class="checkmark"></span>
                                        Polished
                                    </label>
                                    <label class="checkbox-container">
                                        <input type="checkbox">
                                        <span class="checkmark"></span>
                                        Honed
                                    </label>
                                    <label class="checkbox-container">
                                        <input type="checkbox">
                                        <span class="checkmark"></span>
                                        Aged
                                    </label>
                                    <label class="checkbox-container">
                                        <input type="checkbox">
                                        <span class="checkmark"></span>
                                        Skratched
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!---collapse--->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn filter-btn m-auto" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>

    <!-- fill the form Modal -->
    <div class="modal fade" id="FillTheFormModal" tabindex="-1" role="dialog" aria-labelledby="FillTheFormModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="wrap-contact2 ">
                    <form class="contact2-form validate-form" autocomplete="off">
          <span class="contact2-form-title">
            Fill the Form
          </span>
                        <div class="wrap-input2 validate-input" data-validate="Name is required">
                            <input class="input2" type="text" name="name">
                            <span class="focus-input2" data-placeholder="Your name"></span>
                        </div>
                        <div class="wrap-input2 validate-input" data-validate="Valid email is required: ex@abc.xyz">
                            <input class="input2" type="text" name="email">
                            <span class="focus-input2" data-placeholder="Your Mail"></span>
                        </div>

                        <div class="wrap-input2 validate-input" data-validate="Message is required">
                            <textarea class="input2" name="message"></textarea>
                            <span class="focus-input2" data-placeholder="Your question"></span>
                        </div>
                        <div class="container-contact2-form-btn justify-content-end">
                            <div class="wrap-contact2-form-btn">
                                <button class="contact2-form-btn">
                                    <img src="{{asset('images/send.png')}}"/>&nbsp;&nbsp;Send
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>



@endsection

@push('end-of-body')


@endpush