@extends('layouts.app')

@section('styles')
    <link rel="stylesheet" href="{{ asset('plugins/src/table/datatable/datatables.css') }}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
    <style>
        /* Buttons */
        /* Smaller, neat action buttons */
        .btn-action {
            border: none;
            border-radius: 20px;
            padding: 4px 10px;
            /* reduced size */
            font-size: 12px;
            /* smaller text */
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            transition: all 0.3s ease;
            cursor: pointer;
            color: #fff;
            margin: 2px;
            line-height: 1.2;
        }

        .btn-action i {
            font-size: 14px;
            /* smaller icons */
        }

        .btn-action.approve {
            background: linear-gradient(135deg, #28a745, #5cd17d);
        }

        .btn-action.reject {
            background: linear-gradient(135deg, #dc3545, #f87171);
        }

        .btn-action.view {
            background: linear-gradient(135deg, #007bff, #4da3ff);
        }

        .btn-action:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        /* Status Labels */
        .action-status {
            font-weight: 600;
            padding: 5px 12px;
            border-radius: 20px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .action-status.approved {
            background: #d4edda;
            color: #155724;
        }

        .action-status.rejected {
            background: #f8d7da;
            color: #721c24;
        }

        /* Make table responsive without scroll */
        #style-1 {
            width: 100%;
            table-layout: auto;
            /* Let columns adjust naturally */
            word-wrap: break-word;
            white-space: normal;
        }

        /* Ensure buttons wrap inside cell */
        #style-1 td.text-center {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            justify-content: center;
        }
    </style>

    @vite(['resources/scss/light/plugins/table/datatable/dt-global_style.scss'])
    @vite(['resources/scss/light/plugins/table/datatable/custom_dt_custom.scss'])
    @vite(['resources/scss/dark/plugins/table/datatable/dt-global_style.scss'])
    @vite(['resources/scss/dark/plugins/table/datatable/custom_dt_custom.scss'])

    <style>
        .filter-bar select {
            min-width: 180px;
            padding-left: 2rem;
            /* space for icon */
            background-position: 8px center;
            background-repeat: no-repeat;
            background-size: 14px;
        }

        /* Different icons for each filter */
        .filter-client {
            background-image: url('https://img.icons8.com/ios-filled/50/6c757d/user.png');
        }

        .filter-type {
            background-image: url('https://img.icons8.com/ios-filled/50/6c757d/briefcase.png');
        }

        .filter-status {
            background-image: url('https://img.icons8.com/ios-filled/50/6c757d/flag.png');
        }
    </style>
@endsection

@section('content')
    <div class="row layout-top-spacing">
        <div class="col-lg-12">
            <div class="statbox widget box box-shadow">
                <div class="widget-content widget-content-area">
                    <div
                        class="d-flex align-items-center justify-content-between gap-2 p-3 border rounded-3 shadow-sm flex-wrap">
                        <!-- Left Filters -->
                        <div class="d-flex align-items-center gap-2 flex-wrap">
                            <!-- Status -->
                            <select class="form-select form-select-sm rounded-pill px-3" style="width: 180px;">
                                <option value="">📌 All Status</option>
                                <option>⏳ Pending</option>
                                <option>✅ Approved</option>
                                <option>❌ Rejected</option>
                            </select>

                            <!-- Action Buttons -->
                            <button class="btn btn-sm btn-primary rounded-pill px-3">
                                <i class="fas fa-filter me-1"></i> Apply
                            </button>
                            <button class="btn btn-sm btn-outline-secondary rounded-pill px-3">
                                <i class="fas fa-undo me-1"></i> Reset
                            </button>
                        </div>


                    </div>
                    <table id="style-1" class="table style-1 dt-table-hover non-hover">
                        <thead>
                            <tr>
                                <th class="dt-no-sorting">S.No</th>
                                <th>Case Number</th>
                                <th>Client Name</th>
                                <th>Complainant</th>
                                <th>Forum</th>
                                <th>Stage of Matter</th>
                                <th>Next Hearing</th>
                                <th>Risk Rating</th>
                                <th>Status</th>
                                <th class="text-center dt-no-sorting">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Case 1 -->
                            <tr>
                                <td>1</td>
                                <td>CN-2025-001</td>
                                <td>John Doe</td>
                                <td>Mr. Sharma</td>
                                <td>State Forum, Delhi</td>
                                <td>Completion of Pleadings</td>
                                <td>2025-09-15</td>
                                <td>High</td>
                                <td><span class="badge bg-success">Approved</span></td>
                                <td class="text-center">
                                    <button class="btn-action view"><i class="bi bi-eye"></i> View</button>
                                </td>
                            </tr>

                            <!-- Case 2 -->
                            <tr>
                                <td>2</td>
                                <td>CN-2025-002</td>
                                <td>Jane Smith</td>
                                <td>Mr. Iqbal</td>
                                <td>District Forum, Mumbai</td>
                                <td>Application/Discovery</td>
                                <td>2025-08-25</td>
                                <td>Medium</td>
                                <td><span class="badge bg-danger">Rejected</span></td>
                                <td class="text-center">
                                    <button class="btn-action view"><i class="bi bi-eye"></i> View</button>
                                </td>
                            </tr>

                            <!-- Case 3 -->
                            <tr>
                                <td>3</td>
                                <td>CN-2025-003</td>
                                <td>Acme Corp</td>
                                <td>Mr. Khan</td>
                                <td>High Court, Chennai</td>
                                <td>Evidence</td>
                                <td>2025-10-10</td>
                                <td>High</td>
                                <td><span class="badge bg-warning">Pending</span></td>
                                <td class="text-center">
                                    <button class="btn-action approve"><i class="bi bi-check-circle"></i> Approve</button>
                                    <button class="btn-action reject"><i class="bi bi-x-circle"></i> Reject</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>




                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    {{-- Scripts Here --}}
    <script type="module" src="{{ asset('plugins/src/global/vendors.min.js') }}"></script>
    @vite(['resources/js/custom.js'])
    <script type="module" src="{{ asset('plugins/src/table/datatable/datatables.js') }}"></script>

    <script type="module">
        function multiCheck(tb_var) {
            tb_var.on("change", ".chk-parent", function() {
                    var e = $(this).closest("table").find("td:first-child .child-chk"),
                        a = $(this).is(":checked");
                    $(e).each(function() {
                        a ? ($(this).prop("checked", !0), $(this).closest("tr").addClass("active")) : ($(this)
                            .prop("checked", !1), $(this).closest("tr").removeClass("active"))
                    })
                }),
                tb_var.on("change", "tbody tr .new-control", function() {
                    $(this).parents("tr").toggleClass("active")
                })
        }

        // var e;
        let c1 = $('#style-1').DataTable({


            "dom": "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'f>>>" +
                "<'table-responsive'tr>" +
                "<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count  mb-sm-0 mb-3'i><'dt--pagination'p>>",
            "oLanguage": {
                "oPaginate": {
                    "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>',
                    "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>'
                },
                "sInfo": "Showing page _PAGE_ of _PAGES_",
                "sSearch": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
                "sSearchPlaceholder": "Search...",
                "sLengthMenu": "Results :  _MENU_",
            },
            "lengthMenu": [5, 10, 20, 50],
            "pageLength": 10
        });

        multiCheck(c1);
    </script>
@endsection