@extends('layouts.app')

@section('content')
    <div class="row py-3">
        <div class="col-md-12">

            <h3 class="">Tarifs - Liste des Packs disponibles</h3>

            <div class="row">
                @if(isset($openCreditPackage))
                    <div class="col-md-12">
                        <div class="card my-3">
                            <div
                                class="card-header fw-bold text-center bg-secondary color-on-bg-secondary">{{$openCreditPackage->name}} </div>
                            <div class="card-body d-flex align-items-center">
                                <div class="card-text flex-grow-1">
                                    <label for="amount">Montant souhaité</label>
                                    <div class="input-group mb-2">
                                        <input id="amount" type="number" name="amount" value="100" min="1"
                                               class="form-control {{ $errors->has('amount') ? ' is-invalid' : '' }}"
                                               placeholder="Montant souhaité">
                                        <div class="input-group-append">
                                            <div class="input-group-text">€ HT <div id="openCreditPackage"></div></div>
                                        </div>
                                        <div id="amount-error" class="invalid-feedback d-none">
                                            Le amount demandé est invalide
                                        </div>
                                    </div>
                                </div>

                                <a href="{{ route('credit_packages.show', ['partnerSlug' => $currentPartner->slug, 'creditPackage' => $openCreditPackage, 'amount' => 100]) }}"
                                   data-href="{{ route('credit_packages.show', ['partnerSlug' => $currentPartner->slug, 'creditPackage' => $openCreditPackage]) }}"
                                   id="open-submit-button" class="btn btn-sm btn-secondary ms-2"
                                   style="margin-top: 1.4rem !important;">
                                    <i class="fas fa-shopping-basket pt-1" aria-hidden="true"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                @endif
            </div>

            <div class="row">
                @foreach($currentPartner->creditPackages->where('is_disabled', false)->where('type', 'static') as $creditPackage)
                    <div class="col-md-12">
                        <div class="card my-3">
                            <div
                                class="card-header fw-bold text-center bg-primary color-on-bg-primary">{{$creditPackage->name}} </div>
                            <div class="card-body d-flex align-items-center">
                                <div class="card-text flex-grow-1">
                                    {{ number_format($creditPackage->amount, 0, ',', ' ') }}€ HT <div id="staticCreditPackage-{{$creditPackage->id}}"></div>
                                </div>
                                <a href="{{ route('credit_packages.show', ['partnerSlug' => $currentPartner->slug, 'creditPackage' => $creditPackage]) }}"
                                   class="btn btn-sm btn-secondary">
                                    {{--                            <a href="#">--}}
                                    <i class="fas fa-shopping-basket pt-1" aria-hidden="true"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <h4 class="mt-3">Comment comptabiliser vos SMS</h4>
            <div class="card mb-4">
                <div class="card-body">
                    <div class="card-text">
                        <ul class="clist clist-angle">
                            <li>1 SMS simple 149 caractères = 1 SMS</li>
                            <li>1 SMS double 291 caractères = 2 SMS</li>
                        </ul>
                        <p>Consommez vos unités pour l’envoi d'un ou plusieurs messages, comme bon vous semble… dans la
                            limite des unités disponibles.</p>
                        <p>Exemple pour l’achat de 1000€ :</p>
                        <ul class="clist clist-angle">
                            <li>Vous pouvez envoyer une campagne de 1 667 SMS simples de prospection</li>
                            <li>Vous pouvez envoyer 4 campagnes quand vous voulez de 417 SMS simples de prospection</li>
                            <li>Vous pouvez envoyer une campagne de 833 SMS doubles de prospection (entre 150 et 291
                                caractères)
                            </li>
                            <li>Vous pouvez envoyer une campagne de 2 500 SMS simples de fidélisation</li>
                            <li>Vous pouvez envoyer 5 campagnes quand vous voulez de 500 SMS simples de fidélisation
                            </li>
                            <li>Vous pouvez envoyer une campagne de 1 250 SMS doubles de fidélisation</li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection

@push('scripts_after')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const $elOpenSubmitButton = $('#open-submit-button');
            const $elOpenSubmitButtonLink = $elOpenSubmitButton.data('href');
            const $elOpenVolumeInput = $('#amount');
            const $elOpenVolumeError = $('#amount-error');

            getVolumeFromCost($elOpenVolumeInput.val()).then(response => {
                $('#openCreditPackage').append(`  soit ${response.data.volume} SMS`)
            })
            $elOpenVolumeInput.on('keyup', (event) => {
                console.log(event.currentTarget.value)

                if (event.currentTarget.value < 1) {
                    $elOpenSubmitButton.addClass('disabled');
                    $elOpenSubmitButton.attr('style', "")
                    $elOpenVolumeInput.addClass('is-invalid');
                    $elOpenVolumeError.removeClass('d-none');
                } else {
                    $elOpenSubmitButton.removeClass('disabled');
                    $elOpenSubmitButton.attr('style', "margin-top: 1.4rem !important;")
                    $elOpenVolumeInput.removeClass('is-invalid');
                    $elOpenVolumeError.addClass('d-none');
                    $elOpenSubmitButton.attr('href', $elOpenSubmitButtonLink + '/' + event.currentTarget.value)
                    getVolumeFromCost(event.currentTarget.value).then(response => {
                        $('#openCreditPackage').html(` soit ${response.data.volume} SMS`)
                    })
                }
            })
        });

        function getVolumeFromCost(cost) {
            let axiosParams = {
                url: `{!! env("ADMIN_URL") !!}/api/get_volume_from_cost`,
                method: 'POST',
                data: {
                    cost
                }
            };

            return axios(axiosParams)
        }

    </script>
@endpush