@extends('admin.masterv2')

@section('styleSheet')
    <!-- BEGIN PAGE LEVEL STYLES -->
<link rel="stylesheet" type="text/css" href="{{ asset('assets/plugins/datatables/dataTables.bootstrap5.css') }}" />
    <!-- END PAGE LEVEL STYLES -->
@endsection
@section('content')

<div class="page-content-wrapper">
    <div class="page-content">
        <div class="page-bar">
            <ul class="page-breadcrumb">
                <li>
                    <i class="fa fa-home"></i>
                    <a href="{{route('home')}}">Dashboard</a>
                    <i class="fa fa-angle-right"></i>
                </li>
                <li>
                    <a href="{{route('allPages')}}">Pages</a>
                </li>
            </ul>
        </div>
        <!-- END PAGE HEADER-->

        <div class="portlet box blue-hoki">
            <div class="portlet-title">
                <div class="caption">
                    <i class="fa fa-globe"></i>Page List
                </div>
                <div class="tools">
                </div>
            </div>
            <div class="portlet-body">
                <div class="row">
                    <div class="col-md-12">@include('admin.includesV2.backendAlert')</div>
                </div> 
                <div class="row">
                    <div class="col-md-12">   
                        <table id="pageList" data-order='[[ 2, "desc" ]]' class="table table-bordered table-striped" style="width:100%">
                            <thead class="thead-dark">
                                <tr>
                                    <th tabindex="0">Banner</th>
                                    <th tabindex="1">Page Name</th>
                                    <th tabindex="2">Order</th>
                                    <th tabindex="3">Parent</th>
                                    <th tabindex="4">Page Type</th>
                                    <th tabindex="5">Action</th>
                                </tr>
                            </thead>

                            <tbody>
                            @foreach($pageSettings as $pages)

                                <tr>
                                    <td>
                                        <a href="{{route('detailsPage', ['id' => $pages->id])}}">
                                            <img class="img-responsive" src="{{asset('uploads/pages/'.$pages->id.'/banner/'.$pages->banner)}}" alt="" style="max-width:120px">
                                        </a>
                                    </td>
                                    <td>{{$pages->page_name}}</td>
                                    <td>{{$pages->view_order}}</td>
                                    <td>{{$pages->parent_id}}</td>
                                    <td>{{isset($pages->type) ? $pageTypes[$pages->type]: ''}}</td>
                                    <td>
                                        <div class="row">
                                                                <div class="col">
                                                                    <a href="{{route('detailsPage', ['id' => $pages->id])}}" class="btn btn-success btn-sm" data-toggle="m-tooltip"  title="Edit">
                                                                        <i class='fa fa-edit'></i> Edit
                                                                    </a>
                                                                </div>
                                                                <div class="col">
                                                                    <form action="{{ route('deletePage', ['id' => $pages->id]) }}" method="POST">
                                                                        @csrf
                                                                        @method('DELETE')
                                                                        <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure you want to delete this form?')"><i class="fa fa-trash"></i> Delete</button>
                                                                    </form>
                                                                </div>
                                                            </div>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>

                        </table>
                    </div>
                </div>
            </div>
        <!-- BEGIN PAGE CONTENT-->

        <!-- END PAGE CONTENT-->
        </div>
    </div>
</div>
@endsection
@section('customJs')
<script type="text/javascript" src="{{ asset('assets/plugins/datatables/dataTables.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/plugins/datatables/dataTables.bootstrap5.js') }}"></script>
<script>
    $(document).ready(function() {
        $('#pageList').DataTable({
            layout: {
                topStart: {
                    pageLength: {
                        menu: [[20, 30, 40, -1], [20, 30, 40, "All"]]
                    },
                    ]
                },
            },
        });
    });
    </script>
@endsection