@extends('layouts.app')

@section('title', 'কমিটি ব্যবস্থাপনা - আমবাগান যুব কল্যাণ সমিতি')

@section('styles')
<style>
    .committee-card {
        border-left: 5px solid #1a5f7a;
        border-radius: 8px;
        margin-bottom: 20px;
        transition: all 0.3s;
    }
    
    .committee-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }
    
    .committee-card.active {
        border-left-color: #28a745;
    }
    
    .committee-card.expired {
        border-left-color: #6c757d;
    }
    
    .badge-active {
        background-color: #d4edda;
        color: #155724;
        padding: 5px 15px;
        border-radius: 20px;
    }
    
    .badge-expired {
        background-color: #e2e3e5;
        color: #383d41;
        padding: 5px 15px;
        border-radius: 20px;
    }
    
    .committee-id {
        font-family: monospace;
        background-color: #f8f9fa;
        padding: 5px 10px;
        border-radius: 5px;
        font-size: 0.9rem;
    }
    
    .member-count {
        font-size: 0.9rem;
        color: #6c757d;
    }
    
    .filter-form {
        background-color: #f8f9fa;
        padding: 20px;
        border-radius: 10px;
        margin-bottom: 20px;
    }
    
    .current-committee-box {
        background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
        border: 2px solid #28a745;
        border-radius: 10px;
        padding: 15px;
        margin-bottom: 20px;
    }
</style>
@endsection

@section('breadcrumbs')
<nav aria-label="breadcrumb">
    <ol class="breadcrumb bg-light">
        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">ড্যাশবোর্ড</a></li>
        <li class="breadcrumb-item active">কমিটি ব্যবস্থাপনা</li>
    </ol>
</nav>
@endsection

