@extends('web.layouts.layout')

@section('container_content')
<form class="was-validated">
    <section class="box valign">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-5">
                    <div class="content">
                        <div class="dots wow zoomIn">
                            <span class="dot active"></span>
                            <span class="dot"></span>
                            <span class="dot"></span>
                            <span class="dot"></span>
                            <span class="dot"></span>
                            <span class="dot"></span>
                        </div>
                        <h3 class="title wow fadeInUp">Available Loops</h3>
                        <div class="sar">
                            <h5>Monthly Share Limit</h5>
                            <div class="form-group">
                                <input class="required share" type="number" name="share" min="100" max="3000" step="100" placeholder="100">
                                <button>SAR</button>
                                <div class="error">Multiples of 100 only.</div>
                            </div>
                            <span>* Only Multiply 100 numbers up to 3000 SAR</span>
                        </div>
                        <div class="cycle">
                            <h5>Cycle Period</h5>
                            <select class="required period" name="period">
                                <option value="0" selected disabled>How many months ?</option>
                                @foreach ($loopGroups as $loopGroup)
                                <option value="{{ $loopGroup->period }}"> {{ $loopGroup->period }} Months </option>
                                @endforeach
                            </select>
                        </div>
                        <button type="button" disabled class="butn wow zoomIn sendButton gray">continue</button>
                    </div>
                </div>
                <div class="col-lg-6 offset-lg-1 valign">
                    <div class="right">
                        <div class="month-circle">
                            <ul>
                                @for($i = 1; $i <= 12; $i++)
                                <li class="disable">
                                    <span>{{ date("M", mktime(0, 0, 0, $i, 1)) }}</span>
                                    <a href="#0" class="selectMonth" disabled>
                                        <label>
                                            <input type="radio" name="month" value="{{$i}}" style="display:none" />
                                            <img src="{{asset('assets/web/images/icons/add.svg')}}" alt="">
                                        </label>
                                    </a>

                                </li>
                                @endfor
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</form>
@endsection

@section('container_modals')
<!--Success Modal -->
<div class="modal fade color-modal" id="successModal"  data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="successModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-body text-center">
                <div class=" row ">
                    <div class="col-12 ">
                        <div class="img ">
                            <img src="{{asset('assets/web/images/icons/like.svg')}}" alt=" ">
                        </div>
                        <div class="info ">
                            <h2>Your Request Was <br> made successfuly </h2>
                        </div>
                    </div>

                    <div class=" col-12 ">
                        <div class="btns">
                            <a href="javascript:;" data-dismiss="modal" data-toggle="modal" data-target="#billModal" class="butn light">Show Bill</a>
                            <a href="{{ route('loops.details') }}" class="butn light">Details</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Bill Modal -->
<div class="modal fade details-modal" id="billModal" tabindex="-1" role="dialog" aria-labelledby="billModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content invoice_details">
            <div class="modal-head text-center">
                <h3>invoice number <span class="invoice_id">#125865844</span></h3>
            </div>
            <div class="modal-body">
                <div class=" row">
                    <div class="col-6">
                        <ul>
                            <li>
                                <span>date</span>
                                <p class="subscribe_date"></p>
                            </li>
                            <li>
                                <span>start month</span>
                                <p class="loop_date">{{date('M Y', strtotime($currentLoop->date))}}</p>
                            </li>
                            <li>
                                <span>collecting month</span>
                                <p class="encashment_month">jun 2020</p>
                            </li>
                            <li>
                                <span>paid months</span>
                                <p>1 months</p>
                            </li>
                            <li>
                                <span>Fees</span>
                                <p class="totalFees">150 SAR</p>
                            </li>
                        </ul>
                    </div>

                    <div class="col-6 valign">
                        <ul class="text-right w-100">
                            <li>
                                <span>time</span>
                                <p class="subscribe_time">03.00 PM</p>
                            </li>
                            <li>
                                <span>loop's period</span>
                                <p class="invoice_period">10 months</p>
                            </li>
                            <li>
                                <span>share</span>
                                <h4 class="invoice_share">3500 SAR</h4>
                            </li>
                            <li>
                                <span>total amount</span>
                                <h4 class="invoice_total">6650 SAR</h4>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="butn wow zoomIn w-100">
                    <img src="{{ asset('assets/web/images/visa.png') }} " alt="">
                    <div class="info">
                        <p>{{$currentUserInfo->name}}</p>
                        <span>4200 1244 4459 2269</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('container_js')
<script src="{{ asset('assets/web/js/lib/axios.min.js') }}"></script>
<script src="{{ asset('assets/web/js/actions.js') }}"></script>
<script type="text/javascript">
    var check_month_route= "{{ route('loops.chekMonths') }}"
    var subscribe_route= "{{ route('loops.subscribe') }}"
</script>
<script src="{{ asset('assets/web/js/loop.js') }}"></script>

@endsection