@extends('admin')

@section('title')
NotaireApp - Créer Nouveau Client
@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 dossier</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 Dossier
    </h2>
</div>

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

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

            <!-- BEGIN: Vertical Form -->
            <div class="intro-y box mb-3">
                <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">
                        Ajouter une propriéte
                    </h2>
                </div>
                <div class="p-5" id="vertical-form">
                    <label>Dénomination affaire</label>
                    <div class="preview">
                        <select class="input w-full mt-2 border-2 id_propriete" name="id_propriete">
                            <option value="0">Sélectionner une option</option>
                            @foreach ($proprietes as $propriete)
                            <option value="{{ $propriete->id }}">{{ $propriete->denomination }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
            <!-- BEGIN: Input -->

            <div class="intro-y box p-5">


                <div class="my-3">
                    <div class="">
                        <div class="">
                            <label for=""> N°Dossier </label>
                            <input class="input w-full  mt-2 border-2 @error('num_dossier') is-invalid @enderror" name="num_dossier" placeholder="N° Dossier " required="required" type="text">
                            @error('num_dossier')
                            <div style="padding:6px 0px; color:#721c24;">
                                Ce numéro de dossier est déjà existe
                            </div>
                            @enderror

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

                <div class="my-3">
                    <div class="">
                        <div class="">
                            <label for="">N°Affaire </label>
                            <input class="input w-full  mt-2 border-2" name="num_affaire" placeholder="N° Affaire" type="text">

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

                <div class="my-3">
                    <div class="">
                        <div class="">
                            <label for="">N°Répertoire </label>
                            <input class="input w-full  mt-2 border-2" name="num_repertoire" placeholder="N° Répertoire" type="text">

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

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

                <div class="my-3 ">
                    <div class="">
                        <label> Nature d'opération </label>
                        <div class="sm:mt-2">
                            <select class="input w-full mt-2 border-2" name="nature_doperation">
                                @foreach ($nature_operations as $no)
                                <option value="{{ $no->id_operation }}">{{ $no->nature_doperation }}
                                </option>
                                @endforeach
                            </select>
                            <div class="help-block form-text with-errors form-control-feedback">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="Form_imob">
                    <div class="mt-3" style="display: flex;"> <label>Mainlevée :</label>
                        <div class="flex flex-col sm:flex-row mt-2" style="margin-top: auto;margin-left: 50px;">
                            <div class="flex items-center text-gray-700 dark:text-gray-500 mr-2"><input type="radio" class="input border mr-2" id="horizontal-radio-chris-evans" name="mainlevee" value="1"> <label class="cursor-pointer select-none" for="horizontal-radio-chris-evans">Oui</label> </div>
                            <div class="flex items-center text-gray-700 dark:text-gray-500 mr-2 mt-2 sm:mt-0">
                                <input type="radio" class="input border mr-2" id="horizontal-radio-liam-neeson" name="mainlevee" value="0" checked> <label class="cursor-pointer select-none" for="horizontal-radio-liam-neeson">Non</label>
                            </div>
                        </div>
                    </div>

                    <div class="mt-3" style="display: flex;"> <label>Quitu fiscal :</label>
                        <div class="flex flex-col sm:flex-row mt-2" style="margin-top: auto;margin-left: 22px;">
                            <div class="flex items-center text-gray-700 dark:text-gray-500 mr-2"><input type="radio" class="input border mr-2" id="horizontal-radio-chris-evans" name="qfiscale" value="1"> <label class="cursor-pointer select-none" for="horizontal-radio-chris-evans">Oui</label> </div>
                            <div class="flex items-center text-gray-700 dark:text-gray-500 mr-2 mt-2 sm:mt-0">
                                <input type="radio" class="input border mr-2" id="horizontal-radio-liam-neeson" name="qfiscale" value="0" checked> <label class="cursor-pointer select-none" for="horizontal-radio-liam-neeson">Non</label>
                            </div>
                        </div>
                    </div>


                    <div class="mt-3" style="display: flex;"> <label>Hypothèque :</label>
                        <div class="flex flex-col sm:flex-row mt-2" style="margin-top: auto;margin-left: 38px;">
                            <div class="flex items-center text-gray-700 dark:text-gray-500 mr-2"><input type="radio" class="input border mr-2" id="horizontal-radio-chris-evans" name="hypotheque" value="1">
                                <label class="cursor-pointer select-none" for="horizontal-radio-chris-evans">Oui</label>
                            </div>
                            <div class="flex items-center text-gray-700 dark:text-gray-500 mr-2 mt-2 sm:mt-0">
                                <input type="radio" class="input border mr-2" id="horizontal-radio-liam-neeson" name="hypotheque" value="0" checked>
                                <label class="cursor-pointer select-none" for="horizontal-radio-liam-neeson">Non</label>
                            </div>
                        </div>
                    </div>

                    <div class="mt-3" style="display: flex;"> <label>Crédit :</label>
                        <div class="flex flex-col sm:flex-row mt-2" style="margin-top: auto;margin-left: 76px;">
                            <div class="flex items-center text-gray-700 dark:text-gray-500 mr-2"><input type="radio" class="input border mr-2 credit" id="horizontal-radio-chris-evans" name="credit" value="1"> <label class="cursor-pointer select-none" for="horizontal-radio-chris-evans">Oui</label> </div>
                            <div class="flex items-center text-gray-700 dark:text-gray-500 mr-2 mt-2 sm:mt-0">
                                <input type="radio" class="input border mr-2 credit" id="horizontal-radio-liam-neeson" name="credit" value="0" checked> <label class="cursor-pointer select-none" for="horizontal-radio-liam-neeson">Non</label>
                            </div>
                        </div>
                    </div>

                    <br>

                    <div class="flex flex-col w-full mx-2" id="divavec" style="display: none;">
                        <label>Compte bancaire</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 class="my-2">
                        <div class="">
                            <div class="">
                                <label for="">Montant global Acte</label>
                                <input class="input w-full border-2 mt-2 " name="montant_global_acte" placeholder="Montant global Acte" type="number" step="0.001" min=0>

                            </div>
                        </div>
                    </div>
                    <div class="my-2">
                        <div class="">
                            <div class="">
                                <label for="">Montant Quittance Partielle</label>
                                <input class="input w-full border-2 mt-2 " name="montant_quittance_partielle" placeholder="Montant Quittance Partielle" type="number" step="0.001" min=0>

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

                    <div class="my-2">
                        <div class="">
                            <div class="">
                                <label for="">Montant vue</label>
                                <input class="input w-full border-2 mt-2 " name="montant_vue" placeholder="Montant vu" type="number" step="0.001" min=0>

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

                    <div class="my-2">
                        <div class="">
                            <div class="">
                                <label for="">Montant non vue</label>
                                <input class="input w-full border-2 mt-2 " name="montant_nonvue" placeholder="Montant non vue" type="number" step="0.001" min=0>

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


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

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



</div>


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

    <!-- END: Vertical Form -->
    <div class="intro-y box  mb-5">
        <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">
                Ajouter les clients et les vendeurs
            </h2>

        </div>
        <div class="p-5" id="vertical-form">
            <div class="preview">
                <div class="mt-3">
                    <label>clients</label>
                    <div class="mt-2">
                        <select data-placeholder="Sélectionner un ou plusieurs" name="acheteur[]" class="tail-select w-full" data-tail-select="tail-1" multiple>
                            @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 class="mt-3 Form_imob">
                    <label>Vendeurs</label>
                    <div class="mt-2">
                        <select data-placeholder="Sélectionner un ou plusieurs" name="vendeur[]" class="tail-select w-full vendeur" multiple>
                            @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>
    </div>

    <!-- BEGIN: Vertical Form -->
    <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">
                Ajouter des pièces jointes
            </h2>
        </div>

        <!-- partie fichiers jointes -->
        <div class="gpice p-5">
            <div class=" lg:flex flex-row  grid sm:gap-4 sm:grid-cols-1 pice">
                <div class="my-2 mr-2 flex flex-col w-full">
                    <div class="flex flex-col w-full overflow-hidden ">
                        <label class="">Pièces joints multiple</label>
                        <input type="file" name="file[]" class="input hover:bg-gray-500 w-full border-gray-400 border-2 mt-2 border joint">
                    </div>
                </div>
                <div class="flex flex-row w-full">
                    <div class="my-2 flex flex-col w-full">
                        <label class="">Type de fichier</label>
                        <select class="input w-full border-2 pb-3 border-gray-400 mt-2" class="id_type" name="id_typefichier[]">
                            <option value="">Type de fichier</option>
                            @foreach ($typefichiers as $type_fichier)
                            <option value="{{ $type_fichier->id }}">{{ $type_fichier->nom }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div style="margin-top: 2rem;margin-buttom: 1.8rem;" class="w-16 flex flex-row text-white font-semibold ">
                        <span class=" ml-2">
                            <img class="addpice" style="margin-top:10px; cursor:pointer;" src="{{ asset('dist/images/add_attachement.png') }}" />
                        </span>

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

        <!-- module d'ajout un autre fichier -->
        <div class="tpice hidden">
            <div class="flex flex-row pice px-5">
                <div class="my-2 mr-2 flex flex-col w-full">
                    <div class="flex flex-col w-full overflow-hidden ">
                        <label class="">Pièces joints multiple</label>
                        <input type="file" name="file[]" class="input hover:bg-gray-500 w-full border-gray-400 border-2 mt-2 border joint">
                    </div>
                </div>
                <div class="flex flex-row w-full">
                    <div class="my-2 flex flex-col w-full">
                        <label class="">Type de fichier</label>
                        <select class="input w-full border-2 pb-3 border-gray-400 mt-2" class="id_type" name="id_typefichier[]">
                            <option value="">Type de fichier</option>
                            @foreach ($typefichiers as $type_fichier)
                            <option value="{{ $type_fichier->id }}">{{ $type_fichier->nom }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div style="margin-top: 2rem;margin-buttom: 1.8rem;" class="w-16 flex flex-row text-white font-semibold kill">
                        <span class=" ml-2">
                            <span class=" ml-2"><img style="margin-top:-10px; cursor:pointer;" src="{{ asset('dist/images/delete_attachement.png') }}" /></span>
                        </span>

                    </div>
                </div>
            </div>
        </div>
        <!-- fin module -->
        <!--fin jointes -->
    </div>
    <!-- END: Vertical Form -->

    <!-- BEGIN: Horizontal Form -->
    <div class="intro-y box mt-5">
        <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">
                Étape du dossier
            </h2>
        </div>
        <div class="p-5" id="horizontal-form">
            <div class="preview">
                <div class="flex flex-col sm:flex-row items-center">
                    <select class="input w-full mt-2 border-2" name="id_etape">
                        @foreach ($etapes as $etape)
                        <option value="{{ $etape->id }}">{{ $etape->nom }}
                        </option>
                        @endforeach
                    </select>
                </div>

            </div>
            <div class="source-code hidden">
                <button data-target="#copy-horizontal-form" class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300">
                    <i data-feather="file" class="w-4 h-4 mr-2"></i> Copy example code </button>
                <div class="overflow-y-auto h-64 mt-3">
                    <pre class="source-preview" id="copy-horizontal-form"> <code class="text-xs p-0 rounded-md html pl-5 pt-8 pb-4 -mb-10 -mt-10"> HTMLOpenTagdiv class=&quot;flex flex-col sm:flex-row items-center&quot;HTMLCloseTag HTMLOpenTaglabel class=&quot;w-full sm:w-20 sm:text-right sm:mr-5&quot;HTMLCloseTagEmailHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput type=&quot;email&quot; class=&quot;input w-full border mt-2 flex-1&quot; placeholder=&quot;example@gmail.com&quot;HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class=&quot;flex flex-col sm:flex-row items-center mt-3&quot;HTMLCloseTag HTMLOpenTaglabel class=&quot;w-full sm:w-20 sm:text-right sm:mr-5&quot;HTMLCloseTagPasswordHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput type=&quot;password&quot; class=&quot;input w-full border mt-2 flex-1&quot; placeholder=&quot;secret&quot;HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class=&quot;flex items-center text-gray-700 dark:text-gray-500 mt-5 sm:ml-20 sm:pl-5&quot;HTMLCloseTag HTMLOpenTaginput type=&quot;checkbox&quot; class=&quot;input border mr-2&quot; id=&quot;horizontal-remember-me&quot;HTMLCloseTag HTMLOpenTaglabel class=&quot;cursor-pointer select-none&quot; for=&quot;horizontal-remember-me&quot;HTMLCloseTagRemember meHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class=&quot;sm:ml-20 sm:pl-5 mt-5&quot;HTMLCloseTag HTMLOpenTagbutton type=&quot;button&quot; class=&quot;button bg-theme-1 text-white&quot;HTMLCloseTagLoginHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag </code> </pre>
                </div>
            </div>
        </div>
    </div>
    <!-- END: Horizontal Form -->



</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--active');
    });
</script>


{{-- <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
</script> --}}
{{-- <script src="https://maps.googleapis.com/maps/api/js?key=[" your-google-map-api"]&libraries=places"></script> --}}
<script src="{{ asset('dist/js/app.js') }}"></script>

<script type="text/javascript">
    $('.credit').change(function() {
        if ($(this).val() == '1') {
            var x = document.getElementById("divavec");


            x.style.display = "grid";

        } else {
            var x = document.getElementById("divavec");

            x.style.display = "none";

        }

    });
</script>
<script>
    $("body").on("click", ".addpice", function() {
        var html = $(".tpice").html();
        $(".gpice").after(html);
        console.log(html);
    });

    $("body").on("click", ".kill", function() {
        $(this).parent().parent().toggle();
    });
    $(document).ready(function() {
        $("body").on('change', '.id_propriete', function() {
            var id_propriete = $(this).val();
            $.ajax({
                url: `{{ route('get_prop_type') }}`,
                dataType: 'json',
                type: 'post',
                data: {
                    id_propriete: id_propriete
                },
                success: function(data) {
                    if (data.typ_aff == 'Non immobilier') {
                        $('.Form_imob').slideUp('slow');

                    } else {
                        $('.Form_imob').slideDown('slow');
                    }
                },
                error: function(error) {
                    console.log(error);
                },
            });
        });
    });
</script>
@endsection