@extends('admin.app')

@section('content')
<div class="container-fluid px-3 mt-5">

    <h2 class="mb-3">Projects</h2>

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

    <a href="{{ route('projects.create') }}" class="btn btn-primary mb-3">
        + Add Project
    </a>

    <div class="table-responsive">

        <table class="table table-bordered align-middle" id="projectsTable">

            <thead class="table-light">
                <tr>
                    <th>#</th>
                    <th>Card Image</th>
                    <th>Title</th>
                    <th>Location</th>
                    <th>Property Type</th>
                    <th>Project Status</th>
                    <th>Total Area</th>
                    <th>Publish Date</th>
                    <th>Status</th>
                    <th width="180">Action</th>
                </tr>
            </thead>

            <tbody>

                @forelse($projects as $project)

                <tr>

                    <td>{{ $loop->iteration }}</td>

                    <td>
                        @if($project->card_image)
                            <img src="{{ asset('storage/'.$project->card_image) }}"
                                 width="80"
                                 height="60"
                                 style="object-fit:cover;border-radius:6px;">
                        @endif
                    </td>

                    <td style="min-width:250px;">
                        {{ $project->title }}
                    </td>

                    <td>
                        {{ $project->location }}
                    </td>

                    <td>
                        {{ $project->property_type }}
                    </td>

                    <td>
                        <span class="badge bg-info">
                            {{ $project->project_status }}
                        </span>
                    </td>

                    <td>
                        {{ $project->total_area }}
                    </td>

                    <td>
                        {{ $project->published_at }}
                    </td>

                    <td>
                        <span class="badge {{ $project->status == 'published' ? 'bg-success' : 'bg-secondary' }}">
                            {{ ucfirst($project->status) }}
                        </span>
                    </td>

                    <td class="text-nowrap">

                        <a href="{{ route('projects.edit',$project->id) }}"
                           class="btn btn-warning btn-sm mb-1">
                            Edit
                        </a>

                        <form action="{{ route('projects.destroy',$project->id) }}"
                              method="POST"
                              class="d-inline"
                              onsubmit="return confirm('Delete this project?')">

                            @csrf
                            @method('DELETE')

                            <button class="btn btn-danger btn-sm mb-1">
                                Delete
                            </button>

                        </form>

                    </td>

                </tr>

                @empty

                <tr>
                    <td colspan="10" class="text-center">
                        No Projects Found
                    </td>
                </tr>

                @endforelse

            </tbody>

        </table>

    </div>

</div>
@endsection

@push('styles')
<style>
@media (max-width: 768px) {

    table th,
    table td {
        font-size: 14px;
    }

}
</style>
@endpush

@push('scripts')
<script>
$(document).ready(function () {

    $('#projectsTable').DataTable({
        pageLength: 10,
        ordering: true,
        searching: true,
        scrollX: true,
        autoWidth: false
    });

});
</script>
@endpush