@extends('layouts.app')

@section('title', 'Case List')

@section('content')

<div class="container-fluid">

<style>

.btn-view-case {
    width: 36px;
    height: 36px;
    border-radius: 7px;
    border: 1px solid #5b4037;
    background: #fff;
    color: #5b4037;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease;
}

.btn-view-case:hover {
    background: #5b4037;
    color: #fff;
    transform: translateY(-1px);
}

.btn-view-case i {
    font-size: 16px;
}



/* =====================================================
   CASE LIST TABLE - FIXED COLUMN WIDTH
===================================================== */

/* =========================================================
   CASE LIST TABLE
========================================================= */

.case-table-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}


/* IMPORTANT */

.case-list-table {
    width: 100%;
    min-width: 1500px;
    table-layout: fixed;
    margin-bottom: 0;
}


/* =========================================================
   COLUMN WIDTHS
========================================================= */

/* Case No */

.case-list-table th:nth-child(1),
.case-list-table td:nth-child(1) {
    width: 90px;
    min-width: 90px;
}


/* CINO */

.case-list-table th:nth-child(2),
.case-list-table td:nth-child(2) {
    width: 190px;
    min-width: 190px;
}


/* Petitioner */

.case-list-table th:nth-child(3),
.case-list-table td:nth-child(3) {
    width: 260px;
    min-width: 260px;
}


/* Respondent */

.case-list-table th:nth-child(4),
.case-list-table td:nth-child(4) {
    width: 260px;
    min-width: 260px;
}


/* Petitioner Advocate */

.case-list-table th:nth-child(5),
.case-list-table td:nth-child(5) {
    width: 280px;
    min-width: 280px;
}


/* Case Type */

.case-list-table th:nth-child(6),
.case-list-table td:nth-child(6) {
    width: 220px;
    min-width: 220px;
}


/* Year */

.case-list-table th:nth-child(7),
.case-list-table td:nth-child(7) {
    width: 100px;
    min-width: 100px;
}


/* Action */

.case-list-table th:nth-child(8),
.case-list-table td:nth-child(8) {
    width: 130px;
    min-width: 130px;
    text-align: center;
}


/* =========================================================
   CELL DISPLAY
========================================================= */

.case-list-table th,
.case-list-table td {
    vertical-align: middle;
}


/* Case No / CINO / Year / Case Type */

.case-list-table th:nth-child(1),
.case-list-table td:nth-child(1),

.case-list-table th:nth-child(2),
.case-list-table td:nth-child(2),

.case-list-table th:nth-child(6),
.case-list-table td:nth-child(6),

.case-list-table th:nth-child(7),
.case-list-table td:nth-child(7) {
    white-space: nowrap;
}


/* Names */

.case-list-table td:nth-child(3),
.case-list-table td:nth-child(4),
.case-list-table td:nth-child(5) {
    white-space: normal;
    word-break: break-word;
}


/* =========================================================
   ACTION BUTTON
========================================================= */

.case-list-table .btn {
    white-space: nowrap;
}


/* Eye button */

.case-list-table .btn-view-detail {
    width: 42px;
    height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid #6b4a40;
    border-radius: 7px;

    background: #fff;
    color: #6b4a40;
}


/* Hover */

.case-list-table .btn-view-detail:hover {
    background: #5a3931;
    color: #fff;
}


/* =========================================================
   TABLE HEADER
========================================================= */

.case-list-table thead th {
    white-space: nowrap;
    vertical-align: middle;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .case-list-table {
        min-width: 1500px;
    }

}


</style>



    <!-- Header -->

    <div class="d-flex justify-content-between align-items-center mb-4">

        <div>

            <h3 class="fw-bold mb-1">

                <i class="bi bi-folder2-open"></i>

                Case List

            </h3>

            <p class="text-muted mb-0">
                All registered cases
            </p>

        </div>


        <div>

            <a
                href="{{ route('cases.search') }}"
                class="btn btn-dark"
            >

                <i class="bi bi-search me-1"></i>

                Search Case

            </a>

        </div>

    </div>


    <!-- Case List -->

    <div class="card border-0 shadow-sm">

        <div class="card-header bg-white py-3">

            <div class="d-flex justify-content-between align-items-center">

                <strong>

                    <i class="bi bi-table me-2"></i>

                    Cases

                </strong>


                <span class="badge bg-primary">

                    {{ number_format($cases->total()) }}

                    Records

                </span>

            </div>

        </div>




          <!-- Pagination -->


<div class="d-flex justify-content-between align-items-center mb-3">

    <div class="text-muted small">
        Showing
        <strong>{{ $cases->firstItem() }}</strong>
        to
        <strong>{{ $cases->lastItem() }}</strong>
        of
        <strong>{{ $cases->total() }}</strong>
        records
    </div>

    <form method="GET" action="{{ url('/cases') }}" class="d-flex align-items-center gap-2">

        <label for="per_page" class="mb-0 fw-semibold">
            Show:
        </label>

        <select
            name="per_page"
            id="per_page"
            class="form-select form-select-sm"
            style="width: 90px;"
            onchange="this.form.submit()"
        >
            <option value="20" {{ $perPage == 20 ? 'selected' : '' }}>
                20
            </option>

            <option value="50" {{ $perPage == 50 ? 'selected' : '' }}>
                50
            </option>

            <option value="100" {{ $perPage == 100 ? 'selected' : '' }}>
                100
            </option>

            <option value="500" {{ $perPage == 500 ? 'selected' : '' }}>
                500
            </option>
        </select>

        <span class="text-muted small">
            records
        </span>

    </form>

