@php
    $role = json_decode(auth()->user()->roles);
    $abm = '1670746453-9d3caf22-22d5-4d1e-8891-cfc2e3d7cdc9';
@endphp

@extends('layouts.vertical', ['page_title' => 'Datatables'])

@section('css')
    <!-- third party css -->
    <link href="{{ asset('assets/libs/datatables/datatables.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.css') }}" rel="stylesheet"
        type="text/css" />
    <!-- third party css end -->
@endsection

@section('content')
    <!-- Start Content-->
    <div class="container-fluid">

        <!-- start page title -->
        <div class="row">
            <div class="col-md-6 p-2">
                <h4 class="page-title">{{ $title }} Management</h4>
            </div>
            <div class="col-md-6 p-2">
                @if (!in_array($abm, $role))
                    @if (isset($buttons))
                        @foreach ($buttons as $button)
                            <a href="{{ $button['link'] }}"
                                class="btn btn-{{ $button['title'] == 'Add New' ? 'success' : 'dark' }} waves-effect waves-light float-end me-2"
                                id="btn-{{ strtolower(str_replace(' ', '-', $button['title'])) }}">{{ $button['title'] }}</a>
                        @endforeach
                    @endif
                @endif
            </div>
        </div>
        <!-- end page title -->
        @if (session()->has('message'))
            <div class="alert alert-success">
                {{ session()->get('message') }}
            </div>
        @endif
        @if (session()->has('error'))
            <div class="alert alert-danger">
                {{ session()->get('error') }}
            </div>
        @endif
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <table id="list-page-datatable" class="table w-100 nowrap">
                            <thead>
                                <tr>
                                    @foreach ($fields as $field => $props)
                                        <th>{{ $props['title'] }}</th>
                                    @endforeach
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($items as $item)
                                    <tr>
                                        @foreach ($fields as $field => $props)
                                            @if ($field != 'actions')
                                                <td>
                                                    @switch($props['type'])
                                                        @case('image')
                                                            <img src="{{ $item->{$field} }}" class="img-thumbnail">
                                                        @break

                                                        @case('text')
                                                        @case('select')
                                                            {{ isset($item->{$field}) ? $item->{$field} : '' }}
                                                        @break

                                                        @case('date')
                                                            {{ date('d M Y', strtotime($item->{$field})) }}
                                                        @break

                                                        @case('datetime')
                                                            {{ date('d M Y, h:iA', strtotime($item->{$field})) }}
                                                        @break
                                                    @endswitch
                                                </td>
                                            @else
                                                <td>
                                                    @foreach ($props['buttons'] as $key => $button)
                                                        @switch($button)
                                                            @case('edit')
                                                                @if (!in_array($abm, $role))
                                                                    <a href="{{ $base_url }}/edit?id={{ $item->id }}"
                                                                        class="action-icon"> <i
                                                                            class="mdi mdi-square-edit-outline text-warning"></i></a>
                                                                @endif
                                                            @break

                                                            @case('delete')
                                                                @if (!in_array($abm, $role))
                                                                    <a href="{{ $base_url }}/delete?id={{ $item->id }}"
                                                                        class="action-icon"> <i
                                                                            class="mdi mdi-delete text-danger"></i></a>
                                                                @endif
                                                            @break

                                                            @default
                                                                @php
                                                                    if (isset($button['href']) && $button['href'] != '') {
                                                                        $href = $item->{$button['href']};
                                                                    } else {
                                                                        $querystring = $button['querystring'];
                                                                        foreach ((array) $item as $k => $v) {
                                                                            if (strpos($querystring, '{' . strtoupper($k) . '}') !== false) {
                                                                                $querystring = str_replace('{' . strtoupper($k) . '}', $v, $querystring);
                                                                            }
                                                                        }
                                                                        $href = $base_url . '/' . $key . '?' . $querystring;
                                                                    }
                                                                    $target = '_self';
                                                                    if (isset($button['target']) && $button['target'] != '') {
                                                                        $target = $button['target'];
                                                                    }
                                                                @endphp
                                                                <a href="{{ $href }}" target="{{ $target }}"
                                                                    class="action-icon"> <i
                                                                        class="mdi mdi-{{ $button['icon'] }}"></i></a>
                                                        @endswitch
                                                    @endforeach
                                                </td>
                                            @endif
                                        @endforeach
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>

                    </div> <!-- end card body-->
                </div> <!-- end card -->
            </div><!-- end col-->
        </div>
        <!-- end row-->
    </div> <!-- container -->

    <!-- Right modal content -->
    <div id="date_filter_modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header border-0">
                    <h4 class="modal-title" id="standard-modalLabel">Filter results by date</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <form method="get" id="form-date-filter">
                            <div class="col-12">
                                <div class="mb-3">
                                    <label class="form-label">From Date</label>
                                    <input type="text" name="startdate" class="form-control" data-provide="datepicker"
                                        value="{{ isset($startdate) ? date('m/d/Y', strtotime($startdate)) : '' }}"
                                        data-date-autoclose="true">
                                </div>
                            </div>

                            <div class="col-12">
                                <div class="mb-3">
                                    <label class="form-label">To Date</label>
                                    <input type="text" name="enddate" class="form-control" data-provide="datepicker"
                                        value="{{ isset($enddate) ? date('m/d/Y', strtotime($enddate)) : '' }}"
                                        data-date-autoclose="true">
                                </div>
                            </div>
                    </div>
                    <button type="submit" class="btn btn-success btn-sm">Filter</button>
                    <button type="button" class="btn btn-danger btn-sm" data-bs-dismiss="modal">Close</button>
                    </form>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->


    <style type="text/css">
        .img-thumbnail {
            max-width: 100px
        }
    </style>
@endsection

@section('script')
    <!-- third party js -->
    <script src="{{ asset('assets/libs/datatables/datatables.min.js') }}"></script>
    <script src="{{ asset('assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $('#list-page-datatable').DataTable({
                stateSave: true,
                "scrollX": true,
                "language": {
                    "paginate": {
                        "previous": "<i class='mdi mdi-chevron-left'>",
                        "next": "<i class='mdi mdi-chevron-right'>"
                    }
                },
                "drawCallback": function() {
                    $('.dataTables_paginate > .pagination').addClass('pagination-rounded');
                }
            });

            $("#btn-date-filter").click(function() {
                $("#date_filter_modal").modal("show")
            })
        });
    </script>
    <!-- end demo js-->
@endsection