@extends('network.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 {
            width: 100%;
            height: 150px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .agent-img {
            width: 100%;
            object-fit: contain;
            border: 3px solid #ddd;
            display: block;
            margin: 0 auto;
        }

        .contact-info {
            list-style: none;
            margin-top: 20px;
            display: flex;
            flex-direction: column;
            text-align: left;
        }

        .contact-info li {
            display: flex;
            align-items: start;
            font-size: 16px;
            margin-bottom: 10px;
            padding: 20px;
        }
        .contact-info li a {
            font-size:16px;
        }

        .contact-info li i {
            margin-right: 10px;
            font-size: 20px;
            color: #007bff;
        }

        .row {
            display: flex;
            justify-content: space-between;
            align-items: stretch;
        }

        .col-md-4,
        .col-md-8 {
            display: flex;
        }

        .info-card {
            flex: 1;
        }

        /* 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;
            padding-bottom: 8px;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: bold;
        }

        .info-card h4 {
            text-align: left;
        }

        /* 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;
            flex-direction: column;
            justify-content: space-around;
        }

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

        

        /* 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>
    <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('network.agent.profile.edit', [$agent->id]) }}">Edit</a>
    </div>


    <div class="row">
        <!-- First Section: Image & Contact Information -->
        <div class="col-md-4">
            <div class="info-card text-center p-3">
                <img src="{{ $agent->logo_url }}" class="agent-img" alt="Agent Logo">
                <h3 class="mt-3">{{ $agent->full_name }}</h3>

                <h4 class="mt-4">Contact Information</h4>
                <ul class="contact-info">
                    @if(!empty($agent->phone))
                    <li><i class="fas fa-phone"></i><span> {{ $agent->phone }} </span></li>
                    @endif

                    @if(!empty($agent->email))
                    <li><i class="fas fa-envelope"></i> <a href="mailto:{{ $agent->email }}"> <span>{{ $agent->email }}</span></a></li>
                    @endif

                    @if(!empty($agent->website))
                    <li><i class="fas fa-globe"></i> <a href="{{ $agent->website }}" target="_blank"><span>{{ $agent->website }}</span></a></li>
                    @endif

                    @if(!empty($agent->address))
                    <li><i class="fas fa-map-marker-alt"></i> <span>{{ $agent->address }}, {{ $agent->city }}, {{ $agent->state }} {{ $agent->zip }} </span></li>
                    @endif
                </ul>
            </div>
        </div>
        <!-- Second Section: About Agent & Additional Information -->
        <div class="col-md-8">
            <div class="info-card p-4">
                @if(!empty($agent->about))
                <section>
                    <h3>About the Agent</h3>
                    <p>{!! $agent->about !!}</p>
                </section>
                @endif

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

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

                        @if(!empty($agent->updated_at))
                        <li><strong>Updated At:</strong> {{ \Carbon\Carbon::parse($agent->updated_at)->format('F j, Y, g:i a') }}</li>
                        @endif
                    </ul>
                </section>
                @endif
            </div>
        </div>
    </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>


<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