@extends('dashboard.layouts.base')
@section('content')
<style>
    .card-header::after {
        content: none !important;
    }

</style>

<div class="col-12">
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center" style="direction: rtl;">
            <h3 class="card-title mb-0">بيانات مقدم الخدمة</h3>
            <a href="{{ route('dashboard.providers.index') }}" class="btn btn-secondary">رجوع</a>
        </div>

        <div class="card-body" style="direction: rtl;">
            <div class="row mb-3 justify-content-center">
                <div class="col-md-12 text-center">
                    @if($provider->image)
                    <img src="{{ $provider->image }}" alt="Provider Image" class="img-thumbnail rounded-circle" style="width: 150px; height: 150px; object-fit: cover;">
                    @else
                    <p class="text-muted">لا يوجد صورة</p>
                    @endif
                </div>
            </div>

            <div class="row mb-3">
                <div class="col-md-6">
                    <h5>الاسم الأول:</h5>
                    <p>{{ $provider->first_name }}</p>
                </div>
                <div class="col-md-6">
                    <h5>الاسم الأخير:</h5>
                    <p>{{ $provider->last_name }}</p>
                </div>
            </div>

            <div class="row mb-3">
                <div class="col-md-6">
                    <h5>البريد الإلكتروني:</h5>
                    <p>{{ $provider->email }}</p>
                </div>
                <div class="col-md-6">
                    <h5>رقم الهاتف:</h5>
                    <p>{{ $provider->country_code . ' ' . $provider->phone }}</p>
                </div>
            </div>

            <div class="row mb-3">
                <div class="col-md-6">
                    <h5>النوع:</h5>
                    <p>{{ $provider->gender == 'male' ? 'ذكر' : 'أنثى' }}</p>
                </div>
                <div class="col-md-6">
                    <h5>الحالة:</h5>
                    <span class="badge bg-{{ $provider->status == 'accepted' ? 'success' : ($provider->status == 'reject' ? 'danger' : 'warning') }}">
                        {{ $provider->status == 'accepted' ? 'مقبول' : ($provider->status == 'reject' ? 'مرفوض' : 'قيد المراجعة') }}
                    </span>
                </div>
            </div>

            @if($provider->status == 'reject' && $provider->rejection_reason)
            <div class="row mb-3">
                <div class="col-12">
                    <h5>أسباب الرفض:</h5>
                    <div class="alert alert-danger" role="alert">
                        <div class="mb-2">
                            <strong>العربية:</strong> {{ $provider->rejection_reason['ar'] ?? '-' }}
                        </div>
                        <div class="mb-2">
                            <strong>English:</strong> {{ $provider->rejection_reason['en'] ?? '-' }}
                        </div>
                        <div>
                            <strong>اردو:</strong> {{ $provider->rejection_reason['ur'] ?? '-' }}
                        </div>
                    </div>
                </div>
            </div>
            @endif

            <div class="row mb-3">
                <div class="col-md-6">
                    <h5>القسم:</h5>
                    <p>{{ $provider->category->getTranslation('name', 'ar') ?? '-' }}</p>
                </div>
                <div class="col-md-6">
                    <h5>الوصف:</h5>
                    <p>{{ $provider->description ?? '-' }}</p>
                </div>
            </div>

            <div class="row mb-3">
                <div class="col-md-6">
                    <h5>الدولة:</h5>
                    <p>{{ $provider->country->getTranslation('name', 'ar') ?? '-' }}</p>
                </div>
                <div class="col-md-6">
                    <h5>المدينة:</h5>
                    <p>{{ $provider->city->getTranslation('name', 'ar') ?? '-' }}</p>
                </div>
            </div>

            <div class="row mb-3">
                <div class="col-md-6">
                    <h5>الجنسية:</h5>
                    <p>{{ $provider->nationality->getTranslation('name', 'ar') ?? '-' }}</p>
                </div>
                <div class="col-md-6">
                    <h5>المهن :</h5>
                    <ul>
                        @foreach ($provider->subcategories as $sub)
                        <li>{{ $sub->getTranslation('name', 'ar') }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>

            @if($provider->lat && $provider->lng)
            <div class="row mb-3">
                <div class="col-12">
                    <h5>الموقع على الخريطة:</h5>
                    <div id="map" style="height: 400px; width: 100%; border-radius: 8px; z-index: 1;"></div>
                </div>
            </div>
            @else
            <div class="row mb-3">
                <div class="col-md-6">
                    <h5>خط العرض (Lat):</h5>
                    <p>{{ $provider->lat ?? '-' }}</p>
                </div>
                <div class="col-md-6">
                    <h5>خط الطول (Lng):</h5>
                    <p>{{ $provider->lng ?? '-' }}</p>
                </div>
            </div>
            @endif

            <div class="row">
                <div class="col-12 d-flex justify-content-end">
                    @if($provider->status === 'in_review')
                    <form id="acceptForm" action="{{ route('dashboard.providers.accept', $provider->id) }}" method="POST" class="me-2">
                        @csrf
                    </form>

                    <button type="button" class="btn btn-success ml-2" data-toggle="modal" data-target="#acceptModal">
                        قبول
                    </button>

                    <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#rejectModal">
                        رفض
                    </button>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Reject Modal -->
<div class="modal fade" id="rejectModal" tabindex="-1" role="dialog" aria-labelledby="rejectModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <form id="rejectForm" action="{{ route('dashboard.providers.reject', $provider->id) }}" method="POST">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="rejectModalLabel">إدخال سبب الرفض</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" style="direction: rtl;">
                    <div class="mb-3">
                        <label for="reason_ar" class="form-label">سبب الرفض (عربي) <span class="text-danger">*</span></label>
                        <textarea class="form-control @error('reason_ar') is-invalid @enderror" id="reason_ar" name="reason_ar" rows="3" required placeholder="اكتب سبب رفض الطلب بالعربية">{{ old('reason_ar') }}</textarea>
                        @error('reason_ar')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="reason_en" class="form-label">سبب الرفض (English) <span class="text-danger">*</span></label>
                        <textarea class="form-control @error('reason_en') is-invalid @enderror" id="reason_en" name="reason_en" rows="3" required placeholder="Write the rejection reason in English">{{ old('reason_en') }}</textarea>
                        @error('reason_en')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="reason_ur" class="form-label">سبب الرفض (اردو) <span class="text-danger">*</span></label>
                        <textarea class="form-control @error('reason_ur') is-invalid @enderror" id="reason_ur" name="reason_ur" rows="3" required placeholder="مسترد کرنے کی وجہ اردو میں لکھیں">{{ old('reason_ur') }}</textarea>
                        @error('reason_ur')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">إلغاء</button>
                    <button type="button" class="btn btn-danger" onclick="startRejectProgress()">
                        رفض الطلب
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Accept Modal -->
<div class="modal fade" id="acceptModal" tabindex="-1" role="dialog" aria-labelledby="acceptModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="acceptModalLabel">تأكيد القبول</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body text-center">
                <p>هل أنت متأكد من قبول مقدم الخدمة؟</p>
            </div>
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">إلغاء</button>
                <button type="button" class="btn btn-success" onclick="startAcceptProgress()">تأكيد القبول</button>
            </div>
        </div>
    </div>
</div>

@if($errors->any())
<script>
    document.addEventListener('DOMContentLoaded', function() {
        $('#rejectModal').modal('show');
    });

</script>
@endif
<!-- Progress Modal -->
<div class="modal fade" id="progressModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">

            <div class="modal-body text-center">
                <h5 class="mb-3" id="progressTitle">
                    يمكنك الرجوع فى قرار رفض مقدم الخدمة
                </h5>

                <div class="progress mb-2">
                    <div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%">
                    </div>
                </div>

                <small class="text-muted d-block mb-3">
                    سيتم التنفيذ خلال
                    <strong id="countdown">10</strong>
                    ثوانٍ
                </small>

                <button type="button" class="btn btn-outline-secondary me-2" id="cancelProgress">
                    إلغاء العملية
                </button>
                <button type="button" class="btn btn-success" id="forceSubmit">
                    تأكيد العملية
                </button>
            </div>

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

<div class="modal fade" id="imagePreviewModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-body text-center">
                <img id="previewImage" src="" class="img-fluid rounded">
            </div>
        </div>
    </div>
</div>
@endsection


@push('scripts')
@if($provider->lat && $provider->lng)
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {

        var lat = {{ $provider->lat ?? 0 }};
        var lng = {{ $provider->lng ?? 0 }};

        console.log("Lat:", lat, "Lng:", lng);

        var mapContainer = document.getElementById('map');
        if (!mapContainer) {
            console.error("Map container not found!");
            return;
        }

        var map = L.map('map').setView([lat, lng], 15);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: 'Map data © OpenStreetMap contributors'
        }).addTo(map);

        L.marker([lat, lng])
            .addTo(map)
            .bindPopup("{{ $provider->first_name }}")
            .openPopup();

        setTimeout(() => map.invalidateSize(), 300);
    });

