@extends('layouts.dashboard')

@section('content')

<div class="content-wrapper" style="min-height: 241px;">
    <div class="content-header">
        <div class="container-fluid">
            @if(Session::has('msg'))
                <p class="alert {{ Session::get('alert-class', 'alert-info') }}">{{ Session::get('msg') }}</p>
            @endif
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">{{ $title }}</h1>
                </div>
                <div class="col-sm-6">
                    <a href="{{ url('/rm/rm-request-details/' . $rmDetails->uuid) }}" class="btn btn-secondary float-right">
                        <i class="fa fa-arrow-left"></i> Back to RM Details
                    </a>
                </div>
            </div>
        </div>
    </div>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">

                    {{-- Client Info Card (read-only) --}}
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Client Information</h3>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-4">
                                    <strong>Name:</strong> {{ $rmDetails->clientDetails->name ?? 'N/A' }}
                                </div>
                                <div class="col-md-4">
                                    <strong>Contact:</strong> {{ $rmDetails->clientDetails->phone ?? 'N/A' }}
                                </div>
                                <div class="col-md-4">
                                    <strong>Email:</strong> {{ $rmDetails->clientDetails->email_id ?? 'N/A' }}
                                </div>
                            </div>
                            @if($rmDetails->budget)
                            <div class="row mt-2">
                                <div class="col-md-4">
                                    <strong>RM Budget:</strong> {{ $rmDetails->budget }}
                                </div>
                            </div>
                            @endif
                        </div>
                    </div>

                    {{-- Create Event Form --}}
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Event Details</h3>
                        </div>
                        <form id="createEventForm" action="{{ url('/rm/store-event') }}" method="POST">
                            {{ csrf_field() }}
                            <input type="hidden" name="rm_request_uuid" value="{{ $rmDetails->uuid }}">
                            <input type="hidden" name="client_id" value="{{ $rmDetails->client_id }}">

                            <div class="card-body">
                                <div class="row">
                                    {{-- Event Type --}}
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="type">Event Type <span style="color:red;">*</span></label>
                                            <select name="type" id="type" class="form-control" required>
                                                <option value="">Select Type</option>
                                                <option value="personal" {{ (optional($rmDetails->categoryDetails)->type == 'personal') ? 'selected' : '' }}>Personal</option>
                                                <option value="professional" {{ (optional($rmDetails->categoryDetails)->type == 'corporate') ? 'selected' : '' }}>Professional</option>
                                            </select>
                                        </div>
                                    </div>

                                    {{-- Category --}}
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="category">Category <span style="color:red;">*</span></label>
                                            <select name="category" id="category" class="form-control" required>
                                                <option value="">Select Category</option>
                                                @foreach($categories as $cat)
                                                    <option value="{{ $cat->id }}" data-type="{{ $cat->type }}"
                                                        {{ ($rmDetails->category == $cat->id) ? 'selected' : '' }}>
                                                        {{ $cat->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    {{-- Event Name --}}
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="event_name">Event Name <span style="color:red;">*</span></label>
                                            <input type="text" name="event_name" id="event_name" class="form-control" required maxlength="100" placeholder="Enter event name">
                                        </div>
                                    </div>

                                    {{-- Number of Guests --}}
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="guest_count">Number of Guests <span style="color:red;">*</span></label>
                                            <input type="number" name="guest_count" id="guest_count" class="form-control" required min="1" placeholder="Enter guest count">
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    {{-- Event Date --}}
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="event_date">Event Date <span style="color:red;">*</span></label>
                                            <input type="date" name="event_date" id="event_date" class="form-control" required>
                                        </div>
                                    </div>

                                    {{-- Event Time --}}
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="event_start_time">Event Time <span style="color:red;">*</span></label>
                                            <input type="time" name="event_start_time" id="event_start_time" class="form-control" required>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    {{-- Country --}}
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="country_id">Country <span style="color:red;">*</span></label>
                                            <select name="country_id" id="country_id" class="form-control" required>
                                                <option value="">Select Country</option>
                                                @foreach($countries as $country)
                                                    <option value="{{ $country->id }}"
                                                        {{ ($rmDetails->country_id == $country->id) ? 'selected' : '' }}>
                                                        {{ $country->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    {{-- State --}}
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="state_id">State <span style="color:red;">*</span></label>
                                            <select name="state_id" id="state_id" class="form-control" required>
                                                <option value="">Select State</option>
                                                @foreach($states as $state)
                                                    <option value="{{ $state->id }}"
                                                        {{ ($rmDetails->state_id == $state->id) ? 'selected' : '' }}>
                                                        {{ $state->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    {{-- City --}}
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="cities_id">City <span style="color:red;">*</span></label>
                                            <select name="cities_id" id="cities_id" class="form-control" required>
                                                <option value="">Select City</option>
                                                @foreach($cities as $city)
                                                    <option value="{{ $city->id }}"
                                                        {{ ($rmDetails->city_id == $city->id) ? 'selected' : '' }}>
                                                        {{ $city->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                {{-- Description --}}
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="description">Description <span style="color:red;">*</span></label>
                                            <textarea name="description" id="description" class="form-control" rows="3" required maxlength="500" placeholder="Enter event description"></textarea>
                                        </div>
                                    </div>
                                </div>

                                {{-- Services Section --}}
                                <hr>
                                <h4>Services</h4>
                                <div id="servicesContainer">
                                    <div class="row service-row mb-2">
                                        <div class="col-md-5">
                                            <div class="form-group">
                                                <label>Service <span style="color:red;">*</span></label>
                                                <select name="services[0][id]" class="form-control service-select" required>
                                                    <option value="">Select Service</option>
                                                    @foreach($services as $service)
                                                        <option value="{{ $service->id }}">{{ $service->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label>Budget</label>
                                                <input type="number" name="services[0][budget]" class="form-control" min="0" value="0" placeholder="Budget">
                                            </div>
                                        </div>
                                        <div class="col-md-3 d-flex align-items-end">
                                            <div class="form-group">
                                                <button type="button" class="btn btn-danger btn-sm remove-service" style="display:none;">
                                                    <i class="fa fa-trash"></i> Remove
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <button type="button" id="addServiceBtn" class="btn btn-sm btn-success mb-3">
                                    <i class="fa fa-plus"></i> Add Service
                                </button>
                            </div>

                            <div class="card-footer">
                                <button type="button" class="btn btn-primary" onclick="submitCreateEvent()">Create Event</button>
                                <a href="{{ url('/rm/rm-request-details/' . $rmDetails->uuid) }}" class="btn btn-default">Cancel</a>
                            </div>
                        </form>
                    </div>

                </div>
            </div>
        </div>
    </section>
</div>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

{{-- Pass services data to JS for dynamic row creation --}}
<script>
    var servicesOptions = @json($services);
    var categoriesData = @json($categories);
</script>

@endsection