@extends('layouts/acc_layout')
@section('title', '| Late Collection Deposit')
@section('content')

    <div class="row add-data-form ">
        <div class="col-md-2"></div>
        <div class="col-md-8 fullbody">
            <div class="viewTitle" style="border-bottom: 1px solid white;">
                <a href="{{ url('lateCollectionDeposit/lateCollectionDepositRegister') }}"
                    class="btn btn-info pull-right addViewBtn"><i class="glyphicon glyphicon-th-list viewIcon">
                    </i>Late Collection Deposit List</a>
            </div>
            <div class="panel panel-default panel-border">
                <div class="panel-heading">
                    <div class="panel-title">Late Collection Deposit</div>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2">
                            {!! Form::open([
                                'url' => isset($lateDeposit)
                                    ? url('lateCollectionDeposit/update/' . $lateDeposit->id)
                                    : url('lateCollectionDeposit/store'),
                                'role' => 'form',
                                'class' => 'form-horizontal form-groups',
                                'enctype' => 'multipart/form-data',
                            ]) !!}


                            <div class="form-group">
                                {!! Form::label('branchId', 'Branch:', ['class' => 'col-sm-3 control-label']) !!}
                                <div class="col-sm-9">
                                    {!! Form::select('branch', ['' => 'Select'] + $branchList, $lateDeposit->branchId ?? null, [
                                        'class' => 'form-control',
                                        'id' => 'branch',
                                    ]) !!}
                                </div>
                            </div>

                            <div class="form-group">
                                {!! Form::label('bankRegisterId', 'Bank:', ['class' => 'col-sm-3 control-label']) !!}
                                <div class="col-sm-9">
                                    {!! Form::select('bank', ['' => 'Select'] + $bankList, $lateDeposit->bankRegisterId ?? null, [
                                        'class' => 'form-control',
                                        'id' => 'bank',
                                    ]) !!}
                                </div>
                            </div>

                            <div class="form-group">
                                {!! Form::label('depositDate', 'Deposit Date:', ['class' => 'col-sm-3 control-label']) !!}
                                <div class="col-sm-9">
                                    {!! Form::text('depositDate', $depositDate ?? null, [
                                        'class' => 'form-control depositDate',
                                        'id' => 'depositDate',
                                        'style' => 'text-align:left;cursor:pointer;',
                                        'autocomplete' => 'off',
                                        Auth::user()->branchId == 1 ? '' : 'readonly',
                                    ]) !!}
                                </div>
                            </div>

                            <div class="form-group">
                                {!! Form::label('cashInHand', 'Opening Cash In Hand:', ['class' => 'col-sm-3 control-label']) !!}
                                <div class="col-sm-9">
                                    {!! Form::text('cashInHand', number_format($lateDeposit->cashInHand ?? 0), [
                                        'class' => 'form-control',
                                        'id' => 'cashInHand',
                                        'disabled' => 'true',
                                    ]) !!}
                                </div>
                            </div>

                            <div class="form-group">
                                {!! Form::label('depositAmount', 'Deposit Amount:', ['class' => 'col-sm-3 control-label']) !!}
                                <div class="col-sm-9">
                                    {!! Form::text('depositAmount', $lateDeposit->depositAmount ?? null, [
                                        'class' => 'form-control',
                                        'id' => 'depositAmount',
                                        'style' => 'text-align:left;',
                                        'autocomplete' => 'off',
                                    ]) !!}
                                </div>
                            </div>


                            <div class="form-group">
                                {!! Form::label('depositSlip', 'Deposit Slip:', ['class' => 'col-sm-3 control-label']) !!}
                                <div class="col-sm-9">
                                    <!-- File input for uploading a new deposit slip -->
                                    {!! Form::file('depositSlip', [
                                        'class' => 'form-control',
                                        'id' => 'depositSlip',
                                    ]) !!}

                                    <!-- Show the existing deposit slip as a link -->
                                    @if (
                                        !empty($lateDeposit->depositSlip) &&
                                            file_exists(public_path('uploads/images/accounting/depositslip/' . $lateDeposit->depositSlip)))
                                        @php
                                            $filePath = asset(
                                                'uploads/images/accounting/depositslip/' . $lateDeposit->depositSlip,
                                            );
                                        @endphp
                                        <p>
                                            <a href="{{ $filePath }}" target="_blank">View Current Deposit Slip</a>
                                        </p>
                                    @endif
                                </div>
                            </div>

                            <!-- Show the existing deposit slip link if it exists -->

                            <div class="pager wizard pull-right">
                                {!! Form::button('Submit', ['class' => 'btn btn-info submitButton', 'type' => 'submit']) !!}

                                <a href="{{ url('lateCollectionDeposit/lateCollectionDepositRegister/') }}"
                                    class="btn btn-danger closeBtn">Close</a>
                            </div>
                            {!! Form::close() !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function() {

            // Initialize Datepicker for branchId = 1
            @if (Auth::user()->branchId == 1)
                $('#depositDate').datepicker({
                    dateFormat: 'yy-mm-dd',
                    changeMonth: true,
                    changeYear: true,
                    onSelect: function() {
                        fetchBankAndCashInHand(); // Fetch cashInHand when date is selected
                    }
                });
            @endif

            // Function to format numbers with two decimal places
            function formattedNumber(number) {
                return number.toLocaleString('en-US', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                });
            }

            // Populate previously selected bank if available
            let selectedBank = "{{ $lateDeposit->bankRegisterId ?? '' }}";
            if (selectedBank) {
                $('#bank').val(selectedBank);
            }

            // Event listener for branch dropdown change
            $('#branch').on('change', function() {
                fetchBankAndCashInHand();
            });

            // Function to fetch bank list and cashInHand
            function fetchBankAndCashInHand() {
                let branchId = $('#branch').val();
                let depositDate = $('#depositDate').val(); // Get the selected deposit date

                if (branchId) {
                    $.ajax({
                        url: "{{ route('getBanksByBranch') }}",
                        type: 'GET',
                        data: {
                            branchId: branchId,
                            depositDate: depositDate // Send selected date to the backend
                        },
                        success: function(response) {
                            // Populate the bank dropdown
                            let bank = $('#bank');
                            bank.empty();
                            bank.append('<option value="">Select</option>');

                            $.each(response.bankList, function(key, value) {
                                bank.append(`<option value="${key}">${value}</option>`);
                            });

                            // Update the cashInHand field
                            $('#cashInHand').val(formattedNumber(response.cashInHand));
                        },
                        error: function(xhr) {
                            console.error('An error occurred:', xhr.responseText);
                        }
                    });
                } else {
                    $('#bank').empty().append('<option value="">Select</option>');
                    $('#depositDate').val('');
                }
            }

            // Form submission with AJAX
            $('form').on('submit', function(event) {
                event.preventDefault();

                var form = $(this);
                var formData = new FormData(form[0]);
                let submitButton = form.find('button[type="submit"]');
                submitButton.prop('disabled', true);

                $.ajax({
                    url: form.attr('action'),
                    type: "POST",
                    data: formData,
                    contentType: false,
                    cache: false,
                    dataType: 'json',
                    processData: false,
                    headers: {
                        'X-CSRF-Token': "{{ csrf_token() }}",
                    },
                    success: function(response) {
                        if (response.errors) {
                            $("#submit").prop('disabled', false);
                            $(".error").remove();
                            $.each(response.errors, function(name, error) {
                                $("#" + name).after("<p class='error'>* " + response
                                    .errors[name] + "</p>");
                            });
                        } else {
                            if (response.responseTitle === 'Warning!') {
                                toastr.warning(response.responseText, response.responseTitle,
                                    opts);
                                $("#submit").prop('disabled', false);
                            } else {
                                toastr.success(response.responseText, response.responseTitle,
                                    opts);
                                setTimeout(function() {
                                    window.location.href =
                                        "{{ url('lateCollectionDeposit/lateCollectionDepositRegister') }}";
                                }, 3000);
                            }
                        }
                    },
                    error: function(xhr) {
                        handleError(xhr);
                    },
                    complete: function() {
                        submitButton.prop('disabled', false);
                    }
                });
            });

            // Validate depositAmount input
            document.getElementById('depositAmount').addEventListener('input', function(e) {
                let value = parseFloat(e.target.value);
                if (isNaN(value) || value < 0) {
                    e.target.value = ''; // Clear invalid input
                }
            });

        });
    </script>
@endsection