@extends('layouts.base')

@section('title', 'Détails Commande')

@section('content')
<!-- Row -->
<div class="row">
    <!-- Column -->
    <div class="col-lg-4 col-xlg-3 col-md-5">
        <div class="card">
            <div class="card-body">
                <center class="mt-4"> <img src="{{asset('assets/images/users/logo.jpg')}}" class="rounded-circle" width="150" />
                    <h4 class="card-title mt-2">{{$customer->name}}</h4>
                    <h6 class="card-subtitle">CLIENT SIBM</h6>
                </center>
            </div>
            <div>
                <hr>
            </div>
            <div class="card-body">
                <small class="text-muted pt-2 db">Situation financière</small>
                <h6 class="badge badge-danger font-16">{{number_format($customer->financial->money,0,'',' ')}} FCFA</h6><br>
                <small class="text-muted">Commande total</small>
                <h6>{{$customer->commands->count()}}</h6>
                <small class="text-muted pt-2 db">Commandes en cours</small>
                <h6>{{$customer->commands->where('status','PROGRESS')->count()}}</h6>
                <small class="text-muted pt-2 db">Commandes terminées</small>
                <h6>{{$customer->commands->where('status','FINISH')->count()}}</h6>
                <div class="map-box">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15888.19991859991!2d-4.1543455!3d5.4093591!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xecbd22599770bbbf!2sSIBM%20PK24!5e0!3m2!1sfr!2sci!4v1643031039886!5m2!1sfr!2sci" width="100%" height="150" frameborder="0" style="border:0" allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </div>
    <!-- Column -->
    <!-- Column -->
    <div class="col-lg-8 col-xlg-9 col-md-7">
            <a href="{{route('director.index')}}" class="btn btn-primary mb-2"><i class="fa fa-backward text-white"></i> Retour à la liste</a>
        <div class="card">
            <!-- Tabs -->

            <ul class="nav nav-pills custom-pills" id="pills-tab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="pills-timeline-tab" data-toggle="pill" href="#current-month" role="tab" aria-controls="pills-timeline" aria-selected="true">COMMANDE EN ATTENTE DE VALIDATION</a>
                </li>
            </ul>
            <!-- Tabs -->
            <div class="tab-content" id="pills-tabContent">
                <div class="tab-pane fade show active" id="current-month" role="tabpanel" aria-labelledby="pills-timeline-tab">
                    <div class="card-body">
                        <div class="profiletimeline mt-0">
                            @foreach($customer->commands->where('status','=','PROGRESS') as $command)
                            <div class="sl-item">
                                <div class="sl-left"> <img src="{{asset('assets/images/users/1.jpg')}}" alt="user" class="rounded-circle" /> </div>
                                <div class="sl-right">
                                    <div><a href="javascript:void(0)" class="link">N°BC : {{$command->code}}</a> | <span class="sl-date">Commandé le {{$command->order_at->format('d-m-Y')}}</span>
                                    </div>

                                    <div id="accordion-{{$command->id}}" class="custom-accordion mb-2"><!-- end card-->
                                        <div class="card mb-0">
                                            <div class="card-header bg-primary" id="headingTwo-{{$command->id}}">
                                                <h5 class="m-0">
                                                    <a class="custom-accordion-title collapsed d-block pt-0 pb-0 text-white" data-toggle="collapse" href="#collapseTwo-{{$command->id}}" aria-expanded="false"
                                                       aria-controls="collapseTwo">
                                                        Consulter les produits de la commande <span class="float-right"><i
                                                                class="mdi mdi-chevron-down accordion-arrow"></i></span>
                                                    </a>
                                                </h5>
                                            </div>
                                            <div id="collapseTwo-{{$command->id}}" class="collapse" aria-labelledby="headingTwo-{{$command->id}}"
                                                 data-parent="#accordion-{{$command->id}}">
                                                <div class="card-body">
                                                            <div class="table-responsive">
                                                                <table class="table">
                                                                    <thead>
                                                                    <tr>
                                                                        <th scope="col">#</th>
                                                                        <th scope="col">Produit</th>
                                                                        <th scope="col">Quantité</th>
                                                                    </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                    @foreach($command->commandProducts as $key => $product)
                                                                    <tr>
                                                                        <th scope="row">{{++$key}}</th>
                                                                        <td>{{$product->product->name}}</td>
                                                                        <td>{{$product->quantity}}</td>
                                                                    </tr>
                                                                    @endforeach
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                </div>
                                            </div>
                                        </div> <!-- end card-->
                                    </div>

                                </div>
                                <div class="like-comm">
                                    <form method="POST" action="{{route('director.validated',["command" => $command->id])}}" class="d-inline-block">
                                        @method('POST')
                                        <!-- CSRF token -->
                                        @csrf
                                            <button type="submit" class="btn btn-success"><i class="fa fa-check text-white"></i> Valider</button>
                                    </form>

                                    <form method="POST" action="{{route('director.rejected',["command" => $command->id])}}" class="d-inline-block">
                                    @method('POST')
                                    <!-- CSRF token -->
                                        @csrf
                                        <button type="submit" class="btn btn-danger"><i class="fa fa-trash text-white"></i> Refuser</button>
                                    </form>



                                </div>
                            </div>
                            <hr>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Column -->
</div>
<!-- Row -->
@endsection