@extends('admin.layout.master')

@section('css')
    <link rel="stylesheet" type="text/css"
        href="{{ asset('admin/app-assets/vendors/css/extensions/sweetalert2.min.css') }}">
    <style>
        .entity-update-summary .summary-item {
            padding: 1rem 1.25rem;
            border: 1px solid #ebe9f1;
            border-radius: 0.428rem;
            background: #fff;
            height: 100%;
        }

        .entity-update-summary .summary-label {
            font-size: 0.85rem;
            color: #6e6b7b;
            margin-bottom: 0.35rem;
        }

        .entity-update-summary .summary-value {
            font-size: 1.05rem;
            font-weight: 600;
            color: #5e5873;
            margin: 0;
        }

        .comparison-table th,
        .comparison-table td {
            vertical-align: middle;
        }

        .comparison-table tbody tr.row-changed {
            background-color: rgba(255, 159, 67, 0.08);
        }

        .comparison-table .field-label {
            font-weight: 600;
            color: #5e5873;
        }

        .image-preview {
            max-width: 150px;
            max-height: 150px;
            border-radius: 0.428rem;
            cursor: pointer;
            transition: transform 0.2s;
            border: 1px solid #ebe9f1;
        }

        .image-preview:hover {
            transform: scale(1.05);
        }

        .image-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
        }

        .image-modal {
            display: none;
            position: fixed;
            z-index: 9999;
            inset: 0;
            background-color: rgba(0, 0, 0, 0.9);
            justify-content: center;
            align-items: center;
        }

        .image-modal-content {
            max-width: 90%;
            max-height: 90%;
            border-radius: 0.428rem;
        }

        .image-modal-close {
            position: absolute;
            top: 20px;
            right: 30px;
            color: #fff;
            font-size: 40px;
            font-weight: bold;
            cursor: pointer;
            z-index: 10000;
            line-height: 1;
        }

        .image-modal-close:hover {
            color: #ddd;
        }

        .entity-update-actions {
            border-top: 1px solid #ebe9f1;
            background: #fff;
        }
    </style>
@endsection

