@extends('layouts.admin')

@section('title', 'Edit Client')

@section('content')
    <h1 class="mb-4">Edit Client</h1>
    <form action="{{ route('clients.update', $client->id) }}" method="POST" enctype="multipart/form-data">
        @csrf
        @method('PUT')

        <div class="form-group">
            <label for="name">Name:</label>
            <input type="text" name="name" id="name" class="form-control" value="{{ $client->name }}" required>
        </div>

        <div class="form-group">
            <label for="group_id_slider">Group: <span id="group_id_display">{{ $client->group_id }}</span></label>
            <input type="range" class="custom-range" id="group_id_slider" name="group_id" min="1" max="8" step="1" value="{{ $client->group_id }}">
        </div>

        <div class="form-group">
            <label for="url">URL</label>
            <input type="text" name="url" id="url" class="form-control" value="{{ old('url', $client->url) }}" required>
            <small class="form-text text-muted">Enter a valid URL or use "#".</small>
        </div>

        <div class="form-group">
            <label for="coupon">Coupon:</label>
            <input type="text" name="coupon" id="coupon" class="form-control" value="{{ $client->coupon }}">
        </div>

        <div class="form-group">
            <label for="logo">Client Logo:</label>
            <input type="file" name="logo" id="logo" class="form-control-file">
            @if($client->logo)
                <img src="{{ asset('storage/' . $client->logo) }}" alt="Current Client Logo" class="img-fluid mt-2" style="max-height: 200px;">
            @else
                <img src="{{ asset('placeholder/no-logo.png') }}" alt="Placeholder Logo" class="img-fluid mt-2" style="max-height: 200px;">
            @endif
        </div>

        <button type="submit" class="btn btn-success">Update</button>
    </form>

    <hr>

    <!-- Social Links Section -->
    <h2 class="mt-5">Social Links</h2>

    <!-- Add New Social Link Form Inline at Top -->
    <form action="{{ route('social-links.store') }}" method="POST" class="mb-4">
        @csrf
        <input type="hidden" name="client_id" value="{{ $client->id }}">
        <div class="form-row">
            <div class="form-group col-md-3">
                <label for="platform" id="icon-example">Icon:</label>
                <select name="platform" id="platform" class="form-control select2-icon" required onchange="updateIconExample(this)">
                    <option value="">Select an icon</option>
                    @foreach($icons as $icon)
                        <option value="{{ $icon }}">{{ $icon }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group col-md-7">
                <label for="url">URL:</label>
                <input type="text" name="url" id="url" value="{{ old('url', '#') }}" class="form-control" required>
            </div>
            <div class="form-group col-md-2 align-self-end">
                <button type="submit" class="btn btn-primary btn-block">Add</button>
            </div>
        </div>
    </form>

    <table class="table table-hover">
        <thead class="thead-dark">
        <tr>
            <th>Icon</th>
            <th>URL</th>
            <th>Actions</th>
        </tr>
        </thead>
        <tbody>
        @foreach ($client->socialLinks as $socialLink)
            <tr>
                <td><i class="{{ $socialLink->platform }}"></i> </td>
                <td><a href="{{ $socialLink->url }}" target="_blank">{{ $socialLink->url }}</a></td>
                <td>
                    <form action="{{ route('social-links.destroy', $socialLink->id) }}" method="POST" class="d-inline">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger btn-sm"><i class="bi bi-trash"></i></button>
                    </form>
                </td>
            </tr>
        @endforeach
        </tbody>
    </table>

    <!-- Image Upload Section -->
    <hr>
    <h2 class="mt-5">Upload Images</h2>
    <form action="{{ route('images.store', $client->id) }}" method="POST" class="dropzone" id="image-dropzone">
        @csrf
        <div class="dz-message">
            Drop files here or click to upload.
        </div>
    </form>

    <!-- Display Uploaded Images -->
    <h2 class="mt-5">Uploaded Images</h2>
    <div class="row" id="uploaded-images">
        @foreach($client->images as $image)
            <div class="col-md-4 mb-3 position-relative">
                <img src="{{ asset('storage/' . $image->image_path) }}" class="img-fluid" alt="Client Image">
                <form action="{{ route('images.destroy', $image->id) }}" method="POST" class="position-absolute" style="top: 5px; right: 5px;">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger btn-sm"><i class="bi bi-trash"></i></button>
                </form>
            </div>
        @endforeach
    </div>
@endsection

@section('scripts')

    <!-- Include Dropzone JS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/min/dropzone.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/min/dropzone.min.js"></script>

    <script>
        document.getElementById('group_id_slider').addEventListener('input', function() {
            var groupId = this.value;
            document.getElementById('group_id_display').innerText = groupId;
        });

        $(document).ready(function() {
            $('#platform').select2({
                width: '100%',
                templateResult: formatIcon,
                templateSelection: formatIcon
            });

            function formatIcon(icon) {
                if (!icon.id) {
                    return icon.text;
                }
                var $icon = $('<span><i class="' + icon.element.value + '"></i> ' + icon.text + '</span>');
                return $icon;
            }
        });

        function updateIconExample(select) {
            var selectedIcon = select.value;
            var iconExampleDiv = document.getElementById('icon-example');
            iconExampleDiv.innerHTML = selectedIcon ? `Icon: <i class="${selectedIcon}"></i>` : '';
        }

        // Dropzone configuration
        Dropzone.options.imageDropzone = {
            maxFilesize: 2, // MB
            acceptedFiles: 'image/*',
            init: function() {
                this.on("sending", function(file, xhr, formData) {
                    formData.append("_token", "{{ csrf_token() }}");
                    formData.append("client_id", "{{ $client->id }}"); // Ensure client_id is sent with request
                });
            },
            success: function(file, response) {
                var uploadedImages = document.getElementById('uploaded-images');
                var imgElement = document.createElement('div');
                imgElement.className = 'col-md-4 mb-3 position-relative';
                imgElement.innerHTML = `
                    <img src="${response.path}" class="img-fluid" alt="Client Image">
                    <form action="/images/${response.image_id}" method="POST" class="position-absolute" style="top: 5px; right: 5px;">
                        @csrf
                @method('DELETE')
                <button type="submit" class="btn btn-danger btn-sm"><i class="bi bi-trash"></i></button>
            </form>
`;
                uploadedImages.appendChild(imgElement);
            }
        };
    </script>
@endsection