@extends('admin.layouts.layouts')

@section('title', 'PDF Settings')

@section('page-css')
    <style>
        .img-thumbnail {
            border-radius: 0 !important;
            max-height: 49px;
        }

        .img-preview {
            padding: 0.25rem;
            background-color: #fff;
            border: 1px solid #dee2e6;
            border-radius: 0.25rem;
            max-width: 100%;
            height: auto;
        }
    </style>
@endsection

@section('content')

    <div class="page-header">
        <h3 class="page-title">PDF Settings</h3>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item active">PDF Settings</li>
            </ol>
        </nav>
    </div>

    <div class="card">

        {!! Form::open([
            'route' => 'pdf-settings.store',
            'method' => 'POST',
            'files' => true,
            'id' => 'setting-form',
        ]) !!}

        <div class="card-body">
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        {!! Form::label('logo', 'Logo', ['class' => 'form-label']) !!} <span class="text-danger">*</span>

                        <div class="align-items-start">
                            <div class="input-group">
                                {!! Form::file('logo', [
                                    'class' => 'form-control',
                                    'accept' => 'image/jpeg,image/png,image/jpg',
                                    'data-parsley-required' => empty($setting->logo) ? true : false,
                                    'data-parsley-filetype' => 'png,jpg,jpeg',
                                    'data-parsley-max-file-size' => '2',
                                    'data-parsley-required-message' => 'Please choose logo.',
                                    'data-parsley-max-file-size-message' => 'Maximum file size allowed is 2MB.',
                                    'data-parsley-errors-container' => '#logo_error',
                                ]) !!}

                                <div class="input-group-append">
                                    @if (!empty($setting->logo) && file_exists(public_path('storage/' . $setting->logo)))
                                        <img src="{{ asset('storage/' . $setting->logo) }}" alt="Logo" width="50"
                                            height="49" class="img-thumbnail viewable">
                                    @else
                                        <img src="{{ asset('assets/images/noimage/no-image.jpeg') }}" alt="No Image"
                                            width="50" height="49" class="img-thumbnail viewable">
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="text-danger" id="logo_error"></div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        {!! Form::label('title', 'Title', ['class' => 'form-label']) !!} <span class="text-danger">*</span>
                        {!! Form::text('title', $setting->title ?? '', [
                            'class' => 'form-control',
                            'placeholder' => 'Enter Title',
                            'data-parsley-required' => 'true',
                            'data-parsley-required-message' => 'Please enter title.',
                            'data-parsley-errors-container' => '#title_error',
                        ]) !!}

                        <div class="text-danger" id="title_error"></div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="form-group">
                        {!! Form::label('address', 'Address', ['class' => 'form-label']) !!} <span class="text-danger">*</span>
                        {!! Form::textarea('address', $setting->address ?? '', [
                            'class' => 'form-control',
                            'rows' => 3,
                            'placeholder' => 'Enter Address',
                            'data-parsley-required' => 'true',
                            'data-parsley-required-message' => 'Please enter address.',
                            'data-parsley-errors-container' => '#address_error',
                        ]) !!}

                        <div class="text-danger" id="address_error"></div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        {!! Form::label('gst_no', 'GST No.', ['class' => 'form-label']) !!} <span class="text-danger">*</span>
                        {!! Form::text('gst_no', $setting->gst_no ?? '', [
                            'class' => 'form-control gstNumber',
                            'placeholder' => 'Enter GST Number',
                            'data-parsley-required' => 'true',
                            'data-parsley-pattern' => '^[0-9]{2}[A-Z]{5}[0-9]{4}[A-Z]{1}[1-9A-Z]{1}Z[0-9A-Z]{1}$',
                            'data-parsley-required-message' => 'Please enter gst number.',
                            'data-parsley-pattern-message' => 'Please enter valid GST number.',
                            'data-parsley-errors-container' => '#gst_no_error',
                        ]) !!}

                        <div class="text-danger" id="gst_no_error"></div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        {!! Form::label('mobile_no', 'Mobile No.', ['class' => 'form-label']) !!} <span class="text-danger">*</span>
                        {!! Form::text('mobile_no', $setting->mobile_no ?? '', [
                            'class' => 'form-control mobile',
                            'placeholder' => 'Enter Mobile Number',
                            'data-parsley-required' => 'true',
                            'data-parsley-minlength' => '10',
                            'data-parsley-required-message' => 'Please enter mobile number.',
                            'data-parsley-minlength-message' => 'Mobile number must be at least 10 digits.',
                            'data-parsley-errors-container' => '#mobile_no_error',
                        ]) !!}

                        <div class="text-danger" id="mobile_no_error"></div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        {!! Form::label('email', 'Email', ['class' => 'form-label']) !!} <span class="text-danger">*</span>
                        {!! Form::email('email', $setting->email ?? '', [
                            'class' => 'form-control email',
                            'placeholder' => 'Enter Email Address',
                            'data-parsley-type' => 'email',
                            'data-parsley-required' => 'true',
                            'data-parsley-required-message' => 'Please enter email address.',
                            'data-parsley-type-message' => 'Please enter valid email address.',
                            'data-parsley-errors-container' => '#email_error',
                        ]) !!}

                        <div class="text-danger" id="email_error"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-footer">
            <button type="submit" class="btn btn-primary" id="update-btn">Update</button>
        </div>

        {!! Form::close() !!}
    </div>
