@extends('root.layout.master')

@section('css_before')
    <!-- Page JS Plugins CSS -->
    <link rel="stylesheet" href="{{ asset('assets/js/plugins/datatables/dataTables.bootstrap4.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/js/plugins/datatables/buttons-bs4/buttons.bootstrap4.min.css') }}">
@endsection

@section('js_after')
    <!-- Page JS Plugins -->
    <script src="{{ asset('assets/js/plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/js/plugins/datatables/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('assets/js/plugins/datatables/buttons/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('assets/js/plugins/datatables/buttons/buttons.print.min.js') }}"></script>
    <script src="{{ asset('assets/js/plugins/datatables/buttons/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('assets/js/plugins/datatables/buttons/buttons.flash.min.js') }}"></script>
    <script src="{{ asset('assets/js/plugins/datatables/buttons/buttons.colVis.min.js') }}"></script>

    <!-- Page JS Code -->
    <script src="{{ asset('assets/js/pages/tables_datatables.js') }}"></script>
@endsection

@section('content')
    <!-- Hero -->
    <div class="bg-body-light">
        <div class="content content-full">
            <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center">
                <h1 class="flex-sm-fill font-size-h2 font-w400 mt-2 mb-0 mb-sm-2">Détails Commande</h1>
                <nav class="flex-sm-00-auto ml-sm-3" aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">App</li>
                        <li class="breadcrumb-item active" aria-current="page">Détails Commande</li>
                    </ol>
                </nav>
            </div>
       </div>
    </div>
    <!-- END Hero -->

    <!-- Page Content -->
    <div class="content">
        <!-- Info -->
        
        <!-- END Info -->

        <!-- Dynamic Table Full -->
        
        <!-- END Dynamic Table Full -->

        <!-- Dynamic Table with Export Buttons -->
        <div class="block block-rounded">
            <div class="block-header block-header-default">
                <h3 class="block-title">Détails <small>Commande</small></h3>
            </div>
            <div class="block-content block-content-full">
                <div class="content">
                    <!-- Quick Overview -->
                    {{ csrf_field() }}
                    <form action="{{ route('valid_commande') }}" method="POST" enctype="" id="commandeForm" autocomplete="off">
                        
                        <input type="hidden" name="idcommande" id="idcommande" value="{{$comm}}">
                        <input type="hidden" name="etat1" id="etat1" value="Validée">
                        <input type="hidden" name="etat2" id="etat2" value="Annulée">
                    <div class="row row-deck">
                        <div class="col-6 col-lg-3" id="submitForm">
                            <a class="block block-rounded block-link-shadow text-center" href="javascript:void(0)" >
                                <div class="block-content py-5">
                                    <div class="item rounded-lg bg-xeco-lighter mx-auto mb-3">
                                        <i class="fa fa-check text-xeco-dark"></i>
                                    </div>
                                    <p class="font-w600 font-size-sm text-muted text-uppercase mb-0">
                                        Valider
                                    </p>
                                </div>
                            </a>
                        </div>
                        
                        <div class="col-6 col-lg-3" id="annulerForm">
                            <a class="block block-rounded block-link-shadow text-center" href="javascript:void(0)">
                                <div class="block-content py-5">
                                    <div class="item rounded-lg bg-body mx-auto mb-3">
                                        <i class="fa fa-times text-muted"></i>
                                    </div>
                                    <p class="font-w600 font-size-sm text-muted text-uppercase mb-0">Annuler
                                    </p>
                                </div>
                            </a>
                        </div>
                    {{ csrf_field() }}
                    </div>
                    <!-- END Quick Overview -->
                    </form>

                    <!-- Products -->
                    <div class="block block-rounded">
                        <div class="block-header block-header-default">
                            <h3 class="block-title">Products</h3>
                        </div>
                        <div class="block-content">
                            <div class="table-responsive">
                                <table class="table table-borderless table-striped table-vcenter font-size-sm">
                                    <thead>
                                        <tr>
                                            <th class="text-center" style="width: 100px;">ID</th>
                                            <th>Libelle Produit</th>
                                            <th class="text-center">Photo</th>
                                            <th class="text-center">Quantité</th>
                                            <th class="text-right" style="width: 15%;">Prix Achat</th>
                                            <th class="text-right" style="width: 10%;">Prix total</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($commande as $command)
                                        <tr>
                                            <td class="text-center"><strong>{{$command->product_id}}</strong></td>
                                            <td><a href="javascript:void(0)"><strong>{{$command->title}}</strong></a></td>
                                            <td class="text-center"><img src="{{asset($command->picture)}}" width="50px"></td>
                                            <td class="text-center"><strong>{{$command->QteProd}}</strong></td>
                                            <td class="text-right">{{$command->PrixUnitAchat}} FCFA</td>
                                                                                        <td class="text-right">{{$cout}} FCFA</td>
                                        </tr>
                                        @endforeach
                                        </tr>
                                        <tr>
                                            <td colspan="5" class="text-right"><strong>Total:</strong></td>
                                            <td class="text-right">{{$command->Total}} FCFA</td>
                                        </tr>
                                        
                                        <tr class="table-active">
                                            <td colspan="5" class="text-right text-uppercase"><strong>Total restant:</strong></td>
                                            <td class="text-right"><strong>{{$command->Total}} FCFA</strong></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <!-- END Products -->

                    <!-- Customer -->
                    <div class="row">
                        <div class="col-sm-6">
                            <!-- Billing Address -->
                            <div class="block block-rounded">
                                <div class="block-header block-header-default">
                                    <h3 class="block-title">Informations Client</h3>
                                </div>
                                <div class="block-content">
                                    <div class="font-size-h4 mb-1"><i class="fa fa-user"></i> {{$command->nom}}</div>
                                    <address class="font-size-sm">
                                        <i class="fa fa-phone"></i> {{$command->telephone}}<br>
                                        <!-- <i class="fa fa-envelope-o"></i> <a href="javascript:void(0)">company@example.com</a> -->
                                    </address>
                                </div>
                            </div>
                            <!-- END Billing Address -->
                        </div>
                        <div class="col-sm-6">
                            <!-- Shipping Address -->
                            <div class="block block-rounded">
                                <div class="block-header block-header-default">
                                    <h3 class="block-title">Adresse de livraison</h3>
                                </div>
                                <div class="block-content">
                                    <!-- <div class="font-size-h4 mb-1">Helen Jacobs</div> -->
                                    <address class="font-size-sm">
                                        {{$command->DetailsLivraison}}
                                    </address>
                                </div>
                            </div>
                            <!-- END Shipping Address -->
                        </div>
                    </div>
                    <!-- END Customer -->

                </div>
            </div>
        </div>
        <!-- END Dynamic Table with Export Buttons -->
    </div>
    <!-- END Page Content -->


        <script type="text/javascript">

           

            $('#commandeForm').on('submit', function(e){
                e.preventDefault();
            })

            $('#submitForm').on('click', function(){
                
                var idcommande = $('#idcommande');
                var etat1 = $('#etat1');
                var _token = $('input[name="_token"]').val();
                // var description = $('#description');
                // var prix = $('#prix');
                // var echeance = $('#echeance');
                // var trainerAvatar = $("#trainerAvatar").get(0).files;
                // var _token = $('input[name="_token"]').val();

                // var emailRegex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;

                
                // showWaitingMask(true);

                
                                        var form = $('#commandeForm')[0];
                                        var data = new FormData(form);
                                        //AJAX REQUEST
                                        $.ajax({
                                            type: 'POST',
                                            url: '{{ route('valid_commande') }}',
                                            data:data,
                                            processData: false,  // Important!
                                            contentType: false,
                                            cache: false,
                                            timeout: 600000,

                                            success:function(result) {
                                                // showWaitingMask(false);
                                                if(result == '1'){
                                                    swalWithBootstrapButtons.fire({
                                                        title: 'Succès',
                                                        text: 'Commande validée avec succès !',
                                                        type: 'success',
                                                        showConfirmButton: true,
                                                        confirmButtonText: 'Super'
                                                    })
                                        
                                                  
                                                }
                                                else if (result == '-1') {
                                                    swalWithBootstrapButtons.fire({
                                                        title: 'Erreur',
                                                        text: ' existant',
                                                        type: 'warning',
                                                        showCancelButton: true,
                                                        showConfirmButton: false,
                                                        cancelButtonText: 'D\'accord'
                                                    })
                                                }
                                                else{
                                                    console.log(result)
                                                    swalWithBootstrapButtons.fire({
                                                        title: 'Erreur',
                                                        text: 'Echec de l\'opération',
                                                        type: 'error',
                                                        showCancelButton: true,
                                                        showConfirmButton: false,
                                                        cancelButtonText: 'Hummmm'
                                                    })
                                                }
                                            },

                                           
                                        });
                                    })






                 $('#annulerForm').on('click', function(){
                
                var idcommande = $('#idcommande');
                var etat2 = $('#etat2');
                // var description = $('#description');
                // var prix = $('#prix');
                // var echeance = $('#echeance');
                // var trainerAvatar = $("#trainerAvatar").get(0).files;
                // var _token = $('input[name="_token"]').val();

                // var emailRegex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;

                
                // showWaitingMask(true);
                                        var form = $('#commandeForm')[0];
                                        var data = new FormData(form);
                                        //AJAX REQUEST
                                        $.ajax({
                                            type: 'POST',
                                            url: '{{ route('annuler_commande') }}',
                                            data:data,
                                            processData: false,  // Important!
                                            contentType: false,
                                            cache: false,
                                            timeout: 600000,

                                            success:function(result) {
                                                showWaitingMask(false);
                                                if(result == '1'){
                                                    swalWithBootstrapButtons.fire({
                                                        title: 'Succès',
                                                        text: 'Commande annulée avec succès !',
                                                        type: 'success',
                                                        showConfirmButton: true,
                                                        confirmButtonText: 'Super'
                                                    })
                                        
                                                  
                                                }
                                                else if (result == '-1') {
                                                    swalWithBootstrapButtons.fire({
                                                        title: 'Erreur',
                                                        text: ' existant',
                                                        type: 'warning',
                                                        showCancelButton: true,
                                                        showConfirmButton: false,
                                                        cancelButtonText: 'D\'accord'
                                                    })
                                                }
                                                else{
                                                    console.log(result)
                                                    swalWithBootstrapButtons.fire({
                                                        title: 'Erreur',
                                                        text: 'Echec de l\'opération',
                                                        type: 'error',
                                                        showCancelButton: true,
                                                        showConfirmButton: false,
                                                        cancelButtonText: 'Hummmm'
                                                    })
                                                }
                                            },

                                           
                                        });
                                    })
                                
                           
                        
                   
               
            
        
    </script>










@endsection