@extends('layouts.master')

@section('content')
    <!-- Page -->
    <div class="page">
        <div class="page-header">
            <h1 class="page-title">{{ $page->name }}</h1>
            @if($page->slug === 'product-list')
            <div class="page-header-actions">
                <a href="{{ route('page.data.export', $page->slug) }}" class="btn btn-primary float-right ml-2">Export Excel</a>
                <form action="{{ route('page.data.import', $page->slug) }}" method="POST" enctype="multipart/form-data" class="d-inline-block float-right">
                    @csrf
                    <input type="file" name="import_file" accept=".xlsx,.xls" required style="display:inline-block;width:auto;">
                    <button type="submit" class="btn btn-success">Import Excel</button>
                </form>
            </div>
            @endif
        </div>
        <div class="page-content">
            <div class="panel">
                <div class="panel-body container-fluid">
                    <div class="row">
                        <div class="col-lg-12">
                            <!-- Example Bordered Table -->
                            <div class="example-wrap">
                                @if ($page->has_create == 1)
                                    <a href="{{ route('page.data.create', $page->slug) }}"
                                        class="btn btn-outline btn-primary">
                                        <i class="icon wb-plus" aria-hidden="true"></i>Add
                                    </a>
                                @endif
                                <!-- Custom Search Form -->
                                <div class="d-flex justify-content-between align-items-center mb-3 mt-2">
                                    <div>
                                        <form method="GET" action="{{ route('page.data.index', $page->slug) }}" class="form-inline">
                                            <label for="perPage" class="mr-2">Show per page:</label>
                                            <select name="perPage" id="perPage" class="form-control mr-2" onchange="this.form.submit()">
                                                <option value="10" {{ request('perPage', 10) == 10 ? 'selected' : '' }}>10</option>
                                                <option value="25" {{ request('perPage') == 25 ? 'selected' : '' }}>25</option>
                                                <option value="50" {{ request('perPage') == 50 ? 'selected' : '' }}>50</option>
                                            </select>
                                            <input type="hidden" name="q" value="{{ request('q') }}">
                                        </form>
                                    </div>
                                    <div>
                                        <form method="GET" action="{{ route('page.data.index', $page->slug) }}" class="form-inline justify-content-end">
                                            <div class="input-group">
                                                <input type="text" name="q" class="form-control" placeholder="Search..." value="{{ request('q') }}">
                                                <input type="hidden" name="perPage" value="{{ request('perPage', 10) }}">
                                                <button class="btn btn-primary" type="submit">Search</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                                <div class="example table-responsive">
                                    @if ($errors->any())
                                        <div class="alert alert-danger">
                                            <ul>
                                                @foreach ($errors->all() as $error)
                                                    <li>{{ $error }}</li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    @endif
                                    @php
                                        $input_labels = $page->inputs?->where('table_view', 1)?->pluck('input_label') ?? collect([]);
                                        $input_names = $page->inputs?->where('table_view', 1)?->pluck('input_name') ?? collect([]);
                                    @endphp

                                    <table class="table table-bordered table-hover dataTable table-striped w-full">
                                        <thead>
                                            <tr align="center">
                                                <th></th>
                                                <th>No</th>
                                                @foreach ($input_labels as $i_label)
                                                    <th>{{ $i_label }}</th>
                                                @endforeach
                                                {{-- <th>Page url</th> --}}
                                                @if ($page->has_status == 1)
                                                    <th>Status</th>
                                                @endif
                                                @if ($page->has_update == 1 || $page->has_delete == 1)
                                                    <th class="text-nowrap">Operations</th>
                                                @endif
                                            </tr>
                                        </thead>
                                        <tbody id="order">
                                            @foreach (($pageData ?? []) as $item)
                                                @php $data = json_decode($item->data, true); @endphp
                                                <tr id="sorts_{{ $item->id }}" align="center">
                                                    <td><i class="fa fa-sort handle" style="cursor:move"
                                                            aria-hidden="true"></i></td>
                                                    <td>{{ $loop->iteration }}</td>
                                                    @foreach ($input_names as $i_name)
                                                        <td>{{ $data[$i_name] ?? '' }}</td>
                                                    @endforeach
                                                    {{-- <td>
                                                        <a href="" class="btn btn-outline-primary"><i
                                                                class="fa fa-link"></i></a>
                                                    </td> --}}
                                                    @if ($page->has_status == 1)
                                                        <td>
                                                            <input class="status" data-id="{{ $item->id }}"
                                                                type="checkbox" data-on="Aktiv" data-off="Passiv"
                                                                data-onstyle="success" data-offstyle="danger"
                                                                @if ($item->status == 1) checked @endif
                                                                data-toggle="toggle">
                                                        </td>
                                                    @endif
                                                    <td>
                                                        @if ($page->has_update == 1)
                                                            <a href="{{ route('page.data.edit', [$page->slug, $item->id]) }}"
                                                                class="btn btn-outline-primary edit-click"><i
                                                                    class="fa fa-edit pri"></i></a>
                                                        @endif
                                                        @if ($page->has_delete == 1)
                                                            <a data-id="{{ $item->id }}"
                                                                class="btn btn-outline-danger delete-click"><i
                                                                    class="fa fa-trash dan"></i></a>
                                                        @endif
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                    <div class="pagination-wrapper mt-4 d-flex justify-content-center">
                                        <nav>
                                            {{ $pageData->links('pagination::bootstrap-4') ?? '' }}
                                        </nav>
                                    </div>
                                </div>
                                <div class="float-right">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End Example Bordered Table -->
            </div>
        </div>
    </div>
@endsection
@push('script')
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
    <script>
        $('#order').sortable({
            handle: '.handle',
            update: function() {
                let orders = $('#order').sortable('serialize');
                console.log(orders);
                $.get("{{ route('page.data.order') }}?" + orders, function(data, status) {})
            }
        });
    </script>
@endpush

@push('style')
    <style>
        .pagination {
            display: flex;
            padding-left: 0;
            list-style: none;
            border-radius: 0.25rem;
        }

        .pagination .page-item .page-link {
            position: relative;
            display: block;
            padding: 0.5rem 0.75rem;
            margin-left: -1px;
            line-height: 1.25;
            color: #3e8ef7;
            background-color: #fff;
            border: 1px solid #dee2e6;
        }

        .pagination .page-item.active .page-link {
            z-index: 3;
            color: #fff;
            background-color: #3e8ef7;
            border-color: #3e8ef7;
        }

        .pagination .page-item .page-link:hover {
            z-index: 2;
            color: #0056b3;
            text-decoration: none;
            background-color: #e9ecef;
            border-color: #dee2e6;
        }

        .pagination .page-item.disabled .page-link {
            color: #6c757d;
            pointer-events: none;
            cursor: auto;
            background-color: #fff;
            border-color: #dee2e6;
        }
    </style>
@endpush