@extends('layouts.home.index')
@section('title', 'Riwayat Laporan')
@include('report._js.index')

@push('style')
    <style>
        .form-control {
            padding: 0.375rem 2.25rem 0.375rem 0.75rem !important;
            border-radius: 0.375rem !important;
            border: 1px solid #ced4da !important;
            color: #212529 !important;
        }

        .title h1 {
            font-size: 30px !important;
            font-weight: 700;
        }
        
        .title span {
            font-weight: 400;
        }

        .btn-report {
            border-radius: 10px !important;
            font-weight: 400 !important;
            padding: 8px 50px !important;
        }

        .header {
            align-items: center !important;
        }

        .category {
            padding: 4px 20px !important;
            background-color: #085F94 !important;
            border-radius: 20px;
            color: #ffffff;
            font-size: 15px;
        }

        .created-at {
            font-size: 13px !important;
        }

        .btn-download {
            padding: 5px 20px !important;
            background-color: #085F94 !important;
            border-radius: 6px !important;
            color: #ffffff !important;
            font-size: 15px !important;
        }

        .btn-primary:hover {
            background-color: #218bcd !important;
            color: #ffffff !important;
            border: 1px solid #218bcd !important;
        }

        @media screen and (max-width: 768px) {
            .header {
                flex-direction: column !important;
                gap: 10px;
                align-items: start !important;
            }
        }
    </style>
@endpush

@section('content')
    <div class="container pb-5 pt-5 pt-xl-0">
        <div class="header d-flex justify-content-between">
            <div class="title">
                <h1 class="m-0 text-primary fw-bold">RIWAYAT <span class="text-dark fw-semilight">LAPORAN</span></h1>
            </div>

            <div class="">
                <a href="/rha-form" class="btn btn-primary btn-report">Tambah Laporan</a>
            </div>
        </div>

        <div class="row pt-5">
            <div class="col-12 col-sm-6 col-lg-4 mb-2">
                <input class="form-control" type="date" name="date" id="date" placeholder="Tanggal">
            </div>
            <div class="col-12 col-sm-6 col-lg-4 mb-2">
                <select class="form-select" name="category" id="category">

                </select>
            </div>
            <div class="col-12 col-sm-6 col-lg-4 mb-2">
                <input class="form-control" type="search" name="search" id="search" placeholder="Cari">
            </div>
        </div>

        <div class="row" id="report-history">
            
        </div>

        <nav aria-label="..." class="mt-5 d-flex justify-content-end">
            <ul class="pagination">
                
                </li>
            </ul>
        </nav>
    </div>

    <div id="detail-modal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Detail RHA</h5>
                    <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- Detail data akan ditampilkan di sini -->
                    
                </div>
                <div class="modal-footer">
                    <button class="btn btn-warning btn-edit">Ubah</button>
                    <button class="btn btn-primary btn-print">Cetak</button>
                </div>
            </div>
        </div>
    </div>
@endsection