@extends('layouts.app')
@section('content')

<!-- FilePond Start -->
@section('head')
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>

<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet">
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>

<script src="https://unpkg.com/filepond-plugin-file-encode/dist/filepond-plugin-file-encode.js"></script>

<script src="https://unpkg.com/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.js"></script>


<link href="https://unpkg.com/filepond-plugin-file-poster/dist/filepond-plugin-file-poster.css" rel="stylesheet" />
<script src="https://unpkg.com/filepond-plugin-file-poster/dist/filepond-plugin-file-poster.js"></script>

<script src="https://unpkg.com/filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.js"></script>


<script>
    FilePond.registerPlugin(FilePondPluginImagePreview,FilePondPluginFileValidateType,FilePondPluginFileEncode,FilePondPluginFilePoster,FilePondPluginFileValidateSize);
</script>

@endsection

<!-- FilePond End -->

<div class="container border mt-4 mb-4">

    @if($userSubscribtionStatus == 'none' || $userSubscribtionStatus == 'disable' )
        <div>

            <div class="text-center">
                <h2 class="mb-1 fw-bold">Welcome To Resagro</h2>
                <p class="op-07 mb-4">Please enter your details to complete.</p>
            </div>

            <p>
                Pour faciliter le processus de paiement de votre abonnement, veuillez effectuer un virement bancaire sur notre compte.
                Voici les détails nécessaires :
            </p>

            {{-- <p>
                <ol>
                    <li>Nom du bénéficiaire: [Votre Nom]</li>
                    <li>IBAN: [Votre IBAN]</li>
                    <li>BIC: [Votre BIC]</li>
                    <li>RIB: 000045454540545450</li>
                </ol>
            </p> --}}
        </div>

        <div class="row">
            <div class="col-lg-12">
                <form id="data-plan" class="row" action="{{route('savesubscribe')}}" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="form-process">
                        <div class="css3-spinner">
                            <div class="css3-spinner-scaler"></div>
                        </div>
                    </div>
                    <div class="col-12 form-group">
                        <div class="row gutter-50 justify-content-center">

                            <div id="pricing-switch" class="pricing-tabs col-xl-12 col-lg-12 col-md-12">


                            @foreach ($packs as $pack)
                                <label for="pricing-plan{{$pack->id}}"
                                    class="d-flex align-items-center border rounded p-3 ls-0 mb-2 text-transform-none">
                                    <input type="radio" {{ $loop->first ? 'checked' : '' }} name="pack_id" id="pricing-plan{{$pack->id}}" value="{{$pack->id}}">
                                    <div class="mx-3 pe-2 pe-lg-3">
                                        <span class="mb-0 ">{{$pack->titre}}</span>
                                    </div>
                                    <div class="ms-auto">
                                        <div class="pts-content pts-content-false">
                                            <h4 class="mb-0 price">{{$pack->prix}} Dhs <small>/ {{$pack->days}} jours</small></h4>
                                        </div>
                                        <div class="pts-content pts-content-true d-none">
                                            <h3 class="mb-0 price">$182 <small>/ yearly</small></h3>
                                        </div>
                                    </div>
                                </label>
                            @endforeach

                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="card bg-light">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-12 form-group">
                                        <label>Preuve de paiement</label>
                                        <input type="file" id="filepond-upload" name="preuve" class="file-loading" accept="image/*, application/pdf">
                                        @error('preuve')
                                        <div class="text-danger" role="alert">
                                            {{ $message }}
                                        </div>
                                        @enderror
                                    </div>
                                    <div class="col-12 form-group">
                                        <label>Additional Notes:</label>
                                        <textarea name="note" id="freelance-quote-additional-notes" class="form-control"
                                            cols="30" rows="8"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-12">
                        <button type="submit" name="data-plan-submit" class="btn btn-primary mt-3 w-100">S'abonner</button>
                    </div>

                    <input type="hidden" name="prefix" value="data-plan-">
                    <input type="hidden" name="subject" value="New Data Plan Request">
                    <input type="hidden" name="html_title" value="Data Plan Details">
                </form>
            </div>



        </div>
    @else
            @if($userSubscribtionStatus == 'pending')

            <div class="text-center">
                <h2 class="mb-1 fw-bold mt-4">Thank You 🙏</h2>
                <p class="op-07 mb-4">Vous avez une demande en attente. <br> Merci nous vous contacterons dans les plus brefs délais
                    <br>
                    Si vous avez besoin de plus d'informations <br> veuillez nous contacter au : +212 6 61 00 00 00
                </p>
            </div>

            @endif

            @if($userSubscribtionStatus == 'active')
                <div class="text-center">
                    <h2 class="mb-1 fw-bold mt-4">Welcome Back {{$loggedUserInfo->name}} 👋</h2>
                    <p class="op-07 mb-4">
                        Vous avez déjà un compte actif
                    </p>
                </div>
            @endif

    @endif

</div>


<script>
    // Create
    const inputElement = document.querySelector('#filepond-upload');
    const pondCreate = FilePond.create(inputElement, {
        allowImagePreview: true,
        allowDrop: true,
        credits: false,
        maxFileSize: '5mb',
        labelIdle: 'Faites glisser et déposez vos fichiers ou <span class="filepond--label-action"> parcourez </span>',
        labelInvalidField: 'Field contains invalid files',
        labelFileLoading: 'Loading',
        labelFileProcessing: 'Uploading',
        labelFileProcessingComplete: 'Upload complete',
        labelFileProcessingAborted: 'Upload cancelled',
        labelFileProcessingError: 'Error during upload',
        instantUpload: true,
    });


</script>
@endsection