@extends('backend.layouts.app')
<style>
    #preview-button {
        font-size: 14px;
        padding: 20px;
        color: #000000;
        background-color: #cccccc;
        font-weight: normal;
        border: 1px solid transparent; /* Default border */
        border-radius: 0px;
        cursor: pointer;
    }
    #button-container {
        text-align: center;
        margin-bottom: 20px;
    }
    #controls {
        margin-bottom: 20px;
    }
    #code {
        display: block;
        width: 80%;
        margin: 0 auto;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-family: monospace;
        white-space: pre-wrap;
        word-wrap: break-word;
    }
    #copy-button {
        margin-top: 10px;
        padding: 10px 20px;
        font-size: 14px;
        cursor: pointer;
    }
</style>
@section('content')
<h1 class="page-header">
    @lang('messages.codes.codes_list') 
    @if(auth()->user()->hasRole('Super Admin') || auth()->user()->hasPermissionTo('Create Code'))
    <div class="float-right">
        <a href="javascript:;" class="btn btn-primary me-4 px-4" data-target="#addCode" data-toggle="modal"><i class="fa fa-plus-circle"></i> @lang('messages.codes.add_new_code')</a>
    </div>
    @endif
</h1>
<div class="panel panel-inverse">
    <div class="panel-heading">
        <h4 class="panel-title">@lang('messages.codes.codes_list')</h4>
        <div class="panel-heading-btn">
            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success reload" data-id="dataTableCodeList"><i class="fa fa-redo"></i></a>
            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i class="fa fa-times"></i></a>
        </div>
    </div>
    <div class="panel-body">
        <table class="datatables-menus table" id="dataTableCodeList">
            <thead>
                <tr>
                    <th>@lang('messages.codes.sr_no')</th>
                    <th>@lang('messages.codes.user')</th>
                    <th>@lang('messages.codes.website_url')</th>
                    <th>@lang('messages.codes.code_title')</th>
                    <th>@lang('messages.codes.block_type')</th>
                    <th>@lang('messages.codes.button_label')</th>
                    <th>@lang('messages.codes.button_type')</th>
                    <th>@lang('messages.codes.status')</th>
                    <th>@lang('messages.codes.date')</th>
                    <th style="width:150px !important">@lang('messages.codes.action')</th>
                </tr>
            </thead>
            <tbody>
                <!-- Table body content goes here -->
            </tbody>
        </table>
    </div>
</div>

