@extends('layouts.master')

@section('title', 'Modernize Bootstrap Admin')

@section('pageContent')

	@include('layouts.breadcrumb', ['title' => 'Billing', 'subtitle' => 'Tableau de bord'])

	@php
		$nbNumbers = 1;
		$nbPackages = 3; // (forfaits)
		$nbApps = 2;
	@endphp

  	<div class="row">
	  	<!-- Bloc de gauche (avatar + nom + entreprise) -->
	  	<div class="col-md-6 d-flex align-items-center gap-4 mb-4 justify-content-center justify-content-md-start">
		    <div class="position-relative">
		      	<div class="border border-2 border-primary rounded-circle">
			        <img src="{{ URL::asset('build/images/profile/user-1.jpg') }}" class="rounded-circle m-1" alt="user1" width="60" />
		      	</div>
		      	<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-primary">3
			        <span class="visually-hidden">unread messages</span>
		      	</span>
		    </div>
		    <div>
	      		<h3 class="fw-semibold mb-0">{{ auth()->user()->full_name }}</h3>
	      		<span>{{ $user->company_name }}</span>
		    </div>
	  	</div>

	  	<!-- Bloc de droite (sélecteur de date) -->
	  	<div class="col-md-6 d-flex justify-content-center justify-content-md-end align-items-center mb-4">
	    	<select class="form-select w-auto">
	      		<option value="1">March 2024</option>
	      		<option value="2">April 2024</option>
	      		<option value="3">May 2024</option>
	      		<option value="4">June 2024</option>
	    	</select>
	  	</div>
	</div>

	<div class="card text-center">
        <div class="card-header h4">
        	<div class="row">
        		<div class="col-lg-6 text-start">{{ __('account_billing.billing.overview.title') }}</div>
        		<div class="col-lg-6 text-end">Juillet 2025</div>
        	</div>
      	</div>
  	</div>

  	<div class="row">
      	<div class="col-lg-3 col-md-6">
          	<div class="card overflow-hidden">
                <div class="d-flex flex-row">
                  	<div class="p-3 bg-info-subtle d-flex align-items-center">
                    	<h3 class="text-info box mb-0">
                      		<i class="ti ti-phone"></i>
                    	</h3>
                  	</div>
                  	<div class="p-3">
                    	<h3 class="text-info mb-0 fs-6">{{ number_format($totalSubscriptions, 2, '.', '') }}€</h3>
                    	<span>{{ __('account_billing.billing.overview.subscriptions.title') }}</span>
                  	</div>
                </div>
          	</div>
    	</div>

        <div class="col-lg-3 col-md-6">
          	<div class="card overflow-hidden">
            	<div class="d-flex flex-row">
              		<div class="p-3 bg-success-subtle d-flex align-items-center">
                		<h3 class="text-success box mb-0">
                  			<i class="ti ti-apps"></i>
                		</h3>
              		</div>
          			<div class="p-3">
                		<h3 class="text-success mb-0 fs-6">{{ number_format($totalUsage, 2, '.', '') }}€</h3>
                		<span>{{ __('account_billing.billing.overview.usage.title') }}</span>
              		</div>
        		</div>
          	</div>
        </div>

        <div class="col-lg-6 col-md-6">
          	<div class="card overflow-hidden">
            	<div class="d-flex flex-row">
              		<div class="p-3 bg-success-subtle d-flex align-items-center">
                		<h3 class="text-success box mb-0">
                  			<i class="ti ti-apps"></i>
                		</h3>
              		</div>
              		<div class="p-3">
                		<h3 class="text-success mb-0 fs-6">{{ number_format($totalApps, 2, '.', '') }}€</h3>
                		<span>Apps</span>
              		</div>
        		</div>
          	</div>
        </div>
    </div>

    <div class="row">
    	<div class="col-lg-4">
          	<div class="card">
            	<div class="card-body p-4">
              		<h4 class="card-title">{{ __('account_billing.billing.overview.invoices.title') }}</h4>
              		<p class="card-subtitle mb-7 pb-8">{{ __('account_billing.billing.overview.invoices.subtitle') }}</p>

              		@if ($lastInvoices->isEmpty())
              			<div class="text-center mb-4 fst-italic">
              				{{ __('account_billing.billing.overview.invoices.no_result') }}
              			</div>
              		@else
	              		<div class="position-relative">
	              			@foreach ($lastInvoices as $lastInvoice)
		                		<div class="d-flex align-items-center justify-content-between mb-4">
		                  			<div class="d-flex">
		                    			<div class="p-8 bg-primary-subtle rounded-1 d-flex align-items-center justify-content-center me-6">
		                      				<img src="{{ URL::asset('build/images/svgs/icon-wallet.svg') }}" alt="modernize-img" class="img-fluid" width="24" height="24">
		                    			</div>
		                    			<div>
			                  				<h6 class="mb-1 fs-4 fw-semibold">{{ $lastInvoice->pennylane_invoice_number }}</h6>
			                  				<p class="fs-3 mb-0">{{ __('account_billing.billing.overview.invoices.type') }}</p>
			                			</div>
			                  		</div>
			                  		<h6 class="mb-0">{{ number_format($lastInvoice->total_amount, 2, '.', '') }}€</h6>
			                	</div>
			                @endforeach
	              		</div>
	              	@endif

              		<a href="{{ route('account.billing.invoice') }}" class="btn btn-primary w-100">{{ __('account_billing.billing.overview.invoices.button') }}</a>
            	</div>
          	</div>
        </div>

        <div class="col-lg-4">
          	<div class="card">
            	<div class="card-body p-4">
              		<h4 class="card-title">{{ __('account_billing.billing.overview.subscriptions.title') }}</h4>
              		<p class="card-subtitle mb-7 pb-8">{{ __('account_billing.billing.overview.subscriptions.subtitle') }}</p>
              
              		<div class="position-relative">
              			@foreach ($listSubscriptionsByCateg as $subscriptionsByCateg)
	              			<div class="d-flex align-items-center justify-content-between mb-4">
	                  			<div class="d-flex">
	                    			<div class="p-8 bg-primary-subtle rounded-1 d-flex align-items-center justify-content-center me-6">
	                      				<img src="{{ URL::asset('build/images/svgs/icon-paypal.svg') }}" alt="modernize-img" class="img-fluid" width="24" height="24">
	                    			</div>
	                    			<div>
	                      				<h6 class="mb-1 fs-4 fw-semibold">{{ $subscriptionsByCateg['description'] }}</h6>
	                      				<p class="fs-3 mb-0">
	                      					{{ $subscriptionsByCateg['count_subscription'] }}

	                      					
	                      				</p>
	                    			</div>
	                  			</div>
	                  			<h6 class="mb-0">{{ number_format($subscriptionsByCateg['amount'], 2, '.', '') }}€</h6>
	            			</div>
	            		@endforeach

	            		<hr/>
	            		(a enlever)


                		<div class="d-flex align-items-center justify-content-between mb-4">
                  			<div class="d-flex">
                    			<div class="p-8 bg-primary-subtle rounded-1 d-flex align-items-center justify-content-center me-6">
                      				<img src="{{ URL::asset('build/images/svgs/icon-paypal.svg') }}" alt="modernize-img" class="img-fluid" width="24" height="24">
                    			</div>
                    			<div>
                      				<h6 class="mb-1 fs-4 fw-semibold">{{ __('account_billing.billing.overview.type.numbers') }}</h6>
                      				<p class="fs-3 mb-0">
                      					{{ trans_choice('account_billing.billing.overview.type.details.numbers', $nbNumbers) }}
                      				</p>
                    			</div>
                  			</div>
                  			<h6 class="mb-0">1.00€</h6>
            			</div>
                		<div class="d-flex align-items-center justify-content-between mb-4">
                  			<div class="d-flex">
                    			<div class="p-8 bg-success-subtle rounded-1 d-flex align-items-center justify-content-center me-6">
                      				<img src="{{ URL::asset('build/images/svgs/icon-office-bag.svg') }}" alt="modernize-img" class="img-fluid" width="24" height="24">
                    			</div>
                				<div>
		                      		<h6 class="mb-1 fs-4 fw-semibold">{{ __('account_billing.billing.overview.type.centrex') }}</h6>
		                      		<p class="fs-3 mb-0">{{ trans_choice('account_billing.billing.overview.type.details.package', $nbPackages) }}</p>
		                    	</div>
		                  	</div>
                  			<h6 class="mb-0">42.90€</h6>
                		</div>
                		<div class="d-flex align-items-center justify-content-between mb-4">
                  			<div class="d-flex">
                    			<div class="p-8 bg-warning-subtle rounded-1 d-flex align-items-center justify-content-center me-6">
                      				<img src="{{ URL::asset('build/images/svgs/icon-master-card.svg') }}" alt="modernize-img" class="img-fluid" width="24" height="24">
                    			</div>
                    			<div>
                      				<h6 class="mb-1 fs-4 fw-semibold">{{ __('account_billing.billing.overview.type.apps') }}</h6>
                      				<p class="fs-3 mb-0">{{ trans_choice('account_billing.billing.overview.type.details.apps', $nbApps) }}</p>
                    			</div>
              				</div>
              				<h6 class="mb-0">10.00€</h6>
            			</div>
                		<div class="d-flex align-items-center justify-content-between mb-7 pb-8">
                  			<div class="d-flex">
                    			<div class="p-8 bg-danger-subtle rounded-1 d-flex align-items-center justify-content-center me-6">
                      				<img src="{{ URL::asset('build/images/svgs/icon-pie.svg') }}" alt="modernize-img" class="img-fluid" width="24" height="24">
                    			</div>
                				<div>
                      				<h6 class="mb-1 fs-4 fw-semibold">Refund</h6>
                      				<p class="fs-3 mb-0">Bill payment</p>
                    			</div>
                  			</div>
                  			<h6 class="mb-0 text-muted">-$32</h6>
                		</div>
              		</div>
              		<a href="{{ route('account.billing.subscription') }}" class="btn btn-primary w-100">Voir tous mes abonnements</a>
            	</div>
          	</div>
        </div>

        <div class="col-lg-4">
          	<div class="card">
                <div class="card-body p-4">
                  	<h4 class="card-title">{{ __('account_billing.billing.overview.usage.title') }}</h4>
                  	<p class="card-subtitle mb-7 pb-8">{{ __('account_billing.billing.overview.usage.subtitle') }}</p>
                  
                  	<div class="position-relative">
                    	<div class="d-flex align-items-center justify-content-between mb-4">
                      		<div class="d-flex">
                        		<div class="p-8 bg-primary-subtle rounded-1 d-flex align-items-center justify-content-center me-6">
                          			<img src="{{ URL::asset('build/images/svgs/icon-paypal.svg') }}" alt="modernize-img" class="img-fluid" width="24" height="24">
                        		</div>
                        		<div>
                          			<h6 class="mb-1 fs-4 fw-semibold">Appels entrants</h6>
                          			<p class="fs-3 mb-0">1 numéro(s)</p>
                        		</div>
                      		</div>
                      		<h6 class="mb-0">{{ number_format($totalConsoMt, 2, '.', '') }}€</h6>
                		</div>
                		<div class="d-flex align-items-center justify-content-between mb-4">
                      		<div class="d-flex">
                        		<div class="p-8 bg-success-subtle rounded-1 d-flex align-items-center justify-content-center me-6">
                          			<img src="{{ URL::asset('build/images/svgs/icon-office-bag.svg') }}" alt="modernize-img" class="img-fluid" width="24" height="24">
                        		</div>
                        		<div>
                          			<h6 class="mb-1 fs-4 fw-semibold">Appels sortants</h6>
                          			<p class="fs-3 mb-0">3 forfait(s)</p>
                        		</div>
                      		</div>
                      		<h6 class="mb-0">{{ number_format($totalConsoMo, 2, '.', '') }}€</h6>
                		</div>
                		<div class="d-flex align-items-center justify-content-between mb-4">
                      		<div class="d-flex">
                        		<div class="p-8 bg-warning-subtle rounded-1 d-flex align-items-center justify-content-center me-6">
                          			<img src="{{ URL::asset('build/images/svgs/icon-master-card.svg') }}" alt="modernize-img" class="img-fluid" width="24" height="24">
                        		</div>
                        		<div>
                          			<h6 class="mb-1 fs-4 fw-semibold">{{ __('account_billing.billing.overview.type.apps') }}</h6>
                          			<p class="fs-3 mb-0">1 app(s)</p>
                    			</div>
                      		</div>
                      		<h6 class="mb-0">{{ number_format($totalConsoApp, 2, '.', '') }}€</h6>
                    	</div>
                    	<!-- <div class="d-flex align-items-center justify-content-between mb-7 pb-8">
                      		<div class="d-flex">
                        		<div class="p-8 bg-danger-subtle rounded-1 d-flex align-items-center justify-content-center me-6">
                          			<img src="{{ URL::asset('build/images/svgs/icon-pie.svg') }}" alt="modernize-img" class="img-fluid" width="24" height="24">
                        		</div>
                        		<div>
                          			<h6 class="mb-1 fs-4 fw-semibold">Refund</h6>
                          			<p class="fs-3 mb-0">Bill payment</p>
                        		</div>
                      		</div>
                      		<h6 class="mb-0 text-muted">-$32</h6>
                		</div> -->
                  	</div>
                  	<a href="{{ route('account.billing.consommation') }}" class="btn btn-primary w-100">Voir toutes mes consommations</a>
                </div>
          	</div>
        </div>

    </div>


  	<div class="row">
    	<div class="col-lg-6">
          	<div class="card">
            	<div class="card-body p-4">
              		<h4 class="card-title">Moyens de paiement</h4>
              		<p class="card-subtitle mb-7 pb-8">{{ __('account_billing.billing.overview.invoices.subtitle') }}</p>
              		
              		<div class="position-relative">
                		<div class="d-flex align-items-center justify-content-between mb-4">
                  			<div class="d-flex">
                    			<div class="p-8 bg-primary-subtle rounded-1 d-flex align-items-center justify-content-center me-6">
                      				<img src="{{ URL::asset('build/images/svgs/icon-wallet.svg') }}" alt="modernize-img" class="img-fluid" width="24" height="24">
                    			</div>
                    			<div>
                      				<h6 class="mb-1 fs-4 fw-semibold">F2789739</h6>
                      				<p class="fs-3 mb-0">Rechargement</p>
                				</div>
                  			</div>
                  			<h6 class="mb-0">1.00€</h6>
                		</div>
                		<div class="d-flex align-items-center justify-content-between mb-4">
                  			<div class="d-flex">
                    			<div class="p-8 bg-success-subtle rounded-1 d-flex align-items-center justify-content-center me-6">
                      				<img src="{{ URL::asset('build/images/svgs/icon-wallet.svg') }}" alt="modernize-img" class="img-fluid" width="24" height="24">
                    			</div>
                    			<div>
                      				<h6 class="mb-1 fs-4 fw-semibold">F2789739</h6>
                      				<p class="fs-3 mb-0">Rechargement</p>
                    			</div>
                  			</div>
              				<h6 class="mb-0">42.90€</h6>
            			</div>
            			<div class="d-flex align-items-center justify-content-between mb-4">
                  			<div class="d-flex">
                    			<div class="p-8 bg-warning-subtle rounded-1 d-flex align-items-center justify-content-center me-6">
                      				<img src="{{ URL::asset('build/images/svgs/icon-wallet.svg') }}" alt="modernize-img" class="img-fluid" width="24" height="24">
                    			</div>
                				<div>
                      				<h6 class="mb-1 fs-4 fw-semibold">F2789739</h6>
                      				<p class="fs-3 mb-0">Rechargement</p>
                				</div>
                  			</div>
                  			<h6 class="mb-0">10.00€</h6>
                		</div>
                		<div class="d-flex align-items-center justify-content-between mb-7 pb-8">
                  			<div class="d-flex">
                    			<div class="p-8 bg-danger-subtle rounded-1 d-flex align-items-center justify-content-center me-6">
                      				<img src="{{ URL::asset('build/images/svgs/icon-wallet.svg') }}" alt="modernize-img" class="img-fluid" width="24" height="24">
                    			</div>
	                    		<div>
	                      			<h6 class="mb-1 fs-4 fw-semibold">F2789739</h6>
	                  				<p class="fs-3 mb-0">Rechargement</p>
	                			</div>
	                  		</div>
	                  		<h6 class="mb-0">32.00€</h6>
	            		</div>
	              	</div>
	              	<button class="btn btn-primary w-100">Voir toutes mes factures</button>
	            </div>
	      	</div>
	    </div>


        <div class="col-lg-6">
          	<livewire:account.update-auto-reload-wallet />
        </div>
    </div>
@endsection        

@section('scripts')
  <script src="{{ URL::asset('build/js/vendor.min.js') }}"></script>
  <script src="{{ URL::asset('build/libs/apexcharts/dist/apexcharts.min.js') }}"></script>
  <script src="{{ URL::asset('build/js/dashboards/dashboard5.js') }}"></script>
@endsection