@extends('admin/layouts/default')

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

{{-- Page content --}}
@section('content')
    <section class="content-header">

        <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>Returntostores</li>
            <li class="active">Returntostores</li>
        </ol>
    </section>

    <section class="content paddingleft_right15">
        <div class="row">
            <div class="panel panel-primary">
                <div class="panel-heading clearfix">
                    <h4 class="panel-title pull-left">
                        <i class="livicon" data-name="list-ul" data-size="16" data-loop="true" data-c="#fff" data-hc="white"></i>
                        Returntostores List
                    </h4>
                </div>

                <div class="tab-pane" id="approved">
                    <div style="overflow-x:auto; white-space:nowrap;">
                        <table class="table table-bordered table-striped" id="table1">
                            <thead>
                            <tr>
                                <th>Request Id</th>
                                <th>Staffid</th>
                                <th>Firstname</th>
                                <th>Lastname</th>
                                <th>Email</th>
                                <th>Description</th> <th>Expert</th>
                                <th>Date</th>
                                <th>Model</th>
                                <th>Serial</th>
                                <th>Status</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach ($returntostores->where('teamleader', 1) as $approved)
                                @php
                                    $staff = DB::table('staffrequests')
                                        ->where('id', $approved->staffid)
                                        ->first();
                                @endphp
                                <tr>
                                    <td>{{ $approved->id }}</td>
                                    <td>{{ $approved->staffid }}</td>
                                    <td>{{ $staff->firstname ?? 'N/A' }}</td>
                                    <td>{{ $staff->lastname ?? 'N/A' }}</td>
                                    <td>{{ $staff->email ?? 'N/A' }}</td>
                                    <td>
                                        <a href="#" class="description-link"
                                           data-toggle="modal"
                                           data-target="#descriptionModal"
                                           data-description="{{ $approved->description }}">
                                            View Description
                                        </a>
                                    </td>
                                    <td>{{ $approved->expert }}</td>
                                    <td>{{ $approved->date }}</td>
                                    <td>{{ $approved->model }}</td>
                                    <td>{{ $approved->serial }}</td>
                                    <td>
                                                <span class="text-success">
                                                    <i class="fa fa-check"></i> Approved
                                                </span>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>

            </div> </div> </div> </div> </section>

    <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>
                    <h4 class="modal-title" id="descriptionModalLabel">Full Description</h4>
                </div>
                <div class="modal-body">
                    <p id="modalDescriptionContent"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@stop

{{-- Footer scripts --}}
@section('footer_scripts')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css">

    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.print.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>

    <script>
        $(document).ready(function() {
            // Initialize DataTable for both tables
            $('#table_new, #table_approved').DataTable({
                dom: 'Bfrtip',
                buttons: [
                    'copy', 'csv', 'excel', 'pdf', 'print'
                ],
                paging: true,
                searching: true,
                autoWidth: false,
                scrollX: true
            });

            // JAVASCRIPT FOR MODAL
            // Use delegation (.on('click', ...)) because DataTables re-renders the table content (paging/searching)
            // This ensures the click handler works even for dynamically loaded rows.
            $('#table_new, #table_approved').on('click', '.description-link', function(e) {
                e.preventDefault();
                // Get the description from the data-description attribute of the clicked link
                var fullDescription = $(this).data('description');

                // Set the content of the modal body
                $('#modalDescriptionContent').text(fullDescription);
            });
        });
    </script>
@stop