@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

                <!-- Edit Form Layout 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="editForm" action="{{ route('client.manualJournal.update', $manualJournal->id) }}" method="POST" enctype="multipart/form-data">
                                        @csrf
                                        @method('PUT')
            
                                        <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->id == $manualJournal->branch_id ? 'selected' : '' }}>{{ $branch->branch_name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
            
                                                <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="{{ $manualJournal->name }}" readonly>
                                                    </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" value="{{ $manualJournal->created_at->format('Y-m-d') }}">
                                                    </div>
            
                                                    <div class="col-md-3 mb-1">
                                                        <b class="form-label" for="description">البيان</b>
                                                        <textarea class="form-control" name="description" id="description">{{ $manualJournal->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" src="{{ asset($manualJournal->file_path) }}" style="width: 100px; height: 100px;" />      
                                                    </div>
                                                </div>
                                            </div>
            
                                            <div id="entry-rows" class="col-12">
                                               @foreach($manualJournal->entries as $entry)
    <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="{{ $entry->chartOfAccount->id }}">{{ $entry->chartOfAccount->name }}</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="{{ $entry->expense_details }}">
            </div>

            <!-- استخدام قيم المدين والدائن بدون disabled -->
            <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="{{ $entry->type === 'مدين' ? $entry->amount : '' }}">
            </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="{{ $entry->type === 'دائن' ? $entry->amount : '' }}">
            </div>

            <div class="col-md-2 mb-1" id="cost-center-container" style="display: {{ $entry->chartOfAccount->code[0] == '5' ? 'block' : 'none' }};">
                <b class="form-label">مركز التكلفة</b>
                <select name="cost_center[]" class="form-control search cost-center-select">
                      <option value="{{ $entry->costCenter->id ?? '' }}">{{ $entry->costCenter->name ?? '' }}</option>on>
    
                    @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>
@endforeach


                                            </div>
            
                                            <div class="col-12 mb-3">
                                                <button type="button" class="btn btn-primary" id="add-row">إضافة صف جديد</button>
                                            </div>
            
                                            <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>
            @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));
    }

    function initializeSelect2() {
        $('.account-select, .cost-center-select').select2({
    templateResult: formatState,
    templateSelection: formatState // Apply the same formatting to the selected option
});
    }

    function formatState(state) {
        if (!state.id) {
            return state.text;
        }

        var backgroundColor = $(state.element).attr('disabled') ? 'gray' : '';
        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;
    }

    initializeSelect2();

    $('#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-3 mb-1">
                        <b class="form-label" for="expense_details">الوصف</b>
                        <input class="form-control" name="expense_details[]" type="text">
                    </div>
                    <div class="col-md-1 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="مدين">
                    </div>
                    <div class="col-md-1 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-3 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">
                            <i class="las la-trash"></i>
                        </button>
                    </div>
                </div>
            </div>
        `;
        $('#entry-rows').append(row);
        initializeSelect2(); // إعادة تهيئة Select2
    });

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

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

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

        if (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
    });
    });

    $('#editForm').on('submit', function(e) {
        let totalDebit = parseFloat($('#hidden-total-debit').val()) || 0;
        let totalCredit = parseFloat($('#hidden-total-credit').val()) || 0;

        if (totalDebit !== totalCredit) {
            e.preventDefault();
            alert('إجمالي المدين يجب أن يساوي إجمالي الدائن. الرجاء التحقق من القيم.');
            return false;
        }
    });
      $(document).ready(function() {
        // تفريغ حقل الدائن عند إدخال قيمة في المدين والعكس صحيح
        $('#entry-rows').on('input', '.debit-amount', function() {
            let $row = $(this).closest('.entry-row');
            if ($(this).val()) {
                $row.find('.credit-amount').val('');  // تفريغ الدائن
            }
        });

        $('#entry-rows').on('input', '.credit-amount', function() {
            let $row = $(this).closest('.entry-row');
            if ($(this).val()) {
                $row.find('.debit-amount').val('');  // تفريغ المدين
            }
        });
        
    });
});

</script>
@endsection