@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(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
        </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')
                                            @case('number')
                                                {{ 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})+19800 ) }}
                                                @break

                                        @endswitch
                                    </td>
                                    @else
                                    <td>
                                        @foreach($props['buttons'] as $key => $button)
                                            @switch($button)
                                                @case('edit')
                                                    <a href="{{$base_url}}/edit?id={{$item->id}}" class="action-icon"> <i class="mdi mdi-square-edit-outline text-warning"></i></a>
                                                    @break
                                                @case('delete')
                                                    <a href="{{$base_url}}/delete?id={{$item->id}}" class="action-icon"> <i class="mdi mdi-delete text-danger"></i></a>
                                                    @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;
                                                        }
                                                        
                                                    @endphp
                                                    <a href="{{$href}}" 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