add-budget-modal.blade

<div class="modal fade" id="addBudgetModal" tabindex="-1" aria-labelledby="addBudgetModalLabel" aria-hidden="true"
    data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="overlay add-budget-overlay" style="display: none">
                <i class="fas fa-2x fa-sync fa-spin"></i>
            </div>
            <div class="modal-header py-1">
                <h5 class="modal-title" id="addBudgetModalLabel">
                    Add Budget
                </h5>

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="{{ route('exp.master-budget.upload') }}" method="POST" enctype="multipart/form-data"
                id="uploadBudgetForm">
                @csrf
                <div class="modal-body">
                    <div class="row">
                        <div class="col-6">
                            <div class="form-group">
                                <label class="font-weight-normal">Cost Center</label>
                                <select class="form-control form-control-sm" id="ccUploadBudget" name="cc_id_upload"
                                    style="cursor: pointer;">
                                    @if (count($cost_center) > 0)
                                    <option value="" selected>Select Cost Center</option>
                                    @foreach ($cost_center as $cc)
                                    <option value="{{ $cc->id }}">{{ $cc->cc }}</option>
                                    @endforeach
                                    @else
                                    <option value="" selected>No Data</option>
                                    @endif
                                </select>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label class="font-weight-normal">For Year:</label>
                                <select class="form-control form-control-sm" id="ccUploadYear" style="cursor: pointer;"
                                    name="year_upload" title="year">
                                    <option value="" selected>Select Year</option>
                                    <option value="{{ date('Y') }}">{{ date('Y') }}</option>
                                    <option value="{{ date('Y') + 1 }}">{{ date('Y') + 1 }}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="input-group mb-1">
                        <div class="input-group-prepend">
                            <span class="input-group-text">Upload</span>
                        </div>
                        <div class="custom-file">
                            <input type="file" class="custom-file-input" id="csvBudgetFile"
                                aria-describedby="csvBudgetFile" name="csv_file">
                            <label class="custom-file-label csv-budget-file" for="csvBudgetFile">Choose file</label>
                        </div>
                    </div>
                    <span class="text-muted fs-sm">Upload .csv file</span>
                    <br class="mb-3">

                    <label for="">New / Revise:&nbsp;&nbsp;</label>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="is_new" id="isNew" value="new" checked
                            style="cursor: pointer;">
                        <label class="form-check-label" for="isNew" style="cursor: pointer;">New</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="is_new" id="isRev" value="rev"
                            style="cursor: pointer;">
                        <label class="form-check-label" for="isRev" style="cursor: pointer;">Revise</label>
                    </div>
                    <br class="mb-3">

                    <label for="">CSV Delimiter:&nbsp;&nbsp;</label>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="delimiter" id="inlineRadio1" value=","
                            checked style="cursor: pointer;">
                        <label class="form-check-label" for="inlineRadio1" style="cursor: pointer;">Comma ","</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="delimiter" id="inlineRadio2" value=";"
                            style="cursor: pointer;">
                        <label class="form-check-label" for="inlineRadio2" style="cursor: pointer;">Semicolon
                            ";"</label>
                    </div>
                    <br>
                    <a class="fs-sm" href="{{ asset('storage/expense/budget_n_monthly.csv') }}">Download Master Budget
                        CSV</a>
                </div>
                <div class="modal-footer py-1">
                    <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal"
                        id="btnCancelCsvUpload">Close</button>
                    <button type="submit" class="btn btn-sm btn-primary" id="addBudgetSubmitBtn">Add Budget</button>
                </div>
            </form>
        </div>
    </div>
</div>
@push('scripts')
<script>
    $('#csvBudgetFile').on('change', function(){
        const filePath = $(this).val()
        const fileName = filePath.split("\\").pop().split("/").pop()
        $('.csv-budget-file').html(fileName)
    })

    $('#addBudgetSubmitBtn').on('click', function(){
        $('.add-budget-overlay').removeAttr('style');
    })

    function deleteBudget(id) {
        const userConfirm = confirm('Yakin akan menghapus data ini?')
        const url = "{{ route('exp.budget.index') }}" + "/" + id

        if(userConfirm) {
            fetchDeteleCallback(url, budgetDeleteCallBack)

            function budgetDeleteCallBack(data) {
                if (data.success) {
                    sessionStorage.setItem('success', data.message)
                    location.reload()
                } else {
                    alert(data.message)
                }
            }
        }
    }

    $('#addBudgetModal').on('hide.bs.modal', function() {
        $('#uploadBudgetForm')[0].reset()
        $('.csv-budget-file').html('Choose file')
    })
</script>
@endpush