@extends('template.app')

@section('meta')
@endsection

@section('title')
   Edit Ticket
@endsection

@section('styles')
<link href="{{ asset('assets/css/dropify.min.css') }}" rel="stylesheet">
<link href="{{ asset('assets/css/sweetalert2.bundle.css') }}" rel="stylesheet">
@endsection

@section('content')
<div class="page-breadcrumb">
    <div class="row">
        <div class="col-7 align-self-center">
            <h4 class="page-title text-truncate text-dark font-weight-medium mb-1">Ticket</h4>
            <div class="d-flex align-items-center">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb m-0 p-0">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}" class="text-muted">Dashboard</a></li>
                        <li class="breadcrumb-item text-muted active" aria-current="page">Edit Ticket</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <form action="{{ route('ticket.update') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="id" value="{{ $data->id }}">

                        <div class="row">
                            <div class="form-group col-sm-5">
                                <label>Name</label>
                                <input type="text" name="name" value="{{ $data->user->first_name }}" class="form-control" readonly>
                            </div>
                            <div class="form-group col-sm-5">
                                <label>Title</label>
                                <input type="text" name="title" class="form-control" value="{{ $data->title }}" required>
                            </div>
                            <div class="form-group col-sm-5">
                                <label>Description</label>
                                <textarea name="description" class="form-control">{{ $data->description }}</textarea>
                            </div>
                            <div class="form-group col-sm-5">
                                <label>Contact</label>
                                <input type="number" name="contact" class="form-control" value="{{ $data->contact }}">
                            </div>
                            <div class="form-group col-sm-5">
                                <label>Email</label>
                                <input type="email" name="email" class="form-control" value="{{ $data->email_id }}">
                            </div>
                            @php
                                $existing_images = isset($data->ticket_image) ? explode(",", $data->ticket_image) : [];
                            @endphp
                            
                            <div class="form-group col-sm-5">
                                <label for="ticket_image" class="custom-label">Attachments</label>
                                
                                <!-- File input -->
                                <input type="file" name="ticket_image[]" id="ticket_image" class="form-control dropify" multiple accept="image/*">
                                <span class="kt-form__help error ticket_image"></span>
                            
                                <!-- Existing image preview -->
                                <div id="ticket_image_multi" class="mt-2">
                                    @foreach($existing_images as $img)
                                        @if(!empty($img))
                                            <img src="{{ asset('uploads/tickets/' . $img) }}" width="100" class="mr-2 mb-2 rounded border">
                                        @endif
                                    @endforeach
                                </div>
                            </div>
                            <div class="form-group col-sm-5">
                                <label>Status</label>
                                <select name="status" class="form-control">
                                    <option value="open" {{ $data->status == 'open' ? 'selected' : '' }}>Open</option>
                                    <option value="in_progress" {{ $data->status == 'in_progress' ? 'selected' : '' }}>In Progress</option>
                                    <option value="closed" {{ $data->status == 'closed' ? 'selected' : '' }}>Closed</option>
                                </select>
                            </div>
                            <div class="form-group col-sm-5">
                                <label>Comment</label>
                                <textarea name="comment" class="form-control">{{ $data->comment }}</textarea>
                            </div>
                        </div>

                        <div class="form-group">
                            <button type="submit" class="btn btn-primary btn-rounded">Update</button>
                            <a href="{{ route('dashboard') }}" class="btn btn-secondary btn-rounded">Cancel</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('scripts')
<script>
function previewMultiple(event, previewId) {
    const output = document.getElementById(previewId);
    output.innerHTML = ''; // Clear existing previews

    for (let file of event.target.files) {
        const reader = new FileReader();
        reader.onload = function(e) {
            const img = document.createElement('img');
            img.setAttribute('src', e.target.result);
            img.classList.add('mr-2', 'mb-2', 'rounded', 'border');
            img.style.width = '100px';
            output.appendChild(img);
        };
        reader.readAsDataURL(file);
    }
}
</script>
@endsection