@extends('admin')

@section('head')
    <meta name="csrf-token" content="{{ csrf_token() }}">

@endsection

@section('title')
NotaireApp - Créer Nouveau Devis
@endsection


@section('content')


@section('menu-title')
<!-- BEGIN: Breadcrumb -->

<div class="-intro-x breadcrumb mr-auto hidden sm:flex"> <a href="{{ url('/admin') }}" class="">NotairesApp</a> <i
        data-feather="chevron-right" class="breadcrumb__icon"></i> <a href="#/" class="breadcrumb--active">Créer un
        nouveau facture</a> </div>
<!-- END: Breadcrumb -->
@endsection

<div class="intro-y flex items-center mt-8">
    <h2 class="text-lg font-medium mr-auto">
        Créer Un Nouveau Devis
    </h2>
</div>

<form method="post" action="" id="fileinfo" enctype="multipart/form-data"> 
@csrf
    <div class="grid grid-cols-12 gap-12 mt-5">

        <div class="intro-y col-span-12 lg:col-span-12">
            <!-- BEGIN: Input -->
            <div class="intro-y box p-5">
        

                    <div class="my-3">

                        <div class="">
                            <label> N° Dossier </label>
                            <div class="sm:mt-2">
                                
                                <select class="input w-full mt-2 border-2 selectedossier" name="id_dossier">
                                    <option value="">Selectionner un dossier</option>
                                    @foreach($dossiers as $dossier)
                                    <option value="{{$dossier->id  }}">{{$dossier->num_dossier}}
                                    </option>
                                    @endforeach
                                </select>
                                <div class="help-block form-text with-errors form-control-feedback">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mt-3">
                        <label>Acheteurs</label>
                        <div class="mt-2">
                            <select name="id_client" class="input w-full mt-2 border-2 acheteur" >
                                <option value="">Selectionner un acheteur</option>
                            </select>
                        </div>
                    </div>
                               


                    <div class="my-2">
                        <div class="">
                            <div class="">
                                <label for="">Montant</label>
                                <input id="montant-val" class="input w-full border-2 mt-2 montant" name="montant" placeholder="Montant"
                                    type="text">

                            </div>
                        </div>
                    </div>


                    <div class="my-2">
                        <div class="">
                            <div class="">
                                <label for="">Date Devis</label>
                                <input class="input w-full border-2 mt-2 " name="date_devis"
                                    placeholder="Date" type="date" value="2024-09-20">

                            </div>
                        </div>
                    </div>
                    

                    <div class="my-2">
                        <div class="">
                            <div class="">
                                <label for="">Remarque</label>
                                <textarea class="input w-full border mt-2" name="remarque"
                                    placeholder="Ramarque"></textarea>
                            </div>
                        </div>
                    </div>


                        
                </form>
            </div>
            <!-- END: Input -->



        </div>


        <div class="intro-y col-span-12 lg:col-span-12">

        <div class="intro-y box">
                <div class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5">
                    <h2 class="font-medium text-base mr-auto">
                    Les Produits
                    </h2>

                    <a onclick="" href="javascript:;" name="create_record" id="create_record" data-toggle="modal" data-target="#header-footer-modal-preview" class="create button border relative flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300 hidden sm:flex">
                        Ajouter Nouveau Produit
                    </a>

                </div>

                <div class="p-5">

                    <div class="p-5" id="head-options-table">
                        <div class="preview">
                            <div class="overflow-x-auto">


                                <table id="laravel_crud" class="table table-striped table-bordered">
                                    <thead>
                                        <tr class="bg-gray-700 dark:bg-dark-1 text-white">
                                            <th class="whitespace-no-wrap">#</th>
                                            <th class="whitespace-no-wrap">Produit</th>
                                            <th class="whitespace-no-wrap">Remise</th>
                                            <th class="whitespace-no-wrap">Prix</th>
                                            <th class="whitespace-no-wrap">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                                                                @foreach($detail_devis as $produit)

                                                                                <tr id="row_{{$produit->id}}">
                                            <td class="border-b dark:border-dark-5">{{ $produit->id  }}</td>
                                            <td class="border-b dark:border-dark-5">{{ $produit->designation }}</td>
                                            <td class="border-b dark:border-dark-5">{{ $produit->remise }} %</td>
                                            <td class="border-b dark:border-dark-5">{{ $produit->prix }}</td>
                                            <td class="border-b dark:border-dark-5">
                                                <div class="flex justify-center items-center">
                                                
                                                    <a data-id="{{ $produit->id }}" class="flex items-center text-theme-6" href="javascript:;" data-toggle="modal" data-target="#delete-confirmation-modal{{ $produit->id }}" > <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2 w-4 h-4 mr-1"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg></a>
                                                </div>
                                            </td>
                                        </tr>


                                        <!-- BEGIN: Delete Confirmation Modal -->
                                        <div class="modal" id="delete-confirmation-modal{{ $produit->id }}">
                                                <div class="modal__content">
                                                    <div class="p-5 text-center">
                                                        <i data-feather="x-circle" class="w-16 h-16 text-theme-6 mx-auto mt-3"></i> 
                                                        <div class="text-3xl mt-5">Êtes-vous sûr? </div>
                                                        <div class="text-gray-600 mt-2">Voulez-vous vraiment supprimer ces enregistrements? Ce processus ne peut pas être annulé.</div>
                                                    </div>
                                                    <div class="px-5 pb-8 text-center">
                                                        <button type="button" data-dismiss="modal" class="button w-24 border text-gray-700 mr-1">Annuler</button>
                                                        <a data-dismiss="modal" data-id="{{ $produit->id }}" class="button w-24 bg-theme-6 text-white" onclick="deleteDetailDevis(event.target)" >Supprimer</a>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- END: Delete Confirmation Modal -->
                                        @endforeach
                                    </tbody>
                                    </table>

                            </div>
                        </div>

                    </div>

                    <div class="modal" id="delete-confirmation-modal">
                        <div class="modal__content">
                            <div class="p-5 text-center">
                                <i data-feather="x-circle" class="w-16 h-16 text-theme-6 mx-auto mt-3"></i> 
                                <div class="text-3xl mt-5">Êtes-vous sûr? </div>
                                <div class="text-gray-600 mt-2">Voulez-vous vraiment supprimer ces enregistrements? Ce processus ne peut pas être annulé.</div>
                            </div>
                            <div class="px-5 pb-8 text-center">
                                <button type="button" data-dismiss="modal" class="button w-24 border text-gray-700 mr-1">Annuler</button>
                                <a id="del_prod_btn" data-dismiss="modal" data-id="" class="button w-24 bg-theme-6 text-white" onclick="deleteDetailDevis(event.target)" >Supprimer</a>
                            </div>
                        </div>
                    </div>
                    <br>

                    <div class="relative flex items-center ">

                        <div class="ml-4 mr-auto">
                            <a href="" class="font-medium">Total :</a> 
                        </div>
                        <div class="font-medium text-gray-700 dark:text-gray-600"><span id="total_lbl">{{ $tot }}</span> DHS</div>
                    </div>
                </div>

                
                <div class="modal" id="header-footer-modal-preview">
                    <span class="success" style="color:green; margin-top:10px; margin-bottom: 10px;"></span>
                    <form class="" name="userForm"enctype="multipart/form-data" style="margin-top: 150px;">
                        <div class="modal__content">
                            <div class="p-5 grid grid-cols-12 gap-4 row-gap-3">
                                <input type="hidden" name="devis_detail_id" id="devis_detail_id">
        
                                <div class="col-span-12 sm:col-span-6">
                                    <label>Produit</label>
                                    <select class="input w-full border mt-2 flex-1 selecteproduit" data-placeholder="Selectionner un produit" name="id_produit" id="id_produit">
                                        <option value="0">Selectionner un produit</option>
                                        @foreach($produits as $produit)
                                        <option value="{{$produit->id}}" des="{{$produit->designation}}">{{$produit->designation}}</option>
                                        @endforeach
                                    </select>

                                </div>

                                <div class="col-span-12 sm:col-span-6">
                                        <label>Remise %</label>
                                        <input type="text" class="input w-full border mt-2 flex-1 remise" id="remise" name="remise" placeholder="%">
                                    </div>
                                    <div class="col-span-12 sm:col-span-12">
                                        <label>Prix</label>
                                        <input type="text" class="input w-full border mt-2 flex-1 prix" id="prix" name="prix" placeholder="Prix">
                                    </div>
                               
                            </div>
                            <div class="px-5 py-3 text-right border-t border-gray-200 dark:border-dark-5">
                                <button type="button" data-dismiss="modal" class="button w-20 border text-gray-700 dark:border-dark-5 dark:text-gray-300 mr-1">Cancel</button>

                                <button type="button" data-dismiss="modal" class="button w-20 bg-theme-1 text-white save-data" name="action_button" id="action_button" onclick="createDetailDevis()">Ajouter</button>
                            </div>
                        </div>
                    </form>
                    
                </div>

                

        </div>

        <div class="my-2">
            <button class="button bg-theme-1 text-white mt-5 valid" type="submit">
                Enregistrer</button>
        </div>


    </div>
