@extends('dashboard.base')

@section('css')
<link href="{{ asset('css/cropper.css') }}" rel="stylesheet">
<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">
@endsection

@section('content')

<div class="container-fluid">
    <script>
        setTimeout(function() {
            document.querySelector('.alert-success')?.remove();
        }, 5000);
    </script>

    @if (session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
    @endif

    @if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <div class="fade-in">
        <div class="row">
            <div class="col-sm-12">
                <div class="card">

                    {{-- Tabs --}}
                    <ul class="nav nav-tabs" id="complaintTabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="new-complaint-tab" data-toggle="tab" href="#newComplaint" role="tab">New Query</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="previous-complaints-tab" data-toggle="tab" href="#previousComplaints" role="tab">Previous Queries</a>
                        </li>
                    </ul>

                    <div class="tab-content p-3">
                        {{-- New Complaint Form --}}
                        <div class="tab-pane fade show active" id="newComplaint" role="tabpanel">
                            <form action="{{ route('consumer.complaints.store') }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                <div class="form-group inner-space">
                                    <label for="complainant_name">Your Name</label>
                                    <input type="text" class="form-control" id="complainant_name" name="complainant_name" placeholder="Your Name" required>
                                </div>
                                <div class="form-row inner-space">
                                    <div class="form-group col-md-6">
                                        <label for="email">Your Email</label>
                                        <input type="email" class="form-control" id="email" name="email" placeholder="Email" required>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="phone">Phone Number</label>
                                        <input type="text" class="form-control" id="phone" name="phone" placeholder="Phone Number" required>
                                    </div>
                                </div>
                                <div class="form-group inner-space">
                                    <label for="organisation">Organisation</label>
                                    <input type="text" class="form-control" id="organisation" name="organisation" placeholder="Organisation or Institution">
                                </div>
                                <div class="form-row inner-space">
                                    <div class="form-group col-md-4">
                                        <label for="location">Location</label>
                                        <input type="text" class="form-control" id="location" name="location" placeholder="Location">
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label for="city">City</label>
                                        <input type="text" class="form-control" id="city" name="city" placeholder="City">
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label for="country">Country</label>
                                        <input type="text" class="form-control" id="country" name="country" placeholder="Country">
                                    </div>
                                </div>
                                <div class="form-group inner-space">
                                    <label for="subject">Subject</label>
                                    <input type="text" class="form-control" id="subject" name="subject" placeholder="Subject" required>
                                </div>

                                <div class="form-group inner-space">
                                    <label for="description">Description</label>
                                    <textarea class="form-control" id="description" name="description" rows="4" placeholder="Description" required></textarea>
                                </div>

                               
                                        
                                <div class="form-row justify-content-end inner-space">
                                    <button type="submit" class="btn btn-orange mr-2">Submit Query</button>
                                    <button type="reset" class="btn btn-dark">Cancel</button>
                                </div>
                            </form> 
                        </div>

                        {{-- Previous Complaints Table --}}
                        <div class="tab-pane fade" id="previousComplaints" role="tabpanel">
                            <div class="card-header"><h4>Previously Submitted Queries</h4></div>

                            <table class="table table-bordered table-hover mt-3" id="previousComplaintsTable">
                                <thead class="thead-light">
                                    <tr>
                                        <th>#</th>
                                        <th>Subject</th>
                                        <th>Status</th>
                                        <th>Date Submitted</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($consumerComplaints as $complaint)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td>{{ $complaint->subject }}</td>
                                        <td>
                                            <span class="badge {{ ($complaint->status ?? 'Pending') == 'pending' ? 'badge-secondary' : 'badge-success' }}">
                                                {{ $complaint->status ?? 'Pending' }}
                                            </span>
                                        </td>
                                        <td>{{ \Carbon\Carbon::parse($complaint->created_at)->format('Y-m-d') }}</td>
                                        <td class="text-center">
                                            <!-- View messages from DB -->
                                            <button 
                                                class="btn btn-sm btn-info view-messages" 
                                                data-message="{{ $complaint->message ?? 'This query was received, we are currently working on the issue.' }}" 
                                                data-toggle="modal" 
                                                data-target="#messagesModal">
                                                💬
                                            </button>

                                            <!-- View full complaint -->
                                            <button 
                                                class="btn btn-sm btn-primary view-complaint" 
                                                data-subject="{{ e($complaint->subject) }}"
                                                data-description="{{ e($complaint->description) }}"
                                                data-status="{{ e($complaint->status ?? 'Pending') }}"
                                                data-date="{{ \Carbon\Carbon::parse($complaint->created_at)->format('Y-m-d') }}">
                                                👁️
                                            </button>
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="5" class="text-center">No previous complaints found.</td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>

                        <!-- Messages Modal -->
                        <div class="modal fade" id="messagesModal" tabindex="-1" role="dialog" aria-hidden="true">
                            <div class="modal-dialog modal-lg" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title">Messages</h5>
                                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                                    </div>
                                    <div class="modal-body" id="messagesContent">
                                        <!-- Message will be injected via JS -->
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Full Complaint Modal -->
                        <div class="modal fade" id="complaintModal" tabindex="-1" role="dialog" aria-hidden="true">
                            <div class="modal-dialog modal-lg" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title">Complaint Details</h5>
                                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                                    </div>
                                    <div class="modal-body">
                                        <p><strong>Subject:</strong> <span id="complaintSubject"></span></p>
                                        <p><strong>Status:</strong> <span id="complaintStatus"></span></p>
                                        <p><strong>Date Submitted:</strong> <span id="complaintDate"></span></p>
                                        <p><strong>Description:</strong></p>
                                        <p id="complaintDescription"></p>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div> <!-- tab-content -->

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

<style>
.btn-orange {
    background-color: #f77f00;
    color: #fff;
    border: none;
}
.btn-orange:hover {
    background-color: #e76f00;
}
.inner-space {
    padding-left: 20px;
    padding-right: 20px;
}
</style>

@endsection

@section('javascript')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.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.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 Previous Queries tab
    $('#previousComplaintsTable').DataTable({
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'pdfHtml5',
                text: 'Download PDF',
                className: 'btn btn-primary btn-sm',
                title: 'Previously Submitted Queries',
                exportOptions: { columns: [0,1,2,3] }
            }
        ],
        pageLength: 10,
        order: [[3, 'desc']]
    });

    // View full complaint modal
    $('.view-complaint').on('click', function () {
        $('#complaintSubject').text($(this).attr('data-subject'));
        $('#complaintStatus').text($(this).attr('data-status'));
        $('#complaintDate').text($(this).attr('data-date'));
        $('#complaintDescription').text($(this).attr('data-description'));
        $('#complaintModal').modal('show');
    });

    // View message modal
    $('.view-messages').on('click', function () {
        let message = $(this).data('message') ?? 'This query was received, we are currently working on the issue.';
        $('#messagesContent').text(message);
        $('#messagesModal').modal('show');
    });
});
</script>
@endsection