@extends('backend.layouts.app')

@section('content')
<div class="p-3">
    <div class="p-2 header-title-container">
        <span class="mb-0 mx-2">Latest Works</span>
    </div>
    <button type="button" class="btn m-2" style="width: 10%; background-color: #fa6f10;"><a href="{{ url('admin/latest/create') }}" class="text-decoration-none text-white">Add Latest Work</a></button>
</div>

<div class="p-3">
    <div class="card-body">
        <table id="myTable" class="table table-striped" style="width:100%">
            <thead>
                <tr>
                    <th>Image</th>
                    <th>Category</th>
                    <th>Project Name</th>
                    <th>Quote</th>
                    <th>Client Name</th>
                    <th>Position</th>
                    <th>Action</th>
                </tr>
            </thead>

            <tbody>
                @foreach ($latest as $items)
                <tr>
                    <td class="w-25"><img src="{{ asset('uploads/latest/' . $items->image) }}" height="80" alt=""></td>
                    <td>{{ $items->category }}</td>
                    <td>{{ $items->project_name }}</td>
                    <td>{{ $items->quote }}</td>
                    <td>{{ $items->client_name }}</td>
                    <td>{{ $items->position }}</td>
                    <td>

                        <a href="{{ url('admin/latest/' . $items->id) }}/edit">
                            <button class="btn btn-primary btn-block mb-2 ">Edit</button>
                        </a>
                        <form method="POST" action="{{ url('admin/latest/' . $items->id) }}">@csrf
                            @method('DELETE')
                            <button class="btn btn-danger btn-block mb-2 ">Delete</button>
                        </form> 

                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<style>
    select {
        color: #fa6f10;
        font-weight: bold;
    }

    option {
        font-weight: bold;
    }

    input {
        color: #fa6f10;
        font-weight: bold;
    }

    .paginate_button {
        color: #fa6f10 !important;
        font-weight: bold !important;
    }
</style>
@endsection