@extends('layouts.base')

@section('title')
    Comptabilité-SYSCHOADA
@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="#">Compte comptable</a>
                </li>
                <li class="active">
                    <a class="f-s-14 f-w-500" href="#">Nouveau compte</a>
                </li>
            </ul>
        </div>
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <h6 class="mb-2"><i class="ph-light ph-pen-nib text-info"></i> Nouveau sous-compte divisioneur</h6>
                    <form class="g-3 app-form" action="{{ route('comptabilite.sub_account') }}" method="POST">
                        @csrf
                        <div class="form-group row">
                            <div class="col-md-4">
                                <label for="">Classe</label>
                                <select class="form-select select-basic" name="selectedClass" id="classe">
                                    <option value="">Sélectionnez....</option>
                                    @foreach ($classes as $classe)
                                        <option value="{{ $classe->id }}">{{ $classe->class_number." - ".$classe->class_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="">Compte</label>
                                <select class="form-select select-basic" name="selectedAccount" id="compte">
                                    <option value="">Sélectionnez un compte....</option>
                                    {{-- @foreach($accounts as $account)
                                        <option value="{{ $account->id }}">{{ $account->account_number." - ".$account->account_name }}</option>
                                    @endforeach --}}
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="">Sous-compte</label>
                                <select class="form-select select-basic" name="under_account_id" id="sousCompte">
                                    <option value="">Sélectionnez un sous-compte....</option>
                                    
                                </select>
                            </div>
                        </div>
                        
                        <div class="row mt-2">
                            <h5 class="text-muted text-bold mt-2 mb-2">Sous-compte divisionneur</h5>
                            <div class="col-md-12">
                                <!-- Conteneur où les cartes seront ajoutées -->
                                <div id="cartesContainer">
                                    {{-- @foreach($cards as $index => $card) --}}
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <label for="" class="mb-2">Numéro de compte</label>
                                                    <select name="sub_account_number" id="compteDiviseur" class="form-select select-basic">
                                                        <option value="">Sélectionnez.....</option>
                                                        <!-- Options dynamiques ici -->
                                                    </select>
                                                </div>
                                                <div class="col-md-8">
                                                    <label for="" class="mb-2">Intitulé du compte</label>
                                                    <input type="text" name="title" class="form-control">
                                                </div>
                                                {{-- <div class="col-md-1">
                                                    <label for="" class="mb-2">&nbsp;</label>
                                                    <button type="button" class="btn btn-outline-danger" onclick="removeCard()">
                                                        <i class="ph-light ph-trash"></i>
                                                    </button>
                                                </div> --}}
                                            </div>
                                        </div>
                                    </div>
                                    {{-- @endforeach --}}
                                </div>
                                
                                {{-- <div class="">
                                    <button type="button" class="btn btn-outline-info" wire:click="addCard">
                                        <i class="ph-light ph-plus"></i> Ajouter une ligne
                                    </button>
                                </div> --}}
                            </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>
@endsection
@section('script')
    <script>
        $(document).ready(function() {
            let plans = @json($classes);
            console.log(plans);

            // Fonction pour générer les options du compte diviseur (4 chiffres)
            function generateDiviseurOptions(underAccountNumber) {
                $("#compteDiviseur").empty();
                
                // S'assurer que le numéro de sous-compte a au moins 3 chiffres
                // (pour pouvoir ajouter 1 chiffre et obtenir 4 chiffres au total)
                let baseNumber = underAccountNumber.toString();
                
                // Si le numéro fait moins de 3 chiffres, on le pad avec des zéros à gauche
                while(baseNumber.length < 3) {
                    baseNumber = '0' + baseNumber;
                }
                
                // Générer 10 options (0-9) en conservant 4 chiffres au total
                for (let i = 0; i < 10; i++) {
                    // Prendre les 3 premiers chiffres du sous-compte + le chiffre incrémental
                    let diviseurNumber = baseNumber.substring(0, 3) + i;
                    $("#compteDiviseur").append(
                        `<option value="${diviseurNumber}">${diviseurNumber}</option>`
                    );
                }
            }

            $("#classe").change(function() {
                let classId = $(this).val();
                $("#compte, #sousCompte, #compteDiviseur").empty();

                let selectedClass = plans.find(c => c.id == classId);
                if (!selectedClass || !selectedClass.accounts) return;

                // Charger les comptes
                $.each(selectedClass.accounts, function(i, c) {
                    $("#compte").append(
                        `<option value="${c.id}">${c.account_number} - ${c.account_name}</option>`
                    );
                });

                // Si un compte est sélectionné par défaut, charger ses sous-comptes
                if ($("#compte").val()) {
                    let defaultAccount = selectedClass.accounts.find(a => a.id == $("#compte").val());
                    if (defaultAccount && defaultAccount.under_accounts) {
                        $.each(defaultAccount.under_accounts, function(i, ucc) {
                            $("#sousCompte").append(
                                `<option value="${ucc.id}">${ucc.under_account_number} - ${ucc.under_account_name}</option>`
                            );
                        });
                        
                        // Générer les options du compte diviseur pour le premier sous-compte
                        if (defaultAccount.under_accounts.length > 0) {
                            generateDiviseurOptions(defaultAccount.under_accounts[0].under_account_number);
                        }
                    }
                }
            });

            // Gestionnaire d'événement pour le changement de compte
            $("#compte").on('change', function() {
                let classId = $("#classe").val();
                let selectedClass = plans.find(c => c.id == classId);
                
                $("#sousCompte").empty();
                $("#compteDiviseur").empty();
                
                if (selectedClass && selectedClass.accounts) {
                    let selectedAccount = selectedClass.accounts.find(a => a.id == $(this).val());
                    if (selectedAccount && selectedAccount.under_accounts) {
                        $.each(selectedAccount.under_accounts, function(i, ucc) {
                            $("#sousCompte").append(
                                `<option value="${ucc.id}">${ucc.under_account_number} - ${ucc.under_account_name}</option>`
                            );
                        });
                        
                        // Générer les options du compte diviseur pour le premier sous-compte
                        if (selectedAccount.under_accounts.length > 0) {
                            generateDiviseurOptions(selectedAccount.under_accounts[0].under_account_number);
                        }
                    }
                }
            });

            // Gestionnaire d'événement pour le changement de sous-compte
            $("#sousCompte").on('change', function() {
                let underAccountNumber = $(this).find('option:selected').text().split(' - ')[0];
                generateDiviseurOptions(underAccountNumber);
            });
        });
    </script>
@endsection