@extends('layouts.app')


@section('content')
    <div class="card w-full">
        <div class="card-head">
            <div class="font-semibold text-cyan-900 uppercase">
                <i class="fal fa-book-open mr-1"></i>
                PART SOCIAL
            </div>
            <div class="space-x-2 text-gray-500 mb-2">
                <button id="btnSearch" class="btn-simple hover:text-orange-500">
                    <i class="fal fa-plus fa-lg"></i>
                </button>
                <a href="{{route('jr.edit.epargne.forget',$journal->id_journal)}}" class="hover:text-orange-500" title="Effacer la recherche">
                    <i class="fal fa-sack-dollar fa-lg"></i>
                    Epargne
                </a>
                <a href="{{route('jr.edit.credit.index', $journal->id_journal)}}" class="hover:text-orange-500">
                    <i class="fal fa-cart-plus fa-lg"></i>
                    Crédit
                </a>
                <a href="#" class="hover:text-orange-500">
                    <i class="fal fa-donate fa-lg"></i>
                    Part social
                </a>
            </div>
        </div>
        <div class="card-body">
            <x-alert/>

            @if($errors->any())
                <div class="text-red-800 text-sm bg-red-200 border border-red-500 px-5 py-2 shadow-md rounded-md border-opacity-60">
                    @foreach ($errors->all() as $error)
                        {{str_replace('.',', ',$error)}}
                    @endforeach
                </div>
            @endif
            <div class="flex flex-col space-y-4">
                {{-- <x-journal-guichet-header :journal="$journal"/> --}}
                @if(!empty($tiers->id_tiers))
                <div class="card-content mb-3">
                    <table class="table table-hover">
                        <tr class="text-gray-700">
                            <th class="text-left">ID Tiers</th>
                            <th class="text-center">Date d'entrée</th>
                            <th class="text-left">Nom et prénoms</th>
                            <th class="text-center">CIN/PI</th>
                            <th class="text-right">Part souscrit</th>
                            <th class="text-right">Part à payer</th>
                            <th class="text-right">Droit</th>
                            <th class="text-right">Total à payer</th>
                            <th></th>
                        </tr>
                        <tr>
                            @php
                                $mtt_a_payer = $part_social_params->capital + $part_social_params->droit;
                            @endphp
                            <td class="text-left">{{$tiers->id_tiers}}</td>
                            <td class="text-center">{{(new DateTime($tiers->date_entree))->format('d/m/Y')}}</td>
                            <td class="text-left">{{$tiers->nom_tiers}} {{$tiers->prenom_tiers}}</td>
                            <td class="text-center">{{$tiers->cin}}</td>
                            <td class="text-right">{{number_format($soldePart,2,',',' ')}}</td>
                            <td class="text-right">{{number_format($part_social_params->capital,2,',',' ')}}</td>
                            <td class="text-right">{{number_format($part_social_params->droit,2,',',' ')}}</td>
                            <td class="text-right">{{number_format($mtt_a_payer,2,',',' ')}}</td>
                            <td class="text-right">
                                <a href="{{route('gt.adhesion.create', ['id_tiers'=>$tiers->id_tiers])}}" class="text-green-500 hover:text-green-700 mr-2" title="Paiement">
                                    <i class="fad fa-plus-circle fa-xl"></i>
                                </a>
                                <a href="" class="mr-2 text-gray-500 hover:text-gray-700" title="Fihce de prêt">
                                    <i class="fal fa-file-spreadsheet fa-xl"></i>
                                </a>
                            </td>
                        </tr>
                    </table>
                </div>

                    <div class="flex justify-end border-b border-t py-2">
                        <form id="frmEpargne" method="post" action="{{$url}}" class="w-full">
                            @csrf
                            <input type="hidden" name="route" value="1">
                            <input type="hidden" name="journalId" value="{{$journal->id_journal}}">
                            @if(!empty($operation->id_oper))
                                <input type="hidden" name="idOper" value="{{$operation->id_oper}}">
                            @endif
                            <div class="flex justify-end space-x-3 w-full">
                                <div class="flex items-center space-x-2 w-1/5">
                                    <input type="text" name="libelle"
                                        value="{{ !empty($operation->description) ? $operation->description : old('libelle') }}"
                                        placeholder="Description"
                                        class="form-control"/>
                                </div>
                                <div class="flex items-center space-x-2 w-36">
                                    <input type="text" name="numPiece"
                                        value="{{ !empty($operation->num_piece) ? $operation->num_piece : old('numPiece') }}"
                                        placeholder="N° pièce"
                                        class="form-control"/>
                                </div>
                                <div class="flex items-center space-x-2 w-60">
                                    @php

                                        $montant = 0;

                                        if(!empty($operation->id_oper)){
                                            $montant = $operation->debit + $operation->credit;
                                        }

                                    @endphp
                                    <input type="text" name="montant"
                                        value="{{ !empty($montant) ? $montant : old('montant') }}"
                                        placeholder="Montant"
                                        class="form-control"/>
                                </div>
                                <div>
                                    <button id="btnSave" type="button" class="btn btn-warning">
                                        <i class="fal fa-save mr-1"></i>
                                        Save
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                @endif
                <div class="card-content">
                    <table class="table table-hover table-striped">
                        <thead>
                            <tr class="text-gray-400 text-sm">
                                <th class="text-left">ID Tiers</th>
                                <th class="text-left">Nom et prénoms</th>
                                <th class="text-center">CIN/PI</th>
                                <th class="text-right">Retrait</th>
                                <th class="text-right">Dépôt</th>
                                <th class="text-right">Droit</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>

                            @php $i = 0 @endphp
                                @foreach ($operations as $operation)
                                    <tr>
                                        <td>{{$operation->id_tiers}}</td>
                                        <td>{{$operation->nom_tiers}} {{$operation->prenom_tiers}}</td>
                                        <td class="text-center">{{$operation->cin}}</td>
                                        <td class="text-right">{{App\Lib\Format::number($operation->debit)}}</td>
                                        <td class="text-right">{{App\Lib\Format::number($operation->credit)}}</td>
                                        <td class="text-right">{{App\Lib\Format::number($operation->droit)}}</td>
                                        <td class="text-right">
                                            <a href="{{route('tiers.part.show', $operation->id_tiers)}}" class="mr-2" title="Afficher les écritures">
                                                <i class="fal fa-file-spreadsheet fa-lg"></i>
                                            </a>
                                            <a href="#" class="btn-search mr-2" data-folio="{{$operation->id_tiers}}" title="Liste des comptes">
                                                <i class="fal fa-edit fa-lg"></i>
                                            </a>
                                            <a href="" class="mr-2 text-gray-500 hover:text-gray-700">
                                                <i class="fal fa-trash-alt fa-lg"></i>
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                        </tbody>
                    </table>
                </div>
                @if(!empty($operations))
                    <div class="pagination">
                        {{ $operations->links() }}
                    </div>
                @endif
            </div>
            <form id="frmDelete" method="post" action="{{route('jr.edit.epargne.destroy')}}">
                @csrf
                <input type="hidden" name="journalId" value="{{$journal->id_journal}}">
                <input type="hidden" name="numOper" id="numOper">
            </form>
        </div>
    </div>

    <x-form-modal>
        <x-slot name="title">
            <div class="flex justify-between w-full">
                Recherche
            </div>
        </x-slot>
            <form id="frmSearch" method="post" action="{{route('jr.edit.part.search', $journal->id_journal)}}" class="w-full">
                @csrf
                <input type="hidden" name="route" value="1">
                <div class="flex items-center space-x-3">
                    <div class="w-full">
                        <input type="text" id="folio" name="folio" value="{{$journal->caisse_id}}" class="form-control" placeholder="Folio">
                    </div>
                    <div>
                        <button type="submit" class="btn btn-warning">
                            <i class="fal fa-search"></i>
                        </button>
                    </div>
                </div>
            </form>
        <x-slot name="footer">

        </x-slot>
    </x-form-modal>

    <x-msg-box>
        <x-slot name="title">
            Epargne
        </x-slot>
       <p id="msgText">Voulez vous réellement enregister ?</p>
    </x-msg-box>
