@extends('layouts.main')

@section('head')
<meta charset="utf-8">
<title>Announcements - MSPDCL Surya Ghar</title>
@endsection

@section('contents')
<div class="container-fluid">
    <x-bread-crumbs>
        <div class="float-right">
            <ol class="breadcrumb">
                <li class="breadcrumb-item active">Announcements</li>
            </ol>
        </div>
        <h4 class="page-title">Announcements</h4>
    </x-bread-crumbs>

    <div class="row mb-3">
        <div class="col-12 text-right">
            <a href="{{ route('announcements.create') }}" class="btn btn-primary">
                <i class="mdi mdi-plus mr-1"></i> Create Announcement
            </a>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    @if(session('success'))
                        <div class="alert alert-success">{{ session('success') }}</div>
                    @endif

                    @if($announcements->isEmpty())
                        <p class="text-muted">No announcements found.</p>
                    @else
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead class="thead-light">
                                    <tr>
                                        <th>Title</th>
                                        <th>Author</th>
                                        <th>Created</th>
                                        <th class="text-right">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($announcements as $announcement)
                                    <tr>
                                        <td>{{ $announcement->title }}</td>
                                        <td>{{ $announcement->author }}</td>
                                        <td>{{ $announcement->created_at->format('M d, Y') }}</td>
                                        <td class="text-right">
                                            <a href="{{ route('announcements.show', $announcement->id) }}" class="btn btn-sm btn-outline-info mr-1">View</a>
                                            <a href="{{ route('announcements.edit', $announcement->id) }}" class="btn btn-sm btn-outline-secondary mr-1">Edit</a>

                                            <form action="{{ route('announcements.destroy', $announcement->id) }}" method="POST" class="d-inline-block delete-announcement-form">
                                                @csrf
                                                @method('DELETE')
                                                <button type="button" class="btn btn-sm btn-outline-danger btn-delete">Delete</button>
                                            </form>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('otherJs')
<script>
$(document).on('click', '.btn-delete', function(e){
    e.preventDefault();
    const form = $(this).closest('form');
    Swal.fire({
        title: 'Delete Announcement? ',
        text: 'This action cannot be undone.',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Yes, delete it!'
    }).then((result) => {
        if (result.isConfirmed) {
            form.submit();
        }
    });
});
</script>
@endsection