@extends('layouts.tenant.metro.app')

@section('page_css')
    <link href="/assets/css/bootstrap-nav-wizard.min.css" rel="stylesheet" />
    <style type="text/css">
        .nav>li {
            width: {{ isset($stages) ? 100 / count($stages) : 100 }}%;
        }

        .nav>li>a {
            position: relative;
            display: block;
            padding: 10px 10px;
            font-size: 13px;
        }

        .sortable {
            cursor: pointer;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .sortable:hover>.fa-sort {
            opacity: 1;
        }

        .fa-sort {
            opacity: 0.5;
            transition: opacity 0.3s;
        }

        #advance_filter_options {
            display: none;
        }

        #advance_filter_options .col-lg-6 {
            float: left;
            margin-top: 12px;
        }
    </style>
@stop

@include('tenant.metro.lemarex.accounts._index')

@section('page_js')
    <script type="text/javascript">
        $(document).on('click', '.delete', function(e) {
            e.preventDefault();
            var url = $(this).data('delete_url'),
                row = $(this).closest('tr');

            Swal.fire({
                title: "Are you sure?",
                text: "Once this Client is deleted, you won't be able to revert this!",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#3085d6",
                cancelButtonColor: "#d33",
                confirmButtonText: "Yes, delete it!"
            }).then((result) => {
                if (result.value) {
                    $.ajax({
                        url: url,
                        type: 'DELETE',
                        data: {
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            if (response.code == 1) {
                                row.fadeOut(function() {
                                    row.remove();
                                    swal("Deleted!", response.message, "success");
                                });
                            } else {
                                swal("Error!", response.message, "error");
                            }
                        }
                    });
                }
            });

            return false;
        });

        $(document).ready(function() {
            $(document).on('click', '#show_advance_filters', function(e) {
                e.preventDefault();
                let icon = 'plus';

                $('#advance_filter_options').slideToggle(function() {
                    if ($(this).is(':visible')) {
                        icon = 'minus';
                    }

                    $('#show_advance_filters').html(`Show Advance Filters <span class="btn-icon-right"><i class="fa fa-${icon}-square"></i></span>`);
                });
            });

            $('#clear').on('click', function(e) {
                e.preventDefault();

                ['form_name', 'form_account_type', 'form_website', 'form_industry', 'form_company_size', 'sort_order', 'selected_header'].forEach(e => $(`#${e}`).val('').change());

                $('#search_form').submit();
            });

            setSortOrderIcons();

        });

        function exportData(e) {
            $('#search_form').attr('method', 'GET');
            $('#file_type').val(e);
            $('#search_form').attr('action', '{{ route('tenant.lemarex.account.export') }}');
            $('#search_form').submit();
        }

        function sortData(e) {
            let sort_order_val = null;
            let sort_order = $('#sort_order');
            let selected_header = $('#selected_header');

            if (selected_header.val() == e) {
                sort_order_val = sort_order.val();
            }

            selected_header.val(e);

            switch (sort_order_val) {
                case 'ASC':
                    sort_order.val('DESC');
                    break;

                case 'DESC':
                    sort_order.val('');
                    break;

                default:
                    sort_order.val('ASC')

            }

            setSortOrderIcons();

            $('#search_form').submit();
        }

        function setSortOrderIcons() {
            let sort_order_val = $('#sort_order').val();
            let selected_header = $(`#selected_header`).val();
            if (selected_header) {
                let header = $(`#${selected_header} > i`);

                switch (sort_order_val) {
                    case 'ASC':
                        header.removeClass(['fa-sort-desc', 'fa-sort']).addClass('fa-sort-asc');
                        break;

                    case 'DESC':
                        header.removeClass(['fa-sort-asc', 'fa-sort']).addClass('fa-sort-desc');
                        break;

                    default:
                        header.removeClass(['fa-sort-desc', 'fa-sort-asc']).addClass('fa-sort');

                }
            }
        }
    </script>
@stop