@extends('admin.layouts.master')
@section('title', 'Inspection Performance')
@section('content')
<div class="head" style="display: flex;justify-content:space-between;align-items:center">
    <h2>Performance 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>Performance Name</th>
            <th>Performance Status</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        @forelse ($performances as $key => $performance)
            <tr>
                <td>{{ $key+1 }}</td>
                <td>{{ $performance->name }}</td>
                <td>
                    @if ($performance->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="{{ $performance->id }}" data-name="{{ $performance->name }}" data-status="{{ $performance->status }}">
                        <i class="entypo-pencil"></i>
                        Edit
                    </a>
                    <button data-id="{{ $performance->id }}" data-type="performance" 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="performanceForm" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="performance_id" id="performance_id">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="field-1" class="control-label">Performance Name</label>
                            <input type="text" class="form-control" name="performance_name" id="performance_name" placeholder="Performance 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 performanceId = $(this).data('id');
            var performanceName = $(this).data('name');
            var modal = $('#modal-6');
            var form = modal.find('#performanceForm');

            if(performanceId) {
                modal.find('.modal-title').text('Edit');
                form.attr('action', '{{ url("performances/update") }}');
                modal.find('#performance_id').val(performanceId);
                modal.find('#performance_name').val(performanceName);



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


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

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