@extends('layouts.app')
@section('title', 'Vendor Details')
@section('content')

    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Vendor</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item active">Vendor</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <input type="hidden" id="user_id" value="{{ request()->query('user_id') }}">
                <!-- Left column: Profile -->
                <div class="col-md-3">
                    <div class="card card-primary card-outline">
                        <div class="card-body box-profile text-center">
                            <div class="profile-image-wrapper position-relative d-inline-block">
                                <img class="profile-user-img img-fluid img-circle" id="vendor-profile-image" src="{{ $vendor->vendor_profile_image_url }}"
                                    alt="User profile picture">
                                @if ($vendor->deleted_at == null)
                                <div class="profile-image-overlay" onclick="document.getElementById('profile-photo-input').click();">
                                    <i class="fas fa-camera"></i>
                                </div>
                                <input type="file" id="profile-photo-input" name="profile_photo" accept="image/*" style="display: none;">
                                @endif
                            </div>
                            <h3 class="profile-username text-center">{{ ucwords($vendor->name) }}</h3>

                            <!-- Email Section -->
                            <strong><i class="fas fa-envelope mr-1"></i> Email</strong>
                            <p class="text-muted">{{ $vendor->email }}</p>
                            <hr>

                            <!-- Phone No Section -->
                            <strong><i class="fas fa-phone-alt mr-1"></i> Phone No</strong>
                            <p class="text-muted">{{ $vendor->phone_number ?? 'NA' }}</p>

                            <!-- Select Language Section -->
                            <strong><i class="fas fa-language mr-1"></i> Select Language</strong>
                            <p class="text-muted">{{ ucfirst($vendor->language) ?? 'NA' }}</p>

                            @if ($vendor->deleted_at != null)
                                <strong>Status</strong>
                                <p class="text-danger text-bold">{{ 'Deleted' }}</p>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- Right column: Details Section -->
                <div class="col-md-9">
                    <div class="card">
                        <div class="card-header flex-wrap">
                            <div class="d-flex flex-nowrap">
                                @if ($hasActiveSubscription)
                                    @if ($serviceSteup == true)
                                    <a href="{{ route('setup.create', ['user_id' => $user_id]) }}" class="btn btn-primary mr-2 float-end">
                                        <i class="fa fa-plus nav-icon"></i> Add
                                    </a>
                                    @endif
                                @endif
                            </div>
                            @if (!$serviceSteup)
                            <h5 class="card-title">Since your trial plan is active, you cannot add more than {{ $team }} services.</h5>
                            @endif
                        </div>
                        <div class="card-body">

                            <!-- User Addresses Section -->
                            <h4>Vendor Services <small>(Total Services: {{ $services->count() }})</small></h4>
                            @if ($services->count() > 0)
                                <div class="table-responsive">
                                    <table class="table table-bordered text-nowrap text-center">
                                        <thead>
                                            <tr>
                                                <th class="align-middle">#</th>
                                                <th class="align-middle">Category Name</th>
                                                <th class="align-middle">Service</th>
                                                <th class="align-middle">Custom Name</th>
                                                <th class="align-middle">Price</th>
                                                <th class="align-middle">Duration Unit</th>
                                                <th class="align-middle">Duration</th>
                                                <th class="align-middle">Status</th>
                                                <th class="align-middle">Booking Type</th>
                                                <th class="align-middle">Total Pending Booking</th>
                                                <th class="align-middle">Total Completed Booking</th>
                                                <th class="align-middle">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody id="bookings-table">
                                            @include('admin.vendors.services_table', [
                                                'services' => $services,
                                            ])
                                        </tbody>
                                    </table>
                                </div>
                                <!-- Pagination Links with margin-top and aligned to the right -->
                                <div id="pagination-links" class="mt-3 d-flex justify-content-end">
                                    {{ $services->links('pagination::bootstrap-4') }}
                                </div>
                            @else
                                <p>No services found for this Vendor.</p>
                            @endif

                            <hr>

                            <h4>Vendor Addresses</h4>
                            @if ($vendor->addresses->count() > 0)
                                @php
                                    $addresses = $vendor->addresses()->latest()->get();
                                @endphp
                                <div class="row align-items-stretch">
                                    @foreach ($addresses as $address)
                                        <div class="col-md-6 d-flex {{ $loop->iteration > 2 ? 'mt-3' : '' }}">
                                            <div class="card mb-3 w-100 h-100">
                                                <div class="card-body d-flex flex-column justify-content-between">
                                                    <div>
                                                        <div class="d-flex justify-content-between align-items-center">
                                                            <h5 class="card-title mb-0">{{ $address->address_type_text }}
                                                            </h5>
                                                            @if ($address->is_default)
                                                                <span class="badge badge-success">Default Address</span>
                                                            @endif
                                                        </div>
                                                        <p class="card-text mt-2">
                                                            {{ $address->full_address }}
                                                        </p>
                                                    </div>

                                                    <p class="text-muted mb-0 mt-auto">
                                                        <strong>Latitude: </strong> {{ $address->latitute ?? '-' }},
                                                        <strong>Longitude: </strong> {{ $address->longitude ?? '-' }}
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            @else
                                <p>No addresses found for this user.</p>
                            @endif

                            @if (!empty($vendorBankDetails))
                                <hr>
                                <h4>Vendor Bank Details</h4>
                                <div class="table-responsive">
                                    <table class="table table-bordered text-nowrap text-center">
                                        <thead>
                                            <tr>
                                                <th class="align-middle">
                                                    Account Holder Name
                                                </th>
                                                <th class="align-middle">
                                                    Bank Name
                                                </th>
                                                <th class="align-middle">
                                                    BAN
                                                </th>
                                                <th class="align-middle">
                                                    Bank Branch Name
                                                </th>
                                                <th class="align-middle">
                                                    Mobile Number
                                                </th>
                                                <th class="align-middle">
                                                    IFSC Code
                                                </th>
                                                <th class="align-middle">
                                                    Account Type
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>
                                                    {{ ucwords($vendorBankDetails->account_holder_name) }}
                                                </td>
                                                <td>
                                                    {{ ucwords($vendorBankDetails->bank_name) }}
                                                </td>
                                                <td>
                                                    {{ $vendorBankDetails->BAN }}
                                                </td>
                                                <td>
                                                    {{ ucwords($vendorBankDetails->bank_branch_name) }}
                                                </td>
                                                <td>
                                                    {{ $vendorBankDetails->mobile_number }}
                                                </td>
                                                <td>
                                                    {{ $vendorBankDetails->ifsc_code }}
                                                </td>
                                                <td>
                                                    {{ ucwords($vendorBankDetails->account_type) }}
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            @endif

                            <!-- Back Button -->
                            <div class="mt-3">
                                <a href="{{ route('vendor.list') }}" class="btn btn-secondary">
                                    <i class="fas fa-arrow-left mr-1"></i> Back
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('scripts')
    <style>
        .profile-image-wrapper {
            position: relative;
            display: inline-block;
        }
        .profile-image-wrapper .profile-user-img {
            width: 100px;
            height: 100px;
            object-fit: cover;
        }
        .profile-image-overlay {
            position: absolute;
            bottom: 0;
            right: 0;
            background-color: rgba(0, 0, 0, 0.6);
            color: white;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .profile-image-overlay:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }
        .profile-image-overlay i {
            font-size: 14px;
        }
    </style>
    <script src="{{ asset('js/jquery.validate.min.js') }}"></script>
    <script src="{{ asset('js/additional-methods.min.js') }}"></script>
    <script src="{{ asset('js/custom.js') }}"></script>
    <script>
        $(document).ready(function() {
            // Profile image upload handler
            $('#profile-photo-input').on('change', function() {
                let file = this.files[0];
                if (file) {
                    // Show preview immediately after selection
                    let reader = new FileReader();
                    reader.onload = function(e) {
                        $('#vendor-profile-image').attr('src', e.target.result);
                    };
                    reader.readAsDataURL(file);

                    let formData = new FormData();
                    formData.append('profile_photo', file);
                    formData.append('user_id', $('#user_id').val());
                    formData.append('_token', '{{ csrf_token() }}');

                    $.ajax({
                        url: '{{ route("vendor.updateImage") }}',
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        beforeSend: function() {
                            $('.profile-image-overlay i').removeClass('fa-camera').addClass('fa-spinner fa-spin');
                        },
                        success: function(response) {
                            $('.profile-image-overlay i').removeClass('fa-spinner fa-spin').addClass('fa-camera');
                            if (response.status) {
                                // Add timestamp to prevent browser caching
                                var newImageUrl = response.image_url + '?t=' + new Date().getTime();
                                $('#vendor-profile-image').attr('src', newImageUrl);
                                toastr.success(response.message);
                            } else {
                                toastr.error(response.message);
                            }
                        },
                        error: function(xhr) {
                            $('.profile-image-overlay i').removeClass('fa-spinner fa-spin').addClass('fa-camera');
                            toastr.error('Something went wrong while uploading image.');
                            console.log(xhr.responseText);
                        }
                    });
                }
            });

            $(document).on('click', '.pagination a', function(event) {
                event.preventDefault();

                // Get the user_id from the hidden input field
                let userId = $('#user_id').val();
                let url = $(this).attr('href');

                // Add user_id to the URL if it's not already present
                if (url.includes('?')) {
                    url += '&user_id=' + encodeURIComponent(userId);
                } else {
                    url += '?user_id=' + encodeURIComponent(userId);
                }

                fetchBookings(url);
            });

            function fetchBookings(url) {
                $.ajax({
                    url: url,
                    type: 'GET',
                    success: function(data) {
                        $('#bookings-table').html(data.bookings);
                        $('#pagination-links').html(data.pagination_links);
                    },
                    error: function(xhr) {
                        alert('Something went wrong while loading bookings.');
                        console.log(xhr.responseText);
                    }
                });
            }
        });
    </script>

@endsection