<template>
    <div class="relative flex flex-col min-w-0 break-words">
        <div class="col s12">
            <div class="w-table-container white mt-3  bg-white w-full mb-6 shadow-lg rounded">
                <div class="w-table-header row m-0">
                    <div class="title">{{ title }}</div>
                    <div class="w-table-action">

                        <form @submit.prevent="serachTable" class="d-inline">
                            <input
                                type="search"
                                placeholder="search..."
                                name="search"
                                v-model="table.search"
                                @change="serachTable"
                            />
                        </form>
                        <div class="d-inline float-right">
                            <slot name="action"></slot>
                        </div>
                    </div>

                </div>

                <div class="w-table-body">
                    <table class="highlight responsive-table">
                        <thead>
                            <tr>
                                <th
                                    v-for="(column, k) in columns"
                                    :key="k"
                                    :class="{ sort: column.sort }"
                                    @click="
                                        sortColumn(column.field, column.sort)
                                    "
                                    :align="column.align != null ? column.align : 'left'"
                                >
                                    {{ column.lable }}
                                </th>
                            </tr>
                        </thead>
                        <tbody v-if="row.total > 0">
                            <slot name="tbody"></slot>
                        </tbody>

                        <tr v-else>
                            <td :colspan="columns.length" class="text-center">No result found</td>
                        </tr>
                    </table>
                </div>
                <div class="w-table-footer row m-0">
                    <div class="py-2">
                        <nav class="block px-4">
                            <ul class="flex pl-0 rounded list-none flex-wrap items-center">
                                <li  v-for="(link, l) in row.links" :key="l">
                                    <Link
                                        :href="
                                            link.url +
                                            '&search=' +
                                            table.search +
                                            '&perPage=' +
                                            table.perPage +
                                            '&orderedColumn=' +
                                            table.orderedColumn +
                                            '&orderBy=' +
                                            table.orderBy
                                        "
                                        v-if="link.url != null"
                                        class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blue-500"
                                        :class="{'bg-blue-600 text-white': link.active, 'bg-white text-blue-500': !link.active}"
                                    >
                                        <i class="fas fa-chevron-left -ml-px" v-if="l == 0"></i>
                                        <i class="fas fa-chevron-right -ml-px" v-else-if="row.links.length == l+1"></i>
                                        <span v-else>{{link.label}}</span>
                                    </Link>
                                </li>
                            </ul>
                        </nav>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { Link } from '@inertiajs/inertia-vue3'
export default {
    props: ["columns", "row", "title"],

    components:{
        Link
    },

    data() {
        return {
            table: {
                search: "",
                perPage: this.row.per_page,
                orderedColumn: "",
                orderBy: "desc",
            },
        };
    },

    mounted() {
        let search = new URLSearchParams(window.location.search).get("search");
        let orderedColumn = new URLSearchParams(window.location.search).get(
            "orderedColumn"
        );
        let orderBy = new URLSearchParams(window.location.search).get(
            "orderBy"
        );

        this.table.orderedColumn = orderedColumn == null ? "" : orderedColumn;
        this.table.search = search == null ? "" : search;
        this.table.orderBy = orderBy == null ? "desc" : orderBy;
    },

    methods: {
        sortColumn(field, sort) {
            if (sort) {
                let query = new URLSearchParams(window.location.search).get(
                    "orderBy"
                );
                if (query != null) this.table.orderBy = query;
                if (this.table.orderBy == "desc") this.table.orderBy = "asc";
                else this.table.orderBy = "desc";
                this.table.orderedColumn = field;

                this.getFresh();
            }
        },

        serachTable() {
            this.getFresh();
        },

        perPge(items) {
            this.table.perPage = items;
            this.getFresh();
        },

        getFresh() {
            // document.addEventListener("inertia:start", (event) => {
            //     var blur = document.querySelector("#overlay-blur");
            //     blur.classList.add("blur-active");
            // });
            let url = route().current();
            this.$inertia.get(route(url, this.table));
        },
    },
};
</script>

<style scoped>
.d-inline{
   display: inline-block ;
}

.w-table-container {
	border: 1px solid #ebebeb;
	border-radius: 4px;
}

.w-table-container .w-table-header {
	border-bottom: 1px solid #d8d8d8;
	padding: 10px 15px;
	line-height: 40px;
}

.w-table-container .w-table-header .title {
	font-size: 18px;
	font-weight: 600;
}

.w-table-container .w-table-header .w-table-action input[type="search"] {
	height: 30px;
	border: 1px solid #cdcdcd;
	padding: 0 10px;
	border-radius: 4px;
	max-width: 300px;
	margin: 0;
}

.w-table-container .w-table-body {
	scrollbar-width: thin;
    overflow-x: auto;
    white-space: nowrap;
}

.w-table-container .w-table-body table{
    min-width: 100%;
}

.w-table-container .w-table-body table td {
	padding: 10px;
	line-height: 25px;
}

.w-table-container .w-table-body table th {
	font-size: 14px;
	font-weight: 600;
	padding: 8px 10px;
	background: #eee;
	border-radius: 0;
	color: #595959;
	cursor: pointer;
	min-width: 100px;
    position: relative;
}

.w-table-container .w-table-body table th.sort::after {
	content: "";
	width: 19px;
    position: absolute;
    display: block;
    height: 19px;
    right: -2px;
    top: 10px;
}

.w-table-container .w-table-body table th.sort:hover::after {
	background: url(/admin/img/sort_both.png);
}

.w-table-container .w-table-body table tr {
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
</style>
