@extends('home_layout.master_sidebar')

@section('page_styles')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        .profile-container {
            max-width: 600px;
            margin: 40px auto;
            background: #fff;
            padding: 20px;
            border-radius: 8px;
        }
        .gallery-preview {
            margin-top: 15px;
        }
        .gallery-preview h5 {
            margin-bottom: 10px;
        }
        .gallery-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .gallery-grid img {
            width: calc(33.333% - 10px);
            height: 100px;
            object-fit: cover;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
    </style>
@stop

@section('content')
    <div class="container-fluid profile-container">
        <h3>Profile</h3>

        @if(session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif

        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form method="POST" action="{{ route('profile.update') }}" enctype="multipart/form-data">
            @csrf

            <!-- Name -->
            <div class="form-group">
                <label>Name</label>
                <input type="text" name="name" class="form-control" value="{{ old('name', $user->name) }}" required>
            </div>

            <!-- User Booking Link Section -->
            <div class="form-group">
                <label>User Booking Link</label>
                <div class="input-group">
                    <span class="input-group-text">{{ url('company/booking/' . $user->company->slug) }}/</span>
                    <input type="text" id="user-booking-username" name="username" class="form-control" value="{{ old('username', $user->username) }}" placeholder="Your username">
                    <button type="button" class="btn btn-outline-secondary" id="copy-user-booking-link">Copy</button>
                    <button type="button" class="btn btn-outline-primary" id="open-user-booking-link">Go</button>
                </div>
                <small class="form-text text-muted">This link directs to your public booking profile page.</small>
            </div>

            <!-- Email (Read-only) -->
            <div class="form-group">
                <label>Email</label>
                <input type="email" class="form-control" value="{{ $user->email }}" disabled>
            </div>

            <!-- Phone -->
            <div class="form-group">
                <label>Phone</label>
                <input type="text" name="phone" class="form-control" value="{{ old('phone', $user->phone) }}">
            </div>

            <!-- Address -->
            <div class="form-group">
                <label>Address</label>
                <input type="text" name="address" class="form-control" value="{{ old('address', $user->address) }}">
            </div>

            <!-- Country -->
            <div class="form-group">
                <label>Country</label>
                <select name="country" class="form-control">
                    @foreach($countries as $code => $name)
                        <option value="{{ $code }}" {{ old('country', $user->country) == $code ? 'selected' : '' }}>
                            {{ $name }}
                        </option>
                    @endforeach
                </select>
            </div>

            <!-- Embedded Video -->
            <div class="form-group">
                <label>Embedded Video</label>
                <input type="text" name="embedded_video" class="form-control" value="{{ old('embedded_video', $user->embedded_video) }}">
            </div>

            <!-- Welcome Message -->
            <div class="form-group">
                <label>Welcome Message</label>
                <textarea name="welcome_message" class="form-control">{{ old('welcome_message', $user->welcome_message) }}</textarea>
            </div>

            <!-- New: About Staff -->
            <div class="form-group">
                <label>About Staff</label>
                <textarea name="about_staff" class="form-control">{{ old('about_staff', $user->about_staff) }}</textarea>
            </div>

            <!-- Profile Picture -->
            <div class="form-group">
                <label>Profile Picture</label>
                <div>
                    @if($user->profile_picture)
                        <img src="{{ asset('uploads/profile_pictures/' . $user->profile_picture) }}" alt="Profile Picture" class="img-thumbnail" width="150">
                    @endif
                </div>
                <input type="file" name="profile_picture" class="form-control-file mt-2">
            </div>

            <!-- New: Gallery Images Upload -->
            <div class="form-group">
                <label>Gallery Images</label>
                <input type="file" name="gallery_images[]" class="form-control" multiple>
                <small class="form-text text-muted">Upload images of your work.</small>
            </div>

            <!-- New: Gallery Preview -->
            @if($user->galleries->isNotEmpty())
                <div class="gallery-preview">
                    <h5>Your Work Gallery</h5>
                    <div class="gallery-grid">
                        @foreach($user->galleries as $gallery)
                            <img src="{{ asset('uploads/staff_gallery/' . $gallery->image) }}" alt="Gallery Image">
                        @endforeach
                    </div>
                </div>
            @endif

            <!-- New: Specialties -->
            <div class="form-group">
                <label>Specialties</label>
                <select name="specialties[]" class="form-control select2" multiple="multiple">
                    @foreach($allSpecialties as $specialty)
                        <option value="{{ $specialty->id }}" {{ in_array($specialty->id, $user->specialties->pluck('id')->toArray()) ? 'selected' : '' }}>
                            {{ $specialty->name }}
                        </option>
                    @endforeach
                </select>
                <small class="form-text text-muted">Select your specialties.</small>
            </div>

            <!-- Submit Button -->
            <button type="submit" class="btn btn-primary">Update Profile</button>

            <!-- Google Calendar Connection Section -->
            <div class="form-group mt-4">
                @if(!$user->google_id)
                    <a href="{{ route('auth.google', ['connect_calendar' => true]) }}" class="btn btn-danger">Connect Google Calendar</a>
                @else
                    <p>Your Google Calendar is connected.</p>
                    <form method="POST" action="{{ route('google-calendar.disconnect') }}">
                        @csrf
                        <button type="submit" class="btn btn-warning">Disconnect Google Calendar</button>
                    </form>
                @endif
            </div>
        </form>
    </div>
@stop

@section('page_scripts')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function(){
            $('.select2').select2();

            // User Booking Link: Copy to Clipboard
            $('#copy-user-booking-link').on('click', function(){
                var username = $('#user-booking-username').val().trim();
                var baseUrl = "{{ url('company/booking/' . $user->company->slug) }}/";
                var fullUrl = baseUrl + username;
                if(username !== ''){
                    navigator.clipboard.writeText(fullUrl).then(function(){
                        Swal.fire({
                            icon: 'success',
                            title: 'Copied!',
                            text: 'Link copied: ' + fullUrl,
                            showConfirmButton: false,
                            timer: 1500
                        });
                    }).catch(function(err){
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Failed to copy link.'
                        });
                    });
                } else {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Invalid Input',
                        text: 'Please enter your username.'
                    });
                }
            });

            // User Booking Link: Open in New Tab
            $('#open-user-booking-link').on('click', function(){
                var username = $('#user-booking-username').val().trim();
                var baseUrl = "{{ url('company/booking/' . $user->company->slug) }}/";
                var fullUrl = baseUrl + username;
                if(username !== ''){
                    window.open(fullUrl, '_blank');
                } else {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Invalid Input',
                        text: 'Please enter your username.'
                    });
                }
            });
        });
    </script>
@stop