@extends('home_layout.master_sidebar')

@section('page_styles')
    <!-- Include your styles -->
    <style>
        .event-card {
            border-radius: 8px;
            padding: 15px;
            background-color: #ffffff;
            border: 1px solid #e9ecef;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .event-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .event-card-header .settings {
            font-size: 1.2em;
            cursor: pointer;
            color: #6c757d;
        }
        .event-card .event-name {
            font-weight: bold;
            font-size: 1em;
            color: #333;
        }
        .event-card .event-details {
            color: #6c757d;
            font-size: 0.9em;
        }
    </style>
@stop

@section('breadcrumbs')
    @include('home_layout.breadcrumb', [
       'title' => 'Your Services',
       'breadcrumbs' => [
           ['title' => 'Home', 'link' => '#'],
           ['title' => 'Services', 'link' => route('events.index')]
       ]
   ])
@stop

@section('content')
    <div class="container-fluid">
        <h1>Your Services</h1>
        <a href="{{ route('events.create') }}" class="btn btn-primary mb-3">Create New Service</a>

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

        @if($events->count())
            <div class="row">
                @foreach($events as $event)
                    <div class="col-md-4">
                        <div class="event-card">
                            <div class="event-card-header">
                                <span class="event-name">{{ $event->event_name }}</span>
                                <div class="dropdown">
                                    <i class="fas fa-cog settings" data-bs-toggle="dropdown"></i>
                                    <ul class="dropdown-menu">
                                        <li><a class="dropdown-item" href="{{ route('events.edit', $event->id) }}">Edit</a></li>
                                        <li>
                                            <form action="{{ route('events.destroy', $event->id) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this event?');">
                                                @csrf
                                                @method('DELETE')
                                                <button class="dropdown-item" type="submit">Delete</button>
                                            </form>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <p class="event-details">{{ $event->duration }} min</p>
                            <!-- Updated 'View booking page' link -->
                            <a href="{{ route('booking.show', $event->id) }}" class="d-block mb-2">View booking page</a>
                            <div class="d-flex justify-content-between">
                                <!-- Copy Link Button -->
{{--                                <button class="btn btn-outline-secondary btn-sm" onclick="copyBookingLink('{{ route('booking.show', $event->id) }}')">Copy link</button>--}}

                                ${{$event->price}}
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <p>You have no events yet.</p>
        @endif
    </div>
@stop

@section('page_scripts')
    <!-- Include necessary scripts -->
    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
    <script>
        function copyBookingLink(url) {
            navigator.clipboard.writeText(url).then(function() {
                alert('Booking link copied to clipboard!');
            }, function(err) {
                alert('Failed to copy: ', err);
            });
        }

        function shareBookingLink(url) {
            if (navigator.share) {
                navigator.share({
                    title: 'Book an Event',
                    text: 'Check out this event:',
                    url: url
                }).then(() => {
                    console.log('Thanks for sharing!');
                })
                    .catch(console.error);
            } else {
                alert('Web Share API not supported in this browser. Please copy the link manually.');
            }
        }
    </script>
@stop