@endsection

@section('script')
    <script>

        let action = 'mod23';

        document.getElementById("btnSearch").addEventListener("click", function(e){
            action = 'mod23';
            Modal(".modal", "show");
            let searchFolio = document.getElementById("folio")
                searchFolio.focus();
                searchFolio.selectionStart = searchFolio.value.length;
        })

        let destroy = document.querySelectorAll('.btn-delete')

        destroy.forEach(elt => {

                elt.addEventListener('click', function(e){
                    e.preventDefault();

                    document.getElementById('numOper').setAttribute('value', elt.getAttribute('data-oper'))

                    action = 'mod4'

                    document.getElementById('msgText').textContent = "Voulez vous réellement supprimer cette opération ?";

                    Modal('#MsgBox', "show");

                })

        });

        let btnSave = document.getElementById('btnSave');

        if(btnSave !== null){

            btnSave.addEventListener('click', function(e){
                action = 'mod23';

                document.getElementById('msgText').textContent = "Voulez vous réellement enregister ?";

                Modal('#MsgBox', "show");
            })

        }



        document.getElementById('btnYes').addEventListener('click', function(e){

            if(action == 'mod23'){
                document.getElementById('frmEpargne').submit();
            }

            if(action == 'mod4'){
                document.getElementById('frmDelete').submit();
            }
        })

    </script>
@endsection