</form>



@endsection

@section('script')


<script>
    $(document).ready(function () {
        $("#bord").attr('class', 'side-menu');
        $("#client").attr('class', 'side-menu side-menu');
        $('#propr').attr('class', 'side-menu side-menu');
        $('#dossier').attr('class','side-menu side-menu');
        $('#facture').attr('class','side-menu side-menu');
        $('#devis').attr('class','side-menu side-menu--active');
    });

    
    
</script>


<script src="{{asset('dist/js/app.js')}}"></script>

<script type="text/javascript">
    prixh=0;
    prixinit=0;
    remiseTVA=0;
    $(document).ready(function(){

        $(document).on('change','.selectedossier',function(){
            //console.log("hmm its change");

            var dossier_id=$(this).val();
            console.log(dossier_id);
            var a=$('.montant').parent();

            var op=" ";

            $.ajax({
                type:'get',
                url:'{!!URL::to('/admin/dossier/findMontant')!!}',
                data:{'id':dossier_id},
                dataType:'json',//return data will be json
                success:function(data){
                    a.find('.montant').val(data.montant_global_acte);
                },
                error:function(){
                }
            });

        });


        $(document).on('change','.selectedossier',function(){
            //console.log("hmm its change");

            var dossier_id=$(this).val();
            // console.log(dossier_id);
            
            var div=$('.acheteur').parent();

            var op=" ";
            $.ajax({
                type:'get',
                url:'{!!URL::to('/admin/dossier/findAcheteur')!!}',
                data:{'id':dossier_id},
                success:function(data){

                    // console.log(data);


                    op+='<option value="">Selectionner un acheteur</option>';
                    for(var i=0;i<data.length;i++){ 
                        
                        if(data[i].type == 0){
                            op+='<option value="'+data[i].userid+'">'+data[i].raisonsocial+'</option>';
                        }else{
                            op+='<option value="'+data[i].userid+'">'+data[i].prenom+' '+data[i].name+'</option>';
                        }
                            
                    // console.log(data[i].titre);

                    }

                    div.find('.acheteur').html(" ");
                    div.find('.acheteur').append(op);
                    
                },
                error:function(){

                }
            });
        });


        $(document).on('change','.selecteproduit',function(){
            //console.log("hmm its change");

            var produit_id=$(this).val();
            
            var p=$('.prix').parent();
            var r=$('.remise').parent();
            var m=$('.montant').val();
            
            var op=" ";

            $.ajax({
                type:'get',
                url:'{!!URL::to('/admin/produit/findProduitData')!!}',
                data:{'id':produit_id},
                dataType:'json',//return data will be json
                success:function(data){
                    des=data.designation;
                    tva=des.toUpperCase();
                    
                    r.find('.remise').val(data.remise);
                    p.find('.prix').val(" ");
                    
                    if(tva!=''){
                        des2='Honoraires',
                        $.ajax({
                            data:{key:produit_id},
                            url:'{!!URL::to('/admin/produit/findProduitData')!!}',
                            dataType:'json',
                            type:'get',
                            success:function(data2){
                                prixh=m;
                                prixinit=data2.prix;
                                $(".remise").bind("change paste keyup", function() {
                                    
                                    if(tva!=''){
                                        // console.log(tva);
                                        
                                        if($('.remise').val().length>0){
                                            remiseTVA=prixh * ($('.remise').val() / 100)
                                            
                                        }else{
                                            remiseTVA=prixh;
                                            
                                        }
                                            p.find('.prix').val(remiseTVA );
                                    }
                                    
                                    // console.log(prixh);
                                });
                                p.find('.prix').val(prixh * (data.remise / 100) );
                            },
                            error:function(error){
                                console.log(error);
                            },
                        });
                    }
                    
                },
                error:function(){

                }
            });
        });


    });
    


    $('#laravel_crud').DataTable();

    function addPost() {
            $("#produit_id").val('');
            $('#header-footer-modal-preview').modal('show');
    }

    function editProduit(event) {
            var id  = $(event).data("id");
            let _url = `/admin/produits/${id}`;
            /*$('#titleError').text('');
            $('#descriptionError').text('');*/

            $.ajax({
                url: _url,
                type: "GET",
                success: function(response) {
                    if(response) {
                        $("#produit_id").val(response.id);
                        $("#designation").val(response.designation);
                        $("#prix").val(response.prix);
                        $("#remise").val(response.remise);
                        $('#header-footer-modal-preview').modal('show');
                    }
                }
            });
    }

    function del_new(event)
	{
		$('#del_prod_btn').attr('data-id', $(event).data('id'))
	}
	
    function createDetailDevis(){

            var designation = $('#designation').val();
            var remise = eval($('#remise').val());
            var prix = eval($('#prix').val());
            var montantDevis = eval($('#montant-val').val());
            var total = eval($('#total_lbl').text());
            var id_produit = $('#id_produit').val();
            var id = $('#devis_detail_id').val();
            des=$('#id_produit :selected').attr('des');
            //Calculate total
            if($('#remise').val()){$('#remise').val(0);}
            if(des.toUpperCase()!=""){
                total += (remise == 0)?(prix):(montantDevis * remise * 0.01);
            }else{
                total += (remiseTVA == 0)?(prix):(prixinit * remiseTVA * 0.01);
                
            }
            
            // console.log(designation);
            $('#total_lbl').text(total);
            $('#mytable tr').each(function() {
                var customerId = $(this).find(".customerIDCell").html();    
            });


            
        //last
//            let _url     = `/admin/detaildevis`;
//            let _token   = $('meta[name="csrf-token"]').attr('content');
//
//            $.ajax({
//            url: _url,
//            type: "POST",
//            data: {
//                id: id,
//                id_devis: 0,
//                id_produit: id_produit,
//                remise: remise,
//                prix: prix,
//                _token: _token
//            },
//            success: function(response) {
//                if(response.code == 200) {
//                    if(id != ""){
//                    $("#row_"+id+" td:nth-child(2)").html(response.data.id_produit);
//                    $("#row_"+id+" td:nth-child(3)").html(response.data.remise);
//                    $("#row_"+id+" td:nth-child(4)").html(response.data.prix);
//                    } else {
//                        $('table tbody').prepend('<tr id="row_'+response.data.id+'"><td class="border-b dark:border-dark-5">'+response.data.id+'</td><td class="border-b dark:border-dark-5">'+response.data.id_produit+'</td><td class="border-b dark:border-dark-5">'+response.data.remise+' %</td><td class="border-b dark:border-dark-5">'+response.data.prix+'</td><td class="border-b dark:border-dark-5"><div class="flex justify-center items-center"><a onclick="del_new(this)" class="flex items-center text-theme-6" data-dismiss="modal" data-toggle="modal" data-target="#delete-confirmation-modal" data-id="'+response.data.id+'" style="cursor: pointer;"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2 w-4 h-4 mr-1"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg></a></div></td></tr>');
//                    }
//                    $('#id_produit').val('');
//                    $('#remise').val('');
//                    $('#prix').val('');
//
//                    //$('#post-modal').modal('hide');
//                }
//            },
//            error: function(err) {
//				console.error('error found xc');
//                console.log(err);
//            }
//            });
		//end last
		//custom
            let _url     = "{{ route('detailDev.store') }}";
            let _token   = $('meta[name="csrf-token"]').attr('content');

            $.ajax({
            url: _url,
            type: "POST",
            data: {
                id: id,
                id_devis: 0,
                id_produit: id_produit,
                remise: remise,
                prix: prix,
                _token: _token
            },
            success: function(response) {
                if(response.code == 200) {
                    if(id != ""){
                    $("#row_"+id+" td:nth-child(2)").html(response.data.id_produit);
                    $("#row_"+id+" td:nth-child(3)").html(response.data.remise);
                    $("#row_"+id+" td:nth-child(4)").html(response.data.prix);
                    } else {
                        $('table tbody').prepend('<tr id="row_'+response.data.id+'"><td class="border-b dark:border-dark-5">'+response.data.id+'</td><td class="border-b dark:border-dark-5">'+response.data.designation+'</td><td class="border-b dark:border-dark-5">'+response.data.remise+' %</td><td class="border-b dark:border-dark-5">'+response.data.prix+'</td><td class="border-b dark:border-dark-5"><div class="flex justify-center items-center"><a onclick="del_new(this)" class="flex items-center text-theme-6" data-dismiss="modal" data-toggle="modal" data-target="#delete-confirmation-modal" data-id="'+response.data.id+'" style="cursor: pointer;"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2 w-4 h-4 mr-1"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg></a></div></td></tr>');
                    }
                    $('#id_produit').val('');
                    $('#remise').val('');
                    $('#prix').val('');
                    
                    //$('#post-modal').modal('hide');
                }
            },
            error: function(err) {
				console.error('error found xc');
                console.log(err);
            }
            });
		//endcustom
    }

    function deleteDetailDevis(event) {
        var id  = $(event).data("id");
        let url_t = "{{ url('/admin/detaildevis') }}" + "/" + id;
        let _url = url_t;
        let _token   = $('meta[name="csrf-token"]').attr('content');
        let prix = eval($("#row_" + id + " td:nth-child(4)").text());
        let remise = eval($("#row_" + id + " td:nth-child(3)").text().replace(' %', ''));
        let montantDevis = eval($('#montant-val').val());
        let total = eval($('#total_lbl').text());
        total -= (remise == 0)?(prix):(montantDevis * remise * 0.01);
        console.log(total);
        $('#total_lbl').text(total);
        $.ajax({
            url: _url,
            type: 'DELETE',
            data: {
                _token: _token
            },
            success: function(response) {
                $("#row_"+id).remove();
            }
        });
    }


    


</script>
@endsection