@extends('layouts.app')

@section('title', 'Create New Ticket')

@section('content')
<div class="container-fluid">
    <!-- Header Section -->
    <div class="row mb-1">
        <div class="col-12">
            <div class="jumbotron jumbotron-fluid custom-header-bg text-white rounded-lg" style="padding: 1rem 0;">
                <div class="container-fluid">
                    <div class="row align-items-center">
                        <div class="col-lg-8">
                            <div class="d-flex align-items-center mb-0">
                                <div class="mr-3">
                                    <i class="fas fa-ticket-alt fa-2x text-warning"></i>
                                </div>
                                <div>
                                    <h1 class="h3 font-weight-bold mb-0">Create New Ticket</h1>
                                    <p class="mb-0 small">Support Ticket Management System</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 text-lg-right mt-0 mt-lg-0">
                            <div class="action-buttons-small">
                                <a href="{{ route('tickets.index') }}" class="action-btn-small btn-back-list">
                                    <i class="fas fa-arrow-left"></i>Back to List
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Form -->
    <div class="row">
        <div class="col-12">
            <div class="card border-0">
                <div class="card-body p-1">
                    <form action="{{ route('tickets.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" id="client_info_id" name="client_info_id" value="">
                    
                    <!-- User Information Section -->
                    <div class="card mb-4">
                        <div class="card-header bg-info text-white border-0">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-user fa-lg mr-3"></i>
                                <h6 class="card-title mb-0 font-weight-bold">User Information</h6>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="user_search" class="form-label font-weight-bold text-muted small text-uppercase">
                                            <i class="fas fa-search mr-1"></i>USER NAME (ID)
                                        </label>
                                        <div class="autocomplete-container">
                                            <input type="text" class="form-control" id="user_search" 
                                                   placeholder="Search by name, mobile, or username_ip..." 
                                                   autocomplete="off">
                                            <div class="autocomplete-results" id="searchResults"></div>
                                            <div class="add-new-container" id="addNewContainer" style="display: none;">
                                                <div class="add-new-item">
                                                    <i class="fas fa-plus"></i>
                                                    <span>Add New Client</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Client Information Section -->
                    <div class="card mb-4">
                        <div class="card-header bg-success text-white border-0">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-user-circle fa-lg mr-3"></i>
                                <h6 class="card-title mb-0 font-weight-bold">Client Information</h6>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="customer_name" class="form-label font-weight-bold text-muted small text-uppercase">
                                            <i class="fas fa-user mr-1"></i>Customer Name
                                        </label>
                                        <input type="text" class="form-control @error('customer_name') is-invalid @enderror" 
                                               id="customer_name" name="customer_name" 
                                               value="{{ old('customer_name') }}" 
                                               placeholder="Enter customer name">
                                        @error('customer_name')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="mobile_number" class="form-label font-weight-bold text-muted small text-uppercase">
                                            <i class="fas fa-phone mr-1"></i>Mobile Number (existing)
                                        </label>
                                        <input type="text" class="form-control" id="mobile_number" readonly>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="client_address" class="form-label font-weight-bold text-muted small text-uppercase">
                                            <i class="fas fa-map-marker-alt mr-1"></i>Client Address
                                        </label>
                                        <input type="text" class="form-control" id="client_address" readonly>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="zone" class="form-label font-weight-bold text-muted small text-uppercase">
                                            <i class="fas fa-map mr-1"></i>Zone
                                        </label>
                                        <input type="text" class="form-control" id="zone" readonly>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="billing_status" class="form-label font-weight-bold text-muted small text-uppercase">
                                            <i class="fas fa-credit-card mr-1"></i>Billing Status
                                        </label>
                                        <input type="text" class="form-control" id="billing_status" readonly>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="monthly_bill" class="form-label font-weight-bold text-muted small text-uppercase">
                                            <i class="fas fa-dollar-sign mr-1"></i>Monthly Bill
                                        </label>
                                        <input type="text" class="form-control" id="monthly_bill" readonly>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                    <label for="last_paid_amount">Last Paid Amount</label>
                                    <input type="text" class="form-control" id="last_paid_amount" readonly>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="payment_status">Payment Status</label>
                                    <input type="text" class="form-control" id="payment_status" readonly>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="mikrotik_status">Mikrotik Status</label>
                                    <input type="text" class="form-control" id="mikrotik_status" readonly>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Network/Device Information Section -->
                    <div class="card mb-4">
                        <div class="card-header bg-warning text-dark border-0">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-network-wired fa-lg mr-3"></i>
                                <h6 class="card-title mb-0 font-weight-bold">Network/Device Information</h6>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="uptime" class="form-label font-weight-bold text-muted small text-uppercase">
                                            <i class="fas fa-clock mr-1"></i>Uptime
                                        </label>
                                        <input type="text" class="form-control" id="uptime" readonly>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="last_logout_time" class="form-label font-weight-bold text-muted small text-uppercase">
                                            <i class="fas fa-sign-out-alt mr-1"></i>Last Logout Time
                                        </label>
                                        <input type="text" class="form-control" id="last_logout_time" readonly>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="mac_address" class="form-label font-weight-bold text-muted small text-uppercase">
                                            <i class="fas fa-ethernet mr-1"></i>MAC Address/Caller ID
                                        </label>
                                        <input type="text" class="form-control" id="mac_address" readonly>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="ip_address" class="form-label font-weight-bold text-muted small text-uppercase">
                                            <i class="fas fa-globe mr-1"></i>IP Address
                                        </label>
                                        <input type="text" class="form-control" id="ip_address" readonly>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="device_vendor" class="form-label font-weight-bold text-muted small text-uppercase">
                                            <i class="fas fa-microchip mr-1"></i>Device Vendor Name
                                        </label>
                                        <input type="text" class="form-control" id="device_vendor" readonly>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="connectivity_status" class="form-label font-weight-bold text-muted small text-uppercase">
                                            <i class="fas fa-wifi mr-1"></i>Connectivity Status
                                        </label>
                                        <input type="text" class="form-control" id="connectivity_status" readonly>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="online_status" class="form-label font-weight-bold text-muted small text-uppercase">
                                            <i class="fas fa-circle mr-1"></i>Online Status
                                        </label>
                                        <input type="text" class="form-control" id="online_status" readonly>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="downloaded_data" class="form-label font-weight-bold text-muted small text-uppercase">
                                            <i class="fas fa-download mr-1"></i>Downloaded Data
                                        </label>
                                        <input type="text" class="form-control" id="downloaded_data" readonly>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="uploaded_data" class="form-label font-weight-bold text-muted small text-uppercase">
                                            <i class="fas fa-upload mr-1"></i>Uploaded Data
                                        </label>
                                        <input type="text" class="form-control" id="uploaded_data" readonly>
                                    </div>
                                </div>
                            </div>
                        <div class="row">
                            <div class="col-md-12 text-center">
                                <button type="button" class="btn btn-secondary" id="notFoundBtn">
                                    Not Found
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- ONU Information Section -->
                    <div class="card mb-4">
                        <div class="card-header bg-info text-white border-0">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-satellite-dish fa-lg mr-3"></i>
                                <h6 class="card-title mb-0 font-weight-bold">ONU Informations</h6>
                                <span class="badge badge-light ml-auto">New</span>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="onu_client_mac" class="form-label font-weight-bold text-muted small text-uppercase">
                                            <i class="fas fa-ethernet mr-1"></i>Client MAC Address
                                        </label>
                                        <input type="text" class="form-control" id="onu_client_mac" readonly>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="onu_ip_address" class="form-label font-weight-bold text-muted small text-uppercase">
                                            <i class="fas fa-globe mr-1"></i>IP Address
                                        </label>
                                        <input type="text" class="form-control" id="onu_ip_address" readonly>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="olt_name" class="form-label font-weight-bold text-muted small text-uppercase">
                                            <i class="fas fa-server mr-1"></i>OLT Name
                                        </label>
                                        <input type="text" class="form-control" id="olt_name" readonly>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="optical_power" class="form-label font-weight-bold text-muted small text-uppercase">
                                            <i class="fas fa-bolt mr-1"></i>Optical Power
                                        </label>
                                        <input type="text" class="form-control" id="optical_power" readonly>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="olt_port" class="form-label font-weight-bold text-muted small text-uppercase">
                                            <i class="fas fa-plug mr-1"></i>OLT Port
                                        </label>
                                        <input type="text" class="form-control" id="olt_port" readonly>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="onu_mac_serial" class="form-label font-weight-bold text-muted small text-uppercase">
                                            <i class="fas fa-barcode mr-1"></i>ONU MAC Address/Serial
                                        </label>
                                        <input type="text" class="form-control" id="onu_mac_serial" readonly>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="onu_status" class="form-label font-weight-bold text-muted small text-uppercase">
                                            <i class="fas fa-circle mr-1"></i>Status
                                        </label>
                                        <input type="text" class="form-control" id="onu_status" readonly>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="last_deregister_time" class="form-label font-weight-bold text-muted small text-uppercase">
                                            <i class="fas fa-clock mr-1"></i>Last Deregister Time
                                        </label>
                                        <input type="text" class="form-control" id="last_deregister_time" readonly>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="distance" class="form-label font-weight-bold text-muted small text-uppercase">
                                            <i class="fas fa-ruler mr-1"></i>Distance
                                        </label>
                                        <input type="text" class="form-control" id="distance" readonly>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="last_deregister_reasons" class="form-label font-weight-bold text-muted small text-uppercase">
                                            <i class="fas fa-exclamation-triangle mr-1"></i>Last Deregister Reasons
                                        </label>
                                        <input type="text" class="form-control" id="last_deregister_reasons" readonly>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="onu_description" class="form-label font-weight-bold text-muted small text-uppercase">
                                            <i class="fas fa-info-circle mr-1"></i>Description
                                        </label>
                                        <input type="text" class="form-control" id="onu_description" readonly>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Problem Details Section -->
                    <div class="card mb-4">
                        <div class="card-header bg-danger text-white border-0">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-exclamation-triangle fa-lg mr-3"></i>
                                <h6 class="card-title mb-0 font-weight-bold">Problem Details</h6>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="category" class="form-label font-weight-bold text-muted small text-uppercase">
                                            <i class="fas fa-tags mr-1"></i>Problem Category <span class="text-danger">*</span>
                                        </label>
                                        <select class="form-control @error('category') is-invalid @enderror" 
                                                id="category" name="category" required>
                                            <option value="">Select Problem Category</option>
                                            @foreach($problemCategories as $problemCategory)
                                                <option value="{{ $problemCategory->id }}" {{ old('category') == $problemCategory->id ? 'selected' : '' }}>
                                                    {{ $problemCategory->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('category')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="priority" class="form-label font-weight-bold text-muted small text-uppercase">
                                            <i class="fas fa-flag mr-1"></i>Problem Priority <span class="text-danger">*</span>
                                        </label>
                                        <select class="form-control @error('priority') is-invalid @enderror" 
                                                id="priority" name="priority" required>
                                            <option value="">Select</option>
                                            <option value="low" {{ old('priority') == 'low' ? 'selected' : '' }}>Low</option>
                                            <option value="medium" {{ old('priority') == 'medium' ? 'selected' : '' }}>Medium</option>
                                            <option value="high" {{ old('priority') == 'high' ? 'selected' : '' }}>High</option>
                                            <option value="urgent" {{ old('priority') == 'urgent' ? 'selected' : '' }}>Urgent</option>
                                        </select>
                                        @error('priority')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="complained_number" class="form-label font-weight-bold text-muted small text-uppercase">
                                            <i class="fas fa-phone mr-1"></i>Complained Number
                                        </label>
                                        <input type="text" class="form-control @error('complained_number') is-invalid @enderror" 
                                               id="complained_number" name="complained_number" value="{{ old('complained_number') }}">
                                        @error('complained_number')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Remarks/Note/Comments -->
                            <div class="form-group mt-4">
                                <label for="description" class="form-label font-weight-bold text-muted small text-uppercase">
                                    <i class="fas fa-comment mr-1"></i>Remarks/Note/Comments
                                </label>
                                <div class="editor-toolbar">
                                    <button type="button" class="btn btn-sm btn-outline-secondary" title="Undo">
                                        <i class="fas fa-undo"></i>
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-secondary" title="Redo">
                                        <i class="fas fa-redo"></i>
                                    </button>
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle" data-toggle="dropdown">
                                            Formats
                                        </button>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item" href="#">Paragraph</a>
                                            <a class="dropdown-item" href="#">Heading 1</a>
                                            <a class="dropdown-item" href="#">Heading 2</a>
                                        </div>
                                    </div>
                                    <button type="button" class="btn btn-sm btn-outline-secondary" title="Bold">
                                        <i class="fas fa-bold"></i>
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-secondary" title="Italic">
                                        <i class="fas fa-italic"></i>
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-secondary" title="Bulleted List">
                                        <i class="fas fa-list-ul"></i>
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-secondary" title="Numbered List">
                                        <i class="fas fa-list-ol"></i>
                                    </button>
                                </div>
                                <textarea class="form-control @error('description') is-invalid @enderror" 
                                          id="description" name="description" rows="8">{{ old('description') }}</textarea>
                                @error('description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            
                            <!-- Attachments -->
                            <div class="form-group">
                                <label for="attachments" class="form-label font-weight-bold text-muted small text-uppercase">
                                    <i class="fas fa-paperclip mr-1"></i>Attachments
                                </label>
                                <div class="file-upload-area">
                                    <input type="file" class="form-control-file" id="attachments" name="attachments[]" multiple>
                                    <small class="form-text text-muted">
                                        Add a file. Select multiple files if you want to upload multiple files.
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>



                    <!-- Action Buttons -->
                    <div class="form-section">
                        <div class="row">
                            <div class="col-md-12 text-center">
                                <button type="button" class="btn btn-danger btn-lg mr-3" onclick="window.close()">
                                    Cancel
                                </button>
                                <button type="button" class="btn btn-warning btn-lg mr-3" id="clearFormBtn">
                                    Clear
                                </button>
                                <button type="submit" class="btn btn-primary btn-lg">
                                    Submit
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Add New Client Modal -->
<div class="modal fade" id="addNewClientModal" tabindex="-1" role="dialog" aria-labelledby="addNewClientModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addNewClientModalLabel">
                    <i class="fas fa-user-plus"></i> Add New Client
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="addNewClientForm">
                    @csrf
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="new_client_name">Full Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="new_client_name" name="full_name" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="new_client_mobile">Mobile Number <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="new_client_mobile" name="mobile_number" required>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="new_client_email">Email Address</label>
                                <input type="email" class="form-control" id="new_client_email" name="email_address">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="new_client_address">Address</label>
                                <input type="text" class="form-control" id="new_client_address" name="present_address">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="new_client_username_ip">Username/IP <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="new_client_username_ip" name="username_ip" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="new_client_password">Password <span class="text-danger">*</span></label>
                                <input type="password" class="form-control" id="new_client_password" name="password" required>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="new_client_ip">IP Address</label>
                                <input type="text" class="form-control" id="new_client_ip" name="ip_address">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="new_client_zone">Zone</label>
                                <input type="text" class="form-control" id="new_client_zone" name="zone">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="saveNewClientBtn">
                    <i class="fas fa-save"></i> Save Client
                </button>
            </div>
        </div>
    </div>
</div>

<style>
/* Bootstrap 4 Design Styles */
.custom-header-bg {
    background-color: #2E4153 !important;
    border-radius: 15px !important;
}

.action-buttons-small {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
}

.action-btn-small {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    min-width: 140px;
    justify-content: center;
}

.btn-back-list {
    background: white;
    color: #212529;
    border: 1px solid #dee2e6;
}

.btn-back-list:hover {
    background: #f8f9fa;
    color: #212529;
    transform: translateY(-1px);
}

/* Form Label Styles */
.form-label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.5rem;
}

/* Card Enhancements */
.card {
    border-radius: 0.5rem;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
}

.card-header {
    border-radius: 0.5rem 0.5rem 0 0 !important;
    padding: 1rem 1.25rem;
}

.card-body {
    padding: 1.25rem;
}

/* Form Control Enhancements */
.form-control {
    border-radius: 0.375rem;
    border: 1px solid #ced4da;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus {
    border-color: #80bdff;
}

/* Responsive Design for Action Buttons */
@media (max-width: 768px) {
    .action-buttons-small {
        align-items: center;
        width: 100%;
    }
    
    .action-btn-small {
        width: 100%;
        min-width: auto;
        font-size: 0.75rem;
        padding: 6px 12px;
    }
}

@media (max-width: 576px) {
    .action-btn-small {
        font-size: 0.7rem;
        padding: 5px 10px;
        gap: 4px;
    }
}

/* Header Styles */
.ticket-header {
    background: #2D3F52;
    color: white;
    padding: 20px 0;
    border-radius: 8px 8px 0 0;
    margin-bottom: 0;
}

.ticket-title {
    color: white;
    font-size: 1.8rem;
    font-weight: 600;
    margin: 0;
}

.ticket-title i {
    color: white;
    margin-right: 10px;
}

/* Form Container Styles */
.ticket-form-container {
    background: white;
    border-radius: 0 0 8px 8px;
    padding: 30px;
}

/* Form Section Styles */
.form-section {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e9ecef;
}

.form-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.section-title {
    color: #2c3e50;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-title .badge {
    font-size: 0.7rem;
    padding: 4px 8px;
}

/* Form Group Styles */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 5px;
    font-size: 0.9rem;
}

.form-control {
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 0.9rem;
}

.form-control:focus {
    border-color: #3498db;
}

/* Editor Toolbar Styles */
.editor-toolbar {
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
    padding: 8px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px 4px 0 0;
}

.editor-toolbar .btn {
    padding: 4px 8px;
    font-size: 0.8rem;
}

/* File Upload Styles */
.file-upload-area {
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    background: #f8f9fa;
}

.file-upload-area:hover {
    border-color: #3498db;
    background: #e3f2fd;
}

/* Button Styles */
.btn-lg {
    padding: 12px 30px;
    font-size: 1rem;
    font-weight: 600;
}

.btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
}

