@props(['service' => new \App\Models\Service()])

<div class="container py-4">
    <div class="card" id="bill_to_new_form">
        <div class="card-body">
            <h4>Payment Slip</h4>

            <hr class="my-10">

            <!--begin::Row-->
            <div class="row mb-3">
                <!--begin::Label-->
                <label for="payment_medium" class="col-lg-12 col-form-label fw-semibold fs-6 pt-0">Payment Method</label>
                <!--end::Label-->
                <!--begin::Col-->
                <div class="col-lg-12">
                    <input type="text" class="form-control form-control-sm" name="payment_medium" id="payment_medium" value="Bank Transfer" disabled>
                    <input type="hidden" name="payment_medium" id="payment_medium" value="1">
                    @error('payment_medium')
                        <span class="text-sm text-danger">
                            {{ $message }}
                        </span>
                    @enderror
                </div>
                <!--end::Col-->
            </div>
            <!--end::Row-->
            <!--begin::Row-->
            <div class="row mb-3">
                <!--begin::Label-->
                <label for="payslip" class="col-lg-12 col-form-label fw-semibold fs-6 pt-0">Upload Payment Slip</label>
                <!--end::Label-->
                <!--begin::Col-->
                <div class="col-lg-12">
                    <!-- Dropzone Section (appears below the image) -->
                    <div class="dropzone dropzone-file" id="dzPayslip">
                        <!--begin::Message-->
                        <div class="dz-message needsclick">
                            <button type="button" class="btn btn-sm btn-secondary">Choose File</button>
                            <span class="align-self-center text-muted ms-2">No file selected</span>
                        </div>
                        <!--end::Message-->
                    </div>
                    <input type="hidden" name="payslip" id="payslip" value="">
                    @error('payslip')
                        <span class="text-sm text-danger">
                            {{ $message }}
                        </span>
                    @enderror
                </div>
                <!--end::Col-->
            </div>
            <!--end::Row-->
            <!--begin::Row-->
            <div class="row mb-3">
                <!--begin::Label-->
                <label for="transaction_date" class="col-lg-12 col-form-label fw-semibold fs-6 pt-0">Transaction Date</label>
                <!--end::Label-->
                <!--begin::Col-->
                <div class="col-lg-12">
                    <input type="text" class="form-control form-control-sm flatpickr" name="transaction_date" id="transaction_date" value="{{ old('transaction_date') }}">
                    @error('transaction_date')
                        <span class="text-sm text-danger">
                            {{ $message }}
                        </span>
                    @enderror
                </div>
                <!--end::Col-->
            </div>
            <!--end::Row-->
            <!--begin::Row-->
            <div class="row mb-3">
                <!--begin::Label-->
                <label for="amount" class="col-lg-12 col-form-label fw-semibold fs-6 pt-0">Amount (RM)</label>
                <!--end::Label-->
                <!--begin::Col-->
                <div class="col-lg-12">
                    <input type="text" class="form-control form-control-sm" value="{{ number_format((float) $payment->total, 2) }}" disabled>
                    <input type="hidden" name="amount" id="amount" value="{{ number_format((float) $payment->total, 2) }}">
                    @error('amount')
                        <span class="text-sm text-danger">
                            {{ $message }}
                        </span>
                    @enderror
                </div>
                <!--end::Col-->
            </div>
            <!--end::Row-->
            <!--begin::Row-->
            <div class="row mb-3">
                <!--begin::Label-->
                <label for="payment_method" class="col-lg-12 col-form-label fw-semibold fs-6 pt-0">Bank Name</label>
                <!--end::Label-->
                <!--begin::Col-->
                <div class="col-lg-12">
                    <select name="payment_method" id="payment_method" class="form-control form-control-sm form-select select2">
                        <option value="">Choose Bank Name</option>
                        @php
                            $bank = $bank ?? config('bank');
                        @endphp
                        @foreach ($bank as $value => $name)
                            <option value="{{ $value }}" @selected(old('payment_method'))>{{ $name }}</option>
                        @endforeach
                    </select>
                    @error('payment_method')
                        <span class="text-sm text-danger">
                            {{ $message }}
                        </span>
                    @enderror
                </div>
                <!--end::Col-->
            </div>
            <!--end::Row-->
            <!--begin::Row-->
            <div class="row mb-3">
                <!--begin::Label-->
                <label for="company_name" class="col-lg-12 col-form-label fw-semibold fs-6 pt-0">Account Holder Name</label>
                <!--end::Label-->
                <!--begin::Col-->
                <div class="col-lg-12">
                    <input type="text" class="form-control form-control-sm" name="company_name" id="company_name">
                    @error('company_name')
                        <span class="text-sm text-danger">
                            {{ $message }}
                        </span>
                    @enderror
                </div>
                <!--end::Col-->
            </div>
            <!--end::Row-->
        </div>
    </div>
</div>

@push('scripts')
    <script>
        $(function() {
            initDropzone();
        });

        function initDropzone() {
            var dzPayslip = new Dropzone("#dzPayslip", {
                url: "{{ route('company.application.store-media') }}",
                paramName: "file",
                maxFiles: 5,
                maxFilesize: 10,
                addRemoveLinks: true,
                acceptedFiles: 'image/*, application/pdf',
                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                },
                success: function(file, response) {
                    let payslipVal = $('#payslip').val();
                    let files = payslipVal ? payslipVal.split(',') : [];
                    files.push(response.name);
                    $('#payslip').val(files.join(','));
                    file.uploadedFileName = response.name;
                },
                removedfile: function(file) {
                    file.previewElement.remove();
                    if (file.status !== "error") {
                        let payslipVal = $('#payslip').val();
                        let files = payslipVal ? payslipVal.split(',') : [];
                        files = files.filter(name => name !== file.uploadedFileName);
                        $('#payslip').val(files.join(','));
                    }
                },
                init: function() {
                    //
                },
            });
        }
    </script>
@endpush