@extends('layouts.master')
@section('content')
    {{-- message --}}
    {!! Toastr::message() !!}
    <!-- Page Wrapper -->
    <div class="page-wrapper">
        <!-- Page Content -->
        <div class="content container-fluid">
            <!-- Page Header -->
            <div class="page-header">
                <div class="row align-items-center">
                    <div class="col">
                        <h3 class="page-title">Facture</h3>
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('home') }}">Dashboard</a></li>
                            <li class="breadcrumb-item active">Facture</li>
                        </ul>
                    </div>
                    <div class="col-auto float-right ml-auto">
                        <div class="btn-group btn-group-sm">
                            @if($bill->status == 'Non Payé')
                                <a href="#" class="btn add-btn" data-toggle="modal" data-target="#add_leave"><i class="fa fa-plus"></i> Ajouter un Article</a>
                            @endif 
                            <a href="{{ route('bill/pdfView', ['id' => $bill->id] ) }}" target="_blank" class="btn btn-white">PDF</a>
                         </div>
                    </div>
                </div>
            </div>
            <!-- /Page Header -->
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-sm-6 m-b-20">
                                     <ul class="list-unstyled">
                                        <li>Client: {{ $customer->first_name . ' ' . $customer->last_name }}</li>
                                        <li>Adresse: {{ $customer->address }}</li>
                                        <li>Téléphone : {{ $customer->phone }} </li>
                                    </ul>
                                </div>
                                <div class="col-sm-6 m-b-20">
                                    <div class="invoice-details">
                                        <h3 class="text-uppercase">Facturation</h3>
                                        <ul class="list-unstyled">
                                            <li>Date Facture : <span>{{ $bill->date }}</span></li>
                                            <li>Status Facture : <span>{{ $bill->status }}</span></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                          
                            <div class="table-responsive">
                                <table class="table table-striped table-hover">
                                    <thead>
                                        <tr>
                                            <th> Image </th> 
                                            <th>Article</th>
                                            <th> Prix ( FCFA )</th>
                                            <th class="d-none d-sm-table-cell">Quantité</th>
                                            <th>Montant</th>
                                            @if($bill->status == 'Non Payé')
                                                <th class="text-right">Actions</th>
                                            @endif
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($washing as $w)
                                            <tr>
                                                <td> <image src="{{ '/uploads/'. $w->image }}" style="width: 60px;"/> </td> 
                                                <td>{{ $w->name_article }}</td>
                                                <td> {{ $w->amount}} </td> 
                                                <td class="d-none d-sm-table-cell">{{ $w->qte }}</td>
                                                <td> {{ $w->montant }} </td>
                                                @if($bill->status == 'Non Payé')
                                                    <td class="text-right">
                                                        <div class="dropdown dropdown-action">
                                                            <a href="#" class="action-icon dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="material-icons">more_vert</i></a>
                                                            <div class="dropdown-menu dropdown-menu-right">
                                                                <a class="dropdown-item leaveUpdate" data-toggle="modal" data-id_article_update="{{ $w->id }}" data-target="#edit_leave"><i class="fa fa-pencil m-r-5"></i> Modifier</a>
                                                                <a class="dropdown-item leaveDelete" href="#" data-toggle="modal" data-id_article_delete="{{ $w->id }}" data-target="#delete_approve"><i class="fa fa-trash-o m-r-5"></i> Supprimer</a>
                                                            </div>
                                                        </div>
                                                    </td>
                                                @endif 
                                            </tr>
                                        @endforeach 
                                    </tbody>
                                </table>
                            </div>
                            <div>
                                <div class="row invoice-payment">
                                    <div class="col-sm-7">
                                    </div>
                                    <div class="col-sm-5">
                                        <div class="m-b-20">
                                            <div class="table-responsive no-border">
                                                <table class="table mb-0">
                                                    <tbody>
                                                        <tr>
                                                            <th>Total:</th>
                                                            <td class="text-right text-primary"><h5>{{ $montant }} FCFA </h5></td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="text-center">
                                            @if($bill->status == 'Non Payé')
                                                <a href="{{ route('bill/classer', ['id' => $bill->id] ) }}" class="btn btn-success" ><i class="fa fa"></i> Classer comme payer </a>
                                            @else 
                                                <a href="{{ route('bill/classer', ['id' => $bill->id] ) }}" class="btn btn-secondary" ><i class="fa fa"></i> Réouvrir</a>
                                            @endif 
                                        </div>
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Page Content -->
         <!-- Add Leave Modal -->
        <div id="add_leave" class="modal custom-modal fade" role="dialog">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Ajouter un Article</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form action="{{ route('bill/storeArticle', ['id' => $bill->id] ) }}" method="POST">
                            @csrf
                            <input type="hidden" class="form-control" id="rec_id" name="rec_id" value="{{ Auth::user()->rec_id }}">
                            <div class="form-group">
                                <select class="select floating" name="article"> 
                                    <option> -- Selectionner un article -- </option>
                                    @foreach($articles as $a)
                                        <option value="{{ $a->id }} "> <img src="{{ 'uploads/'. $a->image }}" style="width: 60px;"/>  {{ $a->name_article }} => {{ $a->amount }} FCFA </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group">
                                <label>Quantité <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="qte">
                            </div>
                            <div class="submit-section">
                                <button type="submit" class="btn btn-primary submit-btn">Confimer</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
         <!-- Delete Leave Modal -->
         <div class="modal custom-modal fade" id="delete_approve" role="dialog">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="form-header">
                            <h3>Suppression Article </h3>
                            <p>Etes vous sûr de vouloir supprimer définitivement ?</p>
                        </div>
                        <div class="modal-btn delete-action">
                            <form action="{{ route('bill/article/delete') }}" method="POST">
                                @csrf
                                <input type="hidden" name="id_article_delete" id="id_article_delete" >
                                <div class="row">
                                    <div class="col-6">
                                        <button type="submit" class="btn btn-primary continue-btn submit-btn">Supprimer</button>
                                    </div>
                                    <div class="col-6">
                                        <a href="javascript:void(0);" data-dismiss="modal" class="btn btn-primary cancel-btn">Annuler</a>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Delete Leave Modal -->
    </div>
    <!-- /Page Wrapper -->

    @section('script')
    <script>
        document.getElementById("year").innerHTML = new Date().getFullYear();
    </script>
    {{-- update js --}}
    <script>
        $(document).on('click','.leaveUpdate',function()
        {
            var _this = $(this).parents('tr');
    
            $('#id_article_update').val($(this).data('id_article_update'));

            $('#e_number_of_days').val(_this.find('.day').text());
            $('#e_from_date').val(_this.find('.from_date').text());  
            $('#e_to_date').val(_this.find('.to_date').text());  
            $('#e_leave_reason').val(_this.find('.leave_reason').text());

            var leave_type = (_this.find(".leave_type").text());
            var _option = '<option selected value="' + leave_type+ '">' + _this.find('.leave_type').text() + '</option>'
            $( _option).appendTo("#e_leave_type");
        });
    </script>
    {{-- delete model --}}
    <script>
        $(document).on('click','.leaveDelete',function()
        {
            $('#id_article_delete').val($(this).data('id_article_delete'));
        });
    </script>
    @endsection
@endsection