@extends('admin')

@section('title')
    NotaireApp - Créer Un Nouveau Versement
@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">Ajouter Un
            Nouveau Versement</a> </div>
    <!-- END: Breadcrumb -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
@endsection
<div class="intro-x container bg-white mt-2 px-8 py-8 rounded-lg">
    <div class="container">
       
        <div class="my-3">
            <div class="">
                <form action="{{ route('admin.reg.add') }}" method="get" enctype="multipart/form-data">
                    <div class="grid lg:grid-cols-3 md:grid-cols-1 sm:grid-cols-1 gap-2 first_row">
                        <div class="my-3 flex flex-col mr-2 w-full">
                            <div class="" id="vertical-form">
                                <label class="mb-2 font-semibold">Dossier</label>
                                <select data-placeholder="Selectionner un acheteur" name="id_dos"
                                    class="input w-full mt-2 border-2 id_dos" required>
                                    @foreach ($dos as $dos)
                                        <option value="{{ $dos->id }}">{{ $dos->num_dossier }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="my-3 flex flex-col mr-2 w-full">
                            <div class="" id="vertical-form">
                                <label class="mb-2 font-semibold"> Qualité</label>
                                @include('admin.reglement.quality_ajax')
                            </div>
                        </div>
                        <div class="my-3 flex flex-col mr-2 w-full">
                            <div class="listcli" id="vertical-form">
                                <label class="mb-2 font-semibold"> Client </label>
                                <select data-placeholder="Selectionner un acheteur" name="client"
                                    class="input w-full mt-2 border-2 lselect" required>
                                    <option value="" selected>Sélectionner un Client</option>
                                    {{-- @foreach ($clients as $client)
                                    <option value="{{$client->id}}">
                                    
                                        @if ($client->type == 0)
                                            {{$client->raisonsocial}}
                                        @else
                                            {{$client->prenom}} {{$client->name}} 
                                        @endif
                                        
                                    </option>
                                @endforeach --}}
                                </select>
                            </div>
                        </div>
                    </div>
                    {{-- <div class="lg:flex lg:flex-row md:grid md:grid-cols-1 gap-2"> --}}
                    <div class="grid lg:grid-cols-2 md:grid-cols-1 sm:grid-cols-1 gap-2">

                        <div class="my-3 flex flex-col w-full hidden">
                            <label class="font-semibold" for=""> Désignation </label>
                            <select name="designation" class="input w-full mt-2 border-2">
                                <option value="0">Sélectionner une désignation</option>
                                @foreach ($DepenseName as $dsig)
                                    <option value="{{ $dsig->dep_name }}">{{ $dsig->dep_name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="my-3 flex flex-col w-full">
                            <label class="font-semibold" for=""> Mode de versement </label>

                            <select class="input w-full mt-2 border-2 mode_regl" required name="mode" id="">
                                <option value="Espèces">Espèces</option>
                                <option value="Cheque">Cheque</option>
                                <option value="Virement">Virement</option>
                                <option value="Carte bancaire">Carte bancaire</option>
                                {{-- <option value="Effect">Effect</option> --}}
                                <option value="Autre">Autre</option>
                            </select>
                        </div>

                        <div class="my-3 flex flex-col w-full">
                            <label class="font-semibold" for=""> Type de versement </label>
                            <select class="input w-full mt-2 border-2" required name="type_reg" id="">
                                <option value="Partielle">Partielle</option>
                                <option value="Totale">Totale</option>
                            </select>
                        </div>
                        <div class="my-3 flex flex-col mr-2 w-full num_f_c hidden">
                            <label class="font-semibold lab_num" for="">Numéro</label>
                            <input type="text" name="num_reg" placeholder="Veuillez Entrer Un Numéro" name="num_reg"
                                min="0" class="w-full input  mt-2 border-2 ">
                        </div>
                    </div>

                    <div class="flex flex-row my-2">
                        <div class="flex flex-col w-full">
                            <label class="font-semibold" for=""> Date De Versement </label>
                            <input type="date" id="" value="{{ date('Y-m-d') }}" name="date_reg"
                                class="input w-full  mt-2 border-2">
                        </div>
                        <div class="flex flex-col w-full mx-2">
                            <label class="font-semibold" for=""> Montant</label>
                            <input type="number" step=0.01 required placeholder="Veuillez Entrer Un Montant"
                                name="montant" min="0" class="input w-full  mt-2 border-2">
                        </div>
                    </div>

                    <div class="grid  lg:grid-cols-4 mb:grid-cols-2 sm:grid-cols-1 gap-4">
                        <div class="flex flex-row">
                            <label class="font-semibold" for="">Validé</label>
                            <div class="mt-3 flex flex-row">
                                <div class="flex items-center text-gray-700 dark:text-gray-500 mr-2">
                                    <input type="radio" required name="valid" value="1"
                                        class="horizontal-radio-liam-neeson mx-2"><span
                                        class="horizontal-radio-liam-neeson">Oui</span>
                                </div>
                                <div class="flex items-center text-gray-700 dark:text-gray-500 mr-2">
                                    <input type="radio" checked required name="valid" value="0"
                                        class="horizontal-radio-liam-neeson mx-2"><span
                                        class="horizontal-radio-liam-neeson">Non</span>
                                </div>
                            </div>
                        </div>

                        <div class="flex flex-col w-full mx-2">
                            <label class="font-semibold" for="">Compte</label>
                            <select required class="input w-full mt-2 border-2" name="id_comptbanc" id="">
                                <option value="1">Client Recettes</option>
                                <option value="2">Client Depenses</option>
                                <option value="3">Etude Recettes</option>
                                <option value="4">Etude Depenses</option>
                            </select>
                        </div>
                        <div class="flex flex-col w-full mx-2">
                            <label class="font-semibold" for="">Date D'échéance</label>
                            <input required type="date" id="ech" value="{{ date('Y-m-d') }}"
                                name="date_ech" class="input w-full  mt-2 border-2">
                        </div>
                        <div class="flex flex-col w-full mx-2">
                            <label class="font-semibold">Comptes Bancaires</label>
                            <select required class="input w-full mt-2 border-2" name="id_compt">
                                <option value="0" selected>Séléctionner un compte</option>
                                @foreach ($cmpt as $cmpt)
                                    <option value="{{ $cmpt->id }}">{{ $cmpt->nomCompt }}--{{ $cmpt->munCompt }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="my-2">
                        <div class="">
                            <div class="">
                                <label class="font-semibold">Remarque</label>
                                <textarea class="input w-full border-2 mt-2 border-gray-400" name="remarque"></textarea>
                            </div>
                        </div>
                    </div>

                    <div class="my-2">
                        <button class="button bg-theme-1 text-white mt-5 enr" type="submit">Enregistrer</button>
                        {{-- <butaton class="button  text-white mt-5 cncl" style="background-color: #bfbfbf;" type="submit"> Annuler</button> --}}
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        $('.mode_regl').change(function() {
            if ($(this).val() == 'Effect' || $(this).val() == 'Cheque') {
                if ($(this).val() == 'Effect') {
                    $('.lab_num').html("Numéro De Effect");
                } else {
                    $('.lab_num').html("Numéro De Cheque");
                }
                $('.num_f_c').show();
            } else {
                $('.num_f_c').hide();
            }
        });
        $("#bord").attr('class', 'side-menu');
        $("#client").attr('class', 'side-menu');
        $('#propr').attr('class', 'side-menu ');
        $('#reg').attr('class', 'side-menu side-menu--active');
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $('.id_dos').change(function() {
            $.ajax({
                url:`{{route('get_type_affaire')}}`,
                data:{id_doss : $('.id_dos').val()},
                dataType:'json',
                type:'post',
                success:function(data){
                    // if(data == 'Non immobiliers'){
                    //     $('.type_cli').prop('selectedIndex',1);
                       
                    //     $('.type_cli').parent().parent().hide("slow");
                    //     $('.type_cli').trigger('click');
                    //     $('.first_row').attr('class',"grid lg:grid-cols-2 md:grid-cols-2 sm:grid-cols-2  gap-2 first_row")
                    // }else{
                    //     $('.type_cli').prop('selectedIndex',0);
                    //     $('.type_cli').parent().parent().show("slow");
                    //     $('.first_row').attr('class',"grid lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-2 gap-2 first_row")
                    // }
                    $('.type_cli').html(data.view)
                    console.log(data);
                },
                error:function(error){
                    console.log(error);
                },
            });
            
        });
        $('.type_cli').change(function() {
            if ($(this).val() != 0) {
                $.ajax({
                    data: {
                        type_cli: $('.type_cli').val(),
                        id_dos: $('.id_dos').val(),
                        type_client : $('.type_cli option:selected').data('id')
                    },
                    url: "{{ route('admin.reg.task') }}",
                    dataType: 'json',
                    type: 'post',
                    success: function(data) {
                        $('.lselect').html("");
                        console.log(data);
                        $.each(data, function(key, value) {
                            if (value.type == 0) {
                                $('.lselect').append("<option value=" + value.id +
                                    ">" + value.raisonsocial + "</option>");
                            } else {
                                $('.lselect').append("<option value=" + value.id +
                                    ">" + value.name + " " + value.prenom +
                                    "</option>");
                            }
                        });
                    },
                    error: function(error) {
                        console.log(error);
                    },
                });
            } else if ($(this).val() == 0) {
                //  $('.lselect').find("option:selected");
                $('.lselect').val("");
                $('.lselect').html("<option value=''>Sélectionner un Client</option>");
            }
        });
    });
</script>
@endsection