@section('content')
    <div class="content-body">
        <div class="row">
            <div class="col-12">
                {{-- Header Card --}}
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h4 class="card-title mb-0">
                            <i class="feather icon-edit-2 mr-1"></i>
                            {{ __('admin.provider_update_request_details') }}
                        </h4>
                        <a href="{{ route('admin.provider_update_requests.index') }}" class="btn btn-outline-primary btn-sm">
                            <i class="feather icon-arrow-right"></i> {{ __('admin.back') }}
                        </a>
                    </div>
                    <div class="card-body">
                        <div class="row entity-update-summary">
                            <div class="col-md-4 mb-1">
                                <div class="summary-item">
                                    <p class="summary-label">{{ __('admin.provider_name') }}</p>
                                    <p class="summary-value">{{ $currentProvider->name ?? __('admin.no_name') }}</p>
                                </div>
                            </div>
                            <div class="col-md-4 mb-1">
                                <div class="summary-item">
                                    <p class="summary-label">{{ __('admin.request_date') }}</p>
                                    <p class="summary-value">{{ $entityUpdate->created_at->format('Y-m-d H:i:s') }}</p>
                                </div>
                            </div>
                            <div class="col-md-4 mb-1">
                                <div class="summary-item">
                                    <p class="summary-label">{{ __('admin.status') }}</p>
                                    <p class="summary-value mb-0">
                                        @if (is_null($entityUpdate->is_approved))
                                            <span class="badge badge-warning">{{ __('admin.pending') }}</span>
                                        @elseif($entityUpdate->is_approved == 1)
                                            <span class="badge badge-success">{{ __('admin.approved') }}</span>
                                        @elseif($entityUpdate->is_approved == 0)
                                            <span class="badge badge-danger">{{ __('admin.rejected') }}</span>
                                        @endif
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Tabs Navigation --}}
                <div class="card">
                    <div class="card-body">
                        <ul class="nav nav-tabs">
                            <li class="nav-item">
                                <a class="nav-link active" id="changes-tab" data-toggle="tab" href="#changes" role="tab"
                                    aria-controls="changes" aria-selected="true">
                                    <i class="feather icon-git-compare mr-1"></i>
                                    {{ __('admin.changes_comparison') }}
                                </a>
                            </li>
                            @if (isset($allData['relations']) && !empty($allData['relations']))
                                <li class="nav-item">
                                    <a class="nav-link" id="relations-tab" data-toggle="tab" href="#relations" role="tab"
                                        aria-controls="relations" aria-selected="false">
                                        <i class="feather icon-link mr-1"></i>
                                        {{ __('admin.relations') }}
                                    </a>
                                </li>
                            @endif
                        </ul>

                        <div class="tab-content mt-3">
                            {{-- Changes Comparison Tab --}}
                            <div class="tab-pane fade show active" id="changes" role="tabpanel"
                                aria-labelledby="changes-tab">
                                <div class="table-responsive">
                                    <table class="table table-bordered comparison-table mb-0">
                                        <thead>
                                            <tr>
                                                <th style="width: 25%">{{ __('admin.field') }}</th>
                                                <th style="width: 37.5%">{{ __('admin.current_value') }}</th>
                                                <th style="width: 37.5%">{{ __('admin.requested_value') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        @php
                                            $allFields = array_keys($requestedData);
                                            $excludedFields = ['class', 'id', 'created_at', 'updated_at', 'deleted_at', 'is_active', 'is_blocked', 'is_notify', 'rejection_reason', 'is_approved', 'password', 'profit_rate', 'registration_documents'];
                                            $allFields = array_diff($allFields, $excludedFields);

                                            $fieldLabels = [
                                                'name' => __('admin.name'),
                                                'email' => __('admin.email'),
                                                'phone' => __('admin.phone'),
                                                'country_code' => __('admin.country_code'),
                                                'national_id' => __('admin.national_id'),
                                                'iban' => __('admin.iban'),
                                                'vehicle_count' => __('admin.vehicle_count'),
                                                'whatsapp' => __('admin.whatsapp'),
                                                'bank_name' => __('admin.bank_name'),
                                                'account_name' => __('admin.account_name'),
                                                'account_num' => __('admin.account_num'),
                                                'iban' => __('admin.iban'),
                                                'social_phone' => __('admin.social_phone'),
                                                'social_email' => __('admin.social_email'),
                                                'city_id' => __('admin.city'),
                                                'category_id' => __('admin.category'),
                                                'lat' => __('admin.latitude'),
                                                'lng' => __('admin.longitude'),
                                                'map_desc' => __('admin.map_description'),
                                                'address' => __('admin.address'),
                                                'image' => __('admin.image'),
                                                'license_image' => __('admin.license_image'),
                                                'owner_image' => __('admin.owner_image'),
                                            ];
                                        @endphp

                                        @foreach ($allFields as $field)
                                            @php
                                                $label = $fieldLabels[$field] ?? ucfirst(str_replace('_', ' ', $field));
                                                $currentValue = $currentProvider->$field ?? '';
                                                $requestedValue = $requestedData[$field] ?? '';

                                                // Check if field is an image field
                                                $isImageField = in_array($field, ['image', 'license_image', 'owner_image']);

                                                // Get image paths if it's an image field
                                                $currentImagePath = '';
                                                $requestedImagePath = '';

                                                if ($isImageField) {
                                                    // For current value, use the model's image accessor if available
                                                    if ($currentValue && method_exists($currentProvider, 'get' . ucfirst($field) . 'Attribute')) {
                                                        $currentImagePath = $currentProvider->$field;
                                                    } else {
                                                        $currentImagePath = $currentValue;
                                                    }

                                                    // For requested value, check if it's a valid image path
                                                    if ($requestedValue) {
                                                        // Check if it's already a full URL or needs asset()
                                                        if (filter_var($requestedValue, FILTER_VALIDATE_URL) || strpos($requestedValue, 'http') === 0) {
                                                            $requestedImagePath = $requestedValue;
                                                        } elseif (strpos($requestedValue, 'storage/images/providers/') === 0 || strpos($requestedValue, '/storage/') === 0) {
                                                            $requestedImagePath = asset($requestedValue);
                                                        } else {
                                                            $requestedImagePath = asset('storage/images/providers/' . $requestedValue);
                                                        }
                                                    }

                                                    // Also check if current value needs asset()
                                                    if ($currentImagePath && !filter_var($currentImagePath, FILTER_VALIDATE_URL) && strpos($currentImagePath, 'http') !== 0) {
                                                        if (strpos($currentImagePath, 'storage/') === 0 || strpos($currentImagePath, '/storage/') === 0) {
                                                            $currentImagePath = asset($currentImagePath);
                                                        } else {
                                                            $currentImagePath = asset('storage/' . $currentImagePath);
                                                        }
                                                    }
                                                }

                                                if ($field == 'city_id' && $currentValue) {
                                                    $currentCity = $currentProvider->city ?? null;
                                                    $currentValue = $currentCity ? ($currentCity->getTranslations('name')[app()->getLocale()] ?? $currentCity->name) : $currentValue;
                                                }
                                                if ($field == 'city_id' && $requestedValue) {
                                                    $requestedCity = \App\Models\City::find($requestedValue);
                                                    $requestedValue = $requestedCity ? ($requestedCity->getTranslations('name')[app()->getLocale()] ?? $requestedCity->name) : $requestedValue;
                                                }

                                                if ($field == 'category_id' && $currentValue) {
                                                    $currentCategory = $currentProvider->category ?? null;
                                                    $currentValue = $currentCategory ? ($currentCategory->getTranslations('name')[app()->getLocale()] ?? $currentCategory->name) : $currentValue;
                                                }
                                                if ($field == 'category_id' && $requestedValue) {
                                                    $requestedCategory = \App\Models\Category::find($requestedValue);
                                                    $requestedValue = $requestedCategory ? ($requestedCategory->getTranslations('name')[app()->getLocale()] ?? $requestedCategory->name) : $requestedValue;
                                                }

                                                $hasChange = $currentValue != $requestedValue || $currentImagePath != $requestedImagePath;
                                            @endphp
                                            <tr class="{{ $hasChange ? 'row-changed' : '' }}">
                                                <td class="field-label">
                                                    <i class="feather icon-{{ $hasChange ? 'edit-2 text-warning' : 'check text-success' }} mr-1"></i>
                                                    {{ $label }}
                                                </td>
                                                <td>
                                                    @if ($isImageField && $currentImagePath)
                                                        <div class="image-container">
                                                            <button type="button" class="btn p-0 border-0 bg-transparent"
                                                                onclick="openImageModal('{{ $currentImagePath }}')"
                                                                onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();openImageModal('{{ $currentImagePath }}')}">
                                                                <img src="{{ $currentImagePath }}" alt="{{ $label }}" class="image-preview">
                                                            </button>
                                                            <small class="text-muted">{{ __('admin.current_image') }}</small>
                                                        </div>
                                                    @else
                                                        @if ($hasChange)
                                                            <span class="badge badge-light">{{ $currentValue !== '' && $currentValue !== null ? $currentValue : __('admin.no_value') }}</span>
                                                        @else
                                                            {{ $currentValue !== '' && $currentValue !== null ? $currentValue : __('admin.no_value') }}
                                                        @endif
                                                    @endif
                                                </td>
                                                <td>
                                                    @if ($isImageField && $requestedImagePath)
                                                        <div class="image-container">
                                                            <button type="button" class="btn p-0 border-0 bg-transparent"
                                                                onclick="openImageModal('{{ $requestedImagePath }}')"
                                                                onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();openImageModal('{{ $requestedImagePath }}')}">
                                                                <img src="{{ $requestedImagePath }}" alt="{{ $label }}" class="image-preview">
                                                            </button>
                                                            <small class="text-muted">{{ __('admin.requested_image') }}</small>
                                                        </div>
                                                    @else
                                                        @if ($hasChange)
                                                            <span class="badge badge-warning">{{ $requestedValue !== '' && $requestedValue !== null ? $requestedValue : __('admin.no_value') }}</span>
                                                        @else
                                                            {{ $requestedValue !== '' && $requestedValue !== null ? $requestedValue : __('admin.no_value') }}
                                                        @endif
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            {{-- Relations Tab --}}
                            @if (isset($allData['relations']) && !empty($allData['relations']))
                                <div class="tab-pane fade" id="relations" role="tabpanel" aria-labelledby="relations-tab">
                                    @foreach ($allData['relations'] as $relationName => $relationData)
                                        <div class="card mb-2">
                                            <div class="card-header">
                                                <h5 class="mb-0">
                                                    <i class="feather icon-link mr-1"></i>
                                                    {{ ucfirst(str_replace('_', ' ', $relationName)) }}
                                                </h5>
                                            </div>
                                            <div class="card-body">
                                                @if (is_array($relationData))
                                                    @if (isset($relationData[0]) && is_array($relationData[0]))
                                                        <div class="table-responsive">
                                                            <table class="table table-hover">
                                                                <thead class="thead-light">
                                                                    <tr>
                                                                        @foreach (array_keys($relationData[0]) as $key)
                                                                            @if (!in_array($key, ['class', 'id', 'created_at', 'updated_at']))
                                                                                <th>{{ ucfirst(str_replace('_', ' ', $key)) }}</th>
                                                                            @endif
                                                                        @endforeach
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    @foreach ($relationData as $item)
                                                                        <tr>
                                                                            @foreach ($item as $key => $value)
                                                                                @if (!in_array($key, ['class', 'id', 'created_at', 'updated_at']))
                                                                                    <td>
                                                                                        @if (is_array($value))
                                                                                            <code>{{ json_encode($value, JSON_UNESCAPED_UNICODE) }}</code>
                                                                                        @elseif(is_bool($value))
                                                                                            <span
                                                                                                class="badge {{ $value ? 'badge-success' : 'badge-secondary' }}">{{ $value ? __('admin.yes') : __('admin.no') }}</span>
                                                                                        @else
                                                                                            {{ $value ?? __('admin.no_value') }}
                                                                                        @endif
                                                                                    </td>
                                                                                @endif
                                                                            @endforeach
                                                                        </tr>
                                                                    @endforeach
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    @else
                                                        <div class="table-responsive">
                                                            <table class="table table-borderless">
                                                                <tbody>
                                                                    @foreach ($relationData as $key => $value)
                                                                        @if (!in_array($key, ['class', 'id', 'created_at', 'updated_at']))
                                                                            <tr>
                                                                                <th style="width: 30%">{{ ucfirst(str_replace('_', ' ', $key)) }}</th>
                                                                                <td>
                                                                                    @if (is_array($value))
                                                                                        <code>{{ json_encode($value, JSON_UNESCAPED_UNICODE) }}</code>
                                                                                    @elseif(is_bool($value))
                                                                                        <span
                                                                                            class="badge {{ $value ? 'badge-success' : 'badge-secondary' }}">{{ $value ? __('admin.yes') : __('admin.no') }}</span>
                                                                                    @else
                                                                                        {{ $value ?? __('admin.no_value') }}
                                                                                    @endif
                                                                                </td>
                                                                            </tr>
                                                                        @endif
                                                                    @endforeach
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    @endif
                                                @else
                                                    <p class="text-muted text-center py-3">{{ __('admin.no_data') }}</p>
                                                @endif
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                {{-- Action Buttons --}}
                @if (is_null($entityUpdate->is_approved))
                    @hasanypermission(['admin.provider_update_requests.approve', 'admin.provider_update_requests.reject'])
                    <div class="card">
                        <div class="card-body entity-update-actions text-center py-2">
                            @haspermission('admin.provider_update_requests.approve')
                            <button type="button" class="btn btn-success approve-request mr-1"
                                data-id="{{ $entityUpdate->id }}">
                                <i class="feather icon-check-circle mr-1"></i> {{ __('admin.approve') }}
                            </button>
                            @endhaspermission
                            @haspermission('admin.provider_update_requests.reject')
                            <button type="button" class="btn btn-danger reject-request"
                                data-id="{{ $entityUpdate->id }}">
                                <i class="feather icon-x-circle mr-1"></i> {{ __('admin.reject') }}
                            </button>
                            @endhaspermission
                        </div>
                    </div>
                    @endhasanypermission
                @endif
            </div>
        </div>
    </div>

    {{-- Image Modal --}}
    <div id="imageModal" class="image-modal">
        <button type="button" class="image-modal-close" onclick="closeImageModal()" aria-label="{{ __('admin.close') }}">&times;</button>
        <img class="image-modal-content" id="modalImage" alt="">
    </div>
