@extends('layouts.app')

@section('content')
    <section class="banner-hero-little mb-2 bg-blue">
        <div class="banner-content-title">
            <h5 class="text-yellow">Nouvelle Facture de service</h5> 
        </div>
    </section>

    @if(Auth::user()->roles_id == 2 )
        <div class="container mb-5 mt-5">
            <div class="row justify-content-center">
                <div class="col-md-12">
                    <div class="card" >
                        <div class="card-header bg-blue text-white" align="center">
                            <h5>Créer une facture de service</h5>
                            @if (session('message'))
                                <div class="alert alert-warning" role="alert">
                                    {{ session('message') }}
                                </div>
                            @endif

                            @if (session('success'))
                                <div class="alert alert-success" role="alert">
                                    {{ session('success') }}
                                </div>
                            @endif 
                        </div>
                        <div class="card-body" style="overflow-x:auto;">  
                            <form method="POST" action="{{route('save_facture')}}">
                                @csrf
                                <div class="row justify-content-center">

                                    <div class="col-md-2">
                                        <div class="mb-3">
                                            <label class="form-label">Client existant ?</label>
                                            <select id="client_exist" class="form-select @error('client_exist') is-invalid @enderror" placeholder="nom et prenom" name="client_exist" value="{{ old('client_exist') }}" required autocomplete="client_exist" autofocus>
                                                <option value="novalue">Selectionner</option>
                                                <option value="1">Oui</option>
                                                <option value="0">Non</option>
                                            </select>

                                            @error('client_exist')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-2 not-display" id="client">
                                        <div class="mb-3">
                                            <label class="form-label">Nom du Client</label>
                                            <select class="form-select @error('client') is-invalid @enderror"  name="client" value="{{ old('client') }}"  autocomplete="client" >
                                                <option value="novalue">Selectionner</option>
                                                @foreach($clients as $cl)
                                                <option value="{{$cl->id}}">{{$cl->nom_client}}</option>
                                                @endforeach
                                            </select>

                                            @error('client')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-md-4 not-display" id="new_client">
                                        <div class="mb-3">
                                            <label class="form-label">Nom du nouveau client</label>
                                            <input class="form-control @error('nomPrenom') is-invalid @enderror" placeholder="nom et prenom" name="nomPrenom" value="{{ old('nomPrenom') }}" autocomplete="nomPrenom">

                                            @error('nomPrenom')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label class="form-label">Date d'enrégistrement</label>
                                            <input type="date" class="form-control @error('registered') is-invalid @enderror" name="registered" required autocomplete="registered">

                                            @error('registered')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                    </div>   

                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label class="form-label">Donner un titre à la facture</label>
                                            <input type="text" class="form-control @error('titreFact') is-invalid @enderror" name="titreFact" required autocomplete="titreFact" autofocus>

                                            @error('titreFact')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                    </div>                                                               

                                </div>

                                <hr style="color:red;">
                                <h5 class="card-header">Corps de la facture </h5>
                                <br>

                                <div id="corpfact" class="row justify-content-center">   

                                    <div class="col-md-12">

                                        <table class="table table-bordered" id="tab_logic">

                                            <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>Libellé</th>
                                                    <th>Quantité</th>
                                                    <th>Prix Unitaire</th>
                                                    <th>Montant HT</th>
                                                </tr>
                                            </thead>

                                            <tbody>
                                                <tr id='addr0'>
                                                    <td>1</td>

                                                    <td>
                                                        <input type="text" name='libelle[]'  placeholder='Entrer la description' required class="form-control"/>
                                                    </td>

                                                    <td>
                                                        <input type="number" name='qty[]' placeholder='Entrer la quantité' class="form-control qty" step="0" min="0"/>
                                                    </td>

                                                    <td>
                                                        <input type="number" name='price[]' placeholder='Entrer le prix unitaire' class="form-control price" step="0.00" min="0"/>
                                                    </td>
                                                
                                                    <td>
                                                        <input type="number" name='total[]' placeholder='0.00' class="form-control total" readonly/>
                                                    </td>

                                                </tr>
                                                <tr id='addr1'></tr>
                                            </tbody>
                                            
                                        </table>
                                        
                                    </div>

                                </div>

                                <div class="row">
                                    <div class="col-md-12">
                                        <br>
                                        <button type="button" id="add_row" class="btn btn-primary">Ajouter</button>

                                        <button type="button" id='delete_row' class="btn btn-danger" style="float: right;">Supprimer</button>
                                    </div>
                                    
                                </div>

                                <div class="row" style="margin-top:20px" >
                                    <div class="col-md-4">
                                        <table class="table table-bordered" id="tab_logic_total" >
                                            <tbody>
                                                <tr>
                                                    <th>Montant Total HT</th>
                                                    <td>
                                                        <input type="text" name='sub_total' placeholder='0.00' class="form-control" id="sub_total" readonly/>
                                                    </td>
                                                </tr>

                                                <tr>
                                                    <th>Taxes (TVA) %</th>
                                                        <td><div class="input-group mb-2 mb-sm-0">
                                                        <input type="number" class="form-control" id="tax" placeholder="0" name="taxes" value="0">
                                                        </div>
                                                    </td>
                                                </tr>

                                                <tr>
                                                    <th>Montant Taxes</th>
                                                    <td><input type="text" name='tax_amount' id="tax_amount" placeholder='0.00' class="form-control" readonly/></td>
                                                </tr>

                                                <tr>
                                                    <th>Montant Total TTC</th>
                                                    <td><input type="text" name='total_amount' id="total_amount" placeholder='0.00' class="form-control" readonly/></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    
                                </div>

                                
                                <div class="row justify-content-center mb-0">
                                    <button type="submit" class="btn btn-primary bg-yellow text-white">Enregistrer</button>
                                </div>
                            </form>  
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
@endsection

@section('footerjs')
    <script type="text/javascript">
        $(document).ready(function(){
            var i=1;
            $("#add_row").click(function(){b=i-1;
                $('#addr'+i).html($('#addr'+b).html()).find('td:first-child').html(i+1);
                $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
                i++; 
            });
            $("#delete_row").click(function(){
                if(i>1){
                $("#addr"+(i-1)).html('');
                i--;
                }
                calc();
            });
            
            $('#tab_logic tbody').on('keyup change',function(){
                calc();
            });
            $('#tax').on('keyup change',function(){
                calc_total();
            });
            

        });

        function calc()
        {
            $('#tab_logic tbody tr').each(function(i, element) {
                var html = $(this).html();
                if(html!='')
                {
                    var qty = $(this).find('.qty').val();
                    var price = $(this).find('.price').val();
                    $(this).find('.total').val(qty*price);
                    
                    calc_total();
                }
            });
        }

        function calc_total()
        {
            total=0;
            $('.total').each(function() {
                total += parseInt($(this).val());
            });
            $('#sub_total').val(total.toFixed(2));
            tax_sum=total/100*$('#tax').val();
            $('#tax_amount').val(tax_sum.toFixed(2));
            $('#total_amount').val((tax_sum+total).toFixed(2));
        }
    </script>

    <script>
        const typeSelect = document.getElementById('client_exist');
        const client = document.getElementById('client');
        const new_client = document.getElementById('new_client');
            typeSelect.addEventListener('change', (event) => {
            const selectedType = event.target.value;
            if (selectedType == 1) {
                client.style.display = 'block';
                new_client.style.display = 'none';
            }else if (selectedType == 0){
                new_client.style.display = 'block';
                client.style.display = 'none';
            }else{
                client.style.display = 'none';
                new_client.style.display = 'none';
            }

          });
    </script>
@endsection