@extends('layouts.app')
@section('title')
    {{ __('messages_301.User profile') }}
@endsection
@section('style')
    <link rel="stylesheet" href="{{ asset('assets/vendor/css/pages/page-profile.css') }}" />
    <style>
        .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
            width: 100% !important;
        }

        .bordered-img {
            border: 5px solid black;
            /* Adjust the color and width as needed */
            border-radius: 5px;
            /* Adjust the radius to match the rounded corners if needed */
        }

        .shadow-img {
            box-shadow: 0 4px 8px rgb(0, 0, 0);
            /* Adjust the offset, blur, and color as needed */
            border-radius: 5px;
            /* Adjust the radius to match the rounded corners if needed */
        }

        .box-img img {
            height: 100%;
            width: 100%;
            object-fit: contain;
            /* border: #e6b6b638 1px solid; */
            {{--  border-radius: 20px  --}}
        }

        .box-img {

            height: 165px;
        }
    </style>
@endsection
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        @include('inc.breadcrumb', [
            'breadcrumb_items' => [
                __('messages.Home') => route('home'),
                __('messages_301.Suppliers') => null,
                __('messages_301.Personal') => route('admin.suppliers.index', 'personal'),
                __('messages_301.User profile') => 'active',
            ],
        ])



        <div class="container-xxl flex-grow-1 container-p-y">

            @include('admin.suppliers.personal.includes.profile_info')
            <!-- User Profile Content -->
            <div class="row">
                <div class="col-md-12">
                    <div class="card mb-3">
                        <div class="card-header pt-1">
                            <ul class="nav nav-tabs card-header-tabs" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button type="button" class="nav-link active" role="tab" data-bs-toggle="tab"
                                        data-bs-target="#navs-tab-main-data" aria-controls="navs-tab-main-data"
                                        aria-selected="false" tabindex="-1">
                                        {{ __('messages_301.Supplier data') }}
                                    </button>
                                </li>
                                {{-- <li class="nav-item" role="presentation">
                                    <button type="button" class="nav-link " role="tab" data-bs-toggle="tab"
                                        data-bs-target="#navs-tab-media" aria-controls="navs-tab-media"
                                        aria-selected="true">
                                        {{ __('messages_301.Papers') }}
                                    </button>
                                </li> --}}


                            </ul>
                        </div>
                        <div class="card-body pt-3">
                            <div class="tab-content p-0">
                                {{-- start main data --}}
                                <div class="tab-pane fade active show" id="navs-tab-main-data" role="tabpanel">
                                    <div class="row">
                                        <div class="col-xl-4 col-lg-5 col-md-5">
                                            <!-- About User -->
                                            <div class="card mb-4">
                                                <div class="card-body">
                                                    <small
                                                        class="card-text text-uppercase">{{ __('messages_301.About') }}</small>
                                                    <ul class="list-unstyled mb-4 mt-3">
                                                        <li class="d-flex align-items-center mb-3">
                                                            <i class="ti ti-user text-heading"></i><span
                                                                class="fw-medium mx-2 text-heading">{{ __('messages.Name') }}:</span>
                                                            <span>{{ $data->name }}</span>
                                                        </li>
                                                        <li class="d-flex align-items-center mb-3">
                                                            <i class="ti ti-user text-heading"></i><span
                                                                class="fw-medium mx-2 text-heading">{{ __('messages_301.Country name') }}:</span>
                                                            <span>{{ $data->country?->name }}</span>
                                                        </li>
                                                        <li class="d-flex align-items-center mb-3">
                                                            <i class="ti ti-user text-heading"></i><span
                                                                class="fw-medium mx-2 text-heading">{{ __('messages_301.City name') }}:</span>
                                                            <span>{{ $data->city?->name }}</span>
                                                        </li>







                                                    </ul>
                                                    <small
                                                        class="card-text text-uppercase">{{ __('messages_301.Contacts') }}</small>
                                                    <ul class="list-unstyled mb-4 mt-3">
                                                        <li class="d-flex align-items-center mb-3">
                                                            <i class="ti ti-phone-call"></i><span
                                                                class="fw-medium mx-2 text-heading">{{ __('messages.Phone Number') }}:</span>
                                                            <span>({{ $data->mobile_country_code ?: null }})
                                                                {{ $data->mobile ?: null }}</span>
                                                        </li>

                                                        <li class="d-flex align-items-center mb-3">
                                                            <i class="ti ti-mail"></i><span
                                                                class="fw-medium mx-2 text-heading">{{ __('messages.Email') }}:</span>
                                                            <span>{{ $data->email }}</span>
                                                        </li>



                                                    </ul>


                                                </div>
                                            </div>

                                        </div>
                                        <div class="col-xl-8 col-lg-7 col-md-7">
                                            <!-- Activity Timeline -->
                                            <div class="card card-action mb-2">
                                                <div class="card-body pb-0">
                                                    <small
                                                        class="card-text text-uppercase">{{ __('messages_301.Facility data') }}</small>
                                                    <ul class="list-unstyled mb-4 mt-3">
                                                        <li class="d-flex align-items-center mb-3">
                                                            <i class="ti ti-id"></i><span
                                                                class="fw-medium mx-2 text-heading">{{ __('messages.ID') }}:</span>
                                                            <span>{{ $data->account_information->id_number }}
                                                            </span>
                                                        </li>

                                                        <li class="d-flex align-items-center mb-3">
                                                            <i class="ti ti-map-pin text-heading"></i><span
                                                                class="fw-medium mx-2 text-heading">{{ __('messages.Address') }}:</span>
                                                            <span>{{ $data->account_information->address }}</span>
                                                        </li>



                                                    </ul>

                                                </div>
                                            </div>

                                            <!--/ Activity Timeline -->

                                        </div>
                                    </div>
                                </div>
                                {{-- end main data --}}

                                {{-- start media --}}

                                {{-- end media --}}

                                {{-- start dates --}}
                                {{-- <div class="tab-pane fade" id="navs-tab-media" role="tabpanel">


                                    <div class="row g-3 gy-4 mb-4">


                                        <div class="mb-3">
                                            <div class="row">
                                                <div class="col-6">
                                                    <label for="logo" class="mb-3">{{ __('messages_301.Id image') }}
                                                    </label>

                                                    <div class="box-img">
                                                        <img class="logo-preview img_popup shadow-img"
                                                            src="{{ asset($data->account_information->id_image) }}"
                                                            alt="">
                                                    </div>
                                                </div>

                                                <div class="col-6">
                                                    <label for="logo"
                                                        class="mb-3">{{ __('messages_301.License image') }}
                                                    </label>

                                                    <div class="box-img">
                                                        <img class="logo-preview img_popup shadow-img"
                                                            src="{{ asset($data->account_information->license_image) }}"
                                                            alt="">
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div> --}}
                            </div>
                            {{-- end dates --}}
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- Projects table -->

    <!--/ Projects table -->
    <!--/ User Profile Content -->
    @include('admin.suppliers.inc.modal')
@endsection

@section('script')
    <script src="{{ asset('assets/js/pages-account-settings-account.js') }}"></script>
    <script src="{{ asset('assets/js/pages-profile.js') }}"></script>
    <script>
        $(document).ready(function() {
            // Select the modal
            var modal = $('#modalCenter');

            // Event when the modal is shown
            modal.on('show.bs.modal', function(event) {
                // The button that triggered the modal
                var button = $(event.relatedTarget);

                // Get data from the button
                var id = button.data('id');
                var type = button.data('type');

                // Generate the dynamic form action URL
                var actionUrl =
                    "{{ route('admin.suppliers.approve_papers', ['id' => ':id', 'type' => ':type']) }}"
                    .replace(':id', id)
                    .replace(':type', type);

                // Set the form action
                $('#statusForm').attr('action', actionUrl);
            });
        });
    </script>
@endsection