@extends('layout.pcbms')

@section('title', 'Contracts')

@push('styles')
    <style>
        #contractTable {
            width: 100%;
        }

        #contractTable thead tr th {
            background-color: white;
            border-bottom: 1px #e9ecef solid;
        }

        #contractTable tbody tr {
            transition: background-color 0.2s ease;
        }

        #contractTable tbody tr:hover {
            background-color: #f8f9fa;
        }

        #contractTable tbody td {
            vertical-align: middle;
        }

        #contractTable thead th {
            vertical-align: middle;
        }

        #contractTable th {
            background-color: #f8f9fa;
            font-weight: 600;
            border-bottom: 2px solid #dee2e6;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button {
            padding: 0.5rem 0.75rem;
            margin: 0 0.25rem;
            border-radius: 0.25rem;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            background-color: #0d6efd;
            color: white;
            border-color: #0d6efd;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            background-color: #e9ecef;
            border-color: #dee2e6;
        }
    </style>
@endpush

@section('content')
    <div class="container-fluid">

        <div class="d-flex align-items-center justify-content-between">
            <div class="mb-4 px-4">
                <div class="fs-2 fw-bold">Contract Status</div>
                <p class="text-muted small">Overview of project scopes, assignments, and contracted metrics.</p>
            </div>

            <div  class="mb-4 px-4">
                <a href="{{ route('contracts.create')}}" class="btn btn-outline-primary btn-sm">
                    <i class="bi bi-plus-circle me-1"></i>
                    Create Contracts
                </a>
            </div>
        </div>
        

        <div class="card border-0 shadow-sm mx-4">
            <div class="card-header bg-white border-light-subtle align-items-center px-4 py-3">
                <div class="row mb-1 g-3">
                    <div class="col-md-3">
                        <label class="form-label small fw-bold">Grade Level</label>
                        <select id="filterGradeLevel" class="form-select form-select-sm">
                            <option value="">All Grade Levels</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label small fw-bold">Learning Area</label>
                        <select id="filterLearningArea" class="form-select form-select-sm">
                            <option value="">All Learning Areas</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label small fw-bold">Phase</label>
                        <select id="filterPhase" class="form-select form-select-sm">
                            <option value="">All Phases</option>
                        </select>
                    </div>
                    <div class="col-md-3 d-flex align-items-end gap-3">
                        <button onclick="resetFilters()" class="btn btn-outline-secondary btn-sm w-100">
                            <i class="bi bi-arrow-clockwise"></i> Reset
                        </button>

                        <button onclick="exportToExcel()" class="btn btn-success btn-sm w-50">
                            <i class="bi bi-file-earmark-excel"></i> Export Excel
                        </button>
                    </div>

                </div>
                
            </div>
            <div class="card-body p-4 overflow-auto">
                <table id="contractTable" class="table table-hover">
                    <thead>
                        <tr>
                            <th>Project Name</th>
                            <th>Lot</th>
                            <th>Contract Number</th>
                            <th>Grade Level</th>
                            <th>Learning Area</th>
                            <th>Phase</th>
                            <th>Date Updated</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@push('scripts')    
    <script src="{{ asset('assets/js/pbcems/contracts/tables.js') }}"></script>
@endpush