@endsection


@section('page-js')
    <script type="text/javascript">
        $(document).ready(function() {
            // Initialized parsley validation
            $('#setting-form').parsley();

            // Validate file extension
            window.Parsley.addValidator('filetype', {
                validateString: function(value, requirement, parsleyInstance) {
                    const files = parsleyInstance.$element[0].files;

                    if (!files.length) {
                        return false;
                    }

                    const allowedExtensions = requirement.split(',');
                    const fileExtension = files[0].name.split('.').pop().toLowerCase();
                    return allowedExtensions.includes(fileExtension);
                },
                requirementType: 'string',
                messages: {
                    en: 'Only .png, .jpg and .jpeg files are allowed.'
                }
            });

            // Validate file size (in MB)
            window.Parsley.addValidator('maxFileSize', {
                requirementType: 'integer',
                validateString: function(_value, maxSize, parsleyInstance) {
                    if (!window.FormData) {
                        return true;
                    }

                    var fileInput = parsleyInstance.$element[0];

                    if (fileInput.files.length === 0) {
                        return true;
                    }

                    var file = fileInput.files[0];
                    var sizeInMB = file.size / 1024 / 1024;
                    return sizeInMB <= maxSize;
                },
                messages: {
                    en: 'File size must be less than %s MB.'
                }
            });
        });

        // Function for update settings
        $("#setting-form").on("submit", function(e) {
            e.preventDefault();
            const $btn = $('#update-btn').prop('disabled', true).html('Updating...');

            if (!$(this).parsley().isValid()) return $btn.prop('disabled', false).html('Update');

            $.ajax({
                url: "{{ route('pdf-settings.store') }}",
                method: "POST",
                data: new FormData(this),
                dataType: "JSON",
                cache: false,
                contentType: false,
                processData: false,
                success: res => {
                    const success = res.success;
                    $btn.prop('disabled', !success).html('Update');
                    toastr[success ? 'success' : 'error'](res.message);
                    if (success) setTimeout(() => location.href = "{{ route('pdf-settings.index') }}",
                        1500);
                },
                error: ({
                    responseJSON
                }) => {
                    $btn.prop('disabled', false).html('Update');
                    $('.text-danger').text('');
                    if (responseJSON.message) return toastr.error(responseJSON.message);
                    $.each(responseJSON.errors || {}, (field, message) => $('#' + field + '_error')
                        .text(message[0]));
                }
            });
        });
    </script>
@endsection