.btn-warning {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #212529;
}

.btn-primary {
    background-color: #3498db;
    border-color: #3498db;
}

/* Autocomplete Styles */
.autocomplete-container {
    position: relative;
}

.autocomplete-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ced4da;
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}

.autocomplete-item {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid #f8f9fa;
    transition: background-color 0.2s;
}

.autocomplete-item:hover {
    background-color: #f8f9fa;
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-item.selected {
    background-color: #e3f2fd;
}

.autocomplete-item .client-name {
    font-weight: 600;
    color: #2c3e50;
}

.autocomplete-item .client-details {
    font-size: 0.8rem;
    color: #6c757d;
    margin-top: 2px;
}

.autocomplete-item .client-id {
    font-size: 0.7rem;
    color: #28a745;
    font-weight: 600;
}

/* Add New Client Styles */
.add-new-container {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ced4da;
    border-top: none;
    border-radius: 0 0 4px 4px;
    z-index: 1000;
}

.add-new-item {
    padding: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #3498db;
    font-weight: 600;
    transition: background-color 0.2s;
    border-bottom: 1px solid #f8f9fa;
}

.add-new-item:hover {
    background-color: #e3f2fd;
}

.add-new-item i {
    font-size: 1.2rem;
}

/* Modal Styles */
.modal-header {
    background: #2D3F52;
    color: white;
    border-bottom: none;
}

.modal-header .close {
    color: white;
    opacity: 0.8;
}

.modal-header .close:hover {
    opacity: 1;
}

.modal-title i {
    margin-right: 8px;
}

/* Loading Animation */
@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .ticket-title {
        font-size: 1.5rem;
    }
    
    .ticket-form-container {
        padding: 20px;
    }
    
    .form-group {
        margin-bottom: 15px;
    }
    
    .btn-lg {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    
    .editor-toolbar {
        flex-wrap: wrap;
    }
    
    .autocomplete-results {
        max-height: 150px;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Editor Toolbar Functionality
    const descriptionTextarea = document.getElementById('description');
    
    // Undo functionality
    document.querySelector('.editor-toolbar .btn[title="Undo"]').addEventListener('click', function() {
        document.execCommand('undo');
    });
    
    // Redo functionality
    document.querySelector('.editor-toolbar .btn[title="Redo"]').addEventListener('click', function() {
        document.execCommand('redo');
    });
    
    // Bold functionality
    document.querySelector('.editor-toolbar .btn[title="Bold"]').addEventListener('click', function() {
        document.execCommand('bold');
    });
    
    // Italic functionality
    document.querySelector('.editor-toolbar .btn[title="Italic"]').addEventListener('click', function() {
        document.execCommand('italic');
    });
    
    // Bulleted List functionality
    document.querySelector('.editor-toolbar .btn[title="Bulleted List"]').addEventListener('click', function() {
        document.execCommand('insertUnorderedList');
    });
    
    // Numbered List functionality
    document.querySelector('.editor-toolbar .btn[title="Numbered List"]').addEventListener('click', function() {
        document.execCommand('insertOrderedList');
    });
    
    // Format dropdown functionality
    document.querySelectorAll('.dropdown-menu .dropdown-item').forEach(item => {
        item.addEventListener('click', function(e) {
            e.preventDefault();
            const format = this.textContent.trim();
            
            switch(format) {
                case 'Paragraph':
                    document.execCommand('formatBlock', false, 'p');
                    break;
                case 'Heading 1':
                    document.execCommand('formatBlock', false, 'h1');
                    break;
                case 'Heading 2':
                    document.execCommand('formatBlock', false, 'h2');
                    break;
            }
        });
    });
    
    // Client select removed - now using simple input field
    const userSearchInput = document.getElementById('user_search');
    const searchResults = document.getElementById('searchResults');
    const clearFormBtn = document.getElementById('clearFormBtn');
    const notFoundBtn = document.getElementById('notFoundBtn');
    
    let searchTimeout;
    let selectedClient = null;
    
    // Client selection handler
    // Client select change event removed - now using simple input field
    
    // Auto search functionality
    userSearchInput.addEventListener('input', function() {
        const searchTerm = this.value.trim();
        
        console.log('Input event triggered with:', searchTerm);
        
        // Clear previous timeout
        clearTimeout(searchTimeout);
        
        // Hide results if search term is too short
        if (searchTerm.length < 2) {
            hideSearchResults();
            return;
        }
        
        // Debounce search requests
        searchTimeout = setTimeout(() => {
            console.log('Timeout triggered, calling searchClients');
            searchClients(searchTerm);
        }, 300);
    });
    
    // Handle keyboard navigation
    userSearchInput.addEventListener('keydown', function(e) {
        const items = searchResults.querySelectorAll('.autocomplete-item');
        const selected = searchResults.querySelector('.autocomplete-item.selected');
        
        if (e.key === 'ArrowDown') {
            e.preventDefault();
            if (selected) {
                selected.classList.remove('selected');
                const next = selected.nextElementSibling;
                if (next) {
                    next.classList.add('selected');
                } else {
                    items[0]?.classList.add('selected');
                }
            } else {
                items[0]?.classList.add('selected');
            }
        } else if (e.key === 'ArrowUp') {
            e.preventDefault();
            if (selected) {
                selected.classList.remove('selected');
                const prev = selected.previousElementSibling;
                if (prev) {
                    prev.classList.add('selected');
                } else {
                    items[items.length - 1]?.classList.add('selected');
                }
            } else {
                items[items.length - 1]?.classList.add('selected');
            }
        } else if (e.key === 'Enter') {
            e.preventDefault();
            if (selected) {
                selectClient(selected.dataset.clientId);
            }
        } else if (e.key === 'Escape') {
            hideSearchResults();
        }
    });
    
    // Hide results when clicking outside
    document.addEventListener('click', function(e) {
        if (!e.target.closest('.autocomplete-container')) {
            hideSearchResults();
        }
    });
    
    // Clear form handler
    clearFormBtn.addEventListener('click', function() {
        if (confirm('Are you sure you want to clear all form data?')) {
            document.querySelector('form').reset();
            clearClientFields();
        }
    });
    
    // Not found button handler
    notFoundBtn.addEventListener('click', function() {
        // Clear network/device fields
        clearNetworkFields();
    });
    
    // Save new client button handler
    document.getElementById('saveNewClientBtn').addEventListener('click', function() {
        saveNewClient();
    });
    
    // Function to search clients
    function searchClients(query) {
        console.log('Searching for:', query);
        
        fetch(`${window.location.origin}/api/search-clients?q=${encodeURIComponent(query)}`)
            .then(response => {
                console.log('Response status:', response.status);
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.json();
            })
            .then(data => {
                console.log('Search results:', data);
                displaySearchResults(data);
            })
            .catch(error => {
                console.error('Search error:', error);
                hideSearchResults();
            });
    }
    
    // Function to display search results
    function displaySearchResults(clients) {
        searchResults.innerHTML = '';
        
        if (clients.length === 0) {
            // Show "Add New" option when no results found
            showAddNewOption();
            return;
        }
        
        clients.forEach(client => {
            const item = document.createElement('div');
            item.className = 'autocomplete-item';
            item.dataset.clientId = client.id;
            item.innerHTML = `
                <div class="client-name">${client.full_name}</div>
                <div class="client-details">${client.mobile_number} - ${client.username_ip || client.username}</div>
                <div class="client-id">ID: ${client.id}</div>
            `;
            
            item.addEventListener('click', function() {
                selectClient(client.id);
            });
            
            searchResults.appendChild(item);
        });
        
        searchResults.style.display = 'block';
        hideAddNewOption();
    }
    
    // Function to hide search results
    function hideSearchResults() {
        searchResults.style.display = 'none';
        searchResults.innerHTML = '';
        hideAddNewOption();
    }
    
    // Function to show "Add New" option
    function showAddNewOption() {
        const addNewContainer = document.getElementById('addNewContainer');
        addNewContainer.style.display = 'block';
        
        // Add click handler for "Add New" option
        const addNewItem = addNewContainer.querySelector('.add-new-item');
        addNewItem.onclick = function() {
            openAddNewModal();
        };
    }
    
    // Function to hide "Add New" option
    function hideAddNewOption() {
        const addNewContainer = document.getElementById('addNewContainer');
        addNewContainer.style.display = 'none';
    }
    
    // Function to open "Add New" modal
    function openAddNewModal() {
        $('#addNewClientModal').modal('show');
        hideSearchResults();
    }
    
    // Function to select a client
    function selectClient(clientId) {
        // Find the client data from the search results
        const selectedItem = searchResults.querySelector(`[data-client-id="${clientId}"]`);
        if (selectedItem) {
            const clientName = selectedItem.querySelector('.client-name').textContent;
            userSearchInput.value = clientName;
            
            // Set the selected client ID
            selectedClient = clientId;
            document.getElementById('client_info_id').value = clientId;
            
            // Hide search results
            hideSearchResults();
            
            // Fetch and populate client details
            fetchClientDetails(clientId);
        }
    }
    
    // Function to fetch client details
    function fetchClientDetails(clientId) {
        // Show loading state
        showLoadingState();
        
        // Fetch client details from API using client ID
        fetch(`${window.location.origin}/api/client-details/${clientId}`)
            .then(response => response.json())
            .then(data => {
                if (data.success && data.client) {
                    populateClientFields(data.client);
                    showSuccessMessage('Client information loaded successfully!');
                } else {
                    console.error('Client not found:', data.message);
                    showErrorMessage('Client details not found. Please try again.');
                }
            })
            .catch(error => {
                console.error('Error fetching client details:', error);
                showErrorMessage('Error fetching client details. Please try again.');
            })
            .finally(() => {
                hideLoadingState();
            });
    }
    
    // Function to show loading state
    function showLoadingState() {
        // Add loading indicator to search input
        const searchInput = document.getElementById('user_search');
        searchInput.style.background = 'linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)';
        searchInput.style.backgroundSize = '200% 100%';
        searchInput.style.animation = 'loading 1.5s infinite';
        
        // Disable form fields temporarily
        const formFields = document.querySelectorAll('#customer_name, #mobile_number, #client_address, #zone, #billing_status, #monthly_bill, #last_paid_amount, #payment_status, #mikrotik_status, #uptime, #last_logout_time, #mac_address, #ip_address, #device_vendor, #connectivity_status, #online_status, #downloaded_data, #uploaded_data, #onu_client_mac, #onu_ip_address, #olt_name, #optical_power, #olt_port, #onu_mac_serial, #onu_status, #last_deregister_time, #distance, #last_deregister_reasons, #onu_description');
        formFields.forEach(field => {
            field.style.opacity = '0.6';
            field.disabled = true;
        });
    }
    
    // Function to hide loading state
    function hideLoadingState() {
        // Remove loading indicator from search input
        const searchInput = document.getElementById('user_search');
        searchInput.style.background = '';
        searchInput.style.animation = '';
        
        // Re-enable form fields
        const formFields = document.querySelectorAll('#customer_name, #mobile_number, #client_address, #zone, #billing_status, #monthly_bill, #last_paid_amount, #payment_status, #mikrotik_status, #uptime, #last_logout_time, #mac_address, #ip_address, #device_vendor, #connectivity_status, #online_status, #downloaded_data, #uploaded_data, #onu_client_mac, #onu_ip_address, #olt_name, #optical_power, #olt_port, #onu_mac_serial, #onu_status, #last_deregister_time, #distance, #last_deregister_reasons, #onu_description');
        formFields.forEach(field => {
            field.style.opacity = '1';
            field.disabled = false;
        });
    }
    
    // Function to show success message
    function showSuccessMessage(message) {
        // Create or update success message
        let successDiv = document.getElementById('successMessage');
        if (!successDiv) {
            successDiv = document.createElement('div');
            successDiv.id = 'successMessage';
            successDiv.style.cssText = 'position: fixed; top: 20px; right: 20px; background: #d4edda; color: #155724; padding: 15px 20px; border-radius: 5px; z-index: 9999; font-weight: 600;';
            document.body.appendChild(successDiv);
        }
        successDiv.innerHTML = '✅ ' + message;
        successDiv.style.display = 'block';
        
        // Auto hide after 3 seconds
        setTimeout(() => {
            successDiv.style.display = 'none';
        }, 3000);
    }
    
    // Function to show error message
    function showErrorMessage(message) {
        // Create or update error message
        let errorDiv = document.getElementById('errorMessage');
        if (!errorDiv) {
            errorDiv = document.createElement('div');
            errorDiv.id = 'errorMessage';
            errorDiv.style.cssText = 'position: fixed; top: 20px; right: 20px; background: #f8d7da; color: #721c24; padding: 15px 20px; border-radius: 5px; z-index: 9999; font-weight: 600;';
            document.body.appendChild(errorDiv);
        }
        errorDiv.innerHTML = '❌ ' + message;
        errorDiv.style.display = 'block';
        
        // Auto hide after 5 seconds
        setTimeout(() => {
            errorDiv.style.display = 'none';
        }, 5000);
    }
    
    // Function to populate client fields
    function populateClientFields(client) {
        // Populate client information fields
        document.getElementById('customer_name').value = client.full_name;
        document.getElementById('mobile_number').value = client.mobile_number;
        document.getElementById('client_address').value = client.address;
        document.getElementById('zone').value = client.zone;
        document.getElementById('billing_status').value = client.billing_status;
        document.getElementById('monthly_bill').value = client.monthly_bill;
        document.getElementById('last_paid_amount').value = client.last_paid_amount;
        document.getElementById('payment_status').value = client.payment_status;
        document.getElementById('mikrotik_status').value = client.mikrotik_status;
        
        // Populate network/device fields
        document.getElementById('uptime').value = client.uptime;
        document.getElementById('last_logout_time').value = client.last_logout_time;
        document.getElementById('mac_address').value = client.mac_address;
        document.getElementById('ip_address').value = client.ip_address;
        document.getElementById('device_vendor').value = client.device_vendor;
        document.getElementById('connectivity_status').value = client.connectivity_status;
        document.getElementById('online_status').value = client.online_status;
        document.getElementById('downloaded_data').value = client.downloaded_data;
        document.getElementById('uploaded_data').value = client.uploaded_data;
        
        // Populate ONU fields
        document.getElementById('onu_client_mac').value = client.onu_client_mac;
        document.getElementById('onu_ip_address').value = client.onu_ip_address;
        document.getElementById('olt_name').value = client.olt_name;
        document.getElementById('optical_power').value = client.optical_power;
        document.getElementById('olt_port').value = client.olt_port;
        document.getElementById('onu_mac_serial').value = client.onu_mac_serial;
        document.getElementById('onu_status').value = client.onu_status;
        document.getElementById('last_deregister_time').value = client.last_deregister_time;
        document.getElementById('distance').value = client.distance;
        document.getElementById('last_deregister_reasons').value = client.last_deregister_reasons;
        document.getElementById('onu_description').value = client.onu_description;
    }
    
    // Function to clear client fields
    function clearClientFields() {
        const fields = [
            'customer_name', 'mobile_number', 'client_address', 'zone', 'billing_status',
            'monthly_bill', 'last_paid_amount', 'payment_status', 'mikrotik_status'
        ];
        
        fields.forEach(fieldId => {
            document.getElementById(fieldId).value = '';
        });
        
        // Clear client selection
        selectedClient = null;
        document.getElementById('client_info_id').value = '';
        document.getElementById('user_search').value = '';
        
        clearNetworkFields();
        clearONUFields();
    }
    
    // Function to clear network fields
    function clearNetworkFields() {
        const fields = [
            'uptime', 'last_logout_time', 'mac_address', 'ip_address',
            'device_vendor', 'connectivity_status', 'online_status',
            'downloaded_data', 'uploaded_data'
        ];
        
        fields.forEach(fieldId => {
            document.getElementById(fieldId).value = '';
        });
    }
    
    // Function to clear ONU fields
    function clearONUFields() {
        const fields = [
            'onu_client_mac', 'onu_ip_address', 'olt_name', 'optical_power',
            'olt_port', 'onu_mac_serial', 'onu_status', 'last_deregister_time',
            'distance', 'last_deregister_reasons', 'onu_description'
        ];
        
        fields.forEach(fieldId => {
            document.getElementById(fieldId).value = '';
        });
    }
    
    // Function to save new client
    function saveNewClient() {
        const form = document.getElementById('addNewClientForm');
        const formData = new FormData(form);
        
        // Add CSRF token
        formData.append('_token', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));
        
        // Show loading state
        const saveBtn = document.getElementById('saveNewClientBtn');
        const originalText = saveBtn.innerHTML;
        saveBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Saving...';
        saveBtn.disabled = true;
        
        fetch('/api/clients', {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Close modal
                $('#addNewClientModal').modal('hide');
                
                // Clear form
                form.reset();
                
                // Set the search input with new client name
                const clientName = document.getElementById('new_client_name').value;
                userSearchInput.value = clientName;
                
                // Client select dropdown removed - now using simple input field
                
                // Populate client fields with new data
                populateClientFields(data.client);
                
                // Show success message
                alert('Client created successfully!');
            } else {
                alert('Error creating client: ' + (data.message || 'Unknown error'));
            }
        })
        .catch(error => {
            console.error('Error saving client:', error);
            alert('Error creating client. Please try again.');
        })
        .finally(() => {
            // Restore button state
            saveBtn.innerHTML = originalText;
            saveBtn.disabled = false;
        });
    }
    
    // Form submission handler
    document.querySelector('form').addEventListener('submit', function(e) {
        console.log('Form submission started...');
        
        // Check if required fields are filled
        const category = document.getElementById('category').value;
        const priority = document.getElementById('priority').value;
        
        if (!category) {
            e.preventDefault();
            alert('Please select a Problem Category');
            document.getElementById('category').focus();
            return false;
        }
        
        if (!priority) {
            e.preventDefault();
            alert('Please select a Problem Priority');
            document.getElementById('priority').focus();
            return false;
        }
        
        console.log('Form validation passed, submitting...');
        return true;
    });
});
</script>
@endsection