@extends('frontend.layouts.master')

@section('page_title')
    {{ __('account.dashboard.title') }}
@endsection

@section('head')
@endsection

@section('content-wrapper')
    <section style="background-color: #eee;">
        <div class="container mtop130 py-5">
            <div class="row">
                <div class="col text-center">
                    <h3>{{ __('account.dashboard.title') }}</h3>
                    <p>{!! __('account.dashboard.welcome', [
                        'customer_name' => $user['nom'],
                        'company_name' => $currentCompany->name
                    ]) !!}</p>
                    <p>{{ __('account.dashboard.conds.text-1') }}
                        <a class="cond-link-into-dash" target="_blank" href="{{ __('account.register.cond-link') }}">{{ __('account.dashboard.conds.here') }}</a>{{ __('account.dashboard.conds.text-2') }}
                    </p>
                    
                    @if($currentCompany->code == 'bonobonitopalma')
                    <p><small><b>Atención</b>, solo se permite el pago con tarjetas de crédito o débito nacionales. Si teneis problemas con el pago, aseguraros que vuestra tarjeta esté vinculada a un Banco Oficial Español o intentad el pago con otra tarjeta</small>.</p>
                    
                    <div style="    font-size: 25px;" class="alert alert-danger">
                        Ya se han agotado los bonos, ya no se pueden comprar más bonos.
                    </div>
                    @endif
                </div>
            </div>

            <div class="row d-flex justify-content-center">
                <div class="col-lg-10">
                    <div class="card mb-4">
                        <div class="card-body">
                            <div class="text-center">
                                <span id="span-profile-info">{{ __('account.dashboard.profile.title') }}</span>
                            </div>
                            <div class="card mb-4" id="row-profile-info" style="display: none;">
                                <div class="card-body">
                    
                                    <div class="row">
                                        <div class="col-sm-3">
                                            <p class="mb-0">{{ __('account.dashboard.profile.full-name') }}</p>
                                        </div>
                                        <div class="col-sm-9">
                                            <p class="text-muted mb-0">{{ $user['nom'] . ' ' . $user['cognom1'] }}</p>
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="row">
                                        <div class="col-sm-3">
                                            <p class="mb-0">{{ __('account.dashboard.profile.email') }}</p>
                                        </div>
                                        <div class="col-sm-9">
                                            <p class="text-muted mb-0">{{ $user['email'] }}</p>
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="row">
                                        <div class="col-sm-3">
                                            <p class="mb-0">{{ __('account.dashboard.profile.identity-document') }}</p>
                                        </div>
                                        <div class="col-sm-9">
                                            <p class="text-muted mb-0">{{ $user['dni'] }}</p>
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="row">
                                        <div class="col-sm-3">
                                            <p class="mb-0">{{ __('account.dashboard.profile.phone') }}</p>
                                        </div>
                                        <div class="col-sm-9">
                                            <p class="text-muted mb-0">{{ $user['tel_fix'] ?? '' }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card mb-4 section-solds-movements mb-4 text-center">
                        <div class="card-body">
                            <h5 class="header-section-solds-movements card-title">{{ __('account.dashboard.solds-movements.title') }}</h5>
                            <h6 class="card-subtitle mb-2 text-muted">{!! __('account.dashboard.solds-movements.subtitle', ['sold' => $totalSold . '€']) !!}</h6>
                            <button class="header-section-solds-movements site-btn link wow bounceInUp">{{ __('account.dashboard.solds-movements.more-info') }}</button>
                            <div id="body-section-solds-movements" style="display:none;">
                                
                                <div class="container d-flex justify-content-center flex-wrap">
                                    @foreach($solds as $index => $sold)

                                    <div class="card m-2 text-center" style="width: 15rem;">
                                        <div class="card-body">
                                            <h4 class="card-title">{{ $sold['nomMoneda'] }}</h4>

                                            <p>{{ $sold['saldo'] . ' ' . $sold['simbol'] }}</p>

                                            <a href="{{ route('backend.dashboard.movements.index', $sold['idMoneda']) }}" class="btn btn-light btn-sm">{{ __('account.dashboard.solds-movements.view-movements') }}</a>
                                        </div>

                                    </div>
                                    
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card mb-4 mb-md-0">
                        <div class="card-body">
                            <p class="mb-4 text-center title-bonus">
                                @if($currentCompany->code == 'valspalmaactiva')

                                {{ __('account.dashboard.assign-bonus.title-dis') }}

                                @else 

                                {{ __('account.dashboard.assign-bonus.title') }}

                                @endif
                            </p>

                            @if(!count($assignBonus) && $currentCompany->code == 'bonobonitopalma')

                            <div class="alert alert-warning" role="alert">
                                <p class="text-center s-text"><i class="fa fa-info-circle"></i> {{ __('account.dashboard.assign-bonus.not-dis') }}</p>
                            </div>
                            @else
                            {{-- 'assignBonus', 'purchaseBonus', 'disponibleBonus' --}}
                            <div class="container d-flex justify-content-center flex-wrap">
                                @foreach($assignBonus as $index => $assignBonu)

                                @if($assignBonu['preu'] > 0)
                                <div class="card m-2 text-center" style="width: 15rem;">
                                    <div class="card-body d-flex flex-nowrap flex-column justify-content-between">
                                        <h4 class="card-title">{{ $assignBonu['codi'] }}</h4>

                                        <span style="white-space: normal;" class="badge badge-warning">Solo se permite el pago con tarjetas Nacionales.</span>

                                        <p>{{ __('account.dashboard.assign-bonus.disponibles') }} {{ $assignBonu['disponibles'] }}</p>
                                       
                                        <form method="post" action="{{ route('backend.dashboard.purchase') }}" @submit.prevent="onSubmit">
                                            
                                            @csrf

                                            <input type="hidden" name="id_descompte" value="{{ $assignBonu['id_descompte'] }}">

                                            <input type="hidden" name="_method" value="PUT">
                                            
                                            <quantity-changer importe="{{ $assignBonu['import'] }}" preu="{{ $assignBonu['preu'] }}" disponibles="{{ $assignBonu['disponibles'] }}"></quantity-changer>

                                            @if($assignBonu['num_usos_botiga'] == 0)
                                            <button type="submit" class="btn btn-success btn-assgn card-link">{{ __('account.dashboard.purchase-bonus.btn-purchase') }}</button>
                                            @endif
                                        </form>
                                    </div>
                                </div>
                                @else
                                <div class="card m-2 text-center" style="width: 15rem;">
                                    <div class="card-body d-flex flex-nowrap flex-column justify-content-between">
                                        <h4 class="card-title">{{ $assignBonu['codi'] }}</h4>

                                        <form method="post" action="{{ route('backend.dashboard.assign') }}" @submit.prevent="onSubmit">
                                            
                                            @csrf

                                            <input type="hidden" name="id_descompte" value="{{ $assignBonu['id_descompte'] }}">

                                            <input type="hidden" name="_method" value="PUT">
                                            
                                            <quantity-changer importe="{{ $assignBonu['import'] }}" preu="{{ $assignBonu['preu'] }}" disponibles="{{ $assignBonu['disponibles'] }}"></quantity-changer>

                                            @if($assignBonu['num_usos_botiga'] == 0)
                                            <button type="submit" class="btn btn-success btn-assgn card-link">{{ __('account.dashboard.assign-bonus.btn-assign') }}</button>
                                            @endif
                                        </form>
                                    </div>
                                </div>
                                @endif
                                @endforeach
                            </div>
                            @endif
                        </div>
                    </div>
                    

                    @if(count($assignedBonus))
                    <div class="card mb-4 mt-4">
                        <div class="card-body">
                            <div class="text-center title-bonus">
                                <p>{{ __('account.dashboard.assigned-bonus.title') }}</p>
                            </div>

                            <div class="container d-flex justify-content-center flex-wrap">
                                @foreach($assignedBonus as $index => $assignedBonu)

                                    @include('backend.dashboard.assigned-bonu')

                                @endforeach
                            </div>
                        </div>
                    </div>
                    @endif

                    @if(count($consumedBonus))
                    <div class="card mb-4 mt-4">
                        <div class="card-body">
                            <div class="text-center title-bonus">
                                <p>{{ __('account.dashboard.consumed-bonus.title') }}</p>
                            </div>

                            <div class="container d-flex justify-content-center flex-wrap">
                                @foreach($consumedBonus as $index => $consumedBonu)

                                    @include('backend.dashboard.consumed-bonu')

                                @endforeach
                            </div>
                        </div>
                    </div>
                    @endif

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

@endsection

@push('scripts')


<script type="text/x-template" id="quantity-changer">

    <div>
        <p>{{ __('account.dashboard.assign-bonus.sold') }}@{{ gifts }}€</p>
        <p v-if="pay > 0">{{ __('account.dashboard.assign-bonus.pay') }}@{{ pay }}€</p>

        <label>{{ __('account.dashboard.assign-bonus.quantity') }}</label>

        <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
                <div @click="decrement()" class="input-group-text">
                    <span>-</span>
                </div>
            </div>

            <input type="number" @change="change()" name="repeticio" v-model="quantity" class="form-control text-center">
        
            <div class="input-group-append">
                <div @click="increment()" class="input-group-text">
                    <span>+</span>
                </div>
            </div>

        </div>
    </div>

</script>



<script>
    var profile = false;
    var movements = false;

    $(document).ready(function(){

        $('#span-profile-info').click(function () {

            if(profile){
                $('#row-profile-info').slideUp(500);
            } else {
                $('#row-profile-info').slideDown(500);
            }
            
            profile = !profile;

        });

        $('.header-section-solds-movements').click(function () {
            if(movements){
                $('#body-section-solds-movements').slideUp(500);
            } else {
                $('#body-section-solds-movements').slideDown(500);
            }
            
            movements = !movements;
        });

    });

    Vue.component('quantity-changer', {
        
        props: ['disponibles', 'importe', 'preu'],

        template: '#quantity-changer',

        inject: ['$validator'],

        data: function() {
            return {
                quantity: 1,
                pay: parseFloat(this.preu),
                gifts: parseFloat(this.importe)
            }
        },

        methods: {
            increment: function (){
                if(this.quantity < parseInt(this.disponibles)){
                    this.quantity++;
                }
                this.pay = this.preu * this.quantity;
                this.gifts = this.importe * this.quantity;
            },

            decrement: function (){
                if(this.quantity > 1){
                    this.quantity--;
                }

                this.pay = this.preu * this.quantity;
                this.gifts = this.importe * this.quantity;
            },

            change: function () {
                this.quantity = parseInt(this.quantity);
                if(this.quantity > parseInt(this.disponibles)){
                    this.quantity = parseInt(this.disponibles);
                } else if(this.quantity < 1){
                    this.quantity = 1;
                }
                this.pay = this.preu * this.quantity;
                this.gifts = this.importe * this.quantity;
            }
        }
    });

</script>

@endpush