@extends('layouts.app')

@section('content')
<!-- start page title -->
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0 font-size-18">सूचनाहरू</h4>

            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item active">सूचनाहरू</li>
                </ol>
            </div>
        </div>
    </div>
</div>
<!-- end page title -->

@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

@if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        {{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-body">
                @if (auth()->user()->usertype == 1 || in_array('9', explode(',', auth()->user()->allowed_modules)))
                <div class="row">
                    <div class="col-sm">
                        <div class="mb-4">
                            <button type="button" class="btn btn-success waves-effect waves-light" data-bs-toggle="modal" data-bs-target="#addNoticeModal">
                                <i class="bx bx-plus me-1"></i> नयाँ सूचना थप्नुहोस्
                            </button>
                        </div>
                    </div>
                </div>
                @endif

                <!-- Data Table -->
                <div class="row">
                    <div class="col-12">
                        <table class="table align-middle datatable dt-responsive table-check nowrap" style="border-collapse: collapse; border-spacing: 0 8px; width: 100%;">
                            <thead>
                                <tr class="bg-transparent">
                                    <th width="5%">स. नं.</th>
                                    <th width="15%">सूचना प्रकार</th>
                                    <th width="25%">सूचना शीर्षक</th>
                                    <th width="15%">प्रकाशन मिति</th>
                                    <th width="15%">अन्तिम मिति</th>
                                    <th width="10%">स्थिति</th>
                                    <th width="15%">कार्य</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($notices as $sn => $data)
                                <tr>
                                    <td>{{ ++$sn }}</td>
                                    <td>
                                        <span class="badge bg-info">{{ $data->getNoticeTypeLabel() }}</span>
                                    </td>
                                    <td>
                                        <a href="{{ route('notices.show', $data->id) }}" class="text-dark">
                                            {{ Str::limit($data->notice_title, 40) }}
                                        </a>
                                    </td>
                                    <td>{{ $data->published_date->format('Y-m-d') }}</td>
                                    <td>{{ $data->last_date->format('Y-m-d') }}</td>
                                    <td>
                                        @if($data->last_date >= now()->toDateString())
                                            <span class="badge bg-success">सक्रिय</span>
                                        @else
                                            <span class="badge bg-danger">म्याद सकिएको</span>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="dropdown">
                                            <button class="btn btn-link font-size-16 shadow-none py-0 text-muted dropdown-toggle"
                                                    type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                                <i class="bx bx-dots-horizontal-rounded"></i>
                                            </button>
                                            <ul class="dropdown-menu dropdown-menu-end">
                                                <li>
                                                    <a class="dropdown-item" href="{{ route('notices.show', $data->id) }}">
                                                        <i class="bx bx-show me-1"></i> हेर्नुहोस्
                                                    </a>
                                                </li>
                                                @if (auth()->user()->usertype == 1 || in_array('7', explode(',', auth()->user()->allowed_modules)))
                                                <li>
                                                    <a class="dropdown-item" href="{{ route('notices.edit', $data->id) }}">
                                                        <i class="bx bx-edit me-1"></i> Edit
                                                    </a>
                                                </li>
                                                @endif

                                                @if (auth()->user()->usertype == 1 || in_array('8', explode(',', auth()->user()->allowed_modules)))
                                                <li>
                                                    <form action="{{ route('notices.destroy', $data->id) }}" method="POST" class="d-inline delete-form">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="dropdown-item delete-link" style="border: none; background: none;">
                                                            <i class="bx bx-trash me-1"></i> Delete
                                                        </button>
                                                    </form>
                                                </li>
                                                @endif
                                            </ul>
                                        </div>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="7" class="text-center">कुनै सूचना फेला परेन</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
                <!-- end table responsive -->
            </div>
            <!-- end card body -->
        </div>
        <!-- end card -->
    </div>
    <!-- end col -->
</div>
<!-- end row -->

<!-- Add Notice Modal -->
<div class="modal fade" id="addNoticeModal" tabindex="-1" aria-labelledby="addNoticeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addNoticeModalLabel">नयाँ सूचना थप्नुहोस्</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="addNoticeForm">
                @csrf
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="notice_type" class="form-label">सूचना प्रकार <span class="text-danger">*</span></label>
                                <select class="form-select" id="notice_type" name="notice_type" required>
                                    <option value="">सूचना प्रकार छान्नुहोस्</option>
                                    @foreach($noticeTypes as $key => $value)
                                        <option value="{{ $key }}">{{ $value }}</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback" id="notice_type_error"></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="notice_title" class="form-label">सूचना शीर्षक <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="notice_title" name="notice_title"
                                       placeholder="सूचना शीर्षक प्रविष्ट गर्नुहोस्" required>
                                <div class="invalid-feedback" id="notice_title_error"></div>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="notice_detail" class="form-label">सूचना विवरण <span class="text-danger">*</span></label>
                        <textarea class="form-control" id="notice_detail" name="notice_detail" rows="4"
                                  placeholder="सूचना विवरण प्रविष्ट गर्नुहोस्" required></textarea>
                        <div class="invalid-feedback" id="notice_detail_error"></div>
                    </div>

                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="published_date" class="form-label">प्रकाशन मिति <span class="text-danger">*</span></label>
                                <input type="date" class="form-control" id="published_date" name="published_date" required>
                                <div class="invalid-feedback" id="published_date_error"></div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="last_date" class="form-label">अन्तिम मिति <span class="text-danger">*</span></label>
                                <input type="date" class="form-control" id="last_date" name="last_date" required>
                                <div class="invalid-feedback" id="last_date_error"></div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="last_time" class="form-label">अन्तिम समय <span class="text-danger">*</span></label>
                                <input type="time" class="form-control" id="last_time" name="last_time" required>
                                <div class="invalid-feedback" id="last_time_error"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="bx bx-x me-1"></i> रद्द गर्नुहोस्
                    </button>
                    <button type="submit" class="btn btn-success" id="submitBtn">
                        <i class="bx bx-plus me-1"></i> थप्नुहोस्
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Set default published date to today
        document.getElementById('published_date').value = new Date().toISOString().split('T')[0];

        // Handle delete confirmation
        var deleteLinks = document.querySelectorAll('.delete-link');
        deleteLinks.forEach(function(link) {
            link.addEventListener('click', function(event) {
                event.preventDefault();
                var confirmDelete = confirm("के तपाईं यो सूचना मेटाउन चाहनुहुन्छ?");
                if (confirmDelete) {
                    this.closest('form').submit();
                }
            });
        });

        // Handle form submission
        document.getElementById('addNoticeForm').addEventListener('submit', function(e) {
            e.preventDefault();

            const submitBtn = document.getElementById('submitBtn');
            const originalText = submitBtn.innerHTML;
            submitBtn.innerHTML = '<i class="bx bx-loader bx-spin me-1"></i> थप्दै...';
            submitBtn.disabled = true;

            // Clear previous errors
            clearErrors();

            const formData = new FormData(this);

            fetch('{{ route("notices.store") }}', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Close modal and reload page
                    var modal = bootstrap.Modal.getInstance(document.getElementById('addNoticeModal'));
                    modal.hide();
                    location.reload();
                } else {
                    // Show validation errors
                    if (data.errors) {
                        showErrors(data.errors);
                    } else {
                        alert(data.message || 'केही समस्या भयो!');
                    }
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('केही समस्या भयो!');
            })
            .finally(() => {
                submitBtn.innerHTML = originalText;
                submitBtn.disabled = false;
            });
        });

        // Auto-hide alerts after 5 seconds
        setTimeout(function() {
            var alerts = document.querySelectorAll('.alert');
            alerts.forEach(function(alert) {
                if (alert.classList.contains('show')) {
                    alert.classList.remove('show');
                }
            });
        }, 5000);

        function clearErrors() {
            const errorElements = document.querySelectorAll('.invalid-feedback');
            const inputElements = document.querySelectorAll('.is-invalid');

            errorElements.forEach(el => el.textContent = '');
            inputElements.forEach(el => el.classList.remove('is-invalid'));
        }

        function showErrors(errors) {
            for (const [field, messages] of Object.entries(errors)) {
                const input = document.getElementById(field);
                const errorDiv = document.getElementById(field + '_error');

                if (input && errorDiv) {
                    input.classList.add('is-invalid');
                    errorDiv.textContent = messages[0];
                }
            }
        }
    });
</script>
@endsection