@section('content')
<div class="container-fluid">
    <!-- ফিল্টার ফর্ম -->
    <div class="filter-form">
        <h5 class="mb-3"><i class="fas fa-filter me-2"></i>ফিল্টার করুন</h5>
        <form method="GET" action="{{ route('committees.index') }}">
            <div class="row">
                <div class="col-md-3 mb-3">
                    <label for="status" class="form-label">স্ট্যাটাস</label>
                    <select name="status" id="status" class="form-select">
                        <option value="">সকল স্ট্যাটাস</option>
                        <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>সক্রিয়</option>
                        <option value="expired" {{ request('status') == 'expired' ? 'selected' : '' }}>মেয়াদোত্তীর্ণ</option>
                    </select>
                </div>
                
                <div class="col-md-3 mb-3">
                    <label for="year" class="form-label">বছর</label>
                    <select name="year" id="year" class="form-select">
                        <option value="">সকল বছর</option>
                        @php
                            $currentYear = date('Y');
                            for ($year = 2020; $year <= $currentYear + 5; $year++) {
                                $selected = request('year') == $year ? 'selected' : '';
                                echo "<option value='$year' $selected>$year</option>";
                            }
                        @endphp
                    </select>
                </div>
                
                <div class="col-md-4 mb-3">
                    <label for="search" class="form-label">অনুসন্ধান</label>
                    <input type="text" name="search" id="search" class="form-control" 
                        value="{{ request('search') }}" placeholder="কমিটি আইডি, নাম বা সদস্যের নাম">
                </div>
                
                <div class="col-md-2 mb-3 d-flex align-items-end">
                    <div class="d-grid gap-2 w-100">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-search me-2"></i>খুঁজুন
                        </button>
                        <button type="button" id="resetFilter" class="btn btn-outline-secondary btn-sm">
                            <i class="fas fa-redo me-1"></i> রিসেট
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    
    <!-- একশন বাটন -->
    <div class="row mb-4">
        <div class="col-md-12">
            <div class="d-flex justify-content-between">
                <div class="btn-group" role="group">
                    <a href="{{ route('committees.index') }}" class="btn btn-outline-primary {{ request()->routeIs('committees.index') ? 'active' : '' }}">
                        <i class="fas fa-list me-2"></i>সকল কমিটি
                    </a>
                    @if($currentCommittee)
                    <a href="{{ route('committees.current') }}" class="btn btn-outline-success">
                        <i class="fas fa-star me-2"></i>বর্তমান কমিটি
                    </a>
                    @endif
                    
                    @if(Route::has('committees.report'))
                    <a href="{{ route('committees.report') }}" class="btn btn-info ms-1">
                        <i class="fas fa-chart-bar me-1"></i>রিপোর্ট
                    </a>
                    @else
                    <a href="#" class="btn btn-info ms-1 disabled" title="রিপোর্ট ফিচার শীঘ্রই আসছে">
                        <i class="fas fa-chart-bar me-1"></i>রিপোর্ট
                    </a>
                    @endif
                </div>
                
                <div>
                    <a href="{{ route('committees.create') }}" class="btn btn-primary">
                        <i class="fas fa-plus me-2"></i>নতুন কমিটি
                    </a>
                </div>
            </div>
        </div>
    </div>
    
    <!-- বর্তমান কমিটি তথ্য (যদি থাকে) -->
    @if($currentCommittee)
    <div class="current-committee-box">
        <div class="row align-items-center">
            <div class="col-md-8">
                <h5 class="mb-1">
                    <i class="fas fa-crown text-success me-2"></i>
                    {{ $currentCommittee->committee_name }}
                    <span class="badge bg-success ms-2">বর্তমান কমিটি</span>
                </h5>
                <p class="mb-1">
                    <small>
                        <i class="fas fa-calendar-alt me-1"></i>
                        {{ $currentCommittee->start_date->format('d/m/Y') }} - {{ $currentCommittee->end_date->format('d/m/Y') }}
                        | 
                        <i class="fas fa-users me-1"></i>
                        {{ $currentCommittee->members()->count() }} সদস্য
                        |
                        <span class="committee-id">{{ $currentCommittee->committee_id }}</span>
                    </small>
                </p>
            </div>
            <div class="col-md-4 text-end">
                <a href="{{ route('committees.show', $currentCommittee) }}" class="btn btn-success btn-sm">
                    <i class="fas fa-eye me-2"></i>বিস্তারিত
                </a>
                <a href="{{ route('committees.print-committee-card', $currentCommittee) }}" class="btn btn-info btn-sm" target="_blank">
                    <i class="fas fa-print me-2"></i>প্রিন্ট
                </a>
            </div>
        </div>
    </div>
    @endif
    
    <!-- কমিটি তালিকা -->
    @if($committees->isEmpty())
    <div class="text-center py-5">
        <i class="fas fa-users fa-4x text-muted mb-3"></i>
        <h4>কোনো কমিটি পাওয়া যায়নি</h4>
        <p class="text-muted">আপনার প্রথম কমিটি গঠন করুন।</p>
        <a href="{{ route('committees.create') }}" class="btn btn-primary mt-3">
            <i class="fas fa-plus me-2"></i>প্রথম কমিটি গঠন করুন
        </a>
    </div>
    @else
    <div class="row">
        @foreach($committees as $committee)
        <div class="col-md-6 col-lg-4 mb-4">
            <div class="card committee-card {{ $committee->status }} h-100">
                <div class="card-body d-flex flex-column">
                    <div class="flex-grow-1">
                        <div class="d-flex justify-content-between align-items-start mb-3">
                            <div>
                                <h5 class="card-title mb-2">{{ $committee->committee_name }}</h5>
                                <div class="committee-id mb-2">{{ $committee->committee_id }}</div>
                                <span class="badge-{{ $committee->status }}">
                                    {{ $committee->status_in_bangla }}
                                </span>
                            </div>
                            
                            <div class="text-end">
                                <div class="member-count">
                                    <i class="fas fa-users me-1"></i>
                                    {{ $committee->members()->count() }} সদস্য
                                </div>
                                <small class="text-muted d-block mt-1">
                                    <i class="fas fa-calendar me-1"></i>
                                    {{ $committee->start_date->format('Y') }}
                                </small>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <div class="row">
                                <div class="col-6">
                                    <small class="text-muted">
                                        <i class="fas fa-calendar-alt me-1"></i>
                                        শুরু: {{ $committee->start_date->format('d/m/Y') }}
                                    </small>
                                </div>
                                <div class="col-6 text-end">
                                    <small class="text-muted">
                                        <i class="fas fa-calendar-times me-1"></i>
                                        শেষ: {{ $committee->end_date->format('d/m/Y') }}
                                    </small>
                                </div>
                            </div>
                        </div>
                        
                        @if($committee->remarks)
                        <div class="alert alert-light mb-3">
                            <small class="text-muted">{{ Str::limit($committee->remarks, 100) }}</small>
                        </div>
                        @endif
                    </div>
                    
                    <div class="mt-auto">
                        <div class="d-flex justify-content-between">
                            <a href="{{ route('committees.show', $committee) }}" class="btn btn-sm btn-outline-primary">
                                <i class="fas fa-eye me-1"></i> বিস্তারিত
                            </a>
                            
                            <div class="btn-group btn-group-sm">
                                <a href="{{ route('committees.edit', $committee) }}" class="btn btn-outline-warning">
                                    <i class="fas fa-edit"></i>
                                </a>
                                @if($committee->status == 'expired')
                                <form action="{{ route('committees.destroy', $committee) }}" method="POST" class="d-inline delete-form">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-outline-danger" onclick="return confirm('আপনি কি নিশ্চিত? এই কমিটি মুছে ফেলা হবে।')">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                                @endif
                                <a href="{{ route('committees.print-committee-card', $committee) }}" class="btn btn-outline-info" target="_blank">
                                    <i class="fas fa-print"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>
    
    <!-- পেজিনেশন -->
    <div class="d-flex justify-content-center mt-4">
        {{ $committees->withQueryString()->links() }}
    </div>
    @endif
</div>
@endsection

@section('scripts')
<script>
$(document).ready(function() {
    // ফিল্টার রিসেট
    $('#resetFilter').click(function() {
        $('#status').val('');
        $('#year').val('');
        $('#search').val('');
        window.location.href = "{{ route('committees.index') }}";
    });
    
    // বছরের ফিল্টার
    $('#year').change(function() {
        $(this).closest('form').submit();
    });
    
    // কমিটি কার্ড হোভার এফেক্ট
    $('.committee-card').hover(
        function() {
            $(this).addClass('shadow-lg');
        },
        function() {
            $(this).removeClass('shadow-lg');
        }
    );
});
</script>
@endsection