</div>

 <div class="card-footer bg-white">

            <div class="d-flex justify-content-center">

                {{ $cases->links() }}

            </div>

        </div>









        <div class="case-list-wrapper">

    <table class="table case-list-table align-middle">

                <thead class="table-dark">

                    <tr>

                        <th>Case No.</th>

                        <th>CINO</th>

                        <th>Petitioner</th>

                        <th>Respondent</th>

                        <th>Petitioner Advocate</th>

                        <th>Case Type</th>

                        <th>Year</th>

                        <th>Action</th>

                    </tr>

                </thead>


                <tbody>

                   

                @foreach($cases as $case)

    <tr>

        <td>
            {{ $case->caseno }}
        </td>

        <td>
            {{ $case->cino }}
        </td>

        <td>
            {{ $case->pet_name }}
        </td>

        <td>
            {{ $case->res_name }}
        </td>

        <td>
            {{ $case->pet_adv }}
        </td>

        <td>
            {{ $case->caseType->casename ?? '-' }}
        </td>

        <td>
            {{ $case->caseyear }}
        </td>

        <td>

            <button
                type="button"
                class="btn btn-sm btn-view-case"
                data-bs-toggle="modal"
                data-bs-target="#caseDetailModal{{ $case->id ?? $case->cino }}"
                title="View Full Case Detail"
            >
                <i class="bi bi-eye"></i>
            </button>

        </td>

    </tr>


    {{-- ================================
         CASE DETAIL MODAL
    ================================= --}}

    <div
        class="modal fade"
        id="caseDetailModal{{ $case->id ?? $case->cino }}"
        tabindex="-1"
        aria-hidden="true"
    >

        <div class="modal-dialog modal-xl modal-dialog-scrollable">

            <div class="modal-content">

                {{-- HEADER --}}

                <div class="modal-header case-modal-header">

                    <div>

                        <h5 class="modal-title fw-bold">

                            Case Details

                        </h5>

                        <div class="small">

                            {{ $case->caseType->casename ?? 'Case' }}
                            /
                            {{ $case->caseno }}
                            /
                            {{ $case->caseyear }}

                        </div>

                    </div>

                    <button
                        type="button"
                        class="btn-close btn-close-white"
                        data-bs-dismiss="modal"
                    ></button>

                </div>


                {{-- BODY --}}

                <div class="modal-body">

                    {{-- CASE TITLE --}}

                    <div class="modal-case-title mb-4">

                        <div class="modal-party">

                            {{ $case->pet_name ?? 'N/A' }}

                        </div>

                        <span class="modal-vs">

                            VS

                        </span>

                        <div class="modal-party">

                            {{ $case->res_name ?? 'N/A' }}

                        </div>

                    </div>


                    {{-- BASIC INFO --}}

                    <div class="detail-section mb-4">

                        <div class="detail-section-title">

                            <i class="bi bi-file-earmark-text"></i>

                            Case Information

                        </div>


                        <div class="row g-3">

                            <div class="col-md-3">

                                <div class="detail-label">
                                    Case Number
                                </div>

                                <div class="detail-value">
                                    {{ $case->caseno ?? '-' }}
                                </div>

                            </div>


                            <div class="col-md-3">

                                <div class="detail-label">
                                    Case Type
                                </div>

                                <div class="detail-value">
                                    {{ $case->caseType->casename ?? '-' }}
                                </div>

                            </div>


                            <div class="col-md-3">

                                <div class="detail-label">
                                    Year
                                </div>

                                <div class="detail-value">
                                    {{ $case->caseyear ?? '-' }}
                                </div>

                            </div>


                            <div class="col-md-3">

                                <div class="detail-label">
                                    CNR Number
                                </div>

                                <div class="detail-value">
                                    {{ $case->cino ?? '-' }}
                                </div>

                            </div>


                            <div class="col-md-3">

                                <div class="detail-label">
                                    Bench
                                </div>

                                <div class="detail-value">
                                    {{ $case->bench ?? '-' }}
                                </div>

                            </div>


                            <div class="col-md-3">

                                <div class="detail-label">
                                    Status
                                </div>

                                <div class="detail-value">

                                    @if($case->c_status === 'P')

                                        <span class="case-status pending">
                                            Pending
                                        </span>

                                    @elseif($case->c_status === 'D')

                                        <span class="case-status disposed">
                                            Disposed
                                        </span>

                                    @else

                                        {{ $case->c_status ?? '-' }}

                                    @endif

                                </div>

                            </div>


                            <div class="col-md-3">

                                <div class="detail-label">
                                    Filing Date
                                </div>

                                <div class="detail-value">

                                    @if($case->fil_dt)

                                        {{ \Carbon\Carbon::parse($case->fil_dt)->format('d M Y H:i') }}

                                    @else

                                        -

                                    @endif

                                </div>

                            </div>


                            <div class="col-md-3">

                                <div class="detail-label">
                                    Case Pages
                                </div>

                                <div class="detail-value">
                                    {{ $case->case_pages ?? '-' }}
                                </div>

                            </div>

                        </div>

                    </div>


                    {{-- PARTIES --}}

                    <div class="row g-3">

                        {{-- PETITIONER --}}

                        <div class="col-md-6">

                            <div class="party-detail-card petitioner-detail">

                                <div class="party-detail-heading">

                                    <i class="bi bi-person-fill"></i>

                                    PETITIONER

                                </div>


                                <div class="party-detail-body">

                                    <div class="detail-label">
                                        Name
                                    </div>

                                    <div class="detail-value mb-3">

                                        {{ $case->pet_name ?? '-' }}

                                    </div>


                                    <div class="detail-label">
                                        Advocate
                                    </div>

                                    <div class="detail-value">

                                        {{ $case->pet_adv ?? '-' }}

                                    </div>

                                </div>

                            </div>

                        </div>


                        {{-- RESPONDENT --}}

                        <div class="col-md-6">

                            <div class="party-detail-card respondent-detail">

                                <div class="party-detail-heading">

                                    <i class="bi bi-people-fill"></i>

                                    RESPONDENT

                                </div>


                                <div class="party-detail-body">

                                    <div class="detail-label">
                                        Name
                                    </div>

                                    <div class="detail-value mb-3">

                                        {{ $case->res_name ?? '-' }}

                                    </div>


                                    <div class="detail-label">
                                        Advocate
                                    </div>

                                    <div class="detail-value">

                                        {{ $case->res_adv ?? '-' }}

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>


                    {{-- OTHER INFORMATION --}}

                    <div class="detail-section mt-4">

                        <div class="detail-section-title">

                            <i class="bi bi-info-circle"></i>

                            Additional Information

                        </div>


                        <div class="row g-3">

                            <div class="col-md-4">

                                <div class="detail-label">
                                    District
                                </div>

                                <div class="detail-value">
                                    {{ $case->district ?? '-' }}
                                </div>

                            </div>


                            <div class="col-md-4">

                                <div class="detail-label">
                                    Last Order
                                </div>

                                <div class="detail-value">
                                    {{ $case->lastorder ?? '-' }}
                                </div>

                            </div>


                            <div class="col-md-4">

                                <div class="detail-label">
                                    List Order
                                </div>

                                <div class="detail-value">
                                    {{ $case->listorder ?? '-' }}
                                </div>

                            </div>


                            <div class="col-md-4">

                                <div class="detail-label">
                                    Tentative Date
                                </div>

                                <div class="detail-value">

                                    @if($case->tentative_cl_dt)

                                        {{ \Carbon\Carbon::parse($case->tentative_cl_dt)->format('d M Y') }}

                                    @else

                                        -

                                    @endif

                                </div>

                            </div>


                            <div class="col-md-4">

                                <div class="detail-label">
                                    Relief
                                </div>

                                <div class="detail-value">

                                    {{ $case->relief ?? '-' }}

                                </div>

                            </div>


                            <div class="col-md-4">

                                <div class="detail-label">
                                    Category
                                </div>

                                <div class="detail-value">

                                    {{ $case->category ?? '-' }}

                                </div>

                            </div>

                        </div>

                    </div>

                </div>


                {{-- FOOTER --}}

                <div class="modal-footer">

                    <button
                        type="button"
                        class="btn btn-secondary"
                        data-bs-dismiss="modal"
                    >

                        Close

                    </button>

                </div>

            </div>

        </div>

    </div>

