@extends('layouts.main')
@section('title', $title)
@section('meta')
    @foreach($meta as $tag)
        <meta name="{{$tag->name}}" content="{{$tag->content}}">
    @endforeach
@stop

@section('content')

    <section class="page-title  ls s-pb-30 s-pt-100 corner-title ls invise overflow-visible">
        <div class="container">
            <div class="row mt-20">
                <div class="col-md-12 text-center">
                    <h1 class="font--lg text-uppercase font-weight-bold">Web <span class="txt-blue">Applications</span> </h1>
                </div>
            </div>
        </div>
    </section>

    <section class="ls s-pt-50 s-pb-100 container-px-0 gallery-list">
        <div class="container">
            @foreach ($rows as $key => $project)
                @if($project->type === 'web')
                    <x-portfolio-card showDemoButton="true" :url="$project->url"  :id="$project->id" cardType="horizontal" :isReverse="$key % 2 == 0" :linkTo="$project->page_name" :thumbnail="$project->thumbnail" :title="$project->name" :description="$project->description"/>
                @endif
            @endforeach
        </div>
    </section>

    <section class="page-title  ls corner-title ls invise overflow-visible">
        <div class="container">
            <div class="row mt-20">
                <div class="col-md-12 text-center">
                    <h1 class="font--lg text-uppercase font-weight-bold">Mobile <span
                                class="txt-blue">Applications</span></h1>
                </div>
            </div>
        </div>
    </section>

    <section class="ls s-pt-50 s-pb-100 container-px-0 gallery-list">
        <div class="container">
                <div class="row">
                    @foreach ($rows as $key => $project)
                        @if($project->type === 'mobile')
                        <div class="col-md-12">
                            <x-portfolio-card  :id="$project->id" cardType="horizontal" :isReverse="$key % 2 == 0" :linkTo="$project->page_name" :thumbnail="$project->thumbnail" :title="$project->name" :description="$project->description"/>
                        </div>
                        @endif
                    @endforeach
                </div>
        </div>
    </section>
    <div class="modal fade" id="demoRequestModal" tabindex="-1" role="dialog" aria-labelledby="Demo Request"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content border-shadow request-form-container">
                <div class="modal-body p-0">
                    <form id="request-demo-form" class="form" method="POST" action="/demo-request">
                        <div class="alert alert-info" role="alert">
                            For a demo, please send us your contact details
                        </div>
                        <input type="hidden" value="" id="selected-demo-id">

                        <h4 class="text-center" id="selected-demo-title"></h4>

                        <div class="form-group">
                            <label class="" for="name">Name *</label>
                            <input class="form-control" type="text" name="name" placeholder="Type your name">
                            <small class="text-danger hidden"></small>
                        </div>

                        <div class="form-group">
                            <label class="" for="email">Email *</label>
                            <input class="form-control" type="text" name="email" placeholder="Type your email">
                            <small class="text-danger hidden"></small>
                        </div>

                        <div class="form-group">
                            <label class="" for="phone">Phone number *</label>
                            <input class="form-control" type="text" name="phone" placeholder="Type your phone number">
                            <small class="text-danger hidden"></small>
                        </div>
                        <div class="form-row justify-content-center mb-3">
                            <div id="re-captcha-2"></div>
                            <div class="captcha-err">
                                <small class="text-danger"></small>
                            </div>
                        </div>


                        <div class="form-group text-center mt-2">
                            <button type="button" class="btn btn-secondary btn-close" data-dismiss="modal">Close</button>
                            <button id="demo-request-btn" disabled class="btn__primary btn ">
                                Request
                            </button>
                        </div>

                        <div id="demo-request-success" class="hidden">
                            <div class="alert alert-success" role="alert">
                                Thank you. We will get back to you within 24 hours.
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@stop