@extends('layout.master')

@push('plugin-styles')
  <link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
@endpush

@section('content')
<div class="container my-1">
    <div class="row mb-3">
        <div class="col-lg-12">
            <h1 class="display-4 mb-1">Direct Line</h1>
            <p class="lead text-muted">Get in touch with our support team directly through our dedicated contact line.</p>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            @if(session('success'))
                <div class="alert alert-success">{{ session('success') }}</div>
            @endif
            <div class="card mb-4">
                <div class="card-body">
                    <h3 class="card-title">Send Us a Message</h3>
                    <form action="{{ route('message.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="mb-3">
                <label for="message" class="form-label">Your Message</label>
                <textarea class="form-control" id="message" name="message" rows="4" required></textarea>
            </div>

            <!-- Input untuk Upload File -->
            <div class="mb-3">
                <label for="file" class="form-label">Upload File (Optional)</label>
                <input class="form-control" type="file" id="file" name="file">
            </div>

            <button type="submit" class="btn btn-primary">Send Message</button>
        </form>
                </div>
            </div>
        </div>
    </div>

    <!-- HISTORY -->
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
         <div class="card-body">
         <h3 class="card-title">History Direct Line</h3>
         <div class="table-responsive">
         <table id="dataTableExample" class="table">
    <thead>
        <tr>
            <th>User</th>
            <th>Email</th>
            <th>Date & Time</th>
            <th>Status</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        @foreach($messages as $message)
        <tr>
            <td>{{ $message->name }}</td>
            <td>{{ $message->email }}</td>
            <td>{{ $message->datetime }}</td>
            <td>
                @if($message->status == 'remark')
                    <span class="badge bg-success"><i class="bi bi-check-circle"></i> Read</span>
                @else
                    <span class="badge bg-danger"><i class="bi bi-exclamation-circle"></i> Unread</span>
                @endif
            </td>
            <td>
                <button type="button" class="btn btn-info btn-sm" data-bs-toggle="modal" data-bs-target="#viewMessageModal{{ $message->id }}">
                    View
                </button>

               <!-- Modal -->
<div class="modal fade" id="viewMessageModal{{ $message->id }}" tabindex="-1" aria-labelledby="viewMessageLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" style="max-width: 600px; width: 100%;">
        <div class="modal-content">
            <!-- Header Modal -->
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title fw-bold">Message Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <!-- Modal Body -->
<div class="modal-body">
    <div class="container-fluid">
        <!-- Message Information -->
        <div class="row mb-3">
            <div class="col-md-6 text-start">
                <p><strong>User:</strong> {{ $message->name }}</p>
                <p><strong>Email:</strong> {{ $message->email }}</p>
            </div>
            <div class="col-md-6 text-md-end">
                <p><strong>Date & Time:</strong> {{ $message->datetime }}</p>
                <p>
                    <strong>Status:</strong> 
                    <span class="badge {{ $message->status == 'remark' ? 'bg-success' : 'bg-danger' }}">
                        <i class="bi {{ $message->status == 'remark' ? 'bi-check-circle' : 'bi-exclamation-circle' }}"></i> 
                        {{ $message->status == 'remark' ? 'Read' : 'Unread' }}
                    </span>
                </p>
            </div>
        </div>

        <!-- Message Content -->
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-light fw-bold">Message Content</div>
            <div class="card-body text-start">
                <p class="text-dark">{{ $message->message }}</p>
            </div>
        </div>

        <!-- Display File (if available) -->
        @if($message->file_path)
            <div class="mt-3">
                <strong>Attached File:</strong> 
                <br>
                @if(Str::endsWith($message->file_path, ['.jpg', '.jpeg', '.png', '.gif'])) 
                    <!-- If Image -->
                    <img src="{{ asset('storage/' . $message->file_path) }}" class="img-fluid mt-2" style="max-width: 100%;" alt="Uploaded Image">
                @else
                    <!-- If Other File -->
                    <a href="{{ asset('storage/' . $message->file_path) }}" target="_blank">Download File</a>
                @endif
            </div>
        @endif

        <!-- Action Buttons -->
        <div class="row mt-3">
            <div class="col-md-12 text-center">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="bi bi-x-circle"></i> Close
                </button>
            </div>
        </div>
    </div>
</div>

        </div>
    </div>
</div>
<!-- End Modal -->

<!-- Custom CSS untuk pastikan teks turun ke bawah dan modal saiz normal -->
<style>
    .message-content {
        font-size: 16px;
        line-height: 1.5;
        white-space: normal; 
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }
</style>

                <!-- End Modal -->
            </td>
        </tr>
        @endforeach
    </tbody>
</table>


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

</div>
@endsection

@push('plugin-scripts')
  <script src="{{ asset('assets/plugins/datatables-net/jquery.dataTables.js') }}"></script>
  <script src="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.js') }}"></script>
@endpush

@push('custom-scripts')
  <script src="{{ asset('assets/js/data-table.js') }}"></script>
@endpush