@extends('rental-company.layout.master')
@section('title', __('admin.drivers'))
@section('content')

<div class="container-xxl flex-grow-1 container-p-y">
    <div class="row">
        <div class="col-md-12">
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">{{ __('admin.drivers') }}</h5>
                    <a href="{{ route('rental-company.drivers.create') }}" class="btn btn-primary">
                        {{ __('admin.add_driver') }}
                    </a>
                </div>

                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered text-center align-middle">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>{{ __('admin.name') }}</th>
                                    <th>{{ __('admin.phone') }}</th>
                                    <th>{{ __('admin.image') }}</th>
                                    <th>{{ __('admin.status') }}</th>
                                    <th>{{ __('admin.action') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($drivers as $index => $driver)
                                    <tr>
                                        <td>{{ $drivers->firstItem() + $index }}</td>
                                        <td>{{ $driver->name }}</td>
                                        <td>({{ $driver->country_code }}) {{ $driver->phone }}</td>
                                        <td>
                                            <img src="{{ $driver->image }}" alt="Driver Image" width="60" class="rounded-circle">
                                        </td>
                                        <td>
                                            {!! $driver->is_blocked
                                                ? "<span class='badge bg-danger'>".__('admin.blocked')."</span>"
                                                : "<span class='badge bg-success'>".__('admin.active')."</span>" !!}
                                        </td>
                                        <td>
                                            <a href="{{ route('rental-company.drivers.edit', $driver->id) }}" class="btn btn-sm btn-primary">
                                                <i class="fa fa-edit"></i>
                                            </a>
                                            <form action="{{ route('rental-company.drivers.destroy', $driver->id) }}" method="POST" class="d-inline-block">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-danger delete-confirm">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </form>
                                            <!-- ✅ Notify Button -->
                                            <a href="{{ route('rental-company.drivers.notifyForm', $driver->id) }}" 
   class="btn btn-sm btn-warning">
   <i class="fa fa-bell"></i>
</a>

                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="card-footer">
                        {{ $drivers->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- ✅ Notification Modal -->
<div class="modal fade" id="notifyModal" tabindex="-1" aria-labelledby="notifyModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <form id="notifyForm" method="POST" action="">
            @csrf
            {{-- <input type="hidden" name="driver_id" id="driver_id"> --}}
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="notifyModalLabel">{{ __('Send Notification') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">{{ __('Title (EN)') }}</label>
                        <input type="text" name="title_en" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">{{ __('Title (AR)') }}</label>
                        <input type="text" name="title_ar" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">{{ __('Body (EN)') }}</label>
                        <textarea name="body_en" class="form-control" required></textarea>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">{{ __('Body (AR)') }}</label>
                        <textarea name="body_ar" class="form-control" required></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">{{ __('Send') }}</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- ✅ Script -->
@push('scripts')
<script>
  document.addEventListener('DOMContentLoaded', function () {
  const notifyModal = document.getElementById('notifyModal');
  const notifyForm  = document.getElementById('notifyForm');
  if (!notifyModal || !notifyForm) return;

  notifyModal.addEventListener('show.bs.modal', function (event) {
    const btn = event.relatedTarget;
    const url = btn ? btn.getAttribute('data-notify-url') : '';
    if (url) notifyForm.action = url;
  });
});
</script>

@endpush

@endsection