@extends('layouts/default')

@section('title', 'Damage References')

@section('content')
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>


<div class="row">
	<div class="col-md-8">

    <div class="box box-primary">
        <div class="box-header with-border">
            <h3 class="box-title">Damage Reference List</h3>

            <div class="box-tools pull-right">
                <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#modalAdd">
                    + Add New
                </button>
            </div>
        </div>

        <div class="box-body">

            @if(session('success'))
                <div class="alert alert-success">{{ session('success') }}</div>
            @endif

            <!-- THIS IS SEARCH FILTER BAR FEATURE-->
            <form method="GET" action="{{ route('damage-reference.index') }}" class="row" style="margin-bottom: 15px;">
				    <div class="col-md-3">
				        <input type="text"
				            name="category"
				            value="{{ request('category') }}"
				            list="categories"
				            class="form-control"
				            placeholder="Search Category...">
				    </div>

				    <div class="col-md-3">
				        <select name="type" class="form-control">
				            <option value="">-- Type --</option>
				            <option value="Hardware" {{ request('type') == 'Hardware' ? 'selected' : '' }}>Hardware</option>
				            <option value="Software" {{ request('type') == 'Software' ? 'selected' : '' }}>Software</option>
				        </select>
				    </div>

				    <div class="col-md-4">
				        <input type="text"
				            name="description"
				            value="{{ request('description') }}"
				            class="form-control"
				            placeholder="Search Description...">
				    </div>

				    <div class="col-md-2">
				        <button class="btn btn-primary btn-block">Search</button>
				    </div>

						</form>
						<!-- THIS IS SEARCH FILTER BAR FEATURE-->

            <table class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>Category</th>
                        <th>Type</th>
                        <th>Description</th>
                        <th width="150">Actions</th>
                    </tr>
                </thead>

                <tbody>
                    @forelse($references as $row)
                    <tr>
                        <td>{{ optional($row->category)->name ?? '-' }}</td>
                        <td>{{ $row->type }}</td>
                        <td>{{ $row->description }}</td>
                        <td>
                            <button class="btn btn-warning btn-sm"
                                data-toggle="modal"
                                data-target="#modalEdit{{ $row->id }}">
                                Edit
                            </button>

                            <button class="btn btn-danger btn-sm"
                                data-toggle="modal"
                                data-target="#modalDelete{{ $row->id }}">
                                Delete
                            </button>
                        </td>
                    </tr>

                    {{-- Edit Modal --}}
                    <div class="modal fade" id="modalEdit{{ $row->id }}" tabindex="-1">
                        <div class="modal-dialog">
                            <div class="modal-content">

                                <form method="POST" action="{{ route('damage-reference.update', $row->id) }}">
                                    @csrf
                                    @method('PUT')

                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                                        <h4 class="modal-title">Edit Damage Reference</h4>
                                    </div>

                                    <div class="modal-body">

                                        <div class="form-group">
									    <label>Category</label>
									 <select name="category_id" class="form-control" required>
                                            @foreach($categories as $cat)
                                                <option value="{{ $cat->id }}"
                                                    {{ $row->category_id == $cat->id ? 'selected' : '' }}>
                                                    {{ $cat->name }}
                                                </option>
                                            @endforeach
                                        </select>



                                        <div class="form-group">
									      <label>Type</label>
										    <select name="type" class="form-control" required>
										        <option value="Hardware" {{ $row->type == 'Hardware' ? 'selected' : '' }}>Hardware</option>
										        <option value="Software" {{ $row->type == 'Software' ? 'selected' : '' }}>Software</option>
										    </select>
										</div>

                                        <div class="form-group">
                                            <label>Description</label>
                                            <input type="text" name="description" class="form-control" value="{{ $row->description }}" required>
                                        </div>

                                    </div>

                                    <div class="modal-footer">
                                        <button type="submit" class="btn btn-success">Update</button>
                                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                    </div>

                                </form>

                            </div>
                        </div>
                    </div>

                    {{-- Delete Modal --}}
                    <div class="modal fade" id="modalDelete{{ $row->id }}" tabindex="-1">
                        <div class="modal-dialog">
                            <div class="modal-content">

                                <form method="POST" action="{{ route('damage-reference.destroy', $row->id) }}">
                                    @csrf
                                    @method('DELETE')

                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                                        <h4 class="modal-title">Delete Confirmation</h4>
                                    </div>

                                    <div class="modal-body">
                                        Are you sure want to delete
                                        <strong>{{ $row->category }} - {{ $row->type }}</strong>?
                                    </div>

                                    <div class="modal-footer">
                                        <button type="submit" class="btn btn-danger">Delete</button>
                                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                                    </div>

                                </form>

                            </div>
                        </div>
                    </div>

                    @empty
                    <tr>
                        <td colspan="4" class="text-center">No data found.</td>
                    </tr>
                    @endforelse
                </tbody>
						</table>
						<div class="text-center">
						    {{ $references->links() }}
						</div>
			</div>
    </div>
	</div>
</div>

{{-- ADD MODAL --}} <!--THIS IS NEW POPUP FOR CREATE NEW REFERENCE -->
<div class="modal fade" id="modalAdd" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">

            <form method="POST" action="{{ route('damage-reference.store') }}">
                @csrf

                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Add Damage Reference</h4>
                </div>

                <div class="modal-body">

                   <select name="category_id" class="form-control" required>
                            @foreach($categories as $cat)
                                <option value="{{ $cat->id }}"
                                    {{ $row->category_id == $cat->id ? 'selected' : '' }}>
                                    {{ $cat->name }}
                                </option>
                            @endforeach
                        </select>



                    <div class="form-group">
                        <label>Type</label>
                        <select name="type" class="form-control" required>
                        	<option value="">-- Select Type --</option>
                          <option>Software</option>
                          <option>Hardware</option>
                           </select>
                    </div>
                <br>

                    <div class="form-group">
                        <label>Description</label>
                        <input name="description" class="form-control" required>
                    </div>

                </div>

                <div class="modal-footer">
                    <button type="submit" class="btn btn-success">Save</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>

            </form>

        </div>
    </div>
    <!--DOne-->
</div>
<select name="category_id" class="form-control">
    <option value="">-- All Categories --</option>
    @foreach($categories as $cat)
        <option value="{{ $cat->id }}"
            {{ request('category_id') == $cat->id ? 'selected' : '' }}>
            {{ $cat->name }}
        </option>
    @endforeach
</select>

@endsection