@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="panel-body">

                    {{-- Bootstrap Tabs --}}
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#new_requests" data-toggle="tab">New Requests</a></li>
                        <li><a href="#approved" data-toggle="tab">Approved Requests</a></li>
                    </ul>

                    <div class="tab-content" style="margin-top:20px;">

                        {{-- New Requests Tab --}}
                        <div class="tab-pane active" id="new_requests">
                            <div style="overflow-x:auto; white-space:nowrap;">
                                <table class="table table-bordered table-striped" id="table_new">
                                    <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Staffid</th>
                                        <th>Firstname</th>
                                        <th>Lastname</th>
                                        <th>Email</th>
                                        <th>Requestid</th>
                                        <th>Description</th> <th>Expert</th>
                                        <th>Date</th>
                                        <th>Model</th>
                                        <th>Serial</th>
                                        <th>Device Status</th>
                                        <th>Actions</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach ($returntostores->where('teamleader', '=', 0) as $returntostore)
                                        @php
                                            $staff = DB::table('staffrequests')
                                                ->where('id', $returntostore->staffid)
                                                ->first();
                                        @endphp
                                        <tr>
                                            <td>{{ $returntostore->id }}</td>
                                            <td>{{ $returntostore->staffid }}</td>
                                            <td>{{ $staff->firstname ?? 'N/A' }}</td>
                                            <td>{{ $staff->lastname ?? 'N/A' }}</td>
                                            <td>{{ $staff->email ?? 'N/A' }}</td>
                                            <td>{{ $returntostore->requestid }}</td>
                                            <td>
                                                <a href="#" class="description-link"
                                                   data-toggle="modal"
                                                   data-target="#descriptionModal"
                                                   data-description="{{ $returntostore->description }}">
                                                    View Description
                                                </a>
                                            </td>
                                            <td>{{ $returntostore->expert }}</td>
                                            <td>{{ $returntostore->date }}</td>
                                            <td>{{ $returntostore->model }}</td>
                                            <td>{{ $returntostore->serial }}</td>
                                            <td>{{ $returntostore->devicestatus }}</td>
                                            <td>
                                                <form action="{{ route('acceptsparepart', ['id' => $returntostore->id]) }}" method="POST" style="display:inline;">
                                                  <button type="submit" class="btn btn-success btn-sm" onclick="return confirm('Approve this request?')">
                                                        Approve
                                                    </button>
                                                </form>
                                            </td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        {{-- Approved Requests Tab --}}
                        <div class="tab-pane" id="approved">
                            <div style="overflow-x:auto; white-space:nowrap;">
                                <table class="table table-bordered table-striped" id="table_approved">
                                    <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>Device Status</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>{{ $approved->devicestatus }}</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