@endforeach
                







                </tbody>

            </table>

        </div>


        <!-- Pagination -->


<div class="d-flex justify-content-between align-items-center mb-3">

    <div class="text-muted small">
        Showing
        <strong>{{ $cases->firstItem() }}</strong>
        to
        <strong>{{ $cases->lastItem() }}</strong>
        of
        <strong>{{ $cases->total() }}</strong>
        records
    </div>

    <form method="GET" action="{{ url('/cases') }}" class="d-flex align-items-center gap-2">

        <label for="per_page" class="mb-0 fw-semibold">
            Show:
        </label>

        <select
            name="per_page"
            id="per_page"
            class="form-select form-select-sm"
            style="width: 90px;"
            onchange="this.form.submit()"
        >
            <option value="20" {{ $perPage == 20 ? 'selected' : '' }}>
                20
            </option>

            <option value="50" {{ $perPage == 50 ? 'selected' : '' }}>
                50
            </option>

            <option value="100" {{ $perPage == 100 ? 'selected' : '' }}>
                100
            </option>

            <option value="500" {{ $perPage == 500 ? 'selected' : '' }}>
                500
            </option>
        </select>

        <span class="text-muted small">
            records
        </span>

    </form>

</div>





        <div class="card-footer bg-white">

            <div class="d-flex justify-content-center">

                {{ $cases->links() }}

            </div>

        </div>

    </div>

</div>

@endsection

