@extends('user.layouts.index', ['header' => true, 'nav' => true, 'demo' => true, 'settings' => $settings])

@php
    use Illuminate\Support\Facades\DB;

    // Get config
    $config = DB::table('config')->get();
@endphp

@section('css')
<link rel="stylesheet" href="{{ asset('css/all.css') }}" />
<link rel="stylesheet" href="{{ asset('css/bootstrap-iconpicker.min.css') }}" />
@endsection

@section('content')
<div class="page-wrapper">
    <div class="page-body">
        <div class="container-fluid">
            {{-- Failed --}}
            @if(Session::has("failed"))
            <div class="alert alert-important alert-danger alert-dismissible mb-2" role="alert">
                <div class="d-flex">
                    <div>
                        {{Session::get('failed')}}
                    </div>
                </div>
                <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
            </div>
            @endif

            {{-- Success --}}
            @if(Session::has("success"))
            <div class="alert alert-important alert-success alert-dismissible mb-2" role="alert">
                <div class="d-flex">
                    <div>
                        {{Session::get('success')}}
                    </div>
                </div>
                <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
            </div>
            @endif
            
            <div class="card">
                <div class="row g-0">
                    <div class="col-12 col-md-2 border-end">
                        <div class="card-body">
                            <h4 class="subheader">{{ __('Update Business Card') }}</h4>
                            <div class="list-group list-group-transparent">
                                {{-- Nav links --}}
                                @include('user.pages.edit-cards.includes.nav-link', ['link' => 'payments'])
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-10 d-flex flex-column">
                        <form action="{{ route('user.update.payment.links', Request::segment(3)) }}" method="post" id="myForm" enctype="multipart/form-data">
                            @csrf
                            <div class="card-body">
                                <h3 class="card-title mb-4">{{ __('Payment Links') }}</h3>

                                <div class="row">
                                    {{-- Dynamic fields --}}
                                    @for ($i = 0; $i < count($payments); $i++) 
                                    <div class="row" id="{{ $i }}">
                                        <div class='col-lg-6 col-md-6'>
                                            <div class='mb-3 mt-2'>
                                                <label class='form-label required'>{{ __('Icon') }}</label>
                                                <div class='input-group'>
                                                    <input type='text' class='form-control' placeholder='{{ __('Choose Icon') }}' id='iconpick{{ $i }}' onclick='openPicker({{ $i }})' name='icon[]'
                                                        value="{{ $payments[$i]->icon }}" readonly required>
                                                </div>
                                            </div>
                                        </div>
                                        <div class='col-lg-6 col-md-6'>
                                            <div class='mb-3 mt-2'>
                                                <label class='form-label required'
                                                    for='type'>{{ __('Display type') }}</label>
                                                <select name='type[]' id='type'
                                                    class='type{{ $payments[$i]->id }} form-control type'
                                                    onchange='changeLabel({{ $payments[$i]->id }})' required>
                                                    <option value='' disabled selected>{{ __('Choose Type') }}
                                                    </option>
                                                    <option value='text'
                                                        {{ $payments[$i]->type == 'text' || $payments[$i]->type == 'textarea' ? 'selected' : ''}}>
                                                        {{ __('Default') }}</option>
                                                    <option value='upi'
                                                        {{ $payments[$i]->type == 'upi' ? 'selected' : ''}}>
                                                        {{ __('UPI') }}</option>
                                                    <option value='url'
                                                        {{ $payments[$i]->type == 'url' ? 'selected' : ''}}>
                                                        {{ __('Link') }}</option>
                                                    <option value="image"
                                                        {{ $payments[$i]->type == 'image' ? 'selected' : ''}}>
                                                        {{ __('Image') }}</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class='col-lg-6 col-md-6'>
                                            <div class='mb-3 mt-2'>
                                                <label class='form-label required'>{{ __('Label') }}</label>
                                                <input type='text' class='lbl{{ $payments[$i]->id }} form-control'
                                                    name='label[]' placeholder='{{ __('Label') }}'
                                                    value="{{ $payments[$i]->label }}" required>
                                            </div>
                                        </div>
                                        <div class='col-lg-5 col-md-5'>
                                            <div class='mb-3 mt-2'>
                                                <label class='form-label required'>{{ __('Content') }}</label>
                                                {{-- Textarea --}}
                                                <textarea class='textlbl{{ $payments[$i]->id }} form-control'
                                                        name='value[]'
                                                        placeholder='{{ __('Type something') }}'
                                                        cols="30"
                                                        rows="2"
                                                        {{ $payments[$i]->type == 'image' ? 'style=display:none;' : '' }}
                                                        >{{ $payments[$i]->content }}</textarea>

                                                {{-- File input --}}
                                                <input type="file"
                                                    class="filelbl{{ $payments[$i]->id }} form-control"
                                                    name="value[]"
                                                    accept="image/*"
                                                    {{ $payments[$i]->type == 'image' ? '' : 'style=display:none;' }}
                                                    />
                                                {{-- Notes: How to Break word --}}
                                                <small>{{ __('If you need to break the word, use a . (dot) as a separator of every sentence.') }}</small>
                                            </div>
                                        </div>
                                        <div class='col-lg-1 col-md-1'>
                                            <div class='mb-3 pt-1 mt-5'>
                                                <button class='btn btn-danger btn-sm'
                                                    onclick='removePayment({{ $i }})'>
                                                    <i class='fa fa-times text-whte'></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    @endfor

                                    {{-- Add new payments --}}
                                    <div id="more-payments" class="row"></div>

                                    {{-- Add button --}}
                                    <div class="col-lg-12 mb-5">
                                        <button type="button" onclick="addPayment()" class="btn btn-primary">
                                            {{ __('Add One More Payment') }}
                                        </button>
                                    </div>
                                </div>

                                <div class="card-footer text-end">
                                    <div class="d-flex">
                                      <a href="{{ route('user.cards') }}" class="btn btn-outline-primary ms-2">{{ __('Cancel') }}</a>
                                      <button type="submit" class="btn btn-primary ms-auto">
                                        {{ __('Submit') }}
                                      </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Footer --}}
    @include('user.includes.footer')
