@extends('admin.layout.app')
@section('title', 'Create Payment Services')
@section('content')
    <div class="content container-fluid">
        <div class="page-header">
            <div class="row align-items-center">
                <div class="col-sm-12">
                    <div class="page-sub-header">
                        <h3 class="page-title">Add Payment Service</h3>
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item"><a href="#">Admin</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('payment-services.index') }}">Payment Services</a>
                            </li>
                            <li class="breadcrumb-item active">Add</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="mx-auto col-12 col-md-8">
                <div class="card">
                    <div class="card-body">
                        <form action="{{ route('payment-services.store') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="mb-3">
                                <label for="name" class="form-label">Agent Name <span
                                        class="text-danger">*</span></label>
                                <input type="text" name="name" id="name" class="form-control"
                                    value="{{ old('name') }}" required>
                            </div>
                            <div class="mb-3">
                                <label for="phone_number" class="form-label"> Phone Number <span
                                        class="text-danger">*</span></label>
                                <input type="text" name="phone_number" id="phone_number" class="form-control"
                                    value="{{ old('phone_number') }}">
                            </div>
                            <div class="mb-3">
                                <label for="account_name" class="form-label"> Account Name <span
                                        class="text-danger">*</span></label>
                                <input type="text" name="account_name" id="account_name" class="form-control"
                                    value="{{ old('account_name') }}">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Logo <span class="text-danger">*</span></label>
                                <div class="dropzone d-flex flex-column align-items-center justify-content-center"
                                    id="logo-dropzone"
                                    style="cursor:pointer; width: 100%; max-width: 400px; padding: 15px; border: 2px dashed #ccc; border-radius: 6px;">
                                    <p id="logo-upload-text"
                                        style="margin-bottom: 10px; user-select:none; text-align:center;">Drag & Drop or
                                        Click to Upload</p>
                                    <input type="file" id="logo-input" name="logo" accept="image/*"
                                        style="display:none;" required />
                                    <img id="logo-preview" alt="Logo Preview"
                                        style="display:none; max-width: 100%; max-height: 150px; border:1px solid #ccc; border-radius:4px; margin-bottom:10px; object-fit: contain; display: block; margin-left: auto; margin-right: auto;" />
                                    <button type="button" id="logo-upload-btn"
                                        class="mx-auto btn btn-primary btn-sm d-block">Upload</button>
                                </div>
                            </div>
                            {{-- <div class="mb-3">
                                <label class="form-label">QR Code <span class="text-danger">*</span></label>
                                <div class="dropzone d-flex flex-column align-items-center justify-content-center"
                                    id="qr-dropzone"
                                    style="cursor:pointer; width: 100%; max-width: 400px; padding: 15px; border: 2px dashed #ccc; border-radius: 6px;">
                                    <p id="qr-upload-text"
                                        style="margin-bottom: 10px; user-select:none; text-align:center;">Drag & Drop or
                                        Click to Upload</p>
                                    <input type="file" id="qr-input" name="qr_code" accept="image/*"
                                        style="display:none;" required />
                                    <img id="qr-preview" alt="QR Preview"
                                        style="display:none; max-width: 100%; max-height: 150px; border:1px solid #ccc; border-radius:4px; margin-bottom:10px; object-fit: contain; display: block; margin-left: auto; margin-right: auto;" />
                                    <button type="button" id="qr-upload-btn"
                                        class="mx-auto btn btn-primary btn-sm d-block">Upload</button>
                                </div>
                            </div> --}}

                            <div class="mb-3">
                                <button type="submit" class="btn btn-primary w-100">Create</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        $(function() {
            // Logo
            var logoDropzone = $('#logo-dropzone');
            var logoInput = $('#logo-input');
            var logoPreview = $('#logo-preview');
            var logoUploadText = $('#logo-upload-text');
            var logoUploadBtn = $('#logo-upload-btn');
            logoUploadText.on('click', function(e) {
                e.stopPropagation();
                logoInput.trigger('click');
            });
            logoUploadBtn.on('click', function(e) {
                e.stopPropagation();
                logoInput.trigger('click');
            });
            logoDropzone.on('dragover', function(e) {
                e.preventDefault();
                e.stopPropagation();
                logoDropzone.addClass('hover');
            });
            logoDropzone.on('dragleave drop', function(e) {
                e.preventDefault();
                e.stopPropagation();
                logoDropzone.removeClass('hover');
            });
            logoDropzone.on('drop', function(e) {
                e.preventDefault();
                e.stopPropagation();
                var files = e.originalEvent.dataTransfer.files;
                if (files.length > 0) {
                    logoInput.prop('files', files);
                    previewLogo(files[0]);
                }
            });
            logoInput.on('change', function() {
                if (this.files && this.files[0]) {
                    previewLogo(this.files[0]);
                }
            });

            function previewLogo(file) {
                if (!file.type.startsWith('image/')) {
                    alert('Please upload an image file.');
                    logoPreview.hide();
                    logoInput.val('');
                    logoUploadText.show();
                    return;
                }
                var reader = new FileReader();
                reader.onload = function(e) {
                    logoPreview.attr('src', e.target.result).show();
                    logoUploadText.hide();
                }
                reader.readAsDataURL(file);
            }
            // QR Code
            // var qrDropzone = $('#qr-dropzone');
            // var qrInput = $('#qr-input');
            // var qrPreview = $('#qr-preview');
            // var qrUploadText = $('#qr-upload-text');
            // var qrUploadBtn = $('#qr-upload-btn');
            // qrUploadText.on('click', function(e) {
            //     e.stopPropagation();
            //     qrInput.trigger('click');
            // });
            // qrUploadBtn.on('click', function(e) {
            //     e.stopPropagation();
            //     qrInput.trigger('click');
            // });
            // qrDropzone.on('dragover', function(e) {
            //     e.preventDefault();
            //     e.stopPropagation();
            //     qrDropzone.addClass('hover');
            // });
            // qrDropzone.on('dragleave drop', function(e) {
            //     e.preventDefault();
            //     e.stopPropagation();
            //     qrDropzone.removeClass('hover');
            // });
            // qrDropzone.on('drop', function(e) {
            //     e.preventDefault();
            //     e.stopPropagation();
            //     var files = e.originalEvent.dataTransfer.files;
            //     if (files.length > 0) {
            //         qrInput.prop('files', files);
            //         previewQR(files[0]);
            //     }
            // });
            // qrInput.on('change', function() {
            //     if (this.files && this.files[0]) {
            //         previewQR(this.files[0]);
            //     }
            // });

            // function previewQR(file) {
            //     if (!file.type.startsWith('image/')) {
            //         alert('Please upload an image file.');
            //         qrPreview.hide();
            //         qrInput.val('');
            //         qrUploadText.show();
            //         return;
            //     }
            //     var reader = new FileReader();
            //     reader.onload = function(e) {
            //         qrPreview.attr('src', e.target.result).show();
            //         qrUploadText.hide();
            //     }
            //     reader.readAsDataURL(file);
            // }
        });
    </script>
@endpush