@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="">
                <h2 class="intro-y text-lg font-medium mt-3 mb-8">
                    {{ $num_dos }}{{ $num_aff }}{{ $num_rep }}</h2>
                <form action="{{ route('admin.reg.add') }}" method="get" enctype="multipart/form-data">
                    <input type="hidden" class="id_dos" name="id_dos" value="{{ $id_dos }}">
                    <div class="flex flex-row">
                        <div class="my-3 flex flex-col mr-2 w-full">
                            <div class="" id="vertical-form">
                                <label class="mb-2 font-semibold">Qualité </label>
                                {{-- <select {{ $props == 'Non immobilier' ? 'disabled' : '' }}
                                    data-placeholder="Selectionner un acheteur" name="type_client"
                                    class="input w-full mt-2 border-2 type_cli" required>
                                    <option value="{{ $props == 'Non immobilier' ? 'Acheteur' : '0' }}" selected>Sélectionner un Type</option>
                                    <option value="Acheteur" {{ $props == 'Non immobilier' ? 'selected' : '' }}>
                                        Client</option>
                                    <option value="Vendeur">Vendeur</option>
                                </select> --}}
                                @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>

                                </select>
                            </div>
                        </div>
                    </div>
                    {{-- <div class="flex flex-row my-2"> --}}
                    <div class="grid lg:grid-cols-2 md:grid-cols-1 sm:grid-cols-1 gap-2">

                        <div class="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="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="Autre">Autre</option>
                            </select>
                        </div>
                        <div class="flex flex-col w-full ml-2">
                            <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="flex flex-col w-full mx-2 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="input w-full  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')
            }
        });
        // $('.type_cli').click(function() {
        //     if ($(this).val() != 0) {
        //         $.ajax({
        //             data: {
        //                 type_cli: $('.type_cli').val(),
        //                 id_dos: $('.id_dos').val()
        //             },
        //             url: "{{ route('admin.reg.task') }}",
        //             dataType: 'json',
        //             type: 'post',
        //             success: function(data) {
        //                 $('.lselect').html("");
        //                 $.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>");

        //     }


        // });
        $('.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>");
            }
        });
        `@if ($props == 'Non immobilier')` 
            $('.type_cli').trigger('chnage');
        `@endif`
});
</script>
@endsection