@extends('admin/layouts/default')

{{-- Page title --}}
@section('title')
    Store Reports List
    @parent
@stop

{{-- Page content --}}
@section('content')
    <section class="content-header">
        <h1 class="text-primary">Returned Material / Requests Report</h1>
        <ol class="breadcrumb">
            <li>
                <a href="{{ route('dashboard') }}">
                    <i class="livicon" data-name="home" data-size="16" data-color="#000"></i> Dashboard
                </a>
            </li>
            <li>Store Reports</li>
            <li class="active">Returned Material</li>
        </ol>
    </section>

    <section class="content paddingleft_right15">
        <div class="panel panel-primary report-panel">
            <div class="panel-body">

                {{-- Filter Form --}}
                <form id="filterForm" method="GET" action="{{ route('return.report') }}" class="form-inline report-filter mb-3">
                    <div class="form-group mx-2">
                        <label for="status" class="form-label">Status:</label>
                        <select name="status" class="form-control mx-2">
                            <option value="">All</option>
                            <option value="0" {{ request('status')=='0' ? 'selected' : '' }}>Pending</option>
                            <option value="1" {{ request('status')=='1' ? 'selected' : '' }}>Approved</option>
                        </select>
                    </div>

                    <div class="form-group mx-2">
                        <label for="date_from" class="form-label">Date From:</label>
                        <input type="date" name="date_from" value="{{ request('date_from') }}" class="form-control mx-2">
                    </div>

                    <div class="form-group mx-2">
                        <label for="date_to" class="form-label">To:</label>
                        <input type="date" name="date_to" value="{{ request('date_to') }}" class="form-control mx-2">
                    </div>

                    <button type="submit" class="btn btn-primary mx-2" id="filterBtn">
                        <i class="fa fa-filter"></i> Filter
                    </button>
                </form>

                {{-- Table --}}
                <div class="table-responsive" id="reportTable">
                    <table class="table table-bordered table-hover table-striped report-table">
                        <thead class="thead-dark">
                        <tr>
                            <th>#</th>
                            <th>Staff ID</th>
                            <th>Email</th>
                            <th>Description</th>
                            <th>Expert</th>
                            {{--<th>Teamleader Status</th>--}}
                            <th>Date</th>
                            <th>Model</th>
                            <th>Serial</th>
                            {{--<th>Status</th>--}}
                        </tr>
                        </thead>
                        <tbody>
                        @forelse($reports as $key => $report)
                            <tr>
                                <td>{{ $key + 1 }}</td>
                                <td>{{ $report->staffid }}</td>
                                <td>{{ $report->email }}</td>
                                {{-- UPDATED: Description cell to use a link that opens the modal --}}
                                <td>
                                    <a href="#" class="view-description-report"
                                       data-toggle="modal"
                                       data-target="#descriptionModal"
                                       data-description="{{ $report->description }}">
                                        View Details
                                    </a>
                                </td>
                                <td>{{ $report->expert }}</td>

                                {{--<?php--}}

                                {{--$teamstatus= $report->teamleader;--}}
                                {{--if ($teamstatus=='1'){--}}
                                  {{--?>--}}
                                {{--<td>Approved</td>--}}
                                {{--<?php--}}
                                        {{--}else{--}}
                                    {{--?>--}}
                                {{--<td>Rejected</td>--}}
                                {{--<?php--}}
                                        {{--}--}}
                                        {{--?>--}}

                                <td>{{ $report->date }}</td>
                                <td>{{ $report->model }}</td>
                                <td>{{ $report->serial }}</td>
                                {{--<td>--}}
                                {{--@if($report->status == 0)--}}
                                {{--<span class="badge bg-warning text-dark">Pending</span>--}}
                                {{--@elseif($report->status == 1)--}}
                                {{--<span class="badge bg-success">Approved</span>--}}
                                {{--@else--}}
                                {{--<span class="badge bg-danger">Rejected</span>--}}
                                {{--@endif--}}
                                {{--</td>--}}
                            </tr>
                        @empty
                            <tr>
                                <td colspan="10" class="text-center text-muted">No records found</td>
                            </tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>

    {{-- NEW: Bootstrap Modal Structure for Description --}}
    <div class="modal fade" id="descriptionModal" tabindex="-1" role="dialog" aria-labelledby="descriptionModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h5 class="modal-title" id="descriptionModalLabel">Request Description</h5>
                </div>
                <div class="modal-body" id="modalDescriptionBody">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@stop

{{-- Footer --}}
@section('footer_scripts')
    <style>
        /* ======== Report Styles ======== */
        .report-panel {
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .report-filter {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
        }

        .report-filter label {
            font-weight: 600;
            color: #333;
        }

        .report-table th {
            background-color: #a87193;
            color: #fff;
            text-align: center;
        }

        .report-table td {
            vertical-align: middle;
        }

        .badge {
            padding: 6px 10px;
            font-size: 0.85em;
        }

        #filterBtn {
            transition: 0.3s;
        }

        #filterBtn:hover {
            background-color: #0056b3;
        }

        /* Responsive fix */
        @media (max-width: 768px) {
            .report-filter {
                display: block;
            }
            .report-filter .form-group {
                display: block;
                margin-bottom: 10px;
            }
        }
    </style>

    {{-- AJAX Filter Logic & Modal Handler --}}
    <script>
        $(document).ready(function(){
            // Function to set up the description modal click handler
            function setupDescriptionModal() {
                // Attach click handler to the body and delegate to '.view-description-report'
                // This ensures it works even after AJAX updates the table content.
                $('body').on('click', '.view-description-report', function(e) {
                    e.preventDefault();
                    // Get the description text from the data-description attribute
                    var description = $(this).data('description');

                    // Set the modal's body content
                    $('#modalDescriptionBody').text(description);

                    // Manually show the modal if data-toggle isn't working for any reason
                    // $('#descriptionModal').modal('show');
                });
            }

            // Initial setup when the page loads
            setupDescriptionModal();


            $('#filterForm').on('submit', function(e){
                e.preventDefault();
                let url = $(this).attr('action');
                let data = $(this).serialize();

                $('#filterBtn').prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Filtering...');

                $.get(url, data, function(response){
                    // Replace table HTML (assuming your controller returns a partial view for the table)
                    $('#reportTable').html($(response).find('#reportTable').html());
                    $('#filterBtn').prop('disabled', false).html('<i class="fa fa-filter"></i> Filter');

                    // NOTE: Since the click handler is delegated to 'body',
                    // we don't need to call setupDescriptionModal() again here,
                    // but it's good practice to keep delegation for AJAX content.
                }).fail(function(){
                    alert('Something went wrong. Please try again.');
                    $('#filterBtn').prop('disabled', false).html('<i class="fa fa-filter"></i> Filter');
                });
            });
        });
    </script>
@stop