@extends('company.layouts.app')

@section('title', 'Agent Dashboard')

@section('content')

<!-- Dropzone CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.css">

<!-- Dropzone JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.js"></script>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<div class="p-4">
    <style>
        /* Hero Section */
        .hero-section {
            width: 100%;
            height: 400px;
            background-image: url('{{ $agent->logo_url }}');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 12px;
            margin-bottom: 40px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            background-color: #f3f4f6;
            /* Fallback color */
        }

        /* Main Card Container */
        .info-card {
            background-color: #ffffff;
            border-radius: 12px;
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
            padding: 30px;
            margin-top: 40px;
            font-family: 'Arial', sans-serif;
        }

        .info-card h3 {
            font-size: 22px;
            margin-bottom: 15px;
            color: #333333;
            border-bottom: 2px solid #eeeeee;
            padding-bottom: 8px;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: bold;
        }

        .info-card section {
            margin-bottom: 30px;
        }

        .info-card dl {
            display: flex;
            flex-wrap: wrap;
            margin: 0;
            padding: 0;
        }

        /* Styling for dt (terms) */
        .info-card dt {
            font-weight: 600;
            color: #444444;
            width: 10%;
            /* Takes 30% of the container */
            text-align: left;
            margin: 0;
            /* Remove margin */
            padding: 8px;
        }

        /* Styling for dd (definitions) */
        .info-card dd {
            width: 90%;
            /* Takes 70% of the container */
            margin: 0;
            color: #555555;
            text-align: left;
            padding: 8px;
        }

        /* Optional: Adjust spacing on smaller screens */
        @media (max-width: 768px) {
            .info-card dl {
                flex-direction: column;
                /* Stack dt and dd vertically on mobile */
            }

            .info-card dt,
            .info-card dd {
                width: 100%;
                /* Take full width on smaller screens */
            }
        }

        /* Links */
        .info-card a {
            color: #007bff;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .info-card a:hover {
            color: #0056b3;
            text-decoration: underline;
        }

        /* Social Media Links */
        .info-card ul {
            padding-left: 0;
            list-style: none;
            margin: 0;
            display: flex;
            justify-content: space-around;
        }

        .info-card ul li {
            font-size: 18px;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
        }

        .info-card ul li i {
            margin-right: 8px;
            color: #6c757d;
        }

        .info-card ul li a {
            font-size: 18px;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .hero-section {
                height: 250px;
            }

            .info-card {
                padding: 20px;
            }

            .info-card h3 {
                font-size: 20px;
            }

            .info-card ul li {
                font-size: 16px;
            }
        }

        /* Network Section */
        .info-card .network-section dt {
            font-weight: bold;
            color: #444444;
            margin-top: 8px;
        }

        .info-card .network-section dd {
            margin: 5px 0 15px 20px;
            color: #555555;
            font-style: italic;
        }
    </style>

    <!-- Hero Section -->
    <div class="hero-section"></div>

    <!-- Single Card for All Sections -->
    <div class="info-card">
        <!-- About the Agent -->
        @if(!empty($agent->about))
        <section>
            <h3>About the Agent</h3>
            <p>{!! $agent->about !!}</p>
        </section>
        @endif

        <!-- Contact Information -->
        @if(!empty($agent->phone) || !empty($agent->email) || !empty($agent->website) || !empty($agent->address))
        <section>
            <h3>Contact Information</h3>
            <dl>
                @if(!empty($agent->phone))
                <dt>Phone:</dt>
                <dd>{{ $agent->phone }}</dd>
                @endif

                @if(!empty($agent->email))
                <dt>Email:</dt>
                <dd><a href="mailto:{{ $agent->email }}">{{ $agent->email }}</a></dd>
                @endif

                @if(!empty($agent->website))
                <dt>Website:</dt>
                <dd><a href="{{ $agent->website }}" target="_blank">{{ $agent->website }}</a></dd>
                @endif

                @if(!empty($agent->address))
                <dt>Address:</dt>
                <dd>{{ $agent->address }}, {{ $agent->address2 }}, {{ $agent->city }}, {{ $agent->state }}, {{ $agent->county }} {{ $agent->zip }}</dd>
                @endif
            </dl>
        </section>
        @endif

        <!-- Additional Information -->
        @if(!empty($agent->status) || !empty($agent->created_at) || !empty($agent->updated_at))
        <section>
            <h3>Additional Information</h3>
            <dl>
                @if(!empty($agent->status))
                <dt>Status:</dt>
                <dd>{{ ucfirst($agent->status) }}</dd>
                @endif

                @if(!empty($agent->created_at))
                <dt>Created At:</dt>
                <dd>{{ \Carbon\Carbon::parse($agent->created_at)->format('F j, Y, g:i a') }}</dd>
                @endif

                @if(!empty($agent->updated_at))
                <dt>Updated At:</dt>
                <dd>{{ \Carbon\Carbon::parse($agent->updated_at)->format('F j, Y, g:i a') }}</dd>
                @endif
            </dl>
        </section>
        @endif


    </div>
    <div class="p-4">
        <div class="card">
            <div class="card-header bg-dark text-white">
                Add Photos to Gallery
            </div>
            <div class="card-body">
                @if (session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
                @endif
                @if (session('error'))
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    {{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
                @endif

                <!-- Success message div -->
                <div id="success-message" class="alert alert-success" style="display: none;"></div>

                <!-- Error message div -->
                <div id="error-message" class="alert alert-danger" style="display: none;"></div>

                <form action="{{ route('network.agent.lifestyle.added',[$agent->id])}}" method="POST" class="dropzone" id="image-upload" enctype="multipart/form-data">
                    @csrf
                    <div class="dz-message">
                        Drag and drop files here or click to upload
                    </div>
                </form>

            </div>
        </div>
        <div class="p-4 mt-4">
            <div class="card">
                <div class="card-header bg-dark text-white">
                    My Photos Gallery

                </div>
                <div class="card-body">


                    <div class="p-4">
                        <div class="row">
                          {{--  @foreach ($images as $image)
                            <div class="col-md-3">
                                <div class="card mb-2">
                                    <img src="{{$image->image_url}}" class="card-img-top" width="100" height="200" style="object-fit: cover;">
                                    <div class="card-body text-center">
                                        <a class="btn btn-danger btn-sm" href="javascript:void(0);" onclick="event.preventDefault(); document.getElementById('delete-agent-{{ $image->id }}').submit();">
                                            Delete
                                        </a>
                                        <form id="delete-agent-{{ $image->id }}" action="{{ route('network.agent.lifestyle.delete',[$image->id]) }}" method="POST" style="display: none;">
                                            @csrf
                                            @method('delete')
                                        </form>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                            --}}
                        </div>


                       {{--<div class="d-flex justify-content-between align-items-center mt-4">
                            <div>
                                Showing {{ $images->firstItem() }} to {{ $images->lastItem() }} of {{ $images->total() }} results
                            </div>
                            <div>
                                {{ $images->links('vendor.pagination.bootstrap-4') }}
                            </div>
                        </div>--}}

                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="text-center"><a class="btn btn-dark w-25" href="{{ route('company.agent.profile.edit', [$agent->id]) }}">Edit</a></div>
    
</div>


<script>
    Dropzone.options.imageUpload = {
        maxFilesize: 5, // Max file size in MB
        acceptedFiles: ".jpeg,.jpg,.png,.gif,.webp", // Allowed file types
        maxFiles: 100, // Maximum number of files
        addRemoveLinks: true,

        // Handle successful uploads
        success: function(file, response) {
            console.log('File uploaded successfully:', response);
            const successDiv = document.getElementById('success-message');
            successDiv.style.display = 'block'; // Show the success message div
            successDiv.innerHTML = 'File uploaded successfully'; // Set the success message

            // Clear error message if present
            const errorDiv = document.getElementById('error-message');
            errorDiv.style.display = 'none';
        },

        // Handle upload errors
        error: function(file, errorMessage) {
            console.error('Upload failed:', errorMessage);

            const errorDiv = document.getElementById('error-message');
            errorDiv.style.display = 'block'; // Show the error message div
            errorDiv.innerHTML = `Upload failed: ${errorMessage}`; // Set the error message

            // Clear success message if present
            const successDiv = document.getElementById('success-message');
            successDiv.style.display = 'none';
        },

        // Handle file removal
        removedfile: function(file) {
            console.log('File removed:', file.name);
            file.previewElement.remove();
        }
    };
</script>

@endsection