<div class="modal fade" id="addCode" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">@lang('messages.codes.add_new_code')</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <form id="addCodeForm" action="{{ route('codes.store') }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12 col-md-6">
                            <div class="form-group">
                                <label for="code_title">@lang('messages.codes.code_title')</label>
                                <input type="text" id="code_title" name="code_title" class="form-control" placeholder="@lang('messages.codes.code_title')" />
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="form-group">
                                <label for="block_type">@lang('messages.codes.block_type')</label>
                                <select id="block_type" name="block_type" class="form-control" aria-label="Default select example">
                                    @foreach($blocks as $block)
                                    <option value="{{ $block->id }}">{{ $block->block_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="form-group">
                                <label for="button_label">@lang('messages.codes.button_label')</label>
                                <input type="text" id="button_label" name="button_label" class="form-control" placeholder="@lang('messages.codes.button_label')" />
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="form-group">
                                <label for="block_type">@lang('messages.codes.button_type')</label>
                                <select id="button_type" name="button_type" class="form-control" aria-label="Default select example">
                                    @foreach($buttons as $button)
                                    <option value="{{ $button->id }}">{{ $button->button_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        @if(!auth()->user()->hasRole('Publisher') && auth()->user()->hasPermissionTo('Create Code') || auth()->user()->hasRole('Super Admin'))
                        <div class="col-12 col-md-12">
                            <div class="form-group">
                                <label for="edit_id_user">@lang('messages.files.select_user')</label>
                                <select class="form-control" id="id_user" name="id_user" >
                                    <option value="">Select user</option>
                                    @foreach($users as $user)
                                    <option value="{{ $user->id }}">{{ $user->first_name }} {{ $user->last_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        @endif
                        <div class="col-12 col-md-12">
                            <div class="form-group">
                                <label for="id_site">@lang('messages.codes.website_url')</label>
                                <select id="id_site" name="id_site" class="form-control" aria-label="Default select example">
                                    @foreach($websites as $website)
                                    <option value="{{ $website->id }}">{{ $website->website_url }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-12 col-md-12">
                            <div class="form-group">
                                <label for="code_status">@lang('messages.codes.status')</label>
                                <select id="code_status" name="code_status" class="form-control" aria-label="Default select example">
                                    <option value="ACTV">@lang('messages.codes.active')</option>
                                    <option value="NACT">@lang('messages.codes.inactive')</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="reset" class="btn btn-white" data-dismiss="modal">@lang('messages.codes.cancel')</button>
                    <button type="submit" class="btn btn-success">@lang('messages.codes.submit')</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="editCodeModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">@lang('messages.codes.update_code')</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <form id="editCodeForm" action="">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <div class="row">                
                        <div class="col-12 col-md-6">
                            <div class="form-group">
                                <label for="code_title">@lang('messages.codes.code_title')</label>
                                <input type="text" id="edit_code_title" name="code_title" class="form-control" placeholder="@lang('messages.codes.code_title')" />
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="form-group">
                                <label for="block_type">@lang('messages.codes.block_type')</label>
                                <select id="edit_block_type" name="block_type" class="form-control" aria-label="Default select example">
                                    @foreach($blocks as $block)
                                    <option value="{{ $block->id }}">{{ $block->block_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="form-group">
                                <label for="button_label">@lang('messages.codes.button_label')</label>
                                <input type="text" id="edit_button_label" name="button_label" class="form-control" placeholder="@lang('messages.codes.button_label')" />
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="form-group">
                                <label for="block_type">@lang('messages.codes.button_type')</label>
                                <select id="edit_button_type" name="button_type" class="form-control" aria-label="Default select example">
                                    @foreach($buttons as $button)
                                    <option value="{{ $button->id }}">{{ $button->button_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        @if(!auth()->user()->hasRole('Publisher') && auth()->user()->hasPermissionTo('Update Code') || auth()->user()->hasRole('Super Admin'))
                        <div class="col-12 col-md-12">
                            <label for="edit_id_user">@lang('messages.files.select_user')</label>
                            <div class="form-group">
                                <select class="form-control" id="edit_id_user" name="id_user" >
                                    <option value="">Select user</option>
                                    @foreach($users as $user)
                                    <option value="{{ $user->id }}">{{ $user->first_name }} {{ $user->last_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        @endif
                        <div class="col-12 col-md-12">
                            <div class="form-group">
                                <label for="id_site">@lang('messages.codes.website_url')</label>
                                <select id="edit_id_site" name="id_site" class="form-control" aria-label="Default select example">
                                    @foreach($websites as $website)
                                    <option value="{{ $website->id }}">{{ $website->website_url }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-12 col-md-12">
                            <div class="form-group">
                                <label for="code_status">@lang('messages.codes.status')</label>
                                <select id="edit_code_status" name="code_status" class="form-control" aria-label="Default select example">
                                    <option value="ACTV">@lang('messages.codes.active')</option>
                                    <option value="NACT">@lang('messages.codes.inactive')</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="reset" class="btn btn-white" data-dismiss="modal">@lang('messages.codes.cancel')</button>
                    <button type="submit" class="btn btn-success">@lang('messages.codes.submit')</button>
                </div>
            </form>
        </div>
    </div>
</div>


<!-- / Content -->
@endsection

@section('footer_scripts')
<script>
    $(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $("body").on("click", ".editCode", function() {
            jQuery.ajax({
                url: $(this).data('href'),
                type: 'get',
                dataType: 'json',
                processData: false,
                contentType: false,
                success: function(data) {
                    if (data.status) {
                        @if(!auth()->user()->hasRole('Publisher') && auth()->user()->hasPermissionTo('Update Code') || auth()->user()->hasRole('Super Admin'))
                            $("#edit_id_user").val(data.id_user);
                            setTimeout(() => {
                                $("#edit_id_user").trigger('change');
                            }, 1000);
                            setTimeout(() => {
                                $("#edit_id_site").val(data.id_site);
                            }, 2000);
                        @endif
                        @if(auth()->user()->hasRole('Publisher'))
                            $("#edit_id_site").val(data.id_site);
                        @endif
                        $("#edit_code_title").val(data.code_title);
                        $("#edit_block_type").val(data.block_type);
                        $("#edit_button_label").val(data.button_label);
                        $("#edit_button_type").val(data.button_type);
                        $("#edit_button_name").val(data.button_name);
                        $("#edit_code_status").val(data.code_status);
                        $("#editCodeForm").attr('action', data.route);
                        $("#editCodeModal").modal('show');
                    } else {
                        // Handle the case where the menu is not found
                        Swal.fire('Alert!', 'Code not found', 'error')
                    }
                },
                error: function(xhr, status, error) {
                    var jsonResponse = JSON.parse(xhr.responseText);
                    var locale = '{{ app()->getLocale() }}'; // Get the current application locale
                    if (locale == 'en') {
                        // English error messages
                        var errorMessage = "Validation failed";
                    } else if (locale == 'ro') {
                        // Romanian error messages
                        errorMessage = "Validarea a eșuat";
                    } else if (locale == 'ar') {
                        // Arabic error messages
                        errorMessage = "فشل التحقق من الصحة";
                    } else {
                        // Default to English
                        // errorMessage += Object.values(errors).join(", ");
                    }
                    if (jsonResponse.errors) {
                        errorMessage += ":<br> ";
                        errorMessage += Object.values(jsonResponse.errors).join(
                            "<br>");
                        Swal.fire('Alert!', errorMessage, 'error')
                    }
                }
            })
        });

        var table = $("#dataTableCodeList").DataTable({
            processing: true,
            serverSide: true,
            order: [[0, 'desc']],
            ajax: "{{ route('codes.index') }}",
            columns: [
                {data: "DT_RowIndex", name: "id" },
                {data: "user", sortable: false, searchable: false},
                {data: "website.website_url"},
                {data: "code_title"},
                {data: "block.block_name"},
                {data: "button_label"},
                {data: "button.button_name"},
                {data: "code_status"},
                {data: "created_at", type: 'date'},
                {data: "action", sortable: false, searchable: false},
            ],
            columnDefs: [
                { target: [{{$target}}], visible: false },
                { target:7, type:"date-eu" }
            ]
        });

        $("#addCodeForm").submit(function(e) {
            e.preventDefault();
        }).validate({
            rules: {
                id_site: {
                    required: true,
                },
                code_title: {
                    required: true,
                    maxlength: 255
                },
                block_type: {
                    required: true,
                    maxlength: 255
                },
                button_label: {
                    required: true,
                    maxlength: 255
                },
                button_type: {
                    required: true,
                    maxlength: 255
                },
                code_status: {
                    required: true,
                }
            },

            errorElement: 'span',
            submitHandler: function(form) {
                var formData = new FormData(form);

                $.ajax({
                    url: $(form).attr('action'),
                    data: formData,
                    type: 'POST',
                    dataType: 'json',
                    processData: false,
                    contentType: false,
                    success: function(data) {
                        if (data.status) {
                            Swal.fire({
                                title: data.title,
                                text: data.message,
                                icon: 'success',
                            });
                            $(form)[0].reset();
                            $("#addCode").modal('hide');
                            table.ajax.reload();

                            // // Refresh user_details div

                        }
                    },
                    error: function(xhr, status, error) {
                        var jsonResponse = JSON.parse(xhr.responseText);
                        var locale = '{{ app()->getLocale() }}'; // Get the current application locale
                        $("#addCode").modal('hide');
                        if (locale == 'en') {
                            // English error messages
                            var errorMessage = "Validation failed";
                        } else if (locale == 'ro') {
                            // Romanian error messages
                            errorMessage = "Validarea a eșuat";
                        } else if (locale == 'ar') {
                            // Arabic error messages
                            errorMessage = "فشل التحقق من الصحة";
                        } else {
                            // Default to English
                            // errorMessage += Object.values(errors).join(", ");
                        }
                        if (jsonResponse.errors) {
                            errorMessage += ":<br> ";
                            errorMessage += Object.values(jsonResponse.errors).join(
                                "<br>");
                            Swal.fire('', errorMessage, 'error')
                        }
                    }

                });
                return false;
            }
        });

        $("#editCodeForm").submit(function(e) {
            e.preventDefault();
        }).validate({
            rules: {
                id_site: {
                    required: true,
                },
                code_title: {
                    required: true,
                    maxlength: 255
                },
                block_type: {
                    required: true,
                    maxlength: 255
                },
                button_label: {
                    required: true,
                    maxlength: 255
                },
                button_type: {
                    required: true,
                    maxlength: 255
                },
                code_status: {
                    required: true,
                }
            },

            errorElement: 'span',
            submitHandler: function(form) {
                var formData = new FormData(form);
                jQuery.ajax({
                    url: jQuery('#editCodeForm').attr('action'),
                    data: formData,
                    type: 'POST',
                    dataType: 'json',
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function(data) {
                        if (data.status) {
                            Swal.fire({
                                title: data.title,
                                text: data.message,
                                icon: 'success',
                            });
                            $('#editCodeForm')[0].reset();
                            $("#editCodeModal").modal('hide');
                            table.ajax.reload();
                        }
                    },
                    error: function(xhr, status, error) {
                        var jsonResponse = JSON.parse(xhr.responseText);
                        var locale = '{{ app()->getLocale() }}'; // Get the current application locale
                        $("#editLandingModal").modal('hide');
                        if (locale == 'en') {
                            // English error messages
                            var errorMessage = "Validation failed";
                        } else if (locale == 'ro') {
                            // Romanian error messages
                            errorMessage = "Validarea a eșuat";
                        } else if (locale == 'ar') {
                            // Arabic error messages
                            errorMessage = "فشل التحقق من الصحة";
                        } else {
                            // Default to English
                            // errorMessage += Object.values(errors).join(", ");
                        }
                        if (jsonResponse.errors) {
                            errorMessage += ":<br> ";
                            errorMessage += Object.values(jsonResponse.errors).join(
                                "<br>");
                            Swal.fire('', errorMessage, 'error')
                        }
                    }
                });
                return false;
            }
        });

        $("body").on("click", "#codeData, #copyData", function() {
            document.querySelector("textarea").select();
            document.execCommand('copy');
            $("#adCodeDate").show();
            setTimeout(() => {
                $("#adCodeDate").hide();
            }, 3000);

            // Swal.fire({
            //     title: 'Alert!',
            //     text: 'Ad coppied to your clipboard',
            //     icon: 'success',
            // });
        });

        $("body").on("click", ".directCodeData", function() {
            if ($("#directCodeData").is("input")) {
                $("#directCodeData").select();
                $("#directCodeData").focus();
                document.execCommand("copy");
            }
            else {
                var $temp = $("<input>");
                $("body").append($temp);
                $temp.val($("#directCodeData").text()).select();
                document.execCommand("copy");
                $temp.remove();
            }
            $("#dataModal").modal('hide');
            Swal.fire({
                title: 'Alert!',
                text: 'Direct ad code coppied to your clipboard',
                icon: 'success',
            });
        });

        $('#id_user').change(function() {
            var userId = $(this).val();
            // Make an AJAX request to fetch websites based on the selected user
            $.ajax({
                url: 'websites/getWebsitesByUserId/' + userId,
                type: 'GET',
                success: function(data) {
                    // Populate the website dropdown with fetched websites
                    $('#id_site').empty();
                    $.each(data.websites, function(key, value) {
                        $('#id_site').append('<option value="' + value.id + '">' + value.website_url + '</option>');
                    });
                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
        });

        $('#edit_id_user').change(function() {
            var userId = $(this).val();
            // Make an AJAX request to fetch websites based on the selected user
            $.ajax({
                url: 'websites/getWebsitesByUserId/' + userId,
                type: 'GET',
                success: function(data) {
                    // Populate the website dropdown with fetched websites
                    $('#edit_id_site').empty();
                    $.each(data.websites, function(key, value) {
                        $('#edit_id_site').append('<option value="' + value.id + '">' + value.website_url + '</option>');
                    });
                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
        });
    });

    const button = document.getElementById('preview-button');
    const codeTextarea = document.getElementById('code_data_cutomize');
    const buttonLink = document.getElementById('button-link');
    function updateButtonStyles() {
        const buttonText = document.getElementById('button-text').value;
        button.innerText = buttonText;

        button.style.fontSize = document.getElementById('font-size').value + 'px';
        button.style.paddingTop = document.getElementById('padding-top-bottom').value + 'px';
        button.style.paddingBottom = document.getElementById('padding-top-bottom').value + 'px';
        button.style.paddingLeft = document.getElementById('padding-left-right').value + 'px';
        button.style.paddingRight = document.getElementById('padding-left-right').value + 'px';
        button.style.color = document.getElementById('font-color').value;
        button.style.backgroundColor = document.getElementById('background-color').value;
        button.style.fontWeight = document.getElementById('font-weight').value;
        button.style.borderRadius = document.getElementById('border-radius').value + 'px';
        button.style.borderColor = document.getElementById('border-color').value;
        button.style.borderWidth = document.getElementById('border-width').value + 'px';
        
        //buttonLink.href = dynamicURL;
        codeTextarea.value='';
        // Update code textarea
        codeTextarea.value = `<center><a href="javascript:void(0);" rel="nofollow noreferrer noopener"><button style="font-size: ${button.style.fontSize}; padding-top: ${button.style.paddingTop}; padding-bottom: ${button.style.paddingBottom}; padding-left: ${button.style.paddingLeft}; padding-right: ${button.style.paddingRight}; color: ${button.style.color}; background-color: ${button.style.backgroundColor}; font-weight: ${button.style.fontWeight}; border-radius: ${button.style.borderRadius}; border-color: ${button.style.borderColor}; border-width: ${button.style.borderWidth}; border-style: solid; cursor: pointer;" onclick="window.open('${dynamicURL}', '_blank')">${buttonText}</button></a></center>`.trim();
        // codeTextarea.value = `<center><a href="${dynamicURL}" target="_blank" rel="nofollow noreferrer noopener"><button style="font-size: ${button.style.fontSize}; padding-top: ${button.style.paddingTop}; padding-bottom: ${button.style.paddingBottom}; padding-left: ${button.style.paddingLeft}; padding-right: ${button.style.paddingRight}; color: ${button.style.color}; background-color: ${button.style.backgroundColor}; font-weight: ${button.style.fontWeight}; border-radius: ${button.style.borderRadius}; border-color: ${button.style.borderColor}; border-width: ${button.style.borderWidth}; border-style: solid; cursor: pointer;">${buttonText}</button></a></center>`.trim();
        // codeTextarea.value = `<center><a href="javascript:void(0)" rel="nofollow" class="buttonPress-3"><button style="font-size: ${button.style.fontSize}; padding-top: ${button.style.paddingTop}; padding-bottom: ${button.style.paddingBottom}; padding-left: ${button.style.paddingLeft}; padding-right: ${button.style.paddingRight}; color: ${button.style.color}; background-color: ${button.style.backgroundColor}; font-weight: ${button.style.fontWeight}; border-radius: ${button.style.borderRadius}; border-color: ${button.style.borderColor}; border-width: ${button.style.borderWidth}; border-style: solid; cursor: pointer;">${buttonText}</button></a><script data-cfasync="false" async="" type="text/javascript" src="${dynamicURL}"><\/script></center>`.trim();
    }

    document.querySelectorAll('#controls input, #controls select').forEach(el => {
        el.addEventListener('input', updateButtonStyles);
    });

    /* document.getElementById('copy-button').addEventListener('click', () => {
        codeTextarea.select();
        document.execCommand('copy');
    }); */
</script>
@endsection