@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
                                                    $lastEntry = \App\Models\ManualJournal::latest('name')->first();
                                                    $lastEntryId = $lastEntry ? $lastEntry->name + 1 : 1;
                                                @endphp
                                                <div class="row">
                                                    <div class="col-md-4 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-4 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-4 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[]" class="form-control search select2 ">
                                                                <option value="">اختر الحساب</option>
                                                                @foreach ($fixed_expenses as $expenses)
                                                                    <option value="expenses-{{ $expenses->id }}">
                                                                        {{ $expenses->fixed_expense }}
                                                                    </option>
                                                                @endforeach
                                                                
                                                                @foreach ($banks as $bank)
                                                                    <option value="bank-{{ $bank->id }}">
                                                                        {{ $bank->bank_name }}
                                                                    </option>
                                                                @endforeach
                                                                
                                                                @foreach ($safes as $safe)
                                                                    <option value="safe-{{ $safe->id }}">
                                                                        {{ $safe->safe_name }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                        <div class="col-md-4 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-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[]" class="form-control search select2">
                                                                <option value="">اختر الحساب</option>
                                                                @foreach ($fixed_expenses as $expenses)
                                                                    <option value="expenses-{{ $expenses->id }}">
                                                                        {{ $expenses->fixed_expense }}
                                                                    </option>
                                                                @endforeach
                                                                
                                                                @foreach ($banks as $bank)
                                                                    <option value="bank-{{ $bank->id }}">
                                                                        {{ $bank->bank_name }}
                                                                    </option>
                                                                @endforeach
                                                                
                                                                @foreach ($safes as $safe)
                                                                    <option value="safe-{{ $safe->id }}">
                                                                        {{ $safe->safe_name }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                        <div class="col-md-4 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-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

@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));
        }
    
        // Add row
        $('#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 select2">
                                <option value="">اختر الحساب</option>
                                @foreach ($fixed_expenses as $expenses)
                                    <option value="expenses-{{ $expenses->id }}">
                                        {{ $expenses->fixed_expense }}
                                    </option>
                                @endforeach
                                
                                @foreach ($banks as $bank)
                                    <option value="bank-{{ $bank->id }}">
                                        {{ $bank->bank_name }}
                                    </option>
                                @endforeach
                                
                                @foreach ($safes as $safe)
                                    <option value="safe-{{ $safe->id }}">
                                        {{ $safe->safe_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4 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-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-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-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);
        });
    
        // 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();
        });
    
        // Initialize Select2
        $('.select2').select2();
    });
    $('#addForm').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;
        }
    });
    </script>
    
@endsection