@endsection

@section('js')
    <script src="{{ asset('admin/app-assets/vendors/js/extensions/sweetalert2.all.min.js') }}"></script>
    <script src="{{ asset('admin/app-assets/js/scripts/extensions/sweet-alerts.js') }}"></script>

    <script>
        // Image Modal Functions
        function openImageModal(imageSrc) {
            var modal = document.getElementById('imageModal');
            var modalImg = document.getElementById('modalImage');
            modal.style.display = 'flex';
            modalImg.src = imageSrc;
        }

        function closeImageModal() {
            document.getElementById('imageModal').style.display = 'none';
        }

        // Close modal when clicking outside the image
        window.onclick = function(event) {
            var modal = document.getElementById('imageModal');
            if (event.target == modal) {
                closeImageModal();
            }
        }

        $(document).ready(function() {
            // Approve request
            $(document).on('click', '.approve-request', function(e) {
                e.preventDefault();
                var requestId = $(this).data('id');
                var button = $(this);

                Swal.fire({
                    title: "{{ __('admin.approve_request') }}",
                    text: "{{ __('admin.are_you_sure_approve') }}",
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#28a745',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: '{{ __('admin.approve') }}',
                    confirmButtonClass: 'btn btn-success',
                    cancelButtonText: '{{ __('admin.cancel') }}',
                    cancelButtonClass: 'btn btn-secondary ml-1',
                    buttonsStyling: false,
                }).then((result) => {
                    if (result.isConfirmed || result.value) {
                        var originalHtml = button.html();
                        $.ajax({
                            url: '{{ url('admin/provider-update-requests') }}/' + requestId + '/approve',
                            method: 'POST',
                            data: {
                                _token: '{{ csrf_token() }}',
                            },
                            dataType: 'json',
                            beforeSend: function() {
                                button.html(
                                    '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>'
                                ).prop('disabled', true);
                            },
                            success: function(response) {
                                Swal.fire({
                                    position: 'top-start',
                                    icon: 'success',
                                    title: response.message || '{{ __("admin.update_request_approved_successfully") }}',
                                    showConfirmButton: false,
                                    timer: 1500,
                                });
                                setTimeout(function() {
                                    window.location.href = '{{ route('admin.provider_update_requests.index') }}';
                                }, 1000);
                            },
                            error: function(xhr) {
                                var msg = (xhr.responseJSON && xhr.responseJSON.message)
                                    ? xhr.responseJSON.message
                                    : '{{ __("admin.error_occurred") }}';
                                Swal.fire({
                                    position: 'top-start',
                                    icon: 'error',
                                    title: msg,
                                    showConfirmButton: false,
                                    timer: 2500,
                                });
                            },
                            complete: function() {
                                button.html(originalHtml).prop('disabled', false);
                            }
                        });
                    }
                });
            });

            // Reject request
            $(document).on('click', '.reject-request', function(e) {
                e.preventDefault();
                var requestId = $(this).data('id');
                var button = $(this);

                Swal.fire({
                    title: "{{ __('admin.reject_request') }}",
                    text: "{{ __('admin.are_you_sure_reject') }}",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#dc3545',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: '{{ __('admin.reject') }}',
                    confirmButtonClass: 'btn btn-danger',
                    cancelButtonText: '{{ __('admin.cancel') }}',
                    cancelButtonClass: 'btn btn-secondary ml-1',
                    buttonsStyling: false,
                }).then((result) => {
                    if (result.isConfirmed || result.value) {
                        var originalHtml = button.html();
                        $.ajax({
                            url: '{{ url('admin/provider-update-requests') }}/' + requestId + '/reject',
                            method: 'POST',
                            data: {
                                _token: '{{ csrf_token() }}'
                            },
                            dataType: 'json',
                            beforeSend: function() {
                                button.html(
                                    '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>'
                                ).prop('disabled', true);
                            },
                            success: function(response) {
                                Swal.fire({
                                    position: 'top-start',
                                    icon: 'success',
                                    title: response.message || '{{ __("admin.update_request_rejected_successfully") }}',
                                    showConfirmButton: false,
                                    timer: 1500,
                                });
                                setTimeout(function() {
                                    window.location.href = '{{ route('admin.provider_update_requests.index') }}';
                                }, 1000);
                            },
                            error: function(xhr) {
                                var msg = (xhr.responseJSON && xhr.responseJSON.message)
                                    ? xhr.responseJSON.message
                                    : '{{ __("admin.error_occurred") }}';
                                Swal.fire({
                                    position: 'top-start',
                                    icon: 'error',
                                    title: msg,
                                    showConfirmButton: false,
                                    timer: 2500,
                                });
                            },
                            complete: function() {
                                button.html(originalHtml).prop('disabled', false);
                            }
                        });
                    }
                });
            });
        });
    </script>
@endsection