@extends('admin')

@section('title')
NotaireApp - Créer Des Dépenses
@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 Des Dépenses</a> </div>
<!-- END: Breadcrumb -->
@endsection

<div class="intro-y flex items-center mt-8">
    <h2 class="text-lg font-medium mr-auto">
        Créer Une Dépenses
    </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: Input -->
            <div class="intro-y box p-5">
        

                    <input style="display: none;" class="input w-full  mt-2 border-2" name="id_dossier" value="{{ $dossiers->id }}">
                               
                    
                    <div class="my-3">
                        <div class="">
                            <div class="">
                                <label for=""> Designation </label>
                                {{-- <input class="input w-full  mt-2 border-2" name="designation"
                                    placeholder="Designation"  type="text"> --}}
                                <select name="designation" class="input w-full  mt-2 border-2">
                                    <option value="0">Sélectionnez une désignation</option>
                                    @foreach ($DepenseName as $depname)
                                        <option value="{{$depname->dep_name}}">{{$depname->dep_name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="my-3">
                        <div class="">
                            <div class="">
                                <label for="">Mode Reglement </label>
                                <select class="input w-full mt-2 border-2" required name="mode_reg" 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>
                    </div>

                    <div class="my-3">
                        <div class="">
                            <div class="">
                                <label for="">Numero </label>
                                <input class="input w-full  mt-2 border-2" name="num_cheque"
                                    placeholder="Num" required="required" type="text">

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




                    <div class="my-2">
                        <div class="">
                            <div class="">
                                <label for="">Montant</label>
                                <input class="input w-full border-2 mt-2" name="montant" placeholder="Montant" type="number" step="0.01"> 

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


                    <div class="my-2">
                        <div class="">
                            <div class="">
                                <label for="">Date Charge</label>
                                <input class="input w-full border-2 mt-2 " name="date_charge"
                                    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-6">


            <!-- 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>
                <div class="p-5" id="vertical-form">
                    <div class="preview">
                            <select class="input w-full " name="id_typefichier">
                                <option value="0">Séléctionner un type de fichier</option>
                                @foreach($typefichiers as $type_fichier)
                                <option value="{{$type_fichier->id  }}">{{$type_fichier->nom}}
                                </option>
                                @endforeach
                            </select><br>

                            <div class="p-5" id="multiple-file-upload">
                                <div class="preview">
                                    <div class="fallback">
                                        <input type="file" name="file[]" multiple />
                                    </div>

                                </div>

                            </div>
                    </div>

                </div>
            </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');
        $('#charge').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>
@endsection