@extends('layouts.admin')

@section('title') Payment Method @endsection

@section('page_title') Create New Payment Method @endsection

@section('content')


    <!-- Basic multiple Column Form section start -->
    <section id="multiple-column-form">
        <div class="row">
            <div class="col-12">

    @if ($errors->any())
        @foreach ($errors->all() as $error)
            <div>{{$error}}</div>
        @endforeach
    @endif
                <div class="card">
                    <form method="POST" action="{{ route('payment-method.store',['id' => !empty($model->id) ? $model->id : '']) }}" autocomplete="off" enctype="multipart/form-data">
                        @csrf
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6 col-12">
                                    <div class="form-group">
                                        <label class="form-label" for="title">Title <span class="text-danger asteric-sign">&#42;</span></label>
                                        <input id="title" type="text" class="form-control {{ $errors->has('title') ? ' is-invalid' : '' }}" name="title" value="{{ old('title') ? old('title') : $model->title }}" placeholder="Enter title">
                                        @if ($errors->has('title'))
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $errors->first('title') }}</strong>
                                            </span>
                                        @endif
                                        
                                    </div>
                                </div> 

                                <div class="col-md-6 col-12">
                                    <label class="form-label" for="file">Image </span></label><br>
                                    <div class="input-group">
                                        <div class="custom-file">
                                            <input type="file" class="custom-file-input" id="profileImage" name="image">
                                            <label class="custom-file-label" for="profileImage">Choose file</label>
                                        </div>
                                        <!-- <div class="input-group-append">
                                            <span class="input-group-text">Upload</span>
                                        </div> -->
                                    </div>
                                </div> 
                               
                            </div>
                        </div>
                        <div class="card-footer">
                            <button type="Submit" class="btn btn-primary me-1">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
    <!-- Basic Floating Label Form section end -->

    
    @push('page_script')

     <!-- bs-custom-file-input -->
    <script src="{{ asset('plugins/bs-custom-file-input/bs-custom-file-input.min.js') }}"></script>
    
   <script> 
        $(function () {
            bsCustomFileInput.init();
        });

        $(document).on('change', "#profileImage", function(event){
            if(this.files[0]){
                let fileSize = this.files[0].size;
                let fileSizeInKb = fileSize / 1024;
                let fileSizeLimit = 500; // In KB

                if (fileSizeInKb > fileSizeLimit) {
                    $(this).val('');
                    toastr.error("File may not be greater than 500 KB.", 'Error!', {closeButton: true, tapToDismiss: false});
                    return false;
                }  
            }   
        });
        
    </script>
@endpush
   

  
 

@endsection