@extends('layouts.index')
@section('css')
    <link rel="stylesheet" href="{{ asset('assets/css/select2.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/dataTables.bootstrap4.css') }}">
@endsection
@section("contents")
<div class="row justify-content-center">
    <div class="col-12">
        <h2 class="h5 page-title text-uppercase"> Commande #{{ $order->code }} avec status 
            <div class="btn btn-secondary">{{ $order->status }}</div>
        </h2>
        {{-- <p class="text-muted"> La liste des commandes éffectuées </p> --}}
    </div>
    <div class="col-12 col-lg-10 col-xl-12">
        <div class="row mt-4">
            <div class="col-md-3">
                <div class="card shadow mb-4">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col-3 text-center">
                                <span class="circle circle-md bg-primary">
                                    <span class="fe fe-shopping-bag fe-24 text-white"></span>
                                </span>
                            </div>
                            <div class="col">
                                <h3 class="h6 mb-0 text-uppercase">Commande</h3>
                                <strong class="small mb-0">{{ $order->code }}</strong>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card shadow mb-4">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col-3 text-center">
                                <span class="circle circle-md bg-success">
                                    <span class="fe fe-calendar fe-24 text-white"></span>
                                </span>
                            </div>
                            <div class="col">
                                <h3 class="h6 mb-0 text-uppercase">Date</h3>
                                @php
                                $date = explode(" ",$order->created_at);
                                @endphp
                                <strong class="small mb-0">{{ $date[0]." à ".$date[1] }}</strong>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card shadow mb-4">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col-3 text-center">
                                <span class="circle circle-md bg-warning">
                                    <span class="fe fe-dollar-sign fe-24 text-white"></span>
                                </span>
                            </div>
                            <div class="col">
                                <h3 class="h6 mb-0 text-uppercase">Total</h3>
                                <strong class="small mb-0">F CFA
                                    {{ number_format($order->total_amount,2,',',' '); }}</strong>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card shadow mb-4">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col-3 text-center">
                                <span class="circle circle-md bg-danger">
                                    <span class="fe fe-dollar-sign fe-24 text-white"></span>
                                </span>
                            </div>
                            <div class="col">
                                <h3 class="h6 mb-0 text-uppercase">Reste à Payer</h3>
                                <strong class="small mb-0">F CFA {{ number_format($order->reste_amount,2,',',' '); }}</strong>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-lg-10 col-xl-12">

        <div class="card d-inline-flex mb-2">
            <div class="card-body bg-secondary py-2 px-3">
                <h6 class="h6 my-1 text-uppercase text-white"> Commande # {{ $order->code }} détail</h6>
            </div>
        </div>

        <div class="row mb-4">
            <div class="col-md-4">
                <h2 class="h5" id="user-section">Identité du client</h2>
                <div class="card profile shadow">
                    <div class="card-body my-4">
                        <div class="row align-items-center">
                            <div class="col-md-3 text-center mb-3">
                                <a href="#!" class="avatar avatar-xl">
                                    <img src="{{ asset("assets/images/blank_user.jpg") }}"
                                        class="avatar-img rounded-circle">
                                </a>
                            </div>
                            <div class="col">
                                <div class="row align-items-center">
                                    <div class="col-md-7">
                                        <h5 class="mb-1 text-uppercase">
                                            {{ $order->client->firstname." ".$order->client->lastname }}</h5>
                                        <p class="small mb-2"><span class="badge badge-info p-1 text-uppercase"><strong
                                                    class="text-white">Pays : </strong>
                                                {{ config("app.countriesViews")[$order->client->company_country] }}</span>
                                        </p>
                                        <p class="small mb-2"><span
                                                class="badge badge-primary p-1 text-uppercase"><strong
                                                    class="text-white">Site : </strong>
                                                {{ $order->client->site->name }}</span></p>
                                        @if (isAdmin())
                                        <p class="small mb-2"><span class="badge badge-dark p-1  text-uppercase">
                                                Contact : {{ $order->client->phone }} ,
                                                {{ $order->client->email }}</span></p>
                                        @endif
                                    </div>
                                    <div class="col">
                                    </div>
                                </div>
                                <div class="row mb-4">
                                    <div class="col-md-12">
                                        @php
                                            $tags = $order->client->tag
                                        @endphp
                                        @if (count($tags)>0)
                                            <h5 class="h5"> Tags : </h5>
                                        @endif
                                        @foreach ($tags as $tag)
                                            <div class="btn text-white p-1 btn-sm ml-1 mb-1" style="background-color:{{ $tag->color }}">{{ $tag->name }}</div>
                                        @endforeach
                                    </div>
                                </div>
                                <div class="row align-items-center">
                                    <div class="col-md-7 mb-2">
                                        <strong class=" mb-0">Client dépuis
                                            {{ $order->client->created_at->diffForHumans(); }} </strong>
                                    </div>
                                    <div class="col mb-2">
                                        <button type="button" class="btn btn-secondary"><i class="fe fe-eye"
                                                aria-hidden="true"></i> Consulter</button>
                                    </div>
                                </div>
                            </div>
                        </div> <!-- / .row- -->
                    </div> <!-- / .card-body - -->
                </div>
            </div>
            <div class="col-md-8">
                <h2 class="h5" id="user-section">Article de la commande</h2>
                <div class="card shadow ">
                    <div class="card-body" style="height:330px; overflow-y: auto; overflow-x: hidden;">
                        <div class="table-responsive pt-3">
                            <table class="table table-striped table-bordered text-center" id="orderItemsTable">
                                <thead>
                                    <tr class="text-center">
                                        <th><strong>N°</strong></th>
                                        <th><strong>code</strong></th>
                                        <th><strong>libelle</strong></th>
                                        <th><strong>Qte </strong></th>
                                        <th><strong>Prix Appliiqué</strong></th>
                                        <th><strong>Prix</strong></th>
                                        <th><strong>Montant</strong></th>
                                    </tr>
                                </thead>

                                <tbody>
                                    @foreach ($order->orderItem as $item)
                                        <tr class="text-left">
                                            <th><strong>N°</strong></th>
                                            <th><strong>{{ $item->article->code }}</strong></th>
                                            <th><strong>{{ $item->article->name }}</strong></th>
                                            <th><strong>{{ $item->quantity }}</strong></th>
                                            <th><strong>{{ config("app.priceView")[$item->price_type] }}</strong></th>
                                            <th><strong>F CFA {{ number_format($item->price,2,',',' '); }}</strong></th>
                                            <th><strong>F CFA {{ number_format(($item->price * $item->quantity),2,',',' '); }}</strong></th>
                                        </tr>
                                    @endforeach
                                </tbody>

                            </table>
                        </div>
                    </div> 
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-lg-10 col-xl-12">

        <div class="card d-inline-flex mb-2">
            <div class="card-body bg-secondary py-2 px-3">
                <h6 class="h6 my-1 text-uppercase text-white"> Facturation de la Commande # {{ $order->code }}</h6>
            </div>
        </div>
        @php
            $listeCol = $order->reste_amount === 0 ? "col-md-12 col-12 " : "col-md-6";
            $invoices = $order->invoices;
            $totalInvoice = count($invoices);
            $hasInvoice = ($totalInvoice>0);
            $shouldPay = $order->reste_amount != 0;
            $payCol = !$hasInvoice ? "col-md-12 col-12":"col-md-6";
            $count = 0;
        @endphp

        <div class="row mt-2">
            
            @if ($hasInvoice)
                <div class="{{ $listeCol }} mb-4">
                    <h2 class="h5" id="user-section">Liste des factures appliquées</h2>
                    <div style="height:330px; overflow-y: auto; overflow-x: hidden;">
                        @foreach ($invoices as $invoice)  
                            @php
                                $count++
                            @endphp
                            <div class="card shadow mb-3">
                                <div class="card-body py-3">
                                    <div class="row align-items-center">
                                        <div class="col-auto pr-1">
                                            <span class="small text-muted fe fe-12 fe-menu mr-1 d-block d-md-inline"></span>
                                            <span class="small text-muted">{{ $count }}/{{$totalInvoice}}</span>
                                        </div>
                                        @php
                                            $url = route("App@Commercial#InvoiceView",["idfacture"=>$invoice->code]);
                                            $urlPrinte = route("App@Commercial#invoicePrinter",["idfacture"=>$invoice->code]);
                                            $urlguest = route("App@Commercial#InvoiceViewGuest",["idfacture"=>$invoice->code]);
                                        @endphp 
                                        <div class="col pr-0">
                                            <strong>{{ $invoice->code }}</strong>
                                            <p class="small text-muted mb-0">créé {{ $invoice->created_at->diffForHumans() }}</p>
                                        </div>
                                        
                                        <div class="col-auto px-0">
                                            <ul class="avatars-list m-0">
                                                <li>
                                                    <a href="#!" class="avatar avatar-sm rounded-circle">
                                                        <span class="avatar-img">{!! qrCodeImage($urlguest,50) !!}</span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="col-auto">
                                            <div class="dropdown">
                                                <button class="btn btn-sm dropdown-toggle more-vertical" type="button"
                                                    id="dr1" data-toggle="dropdown" aria-haspopup="true"
                                                    aria-expanded="false">
                                                    <span class="text-muted sr-only">Action</span>
                                                </button>
                                                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dr1">
                                                    <a class="dropdown-item" href="{{ $url }}">Consulter</a>
                                                    <a class="dropdown-item" href="{{ $urlPrinte }}">Imprimer</a>
                                                    <a class="dropdown-item" href="{{ $urlguest }}">Telécharger</a>
                                                    <a class="dropdown-item" href="{{ $urlguest }}">Partager</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                        </div>
                </div> 
            @endif
            
            @if ($shouldPay)
                <div class="{{ $payCol }} mb-4">
                    <h2 class="h5" id="user-section">Espace de règlement </h2>
                    <div class="card shadow">
                        <form class="card-body needs-validation" novalidate id="orderPaymentForm">
                            <div class="form-row">
                                <div class="col-md-12 mb-3">
                                    <label for="payment_method_id">Selectionner la méthode de paiement</label>
                                    <select class="form-control payment_method_id" id="payment_method_id" name="payment_method_id" required>
                                        <option value="">Selectionner la méthode de paiement</option>
                                        @foreach($payment_methodes as $payment_methode)
                                            <option value="{{ $payment_methode->id }}">{{ Str::ucfirst($payment_methode->name) }}</option>
                                        @endforeach
                                    </select>
                                    <div class="invalid-feedback"> Veuillez selectionner la méthode de paiement </div>
                                </div>
                            </div>
    
                            <div class="form-row mb-3">
                                <div class="col-md-6 mb-3">
                                    <label for="reelAmount">La somme total</label>
                                    <input type="text" class="form-control" value="F CFA {{ number_format($order->total_amount,2,',',' '); }}" name="reelAmount" id="reelAmount" disabled>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="toPaidAmount">Reste à payer </label>
                                    <input type="text" class="form-control" value="F CFA {{ number_format($order->reste_amount,2,',',' '); }}" name="toPaidAmount" id="toPaidAmount" disabled>
                                </div>
                                <input type="hidden" name="order_id" id="order_id" value="{{ $order->id }}">
                                <div class="col-md-12"> 
                                    <label for="payment_amount">Montant du règlement</label>
                                    <input type="number" min="100" class="form-control" name="payment_amount" id="payment_amount" required placeholder="">
                                    <div class="invalid-feedback"> Veuillez renseigner ce champs </div>
                                </div>
                            </div>

                            <button class="btn btn-primary" type="submit">Enrégister le payment</button>
                        </form>
                    </div>
                </div>
            @endif

        </div>
    </div>
</div>
@endsection
@section('js')
    <!-- plugin js for this page -->
    <script src="{{ asset('assets/js/select2.min.js') }}"></script>
    <script src="{{ asset('assets/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('assets/js/modules/order.js') }}"></script>
@endsection()