@extends('backend.layout.main') @section('content')

    <x-validation-error fieldName="name" />
    <x-validation-error fieldName="category" />
    <x-success-message key="message" />
    <x-error-message key="not_permitted" />

    <section>
        <div class="container-fluid">
            <button class="btn btn-info" data-toggle="modal" data-target="#createModal"><i class="dripicons-plus"></i>
                {{ __('db.Add Device Type') }} </button>
        </div>
        <div class="table-responsive">
            <table id="biller-table" class="table">
                <thead>
                    <tr>
                        <th class="not-exported"></th>
                        <th>{{ __('db.name') }}</th>
                        <th>{{ __('db.category') }}</th>
                        <th>{{ __('db.Description') }}</th>
                        <th class="not-exported">{{ __('db.action') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($lims_device_type_all as $key => $device_type)
                        <tr data-id="{{ $device_type->id }}">
                            <td>{{ $key }}</td>
                            <td>{{ $device_type->name }}</td>
                            <td>
                                <span class="badge badge-{{ $device_type->category === 'device' ? 'info' : 'warning' }}">
                                    {{ ucfirst($device_type->category) }}
                                </span>
                            </td>
                            <td>{{ $device_type->description ?? '-' }}</td>
                            <td>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-default btn-sm dropdown-toggle"
                                        data-toggle="dropdown" aria-haspopup="true"
                                        aria-expanded="false">{{ __('db.action') }}
                                        <span class="caret"></span>
                                        <span class="sr-only">Toggle Dropdown</span>
                                    </button>
                                    <ul class="dropdown-menu edit-options dropdown-menu-right dropdown-default"
                                        user="menu">
                                        <li>
                                            <button type="button" data-id="{{ $device_type->id }}"
                                                class="open-EditDeviceTypeDialog btn btn-link" data-toggle="modal"
                                                data-target="#editModal">
                                                <i class="dripicons-document-edit"></i>
                                                {{ __('db.edit') }}
                                            </button>
                                        </li>
                                        <li class="divider"></li>
                                        <form action="{{ route('repair.device-types.destroy', $device_type->id) }}" method="POST">
                                            @csrf
                                            @method('DELETE')
                                            <li>
                                                <button type="submit" class="btn btn-link"
                                                    onclick="return confirm('Are you sure want to delete?')">
                                                    <i class="dripicons-trash"></i> {{ __('db.delete') }}
                                                </button>
                                            </li>
                                        </form>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </section>

    {{-- Create Modal --}}
    <div id="createModal" tabindex="-1" role="dialog" aria-labelledby="createModalLabel" aria-hidden="true"
        class="modal fade text-left">
        <div role="document" class="modal-dialog">
            <div class="modal-content">
                <form action="{{ route('repair.device-types.store') }}" method="POST">
                    @csrf
                    <div class="modal-header">
                        <h5 id="createModalLabel" class="modal-title">{{ __('db.Add Device Type') }}</h5>
                        <button type="button" data-dismiss="modal" aria-label="Close" class="close">
                            <span aria-hidden="true"><i class="dripicons-cross"></i></span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p class="italic">
                            <small>{{ __('db.The field labels marked with * are required input fields.') }}</small>
                        </p>
                        <div class="form-group">
                            <label>{{ __('db.name') }} *</label>
                            <input type="text" name="name" required class="form-control"
                                placeholder="{{ __('db.Type device type name') }}">
                        </div>
                        <div class="form-group">
                            <label>{{ __('db.category') }} *</label>
                            <select name="category" required class="form-control">
                                <option value="">{{ __('db.Select Category') }}</option>
                                <option value="device">{{ __('db.device') }}</option>
                                <option value="vehicle">{{ __('db.vehicle') }}</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>{{ __('db.Description') }}</label>
                            <input type="text" name="description" class="form-control"
                                placeholder="{{ __('db.Type description') }}">
                        </div>
                        <div class="form-group">
                            <input type="submit" value="{{ __('db.submit') }}" class="btn btn-primary">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Edit Modal --}}
    <div id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true"
        class="modal fade text-left">
        <div role="document" class="modal-dialog">
            <div class="modal-content">
                <form action="{{ route('repair.device-types.update', 1) }}" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="modal-header">
                        <h5 id="editModalLabel" class="modal-title">{{ __('db.Update Device Type') }}</h5>
                        <button type="button" data-dismiss="modal" aria-label="Close" class="close">
                            <span aria-hidden="true"><i class="dripicons-cross"></i></span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p class="italic">
                            <small>{{ __('db.The field labels marked with * are required input fields.') }}</small>
                        </p>
                        <div class="form-group">
                            <label>{{ __('db.name') }} *</label>
                            <input type="text" name="name" required class="form-control">
                        </div>
                        <input type="hidden" name="device_type_id">
                        <div class="form-group">
                            <label>{{ __('db.category') }} *</label>
                            <select name="category" required class="form-control">
                                <option value="device">{{ __('db.device') }}</option>
                                <option value="vehicle">{{ __('db.vehicle') }}</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>{{ __('db.Description') }}</label>
                            <input type="text" name="description" class="form-control"
                                placeholder="{{ __('db.Type description') }}">
                        </div>
                        <div class="form-group">
                            <input type="submit" value="{{ __('db.submit') }}" class="btn btn-primary">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
    <script type="text/javascript">
        var device_type_id = [];
        var user_verified =