@extends('layouts.acc_layout')
@section('title', '| Cardless EMI Voucher Config')

@section('content')
    <style>
        .mb-3 {
            margin-bottom: 1rem;
        }
        .pb-3 {
            padding-bottom: 1rem;
        }
    </style>
    <div class="row add-data-form">
        <div class="col-md-12">
            <div class="col-md-3"></div>
            <div class="col-md-6 fullbody">
                <div class="viewTitle" style="border-bottom: 1px solid white;">
                    <a href="{{ route('cardlessEmiVoucherConfig.index') }}" class="btn btn-info pull-right addViewBtn"><i class="glyphicon glyphicon-th-list viewIcon">
                        </i>Voucher Config List</a>
                </div>
                <div class="panel panel-default panel-border">
                    <div class="panel-heading">
                        <div class="panel-title"> {{ isset($voucherConfig) ? 'Edit' : 'Add' }} Cardless EMI Voucher Config</div>
                    </div>
                    <div class="panel-body">
                        <div class="">
                            {!! Form::open([
                                'url' => isset($voucherConfig) ? route('cardlessEmiVoucherConfig.update') : route('cardlessEmiVoucherConfig.store'),
                                'id' => 'voucherForm',
                                'class' => 'form-horizontal',
                            ]) !!}

                            <!-- Hidden ID for Edit -->
                            @if (isset($voucherConfig))
                                {!! Form::hidden('id', $voucherConfig->id) !!}
                                <input type="hidden" name="companyId" value="{{ $voucherConfig->companyId }}">
                                <input type="hidden" name="transactionType" value="{{ $voucherConfig->transactionType }}">
                                <input type="hidden" name="projectId" value="{{ $voucherConfig->projectId }}">
                                <input type="hidden" name="projectTypeId" value="{{ $voucherConfig->projectTypeId }}">
                            @endif

                            <!-- Project And Project Type -->
                            <div class="border-bottom pb-3 mb-3 row">
                                <div class="col-md-6">
                                    <div class="row">
                                        {!! Form::label('projectId', 'Project:', ['class' => 'col-sm-3 col-form-label fw-bold']) !!}
                                        <div class="col-sm-9">
                                            {!! Form::select('projectId', ['' => 'Select Project'] + $projects, $voucherConfig->projectId ?? null, [
                                                'class' => 'form-control custom-select2',
                                                isset($voucherConfig) ? 'disabled' : '',
                                            ]) !!}
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="row">
                                        {!! Form::label('projectTypeId', 'Project Type:', ['class' => 'col-sm-3 col-form-label fw-bold']) !!}
                                        <div class="col-sm-9">
                                            {!! Form::select('projectTypeId', ['' => 'Select Project Type'] + $projectTypes, $voucherConfig->projectTypeId ?? null, [
                                                'class' => 'form-control custom-select2',
                                                isset($voucherConfig) ? 'disabled' : '',
                                            ]) !!}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Company -->
                            <div class="row mb-3">
                                {!! Form::label('companyId', 'Company:', ['class' => 'col-sm-4 col-form-label fw-bold']) !!}
                                <div class="col-sm-8">
                                    {!! Form::select('companyId', $companies, $voucherConfig->companyId ?? null, [
                                        'class' => 'form-control',
                                        isset($voucherConfig) ? 'disabled' : '',
                                    ]) !!}
                                </div>
                            </div>

                            <!-- Transaction Type -->
                            <div class="row mb-3">
                                {!! Form::label('transactionType', 'Transaction Type:', ['class' => 'col-sm-4 col-form-label fw-bold']) !!}
                                <div class="col-sm-8">
                                    {!! Form::select('transactionType', $transactionTypes, $voucherConfig->transactionType ?? null, [
                                        'class' => 'form-control',
                                        'id' => 'transactionType',
                                        isset($voucherConfig) ? 'disabled' : '',
                                    ]) !!}
                                </div>
                            </div>

                            <!-- Voucher Type -->
                            <div class="row mb-3">
                                {!! Form::label('voucherType', 'Voucher Type:', ['class' => 'col-sm-4 col-form-label fw-bold']) !!}
                                <div class="col-sm-8">
                                    {!! Form::select('voucherType', $voucherTypes, $voucherConfig->voucherType ?? null, ['class' => 'form-control', 'required']) !!}
                                </div>
                            </div>

                            <div class="row mb-3">
                                {!! Form::label('status', 'Status:', ['class' => 'col-sm-4 col-form-label fw-bold']) !!}
                                <div class="col-sm-8">
                                    {!! Form::select('status', [1 => 'Active', 0 => 'Inactive'], old('status', $voucherConfig->status ?? ''), ['class' => 'form-control']) !!}
                                </div>
                            </div>

                            <!-- Sales Ledger Fields -->
                            <div class="transaction-sales p-3 border rounded mb-3 shadow-sm" style="display:none;">
                                <h5 class="border-bottom fw-bold pb-2 mb-2 fw-bold">Sales Amount:</h5>
                                <div class="row mb-3">
                                    <div class="col-sm-6">
                                        {!! Form::label('salesDrLedgerId', 'Debit:', ['class' => 'form-label fw-bold']) !!}
                                        <div class="">
                                            {!! Form::select('salesDrLedgerId', $ledgers, $voucherConfig->salesDrLedgerId ?? null, ['class' => 'form-control custom-select2']) !!}
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        {!! Form::label('salesCrLedgerId', 'Credit:', ['class' => 'form-label fw-bold']) !!}
                                        <div class="">
                                            {!! Form::select('salesCrLedgerId', $ledgers, $voucherConfig->salesCrLedgerId ?? null, ['class' => 'form-control custom-select2']) !!}
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Collection Ledger Fields -->
                            <div class="transaction-collection p-3 border rounded mb-3 shadow-sm" style="display:none;">
                                <h5 class="border-bottom fw-bold pb-2 mb-3">Principal Amount:</h5>

                                <div class="row mb-3">
                                    <div class="col-sm-6">
                                        {!! Form::label('collectionPrincipalDrLedgerId', 'Debit:', ['class' => 'form-label fw-bold']) !!}
                                        <div class="">
                                            {!! Form::select('collectionPrincipalDrLedgerId', $ledgers, $voucherConfig->collectionPrincipalDrLedgerId ?? null, ['class' => 'form-control custom-select2']) !!}
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        {!! Form::label('collectionPrincipalCrLedgerId', 'Credit:', ['class' => 'form-label fw-bold']) !!}
                                        <div class="">
                                            {!! Form::select('collectionPrincipalCrLedgerId', $ledgers, $voucherConfig->collectionPrincipalCrLedgerId ?? null, ['class' => 'form-control custom-select2']) !!}
                                        </div>
                                    </div>
                                </div>

                                {{-- <hr> --}}

                                <h5 class="border-bottom fw-bold pb-2 mb-3">Interest Amount:</h5>

                                <div class="row mb-3">
                                    <div class="col-sm-6">
                                        {!! Form::label('collectionInterestDrLedgerId', 'Debit:', ['class' => 'form-label fw-bold']) !!}
                                        <div class="">
                                            {!! Form::select('collectionInterestDrLedgerId', $ledgers, $voucherConfig->collectionInterestDrLedgerId ?? null, ['class' => 'form-control custom-select2']) !!}
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        {!! Form::label('collectionInterestCrLedgerId', 'Credit:', ['class' => 'form-label fw-bold']) !!}
                                        <div class="">
                                            {!! Form::select('collectionInterestCrLedgerId', $ledgers, $voucherConfig->collectionInterestCrLedgerId ?? null, ['class' => 'form-control custom-select2']) !!}
                                        </div>
                                    </div>
                                </div>
                            </div>


                            <!-- Submit -->
                            <div class="row">
                                <div class="col-md-12 " style="text-align: right; margin-top: 15px;">
                                    <button type="submit" class="btn btn-primary hstack gap-2">
                                        <i class="far fa-paper-plane"></i>
                                        <span class="vr"></span>
                                        {{ isset($voucherConfig) ? 'Update' : 'Submit' }}
                                    </button>
                                    <a href="{{ route('cardlessEmiVoucherConfig.index') }}" class="btn btn-danger hstack gap-2">
                                        <i class="pli-close fs-5"></i>
                                        <span class="vr"></span>
                                        Close
                                    </a>
                                </div>
                            </div>

                            {!! Form::close() !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-2"></div>
    </div>
    <script>
        $(document).ready(function() {

            function toggleLedgerFields() {
                var type = $('#transactionType').val();
                if (type === 'sales') {
                    $('.transaction-sales').show().find('select').prop('disabled', false);
                    $('.transaction-collection').hide().find('select').prop('disabled', true);
                } else if (type === 'collection') {
                    $('.transaction-sales').hide().find('select').prop('disabled', true);
                    $('.transaction-collection').show().find('select').prop('disabled', false);
                } else {
                    $('.transaction-sales, .transaction-collection').hide().find('select').prop('disabled', true);
                }
            }

            // Initial toggle for edit page
            toggleLedgerFields();

            // On change
            $('#transactionType').on('change', toggleLedgerFields);

            $('#projectId').change(function(e) {
                e.preventDefault();
                // Project Type
                if ($('#projectTypeId').length > 0) {
                    $('#projectTypeId').empty().append('<option value="">Select Project Type</option>');

                    $.ajax({
                        type: "post",
                        url: "{{ url('gnr/getProjectTypes') }}",
                        data: {
                            'fillProjectId': $("#projectId").val()
                        },
                        dataType: "json",
                        success: function(projectTypes) {
                            $.each(projectTypes, function(index, value) {
                                $('#projectTypeId').append("<option value=" +
                                    index + ">" + value + "</option>");
                            });
                        }
                    });
                }
            });

            $(document).on('submit', '#voucherForm', function(e) {
                e.preventDefault();
                $("#loadingModal").show();
                let formData = $(this).serialize();
                $.ajax({
                    type: $(this).attr('method'),
                    url: $(this).attr('action'),
                    data: formData,
                    dataType: "json",
                    success: function(response) {
                        $("#loadingModal").hide();
                        if (response.success) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Success',
                                text: response.message
                            }).then(() => {
                                window.location.href = "{{ route('cardlessEmiVoucherConfig.index') }}";
                            });
                        } else if (response.warning) {
                            Swal.fire({
                                icon: 'warning',
                                title: 'Warning',
                                text: response.message
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: response.message ?? 'Something went wrong!'
                            });
                        }
                    },
                    error: function(xhr) {
                        $("#loadingModal").hide();
                        if (xhr.status === 422) {
                            let errors = xhr.responseJSON.errors;
                            let errorHtml = '';

                            $.each(errors, function(key, value) {
                                // Each message wrapped in its own validation div
                                errorHtml += '<div class="swal2-validation-message rounded" style="display:block; text-align:left; margin-bottom:5px;">' +
                                    value[0] + '</div>';
                            });

                            Swal.fire({
                                icon: 'error',
                                title: 'Validation Error',
                                html: errorHtml
                            });
                        } else {
                            Swal.fire('Error!', 'Unexpected error occurred!', 'error');
                        }
                    }
                });
            });

        });
    </script>
@endsection