</div>

<!-- Icon Picker Modal -->
<div class="modal modal-blur fade" id="iconPickerModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable py-7" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ __('Choose an Icon') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <div class="mb-3">
                    <input type="text" id="iconSearchInput" class="form-control" placeholder="Search icons..." />
                </div>

                @php
                    $icons = include resource_path('views/user/includes/icons.php');
                @endphp

                <div class="row gap-2" id="iconList">
                    @foreach ($icons as $icon)
                        <div class="col-2 col-md-1 p-3 icon-padding" data-icon-name="{{ $icon }}">
                            <div role="button" class="icon-option" data-icon="{{ $icon }}">
                                <i class="{{ $icon }} fa-xl"></i>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Custom JS --}}
@push('custom-js')
<script type="text/javascript" src="{{ asset('js/tom-select.base.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/fontawesome-iconpicker.min.js') }}"></script>
<script>
    var count = {{ count($payments) }};

    function addPayment() {
	"use strict";
    if (count>={{ $plan_details->no_of_payments}}) {
         new swal({
            title: `{{ __('Oops!') }}`,
            icon: 'warning',
            text: `{{ __('You have reached your current plan limit.') }}`,
            timer: 2000,
            buttons: false,
            showConfirmButton: false,
        });
    }
    else {
        count++;
        var id = getRandomInt();
        @php
            // UPI is only supported if the configured currency is INR
            $upiCurrency = 'INR';
        @endphp

        var payments = `
        <div class='row' id="${id}">
            <div class='col-lg-6 col-md-6'>
                <div class='mb-3 mt-2'>
                    <label class='form-label required'>{{ __('Icon') }}</label>
                    <div class='input-group'>
                        <input type='text' class='form-control' placeholder='{{ __('Choose Icon') }}' id='iconpick${id}' onclick='openPicker(${id})' name='icon[]' required readonly>
                    </div>
                </div>
            </div>
            <div class='col-lg-6 col-md-6'>
                <div class='mb-3 mt-2'>
                    <label class='form-label required' for='type'>{{ __('Display type') }}</label>
                    <select name='type[]' id='type' class='type${id} form-control type' onchange='changeLabel(${id})' required>
                        <option value='' disabled selected>{{ __('Choose Type') }}</option>
                        <option value='text'>{{ __('Default') }}</option>
                        @if ($config[1]->config_value === $upiCurrency)
                            <option value="upi">{{ __('UPI') }}</option>
                        @endif
                        <option value='url'>{{ __('Link') }}</option>
                        <option value="image">{{ __('Image') }}</option>
                    </select>
                </div>
            </div>
            <div class='col-lg-6 col-md-6'>
                <div class='mb-3 mt-2'>
                    <label class='form-label required'>{{ __('Label') }}</label>
                    <input type='text' class='lbl${id} form-control' name='label[]' placeholder='{{ __('Label') }}' required>
                </div>
            </div>
            <div class='col-md-5 mt-1 col-lg-5'>
                <div class='mb-3'>
                    <label class='form-label required'>{{ __('Content') }}</label>
                    <textarea class='textlbl${id} form-control' name='value[]' cols='30' rows='2' placeholder='{{ __('Type something') }}'></textarea>

                    <input type="file" class="filelbl${id} form-control" name="value[]" accept="image/*" style="display:none;" />
                    
                    {{-- Notes: How to Break word --}}
                    <small>{{ __('If you need to break the word, use a . (dot) as a separator of every sentence.') }}</small>
                </div>
            </div>
            <div class='col-lg-1 col-md-1'>
                <div class='mb-2 pt-1 mt-5'>
                    <button class='btn btn-danger btn-sm' onclick='removePayment(${id})'>
                        <i class='fa fa-times text-white'></i>
                    </button>
                </div>
            </div>
        </div>`;
        $("#more-payments").append(payments).html();
    }
    }

    function removePayment(id) {
	"use strict";
        $("#"+id).remove();
        count--;
    }

    function getRandomInt() {
        min = Math.ceil(0);
        max = Math.floor(9999999999);
        return Math.floor(Math.random() * (max - min) + min); //The maximum is exclusive and the minimum is inclusive
    }

    // icon search
    $('#iconSearchInput').on('keyup', function() {
        "use strict";
        const search = $(this).val().toLowerCase().trim();

        // Hide all icons first
        $('#iconList > div').css('display', 'none');

        if (search === '') {
            // If search is empty, show all icons
            $('#iconList > div').css('display', 'flex');
            return;
        }

        // Then show only the matching ones
        $('#iconList > div').each(function() {
            const fullIconName = $(this).attr('data-icon-name') || "";

            const nameParts = fullIconName.split(' ');
            const iconPart = nameParts.length > 1 ? nameParts[1] : fullIconName;
            const iconNameOnly = iconPart.replace('fa-', '');

            if (fullIconName.toLowerCase().includes(search) ||
                iconNameOnly.toLowerCase().includes(search)) {
                $(this).css('display', 'flex');
            }
        });
    });

    // Icon Picker
    let selectedIconId = null;

    // Open icon picker
    function openPicker(id) {
        "use strict";

        selectedIconId = id; // Save which input to update
        $("#iconPickerModal").modal('show'); // Show the modal
    }

    // Handle icon selection
    $(document).on('click', '.icon-option', function () {
        "use strict";

        const selectedIcon = $(this).data('icon'); // Get selected icon class or name

        if (selectedIconId !== null) {
            // Update the hidden input or any input with the selected icon
            $('#iconpick' + selectedIconId).val(selectedIcon);
        } else {
            // console.warn('selectedIconId is not set.');
        }

        // Hide the modal after selection
        $('#iconPickerModal').modal('hide');
    });

    function changeLabel(id) {
        "use strict";

        var label = 'Label';
        var textlabel = 'Type Something';
        let lbl = document.querySelector('.lbl'+id);
        let textlbl = document.querySelector('.textlbl'+id);
        let fileInput = document.querySelector('.filelbl'+id);
        let type = document.querySelector('.type'+id).value;
        
        if(type == 'text') {
            label = `{{ __('Bank')}}`;
            textlabel = `{{ __('Your bank account details') }}`;

            textlbl.style.display = 'block';
            fileInput.style.display = 'none';

            // Required
            textlbl.required = true;
            fileInput.required = false;
        } else if(type == 'upi') {
            label = `{{ __('UPI') }}`;
            textlabel = `{{ __('For ex: YOUR UPI ID') }}`;

            textlbl.style.display = 'block';
            fileInput.style.display = 'none';

            // Required
            textlbl.required = true;
            fileInput.required = false;
        } else if(type == 'url') {
            label = `{{ __('Payment Link') }}`;
            textlabel = `{{ __('For ex: https://rzp.io/i/nxrHnLJ') }}`;

            textlbl.style.display = 'block';
            fileInput.style.display = 'none';

            // Required
            textlbl.required = true;
            fileInput.required = false;
        } else if(type == 'image') {
            label = `{{ __('Image') }}`;
            textlabel = `{{ __('For ex: Upload your image') }}`;

            textlbl.style.display = 'none';
            fileInput.style.display = 'block';

            // Required
            textlbl.required = false;
            fileInput.required = true;
        }

        lbl.placeholder = label;
        textlbl.placeholder = textlabel;

        // Run on page load for existing values
        document.addEventListener("DOMContentLoaded", function() {
        @foreach($payments as $p)
            changeLabel({{ $p->id }});
        @endforeach
    });
    }

    document.getElementById("myForm").onkeypress = function(e) {
        var key = e.charCode || e.keyCode || 0;     
        if (key == 13) {
        e.preventDefault();
        }
    }
