@extends('layouts.app')

@section('title', 'Accounting Periods')

@section('content')
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="mb-0"><i class="bi bi-calendar-range me-2"></i>Accounting Periods</h4>
        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addPeriodModal">
            <i class="bi bi-plus-lg me-1"></i> New Period
        </button>
    </div>

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

    <div class="card">
        <div class="card-body p-0">
            <table class="table table-hover mb-0">
                <thead>
                    <tr>
                        <th>Period</th>
                        <th>Start Date</th>
                        <th>End Date</th>
                        <th>Status</th>
                        <th>Closed By</th>
                        <th>Closed At</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($periods as $period)
                        <tr>
                            <td class="fw-semibold">{{ $period->period_name }}</td>
                            <td>{{ $period->start_date->format('d M Y') }}</td>
                            <td>{{ $period->end_date->format('d M Y') }}</td>
                            <td>
                                <span
                                    class="badge bg-{{ match ($period->status) { 'open' => 'success', 'closed' => 'danger', 'reopened' => 'warning'} }}">
                                    {{ ucfirst($period->status) }}
                                </span>
                            </td>
                            <td>{{ $period->closedByUser->name ?? '—' }}</td>
                            <td>{{ $period->closed_at ? $period->closed_at->format('d M Y H:i') : '—' }}</td>
                            <td>
                                @if ($period->isOpen())
                                    <form action="{{ route('accounting.periods.close', $period) }}" method="POST" class="d-inline"
                                        onsubmit="return confirm('Close this period? No financial entries will be allowed for {{ $period->start_date->format('d M') }}–{{ $period->end_date->format('d M Y') }}.');">
                                        @csrf
                                        <button class="btn btn-sm btn-outline-danger">
                                            <i class="bi bi-lock me-1"></i>Close
                                        </button>
                                    </form>
                                @elseif ($period->isClosed())
                                    <button class="btn btn-sm btn-outline-warning" data-bs-toggle="modal"
                                        data-bs-target="#reopenModal{{ $period->id }}">
                                        <i class="bi bi-unlock me-1"></i>Reopen
                                    </button>

                                    {{-- Reopen Modal --}}
                                    <div class="modal fade" id="reopenModal{{ $period->id }}" tabindex="-1">
                                        <div class="modal-dialog">
                                            <form method="POST" action="{{ route('accounting.periods.reopen', $period) }}">
                                                @csrf
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title">Reopen Period</h5>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <p>Reopening <strong>{{ $period->period_name }}</strong>.</p>
                                                        <div class="mb-3">
                                                            <label class="form-label">Reason *</label>
                                                            <input type="text" name="reason" class="form-control" required
                                                                placeholder="Why are you reopening this period?">
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary"
                                                            data-bs-dismiss="modal">Cancel</button>
                                                        <button type="submit" class="btn btn-warning">Reopen Period</button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="text-center text-muted py-4">No accounting periods defined.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{-- Add Period Modal --}}
    <div class="modal fade" id="addPeriodModal" tabindex="-1">
        <div class="modal-dialog">
            <form method="POST" action="{{ route('accounting.periods.store') }}">
                @csrf
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Create Accounting Period</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label">Period Name *</label>
                            <input type="text" name="period_name" class="form-control" required
                                placeholder="e.g., January 2026">
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Start Date *</label>
                                <input type="date" name="start_date" class="form-control" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">End Date *</label>
                                <input type="date" name="end_date" class="form-control" required>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Create Period</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection