@extends('voyager::master')

@section('page_title', __('voyager::generic.create') . ' Recharge Card')

@section('page_header')
    <div class="page-header">
        <div class="row align-items-center py-2">
            <div class="col-sm mb-2 mb-sm-0">
                <div class="d-flex align-items-center">
                    <img class="onerror-image" data-onerror-image="{{ asset('thumb.png') }}" src="{{ asset('thumb.png') }}"
                        width="38" alt="img">
                    <!-- Header Text -->
                    <div class="w-0 flex-grow pl-2">
                        <h1 class="page-header-title mb-0">
                            {{ __('datatable.module_configuration.page_title') }}
                        </h1>
                        <p class="page-header-text m-0">{{ __('datatable.module_configuration.sub_title') }}</p>
                    </div>
                </div>
            </div>
            <div class="col-auto">
                <a href="{{ route('voyager.module-configurations.index') }}" class="btn btn-primary float-right">
                    <i class="voyager-arrow-left"></i> {{ __('voyager::generic.return_to_list') }}
                </a>
            </div>
        </div>
    </div>
@stop


@section('content')
    <div class="container-fluid pl-4">
        <div class="card">
            <div class="card-body">
                <form action="{{ route('voyager.module-configurations.store') }}" method="POST">
                    @csrf
                    <div class="row">
                        <div class="col-md-6">

                            <div class="form-group">
                                <label for="name">{{ __('form.module_configuration.wallet_type_name') }}</label>
                                <input type="text" id="" name="name" class="form-control"
                                    value="{{ old('name') }}">
                                @error('name')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label for="nameLang">{{ __('form.name_arabic') }}</label>
                                <input type="text" id="" name="nameLang" class="form-control"
                                    value="{{ old('nameLang') }}">
                                @error('nameLang')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label for="description">{{ __('form.module_configuration.wallet_description') }}</label>
                                <textarea type="text" id="description" name="description" class="form-control" value="{{ old('description') }}"></textarea>
                                @error('description')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label for="maximumWalletNumber">{{ __('form.module_configuration.max_allowed_number') }}</label>
                                <input type="text" id="maximumWalletNumber" name="maximumWalletNumber" class="form-control"
                                    value="{{ old('maximumWalletNumber') }}" oninput="checkNegativeValue(this)">
                                @error('maximumWalletNumber')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>
                        </div>

                    </div>

                    <!-- Image Upload Section (Initially Hidden) -->
                    <div id="imageUploadSection" class="form-group mt-4 row" style="display: block;">
                        <div class="col-md-4 justify-content-center">
                            <div class="configuration-module"
                                style="border: 1px solid #E4EAEC; padding:15px 20px; margin:auto; border-radius:5px; background-color:aliceblue; text-align:center;">
                                <div>
                                    <i class="voyager-upload" style="font-size: 24px;"></i>
                                </div>
                                <p class="file-name-input"></p>
                                <div style="font-weight:500">
                                    <a href="javascript:void(0)"
                                        class="image-upload">{{ __('form.template.upload_button') }}</a>
                                </div>
                            </div>
                            <input type="file" id="fileInput" name="file" data-name="file_name"
                                style="display: none;">
                            <input type="text" name="icon" class="hidden configuration-module-file-url"
                                value="">

                        </div>
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-success">
                            <i class="voyager-check"></i> {{ __('voyager::generic.submit') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@stop


@section('javascript')
    <script>

    $(document).ready(function() {
       $('input').on('input', function() {
        $(this).siblings('.text-danger').addClass('d-none');
       });
    });



        $('.image-upload').on('click', function() {
            $('#fileInput').trigger('click');
        });

        $("input[type='file']").on('change', function(event) {
            var fileName = event.target.files[0].name;
            $('.file-name-input').text(fileName); // Change text to the file name

            const fileIndicator = $(this).data('file');
            let name = $(this).data('name') || '';
            let fieldName = $(this).data('field');

            if (!name) {
                name = $(`input[name='${fieldName}']`).val()?.toLowerCase()?.replaceAll(" ", "_");
            }

            if (!name) {
                name = fieldName?.toLowerCase()?.replaceAll(" ", "_");
            }

            if (name) {
                $('#file_loader').show();
                $(`input[name='${fileIndicator}']`).val('');
                $(`.${fileIndicator}_src`).attr('src', $(this).data('src'));

                var file = event.target.files[0];
                var reader = new FileReader();
                reader.onload = function() {
                    const csrfToken = document.head.querySelector('meta[name="csrf-token"]').content;
                    var base64String = reader.result.split(',')[1];
                    const url = "{{ route('files.request') }}";
                    const data = {
                        image: base64String,
                        name: name,
                        process: "USER_KYC",
                        model: $(this).data('model'),
                        id: $(this).data('id'),
                        col: $(this).data('col'),
                        _token: csrfToken
                    };
                    $.ajax({
                        type: 'POST',
                        url: url,
                        data: data,
                        headers: {
                            'X-CSRF-Token': csrfToken
                        },
                        success: function(response) {

                            // if (response.success == true) {
                            $(`input[name='${fileIndicator}']`).val(response.data);
                            const imgTag =
                                `<img src="${response.data}" alt="Uploaded Image" class="configuration-module-img img-fluid" />`;
                            $(`.configuration-module-file-url`).val(response.data);
                            $(`.configuration-module`).html(imgTag);
                            updateImages(response.data, 'configuration-module-img');
                            // } else {
                            // }
                            $('#file_loader').hide();
                        },
                        error: function(xhr, status, error) {
                            toastr.error(error);
                            console.error('Error:', error);
                            toastr.error(response.message);
                            $('#file_loader').hide();
                        }

                    });
                };
                reader.readAsDataURL(file);
            } else {
                fieldName = fieldName.replaceAll("en_", '').replaceAll("_", " ");
                toastr.error(`Please update ${fieldName} information first.`);
            }
        });
    </script>
@stop