@extends('agent.layouts.app')

@section('title', 'Agents')

@section('content')
<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;
        }

        /* List Styling */
        .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;
            }
        }

        /* Additional Styling for 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>
    <div class="d-flex justify-content-end mt-3 me-3" style="position:relative">
        <a class="btn btn-dark" style="position:absolute; bottom:43px;" href="{{ route('agent.profile.edit', $agent->id) }}">Edit</a>

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

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

            <!-- Contact Information -->
            @if(!empty($agent->phone) || !empty($agent->email) || !empty($agent->website_url) || !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_url))
                    <dt>Website:</dt>
                    <dd><a href="{{ $agent->website_url }}" target="_blank">{{ $agent->website_url }}</a></dd>
                    @endif

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

            <!-- Social Media -->
            @if($agent->instagram || $agent->facebook || $agent->twitter || $agent->linkedin)
            <section>
                <h3>Social Media</h3>
                <ul>
                    @if($agent->instagram)
                    <li><a href="{{ $agent->instagram }}" target="_blank"><i class="fa-brands fa-instagram"></i> Instagram</a></li>
                    @endif
                    @if($agent->facebook)
                    <li><a href="{{ $agent->facebook }}" target="_blank"><i class="fa-brands fa-facebook"></i> Facebook</a></li>
                    @endif
                    @if($agent->twitter)
                    <li><a href="{{ $agent->twitter }}" target="_blank"><i class="fa-brands fa-twitter"></i> Twitter</a></li>
                    @endif
                    @if($agent->linkedin)
                    <li><a href="{{ $agent->linkedin }}" target="_blank"><i class="fa-brands fa-linkedin"></i> LinkedIn</a></li>
                    @endif
                </ul>
            </section>
            @endif

            <!-- Additional Information -->
            @if(!empty($agent->status) || !empty($agent->role) || !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->role))
                    <dt>Role:</dt>
                    <dd>{{ ucfirst($agent->role) }}</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><br><br>

        <div class="card">
            <div class="card-header bg-dark text-white">
                {{$agent->full_name}} Add Photos
                <a href="{{ route('agent.listing.lists')}}" class="float-end text-white">All Listing</a>
            </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('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">
                    {{$agent->full_name}} All Photos

                </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 text-white" href="javascript:void(0);" onclick="event.preventDefault(); document.getElementById('delete-agent-{{ $image->id }}').submit();">
                                            Delete
                                        </a>
                                        <form id="delete-agent-{{ $image->id }}" action="{{ route('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>
        <!-- Add Dropzone CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/dropzone.min.css" />

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


        <script>
            Dropzone.options.imageUpload = {
                maxFilesize: 5, // Max file size in MB
                acceptedFiles: ".jpeg,.jpg,.png,.gif", // 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();
                },

                // Refresh page after all uploads complete
                queuecomplete: function() {
                    setTimeout(function() {
                        location.reload();
                    }, 1000); // Refresh the page after 1 second
                }
            };
        </script>
    </div>
    @endsection