@extends('theme.template')

@section('css')

@endsection


@section('contenu')


    <div class="form-head mb-4">
        <h2 class="text-black font-w600 mb-0">Facture Annonce </h2>
    </div>

    <div class="page-titles">
        <ol class="breadcrumb">
            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-alert-triangle-filled"
                 width="50" height="25" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                 stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                <path d="M12 1.67c.955 0 1.845 .467 2.39 1.247l.105 .16l8.114 13.548a2.914 2.914 0 0 1 -2.307 4.363l-.195 .008h-16.225a2.914 2.914 0 0 1 -2.582 -4.2l.099 -.185l8.11 -13.538a2.914 2.914 0 0 1 2.491 -1.403zm.01 13.33l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -7a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z"
                      stroke-width="0" fill="currentColor"/>
            </svg>
            <li class="breadcrumb-item"><a href="javascript:void(0)">Cette section est réservée pour afficher la facture
                    de l'annonce</a></li>
        </ol>
    </div>



    <div class="row">
        <div class="col-lg-12">

            <div class="card mt-3">
                <div class="card-header"> Facture :
                    <strong>{{ \Carbon\carbon::parse($annonce->created_at)->isoFormat('D MMM YYYY')}}</strong>
                    <span class="float-right">
                    <strong>Statut:</strong> 
                    @switch($annonce->annoncement_status_valide)
                            @case(1)
                            Validé
                            @break

                            @case(0)
                            En cours de validation
                            @break

                            @default
                            Inconnu

                        @endswitch
                </span></div>
                <div class="card-body">
                    <div class="row mb-5">
                        <div class="mt-4 col-xl-3 col-lg-3 col-md-6 col-sm-6">
                            <h6>De:</h6>
                            <div><strong>MyGpost</strong></div>
                            <div>Madalinskiego 8</div>
                            <div>71-101 Szczecin, Poland</div>
                            <div>Email: mygpost@.contact.com</div>
                            <div>Tel: +48 444 666 3333</div>
                        </div>
                        <div class="mt-4 col-xl-3 col-lg-3 col-md-6 col-sm-6">
                            <h6>A:</h6>
                            <div><strong>{{$annonce->users->firstname.' '. $annonce->users->lastname}}</strong></div>
                            <div>Ville: {{$annonce->users->villeUser->ville_name}}</div>
                            <div>{{$annonce->users->villeUser->label}}</div>
                            <div>Email: {{$annonce->users->email}}</div>
                            <div>Tel: {{$annonce->users->phone_number}}</div>
                        </div>
                        <div class="mt-4 col-xl-6 col-lg-6 col-md-12 col-sm-12 d-flex justify-content-lg-end justify-content-md-center justify-content-xs-start">
                            <div class="row align-items-center">
                                <div class="col-sm-9">
                                    <div class="brand-logo mb-3">
                                        <img class="logo-abbr me-2" src="{{asset('clients/images/logo-other.png')}}"
                                             alt="" width="40px" height="40px">
                                        <img class="logo-compact" src="images/logo-text.png" alt="">
                                    </div>
                                    <span>Montant Payer: <strong
                                                class="d-block">{{$annonce->paiement->amount??'0'.'  Є'}}</strong>
                                    <strong>{{$annonce->paiement->ref_paiement??''}}</strong>
                                </span><br>
                                    {{-- <small class="text-muted">Current exchange rate 1BTC = $6590 USD</small> --}}
                                </div>
                                <div class="col-sm-3 mt-3"><img src="images/qr.png" alt="" class="img-fluid width110">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th class="center">#</th>
                                <th>Titre de l'annonce</th>
                                <th>Date debut</th>
                                <th>Date fin</th>
                                <th class="center">Nombre de Page</th>
                                <th class="right">Nombre total d'utilisateur</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td class="center">1</td>
                                <td class="left strong">{{$annonce->title_document}}</td>
                                <td class="left">{{ \Carbon\carbon::parse($annonce->date_debut)->isoFormat('D MMM YYYY') }}</td>
                                <td class="right">{{ \Carbon\carbon::parse($annonce->date_fin)->isoFormat('D MMM YYYY') }}</td>
                                <td class="center">{{$annonce->nombre_de_page}}</td>
                                <td class="right">{{$annonce->nombre_de_user}}</td>
                            </tr>

                            </tbody>
                        </table>
                    </div>
                    <div class="row">
                        <div class="col-lg-4 col-sm-5"></div>
                        <div class="col-lg-4 col-sm-5 ms-auto">
                            <table class="table table-clear">
                                <tbody>
{{--                                <tr>--}}
{{--                                    <td class="left"><strong>Subtotal</strong></td>--}}
{{--                                    <td class="right">$8.497,00</td>--}}
{{--                                </tr>--}}
{{--                                <tr>--}}
{{--                                    <td class="left"><strong>Discount (20%)</strong></td>--}}
{{--                                    <td class="right">$1,699,40</td>--}}
{{--                                </tr>--}}
{{--                                <tr>--}}
{{--                                    <td class="left"><strong>VAT (10%)</strong></td>--}}
{{--                                    <td class="right">$679,76</td>--}}
{{--                                </tr>--}}
                                <tr>
                                    <td class="left"><strong>Total</strong></td>
                                    <td class="right"><strong>{{$annonce->paiement->amount??'0' }} Є </strong><br>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('js')

    //Sweelt alert
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/luxon/3.2.0/luxon.min.js"
            integrity="sha512-PfFrIEubsypd3vt/oczIh4r7FCpU7qbELQ9L+JRCzc3B2xHp43H6ZtjJCpEaPIDo/52Mettp/5RZicGPz6ObZA=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>

    <script src="{{asset('v_1/js/annonce.js')}}"></script>

    <script>

        //Recuperer tous les utilisateurs d'une ville
        var url = "{{ route('get.user.ville') }}"


        $(document).ready(function () {
           var tel= formatPhoneNumber('33610995694')

        })

        function formatPhoneNumber(phoneNumberString) {
            var cleaned = ('' + phoneNumberString).replace(/\D/g, '');
            var match = cleaned.match(/^(1|)?(\d{3})(\d{3})(\d{4})$/);
            if (match) {
                var intlCode = (match[1] ? '+1 ' : '');
                return [intlCode, '(', match[2], ') ', match[3], '-', match[4]].join('');
            }
            return null;
        }

    </script>



@endsection