@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" />
<!-- 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">{{$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)
                                <th>{{$field->attribute}}</th>
                                @endforeach
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($items as $item)
                            <tr>
                                @foreach($fields as $field)
                                <td>
                                @switch($field->type)
                                    @case('hidden')
                                        <input type="{{$field->type}}" id="field-{{$field->id}}" name="data[{{$item->id}}][{{$field->code}}]" value="{{$item->{$field->code}:''}}">
                                        @break
                                    @case('text')
                                    @case('email')
                                    @case('number')
                                    @case('tel')
                                    @case('date')
                                        <input type="{{$field->type}}" id="field-{{$field->id}}" name="data[{{$item->id}}][{{$field->code}}]" value="{{$item->{$field->code}:''}}" class="form-control" placeholder="Enter {{$field->attribute}}" {{$field->required=='yes'?'required':'' }}>
                                        @break
                                    @case('textarea')
                                        <textarea type="{{$field->type}}" id="field-{{$field->id}}" name="data[{{$item->id}}][{{$field->code}}]" class="form-control" placeholder="Enter {{$field->attribute}}" {{$field->required=='yes'?'required':'' }}>{{$item->{$field->code}:''}}</textarea>
                                        @break
                                    @case('select')
                                        <select class="form-control" id="field-{{$field->id}}" name="data[{{$item->id}}][{{$field->code}}]" {{$field->required=='yes'?'required':'' }}>
                                            <option value=""> -- Select {{$field->attribute}} -- </option>
                                            @foreach($field->options as $v)
                                            <option value="{{$v->value}}" {{$item->{$field->code} == $v->value ? 'selected="selected"':''}}>{{$v->display}}</option>
                                            @endforeach
                                        </select>
                                        @break

                                @endswitch
                                </td>
                                @endforeach
                            </tr>
                            @endforeach
                        </tbody>
                    </table>

                </div> <!-- end card body-->
            </div> <!-- end card -->
        </div><!-- end col-->
    </div>
    <!-- end row-->
</div> <!-- container -->
<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 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');
            }
        });
    });

</script>
<!-- end demo js-->
@endsection