</script>
@endif

<!-- Image Preview Modal -->
<script>
    $(document).ready(function() {
        $(".img-thumbnail")
            .css("cursor", "pointer")
            .on("click", function() {
                $("#previewImage").attr("src", $(this).attr("src"));
                $("#imagePreviewModal").modal("show");
            });
    });
    let interval = null;
    let remaining = 10;
    let currentForm = null;

    function startProgress(formId, type) {
        currentForm = formId;
        remaining = 10;

        const progressBar = document.getElementById('progressBar');
        const countdown = document.getElementById('countdown');
        const title = document.getElementById('progressTitle');
        const modal = $('#progressModal');

        // Reset
        progressBar.style.width = '0%';
        countdown.textContent = remaining;

        // Change UI by action type
        if (type === 'accept') {
            progressBar.className = 'progress-bar progress-bar-striped progress-bar-animated bg-success';
            title.textContent = 'يمكنك الرجوع فى قرار قبول مقدم الخدمة';
        } else {
            progressBar.className = 'progress-bar progress-bar-striped progress-bar-animated bg-danger';
            title.textContent = 'يمكنك الرجوع فى قرار رفض مقدم الخدمة';
        }

        modal.modal({
            backdrop: 'static'
            , keyboard: false
        });

        interval = setInterval(() => {
            remaining--;
            countdown.textContent = remaining;

            const progress = ((10 - remaining) / 10) * 100;
            progressBar.style.width = progress + '%';

            if (remaining <= 0) {
                clearInterval(interval);
                modal.modal('hide');
                document.getElementById(currentForm).submit();
            }
        }, 1000);
    }

    function cancelProgress() {
        if (interval) {
            clearInterval(interval);
            interval = null;
        }
        $('#progressModal').modal('hide');
        currentForm = null;
    }

    function forceSubmit() {
        if (interval) {
            clearInterval(interval);
            interval = null;
        }
        $('#progressModal').modal('hide');
        if (currentForm) {
            document.getElementById(currentForm).submit();
        }
    }

    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('.action-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                startProgress(this.dataset.formId, this.dataset.type);
            });
        });

        document.getElementById('cancelProgress').addEventListener('click', cancelProgress);
        document.getElementById('forceSubmit').addEventListener('click', forceSubmit);
    });

    function startRejectProgress() {
        $('#rejectModal').modal('hide');

        setTimeout(() => {
            startProgress('rejectForm', 'reject');
        }, 300);
    }

    function startAcceptProgress() {
        $('#acceptModal').modal('hide');

        setTimeout(() => {
            startProgress('acceptForm', 'accept');
        }, 300);
    }

</script>

@endpush