@extends('voyager::master')

@section('page_title', __('voyager::generic.viewing').' '.$dataType->getTranslatedAttribute('display_name_plural'))

@section('page_header')
    <div class="container-fluid">
        <h1 class="page-title">
            <i class="{{ $dataType->icon }}"></i> {{ $dataType->getTranslatedAttribute('display_name_plural') }}
        </h1>
        @can('add', app($dataType->model_name))
            <a href="{{ route('voyager.'.$dataType->slug.'.create') }}" class="btn btn-success btn-add-new">
                <i class="voyager-plus"></i> <span>{{ __('voyager::generic.add_new') }}</span>
            </a>
        @endcan
        @can('delete', app($dataType->model_name))
            @include('voyager::partials.bulk-delete')
        @endcan
        @include('voyager::multilingual.language-selector')
    </div>
@stop

@section('content')
    <div class="page-content browse container-fluid">
        @include('voyager::alerts')

        @php
            $showCheckboxColumn = Auth::user()->can('delete', app($dataType->model_name));
        @endphp

        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-bordered">
                    <div class="panel-body">
                        <div class="table-responsive">
                            <table id="dataTable" class="table table-hover">
                                <thead>
                                    <tr>
                                        @if($showCheckboxColumn)
                                            <th class="dt-not-orderable">
                                                <input type="checkbox" class="select_all">
                                            </th>
                                        @endif
                                        <th>Key</th>
                                        <th>Label</th>
                                        <th>Metric Value</th>
                                        <th>Icon</th>
                                        <th class="actions text-right dt-not-orderable">{{ __('voyager::generic.actions') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($dataTypeContent as $data)
                                        @php
                                            $isImg = $data->is_image;
                                            $iconUrl = $data->icon_url;
                                            $faClass = $data->fa_class;
                                        @endphp
                                        <tr>
                                            @if($showCheckboxColumn)
                                                <td>
                                                    <input type="checkbox" name="row_id" id="checkbox_{{ $data->getKey() }}" value="{{ $data->getKey() }}">
                                                </td>
                                            @endif
                                            <td>
                                                <code>{{ $data->key }}</code>
                                            </td>
                                            <td>
                                                <strong>{{ $data->label }}</strong>
                                            </td>
                                            <td>
                                                <span class="label label-primary" style="font-size: 13px; font-weight: 700; background-color: #09383a; border-radius: 4px; padding: 4px 8px;">
                                                    {{ $data->value }}
                                                </span>
                                            </td>
                                            <td>
                                                @if($isImg && $iconUrl)
                                                    <div style="display: flex; align-items: center; gap: 8px;">
                                                        <img src="{{ $iconUrl }}" alt="{{ $data->label }}" style="height: 32px; width: 32px; object-fit: contain; background: #fafafa; padding: 2px; border: 1px solid #e2e8f0; border-radius: 4px;">
                                                        <span class="text-muted" style="font-size: 12px; font-family: monospace;">{{ basename($data->icon) }}</span>
                                                    </div>
                                                @else
                                                    <div style="display: flex; align-items: center; gap: 8px;">
                                                        <div style="width: 32px; height: 32px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center;">
                                                            <i class="{{ $faClass }}" style="font-size: 18px; color: #16a34a;"></i>
                                                        </div>
                                                        <span class="text-muted" style="font-size: 12px; font-family: monospace;">{{ $data->icon ?: 'fa-leaf' }}</span>
                                                    </div>
                                                @endif
                                            </td>
                                            <td class="no-sort no-click bread-actions">
                                                @foreach($actions as $action)
                                                    @if (!method_exists($action, 'massAction'))
                                                        @include('voyager::bread.partials.actions', ['action' => $action])
                                                    @endif
                                                @endforeach
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Single delete modal --}}
    <div class="modal modal-danger fade" tabindex="-1" id="delete_modal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="{{ __('voyager::generic.close') }}"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title"><i class="voyager-trash"></i> {{ __('voyager::generic.delete_question') }} {{ strtolower($dataType->getTranslatedAttribute('display_name_singular')) }}?</h4>
                </div>
                <div class="modal-footer">
                    <form action="#" id="delete_form" method="POST">
                        {{ method_field('DELETE') }}
                        {{ csrf_field() }}
                        <input type="submit" class="btn btn-danger pull-right delete-confirm" value="{{ __('voyager::generic.delete_confirm') }}">
                    </form>
                    <button type="button" class="btn btn-default pull-right" data-dismiss="modal">{{ __('voyager::generic.cancel') }}</button>
                </div>
            </div>
        </div>
    </div>
@stop

@section('javascript')
    <script>
        $(document).ready(function () {
            $('#dataTable').DataTable({
                "order": [],
                "language": {!! json_encode(__('voyager::datatable'), JSON_UNESCAPED_SLASHES) !!},
                "columnDefs": [{"targets": "dt-not-orderable", "searchable": false, "orderable": false}]
            });

            $('.select_all').on('click', function(e) {
                $('input[name="row_id"]').prop('checked', $(this).prop('checked')).trigger('change');
            });
        });

        $('td').on('click', '.delete', function (e) {
            $('#delete_form')[0].action = '{{ route('voyager.'.$dataType->slug.'.destroy', '__id') }}'.replace('__id', $(this).data('id'));
            $('#delete_modal').modal('show');
        });
    </script>
@stop