@extends('admin.layout.master')
@section('title', __('admin.provider') . ' #' . $provider->id)
@section('scripts')
    <script src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAPS_API_KEY') }}"></script>

    <script>
        let map;
        let marker;

        function initMap() {
            const defaultLat = parseFloat(document.getElementById('latitude').value) || 24.7136;
            const defaultLng = parseFloat(document.getElementById('longitude').value) || 46.6753;

            const defaultLocation = { lat: defaultLat, lng: defaultLng };

            map = new google.maps.Map(document.getElementById("map"), {
                center: defaultLocation,
                zoom: 12,
            });

            marker = new google.maps.Marker({
                position: defaultLocation,
                map: map,
                draggable: true,
            });

            google.maps.event.addListener(map, 'click', function (event) {
                placeMarker(event.latLng);
            });

            marker.addListener('dragend', function (event) {
                updateLatLng(event.latLng);
            });
        }

        function placeMarker(location) {
            marker.setPosition(location);
            updateLatLng(location);
        }

        function updateLatLng(location) {
            document.getElementById('latitude').value = location.lat().toFixed(6);
            document.getElementById('longitude').value = location.lng().toFixed(6);
        }

        // لما يتفتح المودال، فعل الخريطة
        const editLocationModal = document.getElementById('editLocation');
        editLocationModal.addEventListener('shown.bs.modal', function () {
            setTimeout(() => {
                initMap();
            }, 500);
        });

        // في حالة تم إغلاق المودال وأُعيد فتحه مرة أخرى
        editLocationModal.addEventListener('hidden.bs.modal', function () {
            document.getElementById('map').innerHTML = ""; // يمسح الخريطة السابقة
        });
    </script>

