@extends('layouts.master')

@section('page_title', 'Attributes')
@section('title', 'Attributes')
@section('main_item', 'Attributes')
@section('sub_item', 'Attributes Details')

@section('content')

    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <button class="btn btn-primary px-4 float-right mt-0 mb-3" data-toggle="modal" data-animation="bounce"
                    data-target=".bs-example-modal-sm"><i class="mdi mdi-plus-circle-outline mr-2"></i>Add
                    Attributes</button>
                <h4 class="header-title mt-0">Attributes Details</h4>
                <div class="table-responsive dash-social">
                    <table id="laravel_datatable" class="table table-hover">
                        <thead class="thead-dark">
                            <tr>
                                <th>Action</th>
                                <th>Name</th>
                                <th>Values</th>
                            </tr>
                            <!--end tr-->
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
            <!--end card-body-->
        </div>
        <!--end card-->
    </div>
    <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title mt-0" id="mySmallModalLabel">Add Attributes</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="modal-body">
                    <form action="{{ route('attributes.store') }}" method="POST">
                        @csrf
                        <div id="box">
                            <div class="form-group">
                                <label style="font-weight: bold" for="name">Name</label>
                                <input type="text" class="form-control" placeholder="Attribute name" id="name"
                                    name="attribute_name" required="">
                            </div>
                            <div class="form-group">
                                <label style="font-weight: bold" for="attribute_values">Values</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="Attribute value"
                                        id="attribute_values" name="value[]">
                                    <span class="input-group-append">
                                        <button class="btn btn-primary" type="button" id="add-item">+</button>
                                    </span>
                                </div>
                            </div>
                        </div>
                </div>
                <div class="modal-footer">
                    <button type="sumbit" class="btn btn-primary  btn-sm ">Save</button>
                    <button type="button" class="btn btn-danger  btn-sm " data-dismiss="modal">Close</button>
                    </form>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
@endsection

@section('scripts')

    <script>
        $(document).ready(function() {
            var table = $('#laravel_datatable').DataTable({
                dom: 'Blfrtip',
                buttons: [
                    {
                        extend: 'copy',
                        exportOptions: {
                            columns: [1, 2],
                            format: {
                                body: function (data, row, column, node) {
                                    if (column === 1) {
                                        return data
                                            .replace(/<a[^>]*>/g, '')
                                            .replace(/<\/a>/g, '')
                                            .replace(/<div[^>]*>/g, '')
                                            .replace(/<\/div>/g, '')
                                            .replace(/<input[^>]*>/g, '')
                                            .replace(/<.*?>/g, '')
                                            .replace(/Edit Attribute|Delete|Update|Close|Add New Value|Save|×|Name/g, '')
                                            .replace(/\n\s*\n/g, '\n') 
                                            .replace(/^\s*|\s*$/g, '')
                                            .replace(/\s{2,}/g, ', ') 
                                            .trim();
                                    }
                                    return data;
                                }
                            }
                        }
                    },
                    {
                        extend: 'excel',
                        exportOptions: {
                            columns: [1, 2]
                        },
                        customizeData: function(data) {
                            data.body.forEach(row => {
                                row[1] = row[1]
                                    .replace(/Edit Attribute|Delete|Update|Close|Add New Value|Save|×|Name/g, '')
                                    .replace(/\n\s*\n/g, '\n') 
                                    .replace(/^\s*|\s*$/g, '') 
                                    .replace(/\s{2,}/g, ', ') 
                                    .trim(); 
                            });
                        }

                    },

                    {
                        extend: 'pdf',
                        exportOptions: {
                            columns: [1, 2],
                        },
                        customize: function(doc) {
                            doc.styles.tableHeader = {

                                color: 'white',
                                alignment: 'center'
                            };

                            doc.content[1].table.widths = ['50%',
                                '50%'
                            ];

                            var tableBody = doc.content[1].table.body;

                            tableBody.forEach(function(row) {
                                var cleanedText = row[1].text.replace(
                                        /Edit Attribute|Delete|Update|Close|Add New Value|Save|×|Name/g,
                                        ''
                                    ).replace(/\n\s*\n/g, '\n')
                                    .replace(/^\s*|\s*$/g,
                                        '')
                                    .replace(/\n{2,}/g,
                                        '\n');

                                row[1].text = cleanedText
                                    .trim();
                            });

                        }
                    },
                    {
                        extend: 'print',
                        exportOptions: {
                            columns: [1, 2],
                            format: {
                                body: function(data, row, column) {
                                    var cleanedText = data.replace(
                                            /Edit Attribute|Delete|Update|Close|Add New Value|Save|×|Name/g,
                                            ''
                                        ).replace(/\n\s*\n/g, '\n')
                                        .replace(/^\s*|\s*$/g, '')
                                        .replace(/\n{2,}/g, '\n');

                                    return cleanedText.trim();
                                }
                            }
                        }
                    },
                ],
                processing: false,
                serverSide: true,
                ajax: "{{ url('/attributes') }}",
                columnDefs: [{
                    "targets": [2],
                    "orderable": false,
                    "searchable": false,

                }],

                columns: [{
                        data: 'action',
                        name: 'action'
                    },
                    {
                        data: 'attribute_name',
                        name: 'attribute_name'
                    },
                    {
                        data: 'values',
                        name: 'values'
                    }
                ]
            });

            $(document).on('click', '.delete-attribute', function(e) {
                e.preventDefault();
                var url = $(this).attr('href');
                Swal.fire({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, delete it!'
                }).then((result) => {
                    if (result.value) {
                        $.ajax({
                            type: "GET",
                            url: url,
                            success: function(response) {
                                if (response.success == 1) {
                                    $.toast({
                                        heading: 'Success',
                                        text: response.msg,
                                        position: 'top-right',
                                        bgColor: '#1ecab8',
                                        icon: 'success',
                                        showHideTransition: 'fade',
                                        loaderBg: '#ecf0f1'
                                    })

                                    table.ajax.reload();
                                } else {
                                    $.toast({
                                        heading: 'Error',
                                        text: response.msg,
                                        position: 'top-right',
                                        bgColor: '#f1646c',
                                        icon: 'error',
                                        showHideTransition: 'fade',
                                        loaderBg: '#ecf0f1'
                                    })
                                }
                            }
                        });
                    }
                })
            });

        });

        $("#add-item").click(function() {
            var appnd = '<div class="form-group appended">' +
                '<div class="input-group">' +
                '<input type="text" class="form-control" placeholder="Attribute value" id="attribute_values" name="value[]" >' +
                '<span class="input-group-append">' +
                '<button class="btn btn-danger remove" type="button">-</button>' +
                '</span>' +
                '</div>' +
                '</div>'

            $('#box').append(appnd);
        })
        $('#box').on('click', '.remove', function() {
            $(this).closest("div.appended").remove();

        })
    </script>

@endsection