

<!-- Modal -->
<div class="modal fade modal-login" id="modal-login" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content bg-light1">
            <div class="modal-header">
                <h1 class="modal-title fs-6" id="exampleModalLabel">{{__('web.login_regist')}}</h1>
                <button type="button" class="btn-close small" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-0">
                <div class="login-imgs-sliders">
                    <div class="marq-slider" dir="rtl">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="img">
                                    <img src="{{url('')}}/assets/web/images/marq/4.png" alt="">
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="img">
                                    <img src="{{url('')}}/assets/web/images/marq/5.png" alt="">
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="img">
                                    <img src="{{url('')}}/assets/web/images/marq/lg.png" alt="">
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="img">
                                    <img src="{{url('')}}/assets/web/images/marq/6.png" alt="">
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="img">
                                    <img src="{{url('')}}/assets/web/images/marq/7.png" alt="">
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="img">
                                    <img src="{{url('')}}/assets/web/images/marq/8.png" alt="">
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="img">
                                    <img src="{{url('')}}/assets/web/images/marq/9.png" alt="">
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="img">
                                    <img src="{{url('')}}/assets/web/images/marq/10.png" alt="">
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="img">
                                    <img src="{{url('')}}/assets/web/images/marq/11.png" alt="">
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="img">
                                    <img src="{{url('')}}/assets/web/images/marq/12.png" alt="">
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="img">
                                    <img src="{{url('')}}/assets/web/images/marq/1.png" alt="">
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="img">
                                    <img src="{{url('')}}/assets/web/images/marq/2.png" alt="">
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="img">
                                    <img src="{{url('')}}/assets/web/images/marq/3.png" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="marq-slider" dir="ltr">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="img">
                                    <img src="{{url('')}}/assets/web/images/marq/6.png" alt="">
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="img">
                                    <img src="{{url('')}}/assets/web/images/marq/7.png" alt="">
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="img">
                                    <img src="{{url('')}}/assets/web/images/marq/8.png" alt="">
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="img">
                                    <img src="{{url('')}}/assets/web/images/marq/1.png" alt="">
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="img">
                                    <img src="{{url('')}}/assets/web/images/marq/2.png" alt="">
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="img">
                                    <img src="{{url('')}}/assets/web/images/marq/3.png" alt="">
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="img">
                                    <img src="{{url('')}}/assets/web/images/marq/4.png" alt="">
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="img">
                                    <img src="{{url('')}}/assets/web/images/marq/5.png" alt="">
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="img">
                                    <img src="{{url('')}}/assets/web/images/marq/lg.png" alt="">
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="img">
                                    <img src="{{url('')}}/assets/web/images/marq/9.png" alt="">
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="img">
                                    <img src="{{url('')}}/assets/web/images/marq/10.png" alt="">
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="img">
                                    <img src="{{url('')}}/assets/web/images/marq/11.png" alt="">
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="img">
                                    <img src="{{url('')}}/assets/web/images/marq/12.png" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="marq-slider" dir="rtl">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="img">
                                    <img src="{{url('')}}/assets/web/images/marq/1.png" alt="">
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="img">
                                    <img src="{{url('')}}/assets/web/images/marq/11.png" alt="">
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="img">
                                    <img src="{{url('')}}/assets/web/images/marq/12.png" alt="">
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="img">
                                    <img src="{{url('')}}/assets/web/images/marq/lg.png" alt="">
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="img">
                                    <img src="{{url('')}}/assets/web/images/marq/6.png" alt="">
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="img">
                                    <img src="{{url('')}}/assets/web/images/marq/7.png" alt="">
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="img">
                                    <img src="{{url('')}}/assets/web/images/marq/2.png" alt="">
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="img">
                                    <img src="{{url('')}}/assets/web/images/marq/3.png" alt="">
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="img">
                                    <img src="{{url('')}}/assets/web/images/marq/4.png" alt="">
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="img">
                                    <img src="{{url('')}}/assets/web/images/marq/5.png" alt="">
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="img">
                                    <img src="{{url('')}}/assets/web/images/marq/8.png" alt="">
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="img">
                                    <img src="{{url('')}}/assets/web/images/marq/9.png" alt="">
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="img">
                                    <img src="{{url('')}}/assets/web/images/marq/10.png" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mod-content p-4">
                    <ul class="nav nav-pills custom-pills mx-auto mb-4" id="pills-tab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="pills-login-tab" data-bs-toggle="pill" data-bs-target="#pills-login" type="button" role="tab" aria-controls="pills-login" aria-selected="true">{{__('web.login')}}</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="pills-register-tab" data-bs-toggle="pill" data-bs-target="#pills-register" type="button" role="tab" aria-controls="pills-register" aria-selected="false">{{__('web.regist')}}</button>
                        </li>
                    </ul>
                    <div class="tab-content" id="pills-tabContent">
                        <div class="tab-pane fade show active" id="pills-login" role="tabpanel" aria-labelledby="pills-login-tab" tabindex="0">
                            <div class="text-item">
                                <h6> {{__('web.goto_account')}} </h6>
                                <div class="text"> {{__('web.user_email_login')}} </div>
                                <form action="{{route('web.login')}}" method="POST" onsubmit="sendCode(this)">
                                    <div class="form-group mt-3">
                                        <label for="" class="mb-2"> {{__('web.email')}} </label>
                                        <input type="email" name="email" class="form-control" placeholder="">
                                    </div>
                                    <button type="submit" class="butn w-100 mt-4">
                                        <span> {{__('web.login')}} </span>
                                    </button>
                                </form>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="pills-register" role="tabpanel" aria-labelledby="pills-register-tab" tabindex="0">
                            <div class="text-item">
                                <h6> {{__('web.regist_account')}} </h6>
                                <div class="text"> {{__('web.use_email_regist')}} </div>
                                <form action="{{route('web.regist')}}" method="POST" onsubmit="sendCode(this)">
                                    <div class="form-group mt-3">
                                        <label for="" class="mb-2"> {{__('web.email')}} </label>
                                        <input type="email" name="email" class="form-control" placeholder="">
                                    </div>
                                    <button type="submit" class="butn w-100 mt-4">
                                        <span> {{__('web.regist_new')}} </span>
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade modal-verify" id="modal-verify" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content bg-light1">
            <div class="modal-header">
                <h1 class="modal-title fs-6" id="exampleModalLabel"> {{__('web.enter_code')}}</h1>
                <button type="button" class="btn-close small" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-0">
                <div class="mod-content p-4">
                    <form action="{{route('web.verify')}}" class="form-box" method="post" onsubmit="formAction(this)">
                        @CSRF
                        <input type="hidden" name="email" id="verifyEmail">
                        <div class="title-wrapper mb-4 text-center">
                            <div class="text "> {{__('web.code_sent')}}</div>
                        </div>

                        <div class="code-group">
                                <input type="text" name="code_1" class="item codeItem" maxlength="1" placeholder="">
                                <input type="text" name="code_2" class="item codeItem" maxlength="1" placeholder="">
                                <input type="text" name="code_3" class="item codeItem" maxlength="1" placeholder="">
                                <input type="text" name="code_4" class="item codeItem" maxlength="1" placeholder="">
                            </div>
                        <div class="text text-center mt-3">
                            {{__('web.ask_code_after')}}
                            <span class="code-countdown cr-blue ms-2"></span>
                            <button type="button" onclick="resendCode(this)" action="{{route('web.resend.code')}}" class="resend-btn cr-blue text-decoration-underline d-none" id="resend-btn"> {{__('web.resend_code')}} </button>
                        </div>
                        <div class="button_su w-100 mt-4">
                            <span class="su_button_circle bg-dark1 desplode-circle"></span>
                            <button type="submit" class="butn button_su_inner bg-blue py-2 w-100">
                                <span class="button_text_container">{{__('web.sure_regist')}}</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modal category -->
<div class="modal fade modal-category" id="modal-category" tabindex="-1" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <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 class="modal-cat-content">
                    <div class="line-title mb-4"> <h5 class="bg-white mx-auto px-4"> {{__('web.pick_type')}} </h5> </div>
                    <div class="row">
                        @foreach($types as $row)
                            <div class="col-lg-6">
                                <a href="{{route('web.change.type').'?type_id='.$row->id}}" class="cat-item">
                                    <div class="img">
                                        <img src="{{asset($row->image)}}" alt="" class="img-cover">
                                    </div>
                                    <h5> {!! $row->title !!} </h5>
                                </a>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

