@extends('admin')

@section('title')
    NotaireApp - Créer Un Nouveau Règlement
@endsection
@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 Règlements</a> </div>
    <!-- END: Breadcrumb -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
@endsection
@section('content')
    <div class="intro-x">
        <form action="" id="from_data" enctype="multipart/form-data">
            <div class="grid grid-cols-12 gap-6 mt-5">

                <div class="intro-y col-span-12 lg:col-span-6">
                    <div class="intro-y box p-5">
                        <div class="my-3">
                            <div class="">
                                <label for="">Mode Reglement</label>
                                <select class="input w-full mt-2 border-2" required="" name="mode_reg" id="mode-reg">
                                    <option value="Espèces">Espèces</option>
                                    <option value="Cheque">Chéque</option>
                                    <option value="Virement">Virement</option>
                                    <option value="Carte bancaire">Carte bancaire</option>
                                    <option value="Autre">Autre</option>
                                </select>
                            </div>
                        </div>
                        <div class="my-3 hidden" id="compt_bank">
                            <div class="" >
                                <label for="">Compte Bancaire</label>
                                <select class="input w-full mt-2 border-2 " name="compt_bank" >
                                    <option value="0">Sélectionner un compte</option>
                                    @foreach ($compte as $item)
                                        <option value="{{$item->id}}">{{$item->nomCompt}}--{{$item->munCompt}}</option>
                                    @endforeach
                                </select>
                            </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 Dépense</label>
                                    <input class="input w-full border-2 mt-2 " name="date_reg" placeholder="Date"
                                        type="date" value="{{ date('Y-m-d') }}">
                                </div>
                            </div>
                        </div>
                        <div class="my-2">
                            <div class="">
                                <div class="">
                                    <label for="">Observation</label>
                                    <textarea class="input w-full border mt-2" name="descr" placeholder="Observation"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>

                </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="p-5" id="multiple-file-upload">
                                <div class="preview">
                                    <div class="fallback">
                                        <input type="file" name="joint" class="input border w-full">
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="intro-y box p-5 mt-3">
                        <div class="grid justify-itmes-center">
                            <button class="button bg-theme-1 text-white mt-5 valid " type="submit">
                                Enregistrer</button>
                        </div>
                    </div>
                </div>

            </div>
        </form>
    </div>
@endsection
@section('script')
    <script>
        $('.valid').click(function(){
            event.preventDefault();
            var from_data = new FormData(document.getElementById('from_data'));
            $.ajax({
                url : `{{route('RegTva_stor_data')}}`,
                dataType:'json',
                type:'post',
                // enctype="multipart/form-data",
                data:from_data,
                contentType:false,
                processData:false,
                cache:false,
                success:function(data){
                    // console.log(data);
                    window.location.replace(`{{route('RegTva_list')}}`);
                },
                error:function(error){
                    console.log(error);
                },
            });
        });
        $("body").on('change','#mode-reg',function(){
            $mode_reg = $(this).val();
            if($mode_reg != 'Espèces'){
                $('#compt_bank').slideDown('slow');
            }else{
                $('#compt_bank').slideUp('slow');
            }
        });
    </script>
@endsection