@extends('layouts.app')

@section('content')
<div class="container mt-5">
    <div class="card shadow">
        <div class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
            <h4 class="mb-0">Service Request Management</h4>
        </div>
        <div class="card-body">
            <table class="table table-hover table-bordered text-center">
                <thead class="table-light">
                    <tr>
                        <th>ID</th>
                        <th>Customer Details</th>
                        <th>Product & Model</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($requests as $request)
                    <tr>
                        <td>{{ $request->complaint_id }}</td>
                        <td class="text-start">
                            <strong>{{ $request->customer_name }}</strong><br>
                            <small>{{ $request->phone_1 }}</small>
                        </td>
                        <td>{{ $request->product_name }} ({{ $request->product_model }})</td>
                        <td>
                            <span class="badge {{ $request->status == 'pending' ? 'bg-warning' : 'bg-success' }}">
                                {{ strtoupper($request->status) }}
                            </span>
                        </td>
                        <td>
                            <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#assignModal{{ $request->id }}">
                                <i class="fa fa-user-plus"></i> Assign Technician
                            </button>
                        </td>
                    </tr>

                    <div class="modal fade" id="assignModal{{ $request->id }}" tabindex="-1" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <form action="{{ route('admin.assign.technician', $request->id) }}" method="POST">
                                    @csrf
                                    <div class="modal-header">
                                        <h5 class="modal-title">Assign for #{{ $request->complaint_id }}</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                    </div>
                                    <div class="modal-body text-start">
                                        <div class="mb-3">
                                            <label class="form-label">Engineer/Technician Name</label>
                                            <input type="text" name="technician_name" class="form-control" placeholder="Md. Sagor Ali" required>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">Assistant Name</label>
                                            <input type="text" name="assistant_name" class="form-control" placeholder="Md. Hasan Ali">
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">Update Status</label>
                                            <select name="status" class="form-control">
                                                <option value="assigned" selected>Assign & Open Job Card</option>
                                                <option value="completed">Mark as Completed</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="submit" class="btn btn-success w-100">Confirm & Generate PDF</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection