@extends('client.layouts.app')
@section('title', 'إضافة قيد جديد')
@section('content')
    <!-- BEGIN: Content-->
    <div class="app-content content">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper container-xxl p-0">
            <div class="content-header row">
                <div class="content-header-left col-md-9 col-12 mb-2">
                    <div class="row breadcrumbs-top">
                        <div class="col-12">
                            <h2 class="content-header-title float-start mb-0">إضافة قيد</h2>
                            <div class="breadcrumb-wrapper">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="{{ route('client.home') }}">لوحة التحكم</a></li>
                                    <li class="breadcrumb-item"><a href="{{ route('client.manualJournal.index') }}">القيود اليدوية</a></li>
                                    <li class="breadcrumb-item active">إضافة</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content-header-right text-md-end col-md-3 col-12 d-md-block d-none">
                    <div class="mb-1 breadcrumb-right">
                        <div class="dropdown">
                            @can('قائمة القيود اليدوية')
                                <a href="{{ route('client.manualJournal.index') }}">
                                    <button class="btn-icon btn btn-primary" type="button"><i data-feather='eye'> </i></button>
                                </a>
                            @endcan
                        </div>
                    </div>
                </div>
            </div>
            <div class="content-body">
                <!-- Validation Errors -->
                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <!-- Basic Horizontal form layout section start -->
                <!-- Basic multiple Column Form section start -->
                <section id="multiple-column-form">
                    <div class="row">
                        <div class="col-xl-12 col-md-12 col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title">البيانات الاساسية</h4>
                                </div>
                                <div class="card-body">
                                    <form class="form" id="addForm" action="{{ route('client.manualJournal.store') }}" method="POST" enctype="multipart/form-data">
                                        @csrf

                                        <input type="hidden" name="company_id" value="{{ $company_id }}">

                                        <div class="row">
                                            <div class="col-12 mb-3 shadow p-3 mb-5 bg-white rounded">
                                                <div class="row">
                                                    <div class="mb-1">
                                                        <b class="form-label">الفرع</b>
                                                        <select class="form-control select2" name="branch_id">
                                                            @foreach ($branches as $branch)
                                                                <option value="{{ $branch->id }}">{{ $branch->branch_name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>

@php
$lastEntryId = \App\Models\ManualJournal::selectRaw('CAST(name AS UNSIGNED) as numeric_name')
                                         ->orderBy('numeric_name', 'desc')
                                         ->pluck('numeric_name')
                                         ->first() + 1;
@endphp

                                                <div class="row">
                                                    <div class="col-md-3 mb-1">
                                                        <b class="form-label" for="name"> رقم القيد </b>
                                                        <input class="form-control" name="name" type="text" id="name" placeholder="اسم القيد" value="{{ $lastEntryId }}">
                                                    </div>
                                                    
                                                    <div class="col-md-3 mb-1">
                                                        <b class="form-label" for="created_at">تاريخ القيد</b>
                                                        <input class="form-control" name="created_at" type="date" id="date" placeholder="اسم القيد" >
                                                    </div>
                                                    <div class="col-md-3 mb-1">
                                                        <b class="form-label" for="description"> البيان</b>
                                                        <textarea class="form-control" name="description" type="description" id="description" > </textarea>
                                                    </div>
                                                    <div class="col-md-3 mb-1">
                                                        <b class="form-label">مرفق</b>
                                                        <input accept=".jpg,.png,.jpeg" type="file" oninput="pic.src=window.URL.createObjectURL(this.files[0])" id="file" name="file" class="form-control">
                                                        <label for="" class="d-block">معاينة الصورة</label>
                                                        <img id="pic" style="width: 100px; height:100px;" />      
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div id="entry-rows" class="col-12">
                                                <!-- Initial Row 1 -->
                                                <div class="entry-row mb-2">
                                                    <div class="row">
                                                        <div class="col-md-3 mb-1">
                                                            <b class="form-label" for="combined">الحساب</b>
                                                            <select name="item[]" id="account_id_1" class="form-control search account-select">
                                                                <option value="">اختر الحساب</option>
                                                                @foreach ($chartOfAccounts as $account)
                                                                    @include('client.chart_of_accounts.partials.account_option', ['account' => $account])
                                                                @endforeach
                                                            </select>
                                                            
                                                        </div>
                                                        <div class="col-md-2 mb-1">
                                                            <b class="form-label" for="expense_details"> الوصف</b>
                                                            <input class="form-control" name="expense_details[]" type="text" value="{{ old('expense_details.0') }}">
                                                        </div>
                                                        <div class="col-md-2 mb-1">
                                                            <b class="form-label" for="debit-amount">مدين</b>
                                                            <input class="form-control debit-amount" name="debit_amount[]" type="number" step="0.01" placeholder="مدين" value="{{ old('debit_amount.0') }}">
                                                        </div>
                                                        <div class="col-md-2 mb-1">
                                                            <b class="form-label" for="credit-amount">دائن</b>
                                                            <input class="form-control credit-amount" name="credit_amount[]" type="number" step="0.01" placeholder="دائن" value="{{ old('credit_amount.0') }}">
                                                        </div>
                                                 <div class="col-md-2 mb-1" id="cost-center-container" style="display: none;">
                                                            <b class="form-label">مركز التكلفة</b>
                                                           <select name="cost_center[]" class="form-control search cost-center-select">
                    <option value="">اختر مركز التكلفة</option>
                    @foreach ($costCenters as $costCenter)
                        @include('client.cost_centers.partials.cost_center_option', ['costCenter' => $costCenter])
                    @endforeach
                </select>
<div class="error-message" style="color: red; display: none;"></div>

                                                        </div>
                                                        
                                                        
                                                        
                                                        

                                                        <div class="col-md-1 mb-1 d-flex align-items-center">
                                                            <button type="button" class="btn btn-danger btn-sm delete-row" style="display: flex; align-items: center; justify-content: center; height: 50%;">
                                                                <i class="las la-trash"></i> 
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            
                                                <!-- Initial Row 2 -->
                                                <div class="entry-row mb-2">
                                                    <div class="row">
                                                        <div class="col-md-3 mb-1">
                                                            <b class="form-label" for="combined">الحساب</b>
                                                            <select name="item[]" id="account_id_2" class="form-control search account-select">
                                                                <option value="">اختر الحساب</option>
                                                                @foreach ($chartOfAccounts as $account)
                                                                    @include('client.chart_of_accounts.partials.account_option', ['account' => $account])
                                                                @endforeach
                                                            </select>
                                                        </div>

                                                        
                                                        <div class="col-md-2 mb-1">
                                                            <b class="form-label" for="expense_details"> الوصف </b>
                                                            <input class="form-control" name="expense_details[]" type="text" value="{{ old('expense_details.1') }}">
                                                        </div>
                                                        <div class="col-md-2 mb-1">
                                                            <b class="form-label" for="debit-amount">مدين</b>
                                                            <input class="form-control debit-amount" name="debit_amount[]" type="number" step="0.01" placeholder="مدين" value="{{ old('debit_amount.1') }}">
                                                        </div>
                                                        <div class="col-md-2 mb-1">
                                                            <b class="form-label" for="credit-amount">دائن</b>
                                                            <input class="form-control credit-amount" name="credit_amount[]" type="number" step="0.01" placeholder="دائن" value="{{ old('credit_amount.1') }}">
                                                        </div>
                                                        <div class="col-md-2 mb-1" id="cost-center-container" style="display: none;">
                                                            <b class="form-label">مركز التكلفة</b>
                                                           <select name="cost_center[]" class="form-control search cost-center-select">
                   <option value="">اختر مركز التكلفة</option>
    > 
                    @foreach ($costCenters as $costCenter)
                        @include('client.cost_centers.partials.cost_center_option', ['costCenter' => $costCenter])
                    @endforeach
                </select>
<div class="error-message" style="color: red; display: none;"></div>

                                                        </div>
                                                        
                                                        
                                                        <div class="col-md-1 mb-1 d-flex align-items-center">
                                                            <button type="button" class="btn btn-danger btn-sm delete-row" style="display: flex; align-items: center; justify-content: center; height: 50%;">
                                                                <i class="las la-trash"></i> 
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            
                                            <div class="col-12 mb-3">
                                                <button type="button" class="btn btn-primary" id="add-row">إضافة صف جديد</button>
                                            </div>
                                            
                                            <!-- Calculations Section -->
                                            <div class="col-12 mb-3 shadow p-3 mb-5 bg-white rounded">
                                                <h4>الاحصائيات</h4>
                                                <div class="row">
                                                    <div class="col-md-3 mb-1">
                                                        <b class="form-label">إجمالي المدين</b>
                                                        <input class="form-control" type="text" id="total-debit" readonly>
                                                        <input type="hidden" name="total_debit" id="hidden-total-debit">
                                                    </div>
                                                    <div class="col-md-3 mb-1">
                                                        <b class="form-label">إجمالي الدائن</b>
                                                        <input class="form-control" type="text" id="total-credit" readonly>
                                                        <input type="hidden" name="total_credit" id="hidden-total-credit">
                                                    </div>
                                                    <div class="col-md-6 mb-1">
                                                        <b class="form-label">الفرق</b>
                                                        <input class="form-control" type="text" id="difference" readonly>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div class="clearfix"></div>
                                            <div class="col-12" align="center">
                                                <br>
                                                <button type="submit" class="btn btn-success me-1">إضافة</button>
                                                <button type="button" class="btn btn-outline-danger" onclick="window.history.back()">رجوع</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
    <!-- END: Content-->
@endsection
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

@section('script')
<script src="{{ asset('app-assets/js/select2.min.js') }}"></script>
<script>
        $(document).ready(function() {
        function updateCalculations() {
            let totalDebit = 0;
            let totalCredit = 0;
    
            $('#entry-rows .entry-row').each(function() {
                let debitAmount = parseFloat($(this).find('.debit-amount').val()) || 0;
                let creditAmount = parseFloat($(this).find('.credit-amount').val()) || 0;
                totalDebit += debitAmount;
                totalCredit += creditAmount;
            });
    
            $('#total-debit').val(totalDebit.toFixed(2));
            $('#hidden-total-debit').val(totalDebit.toFixed(2));
            $('#total-credit').val(totalCredit.toFixed(2));
            $('#hidden-total-credit').val(totalCredit.toFixed(2));
            $('#difference').val((totalDebit - totalCredit).toFixed(2));
        }
        // Initialize Select2 for existing select elements
        function initializeSelect2() {
    // Initialize Select2 for both .account-select and .cost-center-select
   $('.account-select, .cost-center-select').select2({
    templateResult: formatState,
    templateSelection: formatState // Apply the same formatting to the selected option
});
}

// Function to format the state
// Function to format the state
// Function to format the state
// Function to format the state
function formatState(state) {
    if (!state.id) {
        return state.text;
    }

    var backgroundColor = $(state.element).attr('disabled') ? 'gray' : ''; // الخلفية لـ disabled
    var textColor = $(state.element).attr('disabled') ? 'white' : 'black'; // لون النص

    var $state = $(
        '<span style="display: block; padding: 4px; background-color: ' + backgroundColor + '; color: ' + textColor + ';">' + state.text + '</span>'
    );
    return $state;
}



// Initialize Select2 on page load
initializeSelect2();

        // Add row with Select2
        $('#add-row').on('click', function() {
            let row = `
                <div class="entry-row mb-2">
                    <div class="row">
                        <div class="col-md-3 mb-1">
                            <b class="form-label" for="combined">الحساب</b>
                            <select name="item[]" class="form-control search account-select">
                                <option value="">اختر الحساب</option>
                                @foreach ($chartOfAccounts as $account)
                                    @include('client.chart_of_accounts.partials.account_option', ['account' => $account])
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2 mb-1">
                            <b class="form-label" for="expense_details"> الوصف</b>
                            <input class="form-control" name="expense_details[]" type="text">
                        </div>
                        <div class="col-md-2 mb-2">
                            <b class="form-label" for="debit-amount">مدين</b>
                            <input class="form-control debit-amount" name="debit_amount[]" type="number" step="0.01" placeholder="مدين">
                        </div>
                        <div class="col-md-2 mb-1">
                            <b class="form-label" for="credit-amount">دائن</b>
                            <input class="form-control credit-amount" name="credit_amount[]" type="number" step="0.01" placeholder="دائن">
                        </div>
      <div class="col-md-2 mb-1" id="cost-center-container" style="display: none;">
                                                            <b class="form-label">مركز التكلفة</b>
                                                           <select name="cost_center[]" class="form-control search cost-center-select">
                     <option value="">اختر مركز التكلفة</option>
    
                    @foreach ($costCenters as $costCenter)
                        @include('client.cost_centers.partials.cost_center_option', ['costCenter' => $costCenter])
                    @endforeach
                </select>
<div class="error-message" style="color: red; display: none;"></div>

                                                        </div>

                        <div class="col-md-1 mb-1 d-flex align-items-center">
                            <button type="button" class="btn btn-danger btn-sm delete-row" style="display: flex; align-items: center; justify-content: center; height: 50%;">
                                <i class="las la-trash"></i> 
                            </button>
                        </div>
                    </div>
                </div>
            `;
            $('#entry-rows').append(row);
           initializeSelect2(); // Reinitialize Select2 for newly added rows
        });

        // Remove row
        $('#entry-rows').on('click', '.delete-row', function() {
            $(this).closest('.entry-row').remove();
            updateCalculations();
        });

        // Clear corresponding field
        $('#entry-rows').on('input', '.debit-amount', function() {
            let $row = $(this).closest('.entry-row');
            if ($(this).val()) {
                $row.find('.credit-amount').val('');
            }
            updateCalculations();
        });

        $('#entry-rows').on('input', '.credit-amount', function() {
            let $row = $(this).closest('.entry-row');
            if ($(this).val()) {
                $row.find('.debit-amount').val('');
            }
            updateCalculations();
        });

        // Update calculations on input change
        $('#entry-rows').on('input', '.debit-amount, .credit-amount', function() {
            updateCalculations();
        });

        // Validate form submission
     $('#addForm').on('submit', function(e) {
    let totalDebit = parseFloat($('#hidden-total-debit').val()) || 0;
    let totalCredit = parseFloat($('#hidden-total-credit').val()) || 0;
    let hasError = false; // لتتبع وجود خطأ

    // مسح أي رسائل خطأ سابقة
    $('.error-message').hide();

    if (totalDebit !== totalCredit) {
        e.preventDefault();
        alert('إجمالي المدين يجب أن يساوي إجمالي الدائن. الرجاء التحقق من القيم.');
        return false;
    }

    // التحقق من مراكز التكلفة
    $('#entry-rows .entry-row').each(function() {
        const costCenterSelect = $(this).find('.cost-center-select');
        if (costCenterSelect.is(':visible') && !costCenterSelect.val()) {
            hasError = true;
            // عرض رسالة الخطأ
            costCenterSelect.siblings('.error-message').text('يجب اختيار مركز تكلفة').show();
        }
    });

    // إذا كان هناك خطأ، منع إرسال النموذج
    if (hasError) {
        e.preventDefault();
    }
});

        $('#entry-rows').on('change', '.account-select' , function() {
    const selectedAccount = $(this).find(':selected');
    const selectedAccountCode = String(selectedAccount.data('code'));

    console.log('Selected Account Code:', selectedAccountCode, 'Type:', typeof selectedAccountCode);

    if (typeof selectedAccountCode === 'string' && selectedAccountCode.startsWith('5')) {
        $(this).closest('.entry-row').find('#cost-center-container').show();
    } else {
        $(this).closest('.entry-row').find('#cost-center-container').hide();
    }
     $(this).closest('.entry-row').find('.cost-center-select').select2({
        templateResult: formatState,
        templateSelection: formatState
    });
});


    });
</script>
    @endsection