@extends('admin.layouts.master')
@section('title', 'Inspection Under Body')
@section('content')
<div class="head" style="display: flex;justify-content:space-between;align-items:center">
    <h2>Under Body Components</h2>
    <button class="btn btn-primary show-modal">Create</button>
</div>
<br />
@include('admin.layouts.delete-msg')
<table class="table table-bordered table-striped datatable" id="table-2">
    <thead>
        <tr>
            <th>#</th>
            <th>Under Body Name</th>
            <th>Under Body Status</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        @forelse ($underBody as $key => $underBody)
            <tr>
                <td>{{ $key+1 }}</td>
                <td>{{ $underBody->name }}</td>
                <td>
                    @if ($underBody->status == 'active')
                        <span class="label label-success">Active</span>
                    @else
                        <span class="label label-danger">Blocked</span>
                    @endif
                </td>
                <td>
                    <a href="javascript:void()" class="btn btn-default btn-sm btn-icon icon-left show-modal" data-id="{{ $underBody->id }}" data-name="{{ $underBody->name }}" data-status="{{ $underBody->status }}">
                        <i class="entypo-pencil"></i>
                        Edit
                    </a>
                    <button data-id="{{ $underBody->id }}" data-type="underBody" class="btn btn-danger btn-sm btn-icon icon-left delete">
                        <i class="entypo-cancel"></i>
                        Delete
                    </button>
                </td>
            </tr>
        @empty
            <tr>
                <td colspan="4" class="text-center">No Data Found</td>
            </tr>
        @endforelse
    </tbody>
</table>

<!-- Modal 6 (Long Modal)-->
<div class="modal fade" id="modal-6">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body">
                <div class="row">
            <form method="post" id="underBodyForm" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="underBody_id" id="underBody_id">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="field-1" class="control-label">Under Body Name</label>
                            <input type="text" class="form-control" name="underBody_name" id="underBody_name" placeholder="Under Body Name" required />
                        </div>
                        <div class="form-group">
                            <label for="field-1" class="control-label">Select Status</label>
                            <select class="form-control" name="status" id="status">
                                <option value="active">Active</option>
                                <option value="block">Block</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-info" id="submitBtn"></button>
            </div>
            </form>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        $('.show-modal').click(function() {

            var underBodyId = $(this).data('id');
            var underBodyName = $(this).data('name');
            var modal = $('#modal-6');
            var form = modal.find('#underBodyForm');

            if(underBodyId) {
                modal.find('.modal-title').text('Edit');
                form.attr('action', '{{ url("underbodies/update") }}');
                modal.find('#underBody_id').val(underBodyId);
                modal.find('#underBody_name').val(underBodyName);



                modal.find('#status').val($(this).data('status'));


                modal.find('#submitBtn').text('Update');

            } else {
                modal.find('.modal-title').text('Create');
                form.attr('action', "{{ route('underbodies.store') }}");
                modal.find('#underBodyId').val('');
                modal.find('#underBodyName').val('');
                modal.find('#submitBtn').text('Create');
            }
            modal.modal('show');
        });
    });
</script>
@endsection