</script>
<script>
    // Array of element selectors
    var elementSelectors = ['.type'];

    // Function to initialize TomSelect on an element
    function initializeTomSelect(el) {
        new TomSelect(el, {
            copyClassesToDropdown: false,
            dropdownClass: 'dropdown-menu ts-dropdown',
            optionClass: 'dropdown-item',
            controlInput: '<input>',
            maxOptions: null,
            render: {
                item: function(data, escape) {
                    if (data.customProperties) {
                        return '<div><span class="dropdown-item-indicator">' + data.customProperties + '</span>' + escape(data.text) + '</div>';
                    }
                    return '<div>' + escape(data.text) + '</div>';
                },
                option: function(data, escape) {
                    if (data.customProperties) {
                        return '<div><span class="dropdown-item-indicator">' + data.customProperties + '</span>' + escape(data.text) + '</div>';
                    }
                    return '<div>' + escape(data.text) + '</div>';
                },
            },
        });
    }

    // Initialize TomSelect on existing elements
    elementSelectors.forEach(function(selector) {
        var elements = document.querySelectorAll(selector);
        elements.forEach(function(el) {
            initializeTomSelect(el);
        });
    });

    // Observe the document for dynamically added elements
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            mutation.addedNodes.forEach(function(node) {
                if (node.nodeType === 1) { // Ensure it's an element node
                    elementSelectors.forEach(function(selector) {
                        if (node.matches(selector)) {
                            initializeTomSelect(node);
                        }
                        // Also check if new nodes have children that match
                        var childElements = node.querySelectorAll(selector);
                        childElements.forEach(function(childEl) {
                            initializeTomSelect(childEl);
                        });
                    });
                }
            });
        });
    });

    // Configure the observer
    observer.observe(document.body, { childList: true, subtree: true });
</script>
@endpush
@endsection