@extends('web.layouts.layout')

@section('container_content')
<section class="box valign">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-5 valign">
                <div class="content w-100">
                    <h3 class="title wow fadeInUp">{{ date('F', strtotime($loopDetails['loop_date'])) }}'s Loop</h3>
                    <div class="month-loop">
                        <div class="content row">
                            <div class="col-6">
                                <div class="items">
                                    <ul>
                                        <li>
                                            <p>start month</p>
                                            <span>{{ date('M Y', strtotime($loopDetails['loop_date'])) }}</span>
                                        </li>
                                        <li>
                                            <p>loop's period</p>
                                            <span>{{ $loopDetails['period'] }} months</span>
                                        </li>
                                        <li>
                                            <p>collecting month</p>
                                            <span>{{ date('M Y', strtotime($loopDetails['encashment_month'])) }}</span>
                                        </li>
                                        <li>
                                            <p>monthly share</p>
                                            <span>{{ $loopDetails['share'] }} SAR</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="items">
                                    <p>Loop value</p>
                                    <h5>{{ $loopDetails['share'] }} SAR</h5>

                                    <small>management fees</small>
                                    <span>{{ $fees['managment_fees'] }} SAR</span>

                                    <small>VAT</small>
                                    <span>{{ $fees['vat_fees'] }} SAR</span>

                                    <small>Govemmental fees</small>
                                    <span>{{ $fees['government_fees'] }} SAR</span>

                                    <p> Total Collecting Amount </p>
                                    <h5> {{ $totalShare }} SAR</h5>
                                </div>
                            </div>
                        </div>

                        @if( ! $closed )
                        <div class="btns">

                            <button type="button" {{ !$unPaidMonths ? 'disabled' : ''  }} data-toggle="modal" data-target="#actionModal" class="butn wow zoomIn payBtn  {{ !$unPaidMonths ? 'gray' : ''  }}">{{ __('loops.pay')}}</button>

                            <button type="button" data-toggle="modal" data-target="#actionModal" class="butn wow zoomIn color withdrawBtn">{{ __('loops.withdraw')}}</button>
                        </div>
                        @endif

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

            <div class="col-lg-6 offset-lg-1 valign">
                <div class="right">
                    <div class="month-circle">
                        <ul>
                            @foreach($months as $month)
                            <li class="{{ $month['class'] }}">
                                <span>{{ $month['month'] }}</span>
                                <a href="#0" disabled>
                                    <img src="{{asset('assets/web/images/icons/'.$month['image'])}}" alt="">
                                </a>
                            </li>
                            @endforeach
                        </ul>
                    </div>
                    <!-- <div class="month-share text-center mt-5">
                        <a href="#"><i class="fas fa-minus"></i></a>
                        <span>monthly share <br> 3000 SAR</span>
                        <a href="#"><i class="fas fa-plus"></i></a>
                    </div> -->
                </div>
            </div>
        </div>
    </div>
</section>
@endsection


@section('container_modals')
<div class="modal fade color-modal" id="actionModal" tabindex="-1" role="dialog" aria-labelledby="actionModalTitle" aria-hidden="true" style="z-index: 1000">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div class="row">

                    <div class="col-6">
                        <div class="info">
                            <h2 class="modal_title hide pay_title" > {{ __('loops.pay_confirmation') }} </h2>
                            <h2 class="modal_title hide withdraw_title" > {{ __('loops.withdraw_confirmation') }} </h2>
                        </div>
                    </div>

                    <div class="col-6">
                        <div class="img">
                            <img src="{{asset('assets/web/images/icons/money.svg')}}" alt=" ">
                        </div>
                    </div>

                    <div class="col-12">
                        <p class="modal_title hide withdraw_title">{!! __('loops.proccess_confirmation') !!}</p>
                    </div>

                    <div class=" col-12 ">
                        <div class="btns">
                            <!-- <a href="{{ route('loops.payshare', [ 'loop_id'=> $loopDetails['loop_id'] ] ) }}" class="butn light agreeBtn payAgreeBtn">{{ __('main.agree') }}</a> -->
                            <a href="{{ route('loops.details', [ 'loop_id'=> $loopDetails['loop_id'] ] ) }}" class="butn light agreeBtn payAgreeBtn">{{ __('main.agree') }}</a>
                            <a href="{{ route('loops.cancel', [ 'loop_id'=> $loopDetails['loop_id'] ] ) }}" class="butn light agreeBtn withdrawAgreeBtn">{{ __('main.agree') }}</a>
                            <a href="javascript:;" data-dismiss="modal" data-toggle="modal" data-target="#actionModal" class="butn light ">{{ __('main.disagree') }}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('container_js')
<script type="text/javascript">
$('.payBtn').click(function(){
    $('.modal_title,.agreeBtn').hide()
    $('.pay_title,.payAgreeBtn').show()
})
$('.withdrawBtn').click(function(){
    $('.modal_title,.agreeBtn').hide()
    $('.withdraw_title,.withdrawAgreeBtn').show()
})
</script>
@endsection