@extends('layouts.base')
@section('title')
    Générer écriture comptable
@endsection
@section('style')

@endsection
@section('content')
    <div class="row">
        <div class="col-md-12">
            <h4 class="main-title">Plan comptable SYSCHOADA</h4>
            <ul class="app-line-breadcrumbs mb-3">
                <li class="">
                    <a class="f-s-14 f-w-500" href="{{ route('comptabilite.index') }}">
                        <span>
                            <i class="ph-duotone  ph-stack f-s-16 "></i>Tableau de bord
                        </span>
                    </a>
                </li>
                <li>
                    <a class="f-s-14 f-w-500" href="#">Ecriture comptable</a>
                </li>
                <li class="active">
                    <a class="f-s-14 f-w-500" href="#">Générer écriture</a>
                </li>
            </ul>
        </div>
        <div class="col-md-12">
            {{-- @dump(session('errors')) --}}
            <div class="card">
                <div class="card-body">
                    <h6 class="mb-2"><i class="ph-light ph-pen-nib text-info"></i> Nouvelle écriture comptable</h6>
                    <form class="g-3 app-form" action="{{ route('comptabilite.according.entry') }}" method="POST">
                        @csrf
                        <div class="form-group row">
                            <div class="col-md-6">
                                <label for="">Date</label>
                                <input type="date" name="writting_date" class="form-control"
                                    value="{{ old('writting_date') }}">
                                @error('writting_date')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="">Référence</label>
                                <input type="text" value="{{ old('reference') }}" class="form-control" name="reference"
                                    id="reference" placeholder="N° Facture">
                                @error('reference')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div> 
                        </div>
                        <div class="row mt-3">
                            <div class="col-md-12">
                                <label for="" class="mb-2">Libellé</label>
                                <input type="text" value="{{ old('libelle') }}" name="libelle" class="form-control" placeholder="Description....">
                                @error('libelle')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-md-6">
                                <label for="">Journal</label>
                                <div class="d-flex">
                                    <select class="form-select select-basic" name="journal_id" id="journal" data-placeholder="Sélectionnez...">
                                        
                                        
                                    </select>
                                    <a class="btn btn-info" data-bs-target="#exampleModalDefault" data-bs-toggle="modal"><i
                                            class="ph-light ph-plus"></i></a>
                                </div>
                                @error('journal_id')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="" class="mb-2">Compte</label>
                                <select name="sub_account_number" id="compteDiviseur"
                                    class="form-select select-basic" data-placeholder="Sélectionnez le compte...">
                                    
                                    @foreach ($accounts as $account)
                                        <option value="{{ $account->id }}" {{ old('sub_account_number')==$account->id ? 'selected' : '' }}>
                                            {{ $account->sub_account_number . " " . $account->sub_account_name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('sub_account_number')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="row mt-3">
                            <div class="col-md-2">
                                <label for="" class="mb-2">TVA %</label>
                                <input type="number" value="{{ old('tva') }}" step="0.01" name="tva" class="form-control" placeholder="2.5">
                                @error('tva')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            
                            <div class="col-md-5">
                                <label for="" class="mb-2">Débit</label>
                                <input type="number" value="{{ old('debit') }}" step="0.01" name="debit" class="form-control" placeholder="0.00">
                                @error('debit')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-5">
                                <label for="" class="mb-2">Crédit</label>
                                <input type="number" value="{{ old('credit') }}" step="0.01" name="credit" class="form-control"
                                    placeholder="0.00">
                                @error('credit')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            
                        </div>

                        <!-- Bouton de soumission... -->
                        <div class="row mt-2">
                            <div class="col-12 text-end">
                                <button class="btn btn-success d-inline-flex-center" type="submit">
                                    {{-- <span wire:loading wire:target="save" class="spinner-border spinner-border-sm me-2"
                                        role="status" aria-hidden="true"></span> --}}
                                    <i class="ph-light ph-cloud-arrow-down"></i>&nbsp;
                                    Enregistrer
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div aria-hidden="true" aria-labelledby="exampleModalDefault" class="modal fade" id="exampleModalDefault" tabindex="-1">
        <div class="modal-dialog app_modal_md">
            <div class="modal-content">
                <div class="modal-header bg-primary-800">
                    <h1 class="modal-title fs-5 text-white" id="exampleModalDefault13">Enregistrer un nouveau journal</h1>
                    <button aria-label="Close" class="fs-5 border-0 bg-none text-white" data-bs-dismiss="modal"
                        type="button"><i class="ph-light ph-x-circle fs-3"></i></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <form action="" class="app-form" id="journalForm">
                            <div class="form-group row">
                                <div class="col-md-12">
                                    <label for="">Libellé <span class="text-danger">*</span></label>
                                    <input type="text" name="title" class="form-control" required>
                                </div>
                            </div>
                            <div class="form-group row mt-2">
                                <div class="col-md-12">
                                    <label for="">Description <span class="text-danger">*</span></label>
                                    <textarea name="description" id="description" class="form-control" required></textarea>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-light-primary" type="button" id="jrSubmitBtn"><i
                            class="ph-light ph-cloud-arrow-down"></i> &nbsp;Enregistrer</button>
                </div>
            </div>
        </div>
    </div>

    

@endsection
@section('script')
    <script>
        $(document).ready(function () {
            // Chargement initial des journaux
            getAllJournal();

            $("#jrSubmitBtn").on("click", function () {
                var form = document.getElementById('journalForm');
                
                if (form.checkValidity()) {
                    var formData = {
                        title: $('input[name="title"]').val(),
                        description: $('#description').val(),
                        _token: $('meta[name="csrf-token"]').attr('content') // Ajout direct du token dans les data
                    };

                    $.ajax({
                        url: "{{ route('comptabilite.journal_store') }}",
                        method: 'POST',
                        data: formData,
                        beforeSend: function() {
                            // Désactiver le bouton pendant l'envoi
                            $("#jrSubmitBtn").prop('disabled', true).html('<i class="ph-light ph-spinner ph-spin"></i> Enregistrement...');
                        },
                        success: function (response) {
                            $('#exampleModalDefault').modal('hide');
                            form.reset();
                            
                            // Rafraîchir la liste sans délai inutile
                            getAllJournal();
                            
                            Toastify({
                                text: "Journal créé avec succès",
                                duration: 3000,
                                close: true,
                                gravity: "top",
                                position: "right",
                                backgroundColor: "#4CAF50"
                            }).showToast();
                        },
                        error: function (xhr) {
                            let errorMessage = "Une erreur est survenue";
                            if (xhr.responseJSON && xhr.responseJSON.errors) {
                                errorMessage = Object.values(xhr.responseJSON.errors).join('<br>');
                            }
                            
                            Toastify({
                                text: errorMessage,
                                duration: 3000,
                                close: true,
                                gravity: "top",
                                position: "right",
                                backgroundColor: "#f44336"
                            }).showToast();
                        },
                        complete: function() {
                            $("#jrSubmitBtn").prop('disabled', false).html('<i class="ph-light ph-cloud-arrow-down"></i> &nbsp;Enregistrer');
                        }
                    });
                } else {
                    form.reportValidity();
                }
            });

            function getAllJournal() {
                $.ajax({
                    url: "{{ route('comptabilite.journal') }}",
                    method: 'GET',
                    success: function(response) {
                        // Vider la liste avant de la remplir
                        $("#journal").empty().append('<option value="">Sélectionner un journal</option>');
                        
                        $.each(response, function(i, data) {
                            $("#journal").append(`<option value="${data.id}">${data.title}</option>`);
                        });
                    },
                    error: function(xhr) {
                        console.error("Erreur lors du chargement des journaux", xhr);
                    }
                });
            }
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const container = document.getElementById('repeater-container');
            const addButton = document.getElementById('add-item');
            const template = document.getElementById('repeater-template').innerHTML;
            let itemCount = 0;

            // Fonction pour ajouter un nouvel article
            function addNewItem() {
                const newItemHtml = template.replace(/INDEX/g, itemCount);
                const div = document.createElement('div');
                div.innerHTML = newItemHtml;
                const newItem = div.firstElementChild;

                // Ajouter l'événement de suppression
                const removeBtn = newItem.querySelector('.remove-item');
                removeBtn.addEventListener('click', function () {
                    newItem.remove();
                });

                container.appendChild(newItem);
                itemCount++;
            }

            // Initialisation : ajouter un premier bloc au chargement
            addNewItem();

            // Au clic sur "Ajouter un article"
            addButton.addEventListener('click', addNewItem);
        });
    </script>
    <script>

    </script>
@endsection