@endsection
@section('content')

    
    <!-- Order Details Table -->

    <div class="row">
        <div class="col-12">
            <div class="mb-6 card">
                <div class="user-profile-header-banner">
                    <img src="{{ $provider->cover }}" width="100%" height="300px" alt="Banner image" class="rounded-top">
                </div>
                <div class="mb-5 text-center user-profile-header d-flex flex-column flex-lg-row text-sm-start">
                    <div class="flex-shrink-0 mx-auto mt-n2 mx-sm-0">
                        <img src="{{ $provider->image }}" alt="user image" style="width: 100px; height: 100px;"
                            class="rounded user-profile-img d-block ms-0 ms-sm-6">
                    </div>
                    <div class="mt-3 flex-grow-1 mt-lg-5">
                        <div
                            class="gap-4 mx-5 d-flex align-items-md-end align-items-sm-start align-items-center justify-content-md-between justify-content-start flex-md-row flex-column">
                            <div class="user-profile-info">
                                <h4 class="mb-2 mt-lg-6">{{ $provider->name }}</h4>
                                <ul
                                    class="flex-wrap gap-4 my-2 mb-0 list-inline d-flex align-items-center justify-content-sm-start justify-content-center">
                                    <li class="gap-2 list-inline-item d-flex align-items-center">
                                        <i class="ti ti-category ti-lg"></i><span
                                            class="fw-medium">{{ $provider->main_category->name }}</span>
                                    </li>
                                    <li class="gap-2 list-inline-item d-flex align-items-center">
                                        <i class="ti ti-calendar ti-lg"></i><span
                                            class="fw-medium">{{ __('admin.joined') . ' ' . $provider->created_at->diffForHumans() }}</span>
                                    </li>
                                </ul>
                                <p class="mb-0 text-muted">{{ $provider->description }}</p>
                            </div>
                            <div class="user-profile-action">
                                <button type="button" class="btn btn-info" data-bs-toggle="modal"
                                        data-bs-target="#editLocation">{{ __('admin.updateLocation') }}</button>
                                {{-- add blance to wallet --}}
                                @permission('provider-wallet')
                                <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                    data-bs-target="#addBalance">{{ __('admin.add_balance') }}</button>
                                @endpermission
                                <button type="button" class="btn btn-info" data-bs-toggle="modal"
                                        data-bs-target="#updateCommission">{{ __('admin.updateCommission') }}</button>
                                @permission('provider-status')
                                @if ($provider->is_active)
                                    <a href="{{ route('admin.providers.toggle.status', $provider->id) }}"
                                        class="btn btn-danger">{{ __('admin.inactive_provider') }}</a>
                                @else
                                    <a href="{{ route('admin.providers.toggle.status', $provider->id) }}"
                                        class="btn btn-success">{{ __('admin.active_provider') }}</a>
                                @endif
                                @endpermission
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @permission('provider-wallet')
    @include('admin.providers.addBalance')
    @endpermission

    @include('admin.providers.updateCommission')
    @include('admin.providers.editLocation')

    <div class="row">
        <div class="col-xl-4 col-lg-5 col-md-5">
            <!-- About User -->
            <div class="mb-6 card">
                <div class="card-body">
                    <small class="card-text text-uppercase text-muted small">{{ __('admin.about') }}</small>
                    <ul class="py-1 my-3 list-unstyled">
                        <li class="mb-4 d-flex align-items-center"><i class="ti ti-user ti-lg"></i><span
                                class="mx-2 fw-medium">{{ __('admin.name') }}:</span> <span>{{ $provider->name }}</span>
                        </li>
                        <li class="mb-4 d-flex align-items-center"><i class="ti ti-user ti-lg"></i><span
                            class="mx-2 fw-medium">{{ __('admin.user_name') }}:</span> <span>{{ $provider->user_name }}</span>
                    </li>
                        <li class="mb-4 d-flex align-items-center"><i class="ti ti-user ti-lg"></i><span
                            class="mx-2 fw-medium">{{ __('admin.national_id') }}:</span>
                        <span>{{ $provider->national_id }}</span>
                        </li>
                        <li class="mb-4 d-flex align-items-center"><i class="ti ti-check ti-lg"></i><span
                                class="mx-2 fw-medium">{{ __('admin.status') }}:</span>
                            <span>{{ $provider->is_active ? __('admin.active') : __('admin.inactive') }}</span>
                        </li>
                        <li class="mb-4 d-flex align-items-center"><i class="ti ti-crown ti-lg"></i><span
                                class="mx-2 fw-medium">{{ __('admin.main_category') }}:</span>
                            <span>{{ __($provider->main_category->name) }}</span>
                        </li>
                        <li class="mb-4 d-flex align-items-center"><i class="ti ti-online ti-lg"></i><span
                                class="mx-2 fw-medium">{{ __('admin.online') }}:</span>
                            <span>{{ $provider->online ? __('admin.yes') : __('admin.no') }}</span>
                        </li>
                        <li class="mb-4 d-flex align-items-center"><i class="ti ti-clock ti-lg"></i><span
                                class="mx-2 fw-medium">{{ __('admin.start_time') }}:</span>
                            <span>{{ $provider->start_time }}</span>
                        </li>
                        <li class="mb-4 d-flex align-items-center"><i class="ti ti-clock ti-lg"></i><span
                                class="mx-2 fw-medium">{{ __('admin.end_time') }}:</span>
                            <span>{{ $provider->end_time }}</span>
                        </li>

                    </ul>
                    <small class="card-text text-uppercase text-muted small">{{ __('admin.contact') }}</small>
                    <ul class="py-1 my-3 list-unstyled">
                        <li class="mb-4 d-flex align-items-center"><i class="ti ti-phone-call ti-lg"></i><span
                                class="mx-2 fw-medium">{{ __('admin.phone') }}:</span>
                            <span>{{ $provider->country_code . ' ' . $provider->phone }}</span>
                        </li>
                        <li class="mb-4 d-flex align-items-center"><i class="ti ti-mail ti-lg"></i><span
                                class="mx-2 fw-medium">{{ __('admin.email') }}:</span> <span>{{ $provider->email }}</span>
                        </li>
                    </ul>
                    <small class="card-text text-uppercase text-muted small">{{ __('admin.financial') }}</small>
                    <ul class="pt-1 mt-3 mb-0 list-unstyled">
                        <li class="mb-4 d-flex align-items-center"><i class="ti ti-wallet ti-lg"></i><span
                                class="mx-2 fw-medium">{{ __('admin.wallet') }}:</span>
                            <span>{{ roundToNumber($provider->wallet) }}</span>
                        </li>
                        <li class="mb-4 d-flex align-items-center"><i class="ti ti-wallet ti-lg"></i><span
                                class="mx-2 fw-medium">{{ __('admin.commission') }}:</span>
                            <span>{{ $provider->admin_commission != null ? round($provider->admin_commission) : round(\App\Models\Setting::first()->admin_commission) }}</span>
                        </li>

                    </ul>
                </div>
            </div>
            <!--/ About User -->
            <!-- Profile Overview -->
            <div class="mb-6 card">
                <div class="card-body">
                    <small class="card-text text-uppercase text-muted small">{{ __('admin.over_view') }}</small>
                    <ul class="pt-1 mt-3 mb-0 list-unstyled">
                        <li class="mb-4 d-flex align-items-end"><i class="ti ti-check ti-lg"></i><span
                                class="mx-2 fw-medium">{{ __('admin.completed_orders') }}:</span>
                            <span>{{ $countOrderCompleted }}</span>
                        </li>
                        <li class="mb-4 d-flex align-items-end"><i class="ti ti-truck-delivery ti-lg"></i><span
                                class="mx-2 fw-medium">{{ __('admin.total_orders') }}:</span>
                            <span>{{ $countOrder }}</span>
                        </li>
                        <li class="mb-4 d-flex align-items-end"><i class="ti ti-category-2 ti-lg"></i><span
                                class="mx-2 fw-medium">{{ __('admin.category') }}:</span>
                            <span>{{ $countCategory }}</span>
                        </li>
                        <li class="d-flex align-items-end"><i class="ti ti-box ti-lg"></i><span
                                class="mx-2 fw-medium">{{ __('admin.products') }}:</span> <span>{{ $countProduct }}</span>
                        </li>
                    </ul>
                </div>
            </div>
            <!--/ Profile Overview -->
        </div>
        <div class="col-xl-8 col-lg-7 col-md-7">

            <div class="mb-6 card card-action">
                <div class="card-header">
                    <h5 class="card-title">{{ __('admin.provider_file') }}</h5>
                </div>
                <div class="card-body">
                    <div class='table-responsive'>
                        <table class="table">
                            <tbody>
                                <tr>
                                    <th>{{ __('admin.national_id_image') }}</th>
                                    <td>
                                        @if ($provider->national_id_image)
                                            <a href="{{ $provider->national_id_image }}" target="_blank">
                                                <img src="{{ $provider->national_id_image }}" style="width: 100px">
                                            </a>
                                        @endif
                                    </td>
                                    <th>
                                        @if ($provider->national_id_image)
                                            <a href="{{ $provider->national_id_image }}" target="_blank"
                                                class="btn btn-success">{{ __('admin.download') }}</a>
                                        @endif
                                    </th>
                                </tr>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!-- Activity Timeline -->
            <div class="mb-6 card card-action">
                <div class="card-header align-items-center">
                    <h5 class="mb-0 card-action-title"><i
                            class="ti ti-chart-bar ti-lg text-body me-4"></i>{{ __('admin.last_transactions') }}
                    </h5>
                </div>
                <div class="pt-3 card-body">
                    <ul class="mb-0 timeline">
                        @foreach ($transactions as $transaction)
                            <li class="timeline-item timeline-item-transparent">
                                @if ('order' == $transaction->type)
                                    <span class="timeline-point timeline-point-primary"></span>
                                @elseif('commission' == $transaction->type || 'withdrawal' == $transaction->type)
                                    <span class="timeline-point timeline-point-danger"></span>
                                @else
                                    <span class="timeline-point timeline-point-info"></span>
                                @endif

                                <div class="timeline-event">
                                    <div class="mb-3 timeline-header">
                                        @if ($transaction->type == 'order')
                                            {{ __('admin.transaction_order_info_for_dashboard') }}
                                        @elseif($transaction->type == 'commission')
                                            {{ __('admin.transaction_commission_info_for_dashboard') }}
                                        @elseif($transaction->type == 'withdrawal')
                                            {{ __('admin.transaction_withdrawal_info_for_dashboard') }}
                                        @else
                                            {{ __('admin.other_transaction_info_for_dashboard') }}
                                        @endif
                                        <small
                                            class="text-muted">{{ roundToNumber($transaction->total) . ' ' . __('admin.currency') }}</small>
                                    </div>
                                    <p class="mb-2">
                                        {{ \Carbon\Carbon::parse($transaction->created_at)->diffForHumans() }}
                                    </p>
                                </div>
                            </li>
                        @endforeach

                    </ul>
                </div>
            </div>
            <!--/ Activity Timeline -->
            <div class="row">


                <!-- Connections -->
                <div class="col-lg-12 col-xl-6">
                    <div class="mb-6 card card-action">
                        <div class="card-header align-items-center">
                            <h5 class="mb-0 card-action-title">{{ __('admin.latest_categories') }}</h5>
                        </div>
                        <div class="card-body">
                            <ul class="mb-0 list-unstyled">
                                @foreach ($categories as $category)
                                    <li class="mb-4">
                                        <div class="d-flex align-items-center">
                                            <div class="d-flex align-items-center">
                                                <div class="avatar me-2">
                                                    <img src="{{ $category->image }}" alt="Avatar"
                                                        class="rounded-circle">
                                                </div>
                                                <div class="me-2">
                                                    <h6 class="mb-0">{{ $category->name }}</h6>
                                                    <small>{{ $category->product->count() . ' ' . __('admin.products') }}</small>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                @endforeach

                                <li class="text-center">
                                    <a
                                        href="{{ route('admin.category.index') }}?provider_id={{ $provider->id }}">{{ __('admin.view_all') }}</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!--/ Connections -->
                <!-- Teams -->
                <div class="col-lg-12 col-xl-6">
                    <div class="mb-6 card card-action">
                        <div class="card-header align-items-center">
                            <h5 class="mb-0 card-action-title">{{ __('admin.latest_products') }}</h5>
                        </div>
                        <div class="card-body">
                            <ul class="mb-0 list-unstyled">
                                @foreach ($products as $product)
                                    <li class="mb-4">
                                        <div class="d-flex align-items-center">
                                            <div class="d-flex align-items-center">
                                                <div class="avatar me-2">
                                                    <img src="{{ $product->image }}" alt="Avatar"
                                                        class="rounded-circle">
                                                </div>
                                                <div class="me-2">
                                                    <h6 class="mb-0">{{ $product->name }}</h6>
                                                    <small>{{ $product->category->name }}</small>
                                                </div>
                                            </div>
                                            <div class="ms-auto">
                                                <span
                                                    class="bg-success badge ">{{ roundToNumber($product->price) . ' ' . __('admin.currency') }}</span>
                                            </div>
                                        </div>
                                    </li>
                                @endforeach


                                <li class="text-center">
                                    <a
                                        href="{{ route('admin.product.index') }}?provider_id={{ $provider->id }}">{{ __('admin.view_all') }}</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!--/ Teams -->
            </div>
            <!-- Projects table -->
            <div class="mb-4 card">
                <div class="card-datatable table-responsive">
                    <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper dt-bootstrap5 no-footer">
                        <table class="table datatables-order border-top dataTable no-footer dtr-column collapsed"
                            id="DataTables_Table_0" aria-describedby="DataTables_Table_0_info" style="width: 1215px;">
                            <thead>
                                <tr>
                                    <th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1"
                                        colspan="1" style="width: 50px;"
                                        aria-label="order: activate to sort column ascending">
                                        {{ __('admin.order') }}</th>
                                    <th class="sorting sorting_asc" tabindex="0" aria-controls="DataTables_Table_0"
                                        rowspan="1" colspan="1" style="width: 124px;"
                                        aria-label="date: activate to sort column descending" aria-sort="ascending">
                                        {{ __('admin.date') }}</th>
                                    <th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1"
                                        colspan="1" style="width: 256px;"
                                        aria-label="customers: activate to sort column ascending">
                                        {{ __('admin.customer') }}</th>
                                    <th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1"
                                        colspan="1" style="width: 100px;"
                                        aria-label="payment: activate to sort column ascending">{{ __('admin.payment') }}
                                    </th>
                                    <th class="sorting dtr-hidden" tabindex="0" aria-controls="DataTables_Table_0"
                                        rowspan="1" colspan="1" style="width: 113px; "
                                        aria-label="status: activate to sort column ascending">
                                        {{ __('admin.payment_status') }}
                                    </th>
                                    <th class="sorting dtr-hidden" tabindex="0" aria-controls="DataTables_Table_0"
                                        rowspan="1" colspan="1" style="width: 113px; "
                                        aria-label="status: activate to sort column ascending">{{ __('admin.status') }}
                                    </th>

                                    <th class="sorting_disabled dtr-hidden" rowspan="1" colspan="1"
                                        style="width: 63px;" aria-label="Actions">{{ __('admin.actions') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {{-- odd or even --}}
                                @foreach ($orders as $order)
                                    <tr class="{{ $loop->odd ? 'odd' : 'even' }}">

                                        {{-- order id id 00001 --}}
                                        <td><a
                                                href="{{ route('admin.order.show', $order->id) }}"><span>#{{ $order->id }}</span></a>
                                        </td>
                                        <td class="sorting_1"><span class="text-nowrap">
                                                {{ date('M d, Y h:i A', strtotime($order->created_at)) }}</span></td>
                                        <td>
                                            <div
                                                class="d-flex justify-content-start align-items-center order-name text-nowrap">
                                                <div class="avatar-wrapper">
                                                    <div class="avatar avatar-sm me-3"><img
                                                            src="{{ $order->user->image }}" alt="Avatar"
                                                            class="rounded-circle"></div>
                                                </div>
                                                <div class="d-flex flex-column">
                                                    <h6 class="m-0"><a href="pages-profile-user.html"
                                                            class="text-heading">{{ $order->user->name }}</a></h6>
                                                    <small>{{ $order->user->email }}</small>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            {{ __('admin.' . $order->payment_method . '_payment') }}

                                        </td>
                                        <td>
                                            <h6
                                                class="mb-0 align-items-center d-flex w-px-100 text-{{ $order->payment_status == 0 ? 'warning' : 'success' }}">
                                                <i
                                                    class="ti ti-circle-filled fs-tiny me-1"></i>{{ $order->payment_status ? __('admin.paid') : __('admin.not_paid') }}
                                            </h6>
                                        </td>

                                        <td class="dtr-hidden"><span
                                                class="px-2 badge bg-label-{{ getOrderStatusClass($order->status) }}"
                                                text-capitalized="">{{ __('admin.order_status_arr.' . $order->status) }}</span>
                                        </td>


                                        <td class="dtr-hidden">
                                            <div class="d-flex justify-content-sm-start align-items-sm-center"><button
                                                    class="btn btn-icon btn-text-secondary waves-effect waves-light rounded-pill dropdown-toggle hide-arrow"
                                                    data-bs-toggle="dropdown"><i class="ti ti-dots-vertical"></i></button>
                                                <div class="m-0 dropdown-menu dropdown-menu-end"><a
                                                        href="{{ route('admin.order.show', $order->id) }}"
                                                        class="dropdown-item"><i
                                                            class="ti ti-eye me-2"></i>{{ __('admin.view') }}</a></div>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach

                            </tbody>
                        </table>
                        {{ $orders->links() }}
                        <div style="width: 1%;"></div>
                    </div>
                </div>
            </div>
            <!--/ Projects table -->
        </div>
    </div>




@endsection