@extends('layouts.app')

@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="card">
            <div class="card-header">
                <div class="row align-items-center">
                    <div class="col-6">
                        <h5 class="card-title mb-0">Create New Ticket</h5>
                    </div>
                    <div class="col-6 text-end">
                        <a href="{{ route('tickets.index') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Back
                        </a>
                    </div>
                </div>
                <hr />
            </div>

            <div class="card-body">
                @can('create tickets')
                    <form action="{{ route('tickets.store') }}" method="POST" id="ticketForm">
                        @csrf
                        
                        @php
                            // ✅ Controller se $isAdmin pass kiya hai (recommended)
                            // Agar kisi reason se pass nahi hua to fallback:
                            $isAdmin = $isAdmin ?? auth()->user()->hasAnyRole(['admin','super admin','super-admin','super_admin']);
                        @endphp

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="mosque_id" class="form-label">Mosque *</label>
                                <select class="form-control @error('mosque_id') is-invalid @enderror" 
                                        id="mosque_id" name="mosque_id" required>
                                    <option value="">Select Mosque</option>
                                    @foreach($mosques as $mosque)
                                        <option value="{{ $mosque->id }}" {{ old('mosque_id') == $mosque->id ? 'selected' : '' }}>
                                            {{ $mosque->name }}
                                            @if($mosque->location)
                                                ({{ $mosque->location }})
                                            @endif
                                        </option>
                                    @endforeach
                                </select>
                                @error('mosque_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            {{-- ✅ Raised By: only Admin can choose; others see read-only --}}
                            {{-- <div class="col-md-6 mb-3">
                                <label for="raised_by" class="form-label">Raised By</label>

                                @if($isAdmin)
                                    <select class="form-control @error('raised_by') is-invalid @enderror" 
                                            id="raised_by" name="raised_by">
                                        <option value="">Select User</option>

                                       
                                        @foreach(($raisers ?? $users) as $user)
                                            <option value="{{ $user->id }}" {{ old('raised_by') == $user->id ? 'selected' : '' }}>
                                                {{ $user->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <small class="text-muted">Leave empty to use current user ({{ auth()->user()->name }})</small>
                                @else
                                  
                                    <input type="text" class="form-control" value="{{ auth()->user()->name }}" readonly>
                                    <small class="text-muted">Auto (current user)</small>
                                @endif

                                @error('raised_by')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div> --}}

                            <div class="col-md-6 mb-3">
                            <label for="raised_by" class="form-label">Raised By</label>

                            {{-- Hidden field: sirf login user ka ID --}}
                            <input type="hidden" name="raised_by" value="{{ auth()->id() }}">

                            {{-- Readonly field: sirf login user ka naam --}}
                            <input type="text"
                                class="form-control"
                                value="{{ auth()->user()->name }}"
                                readonly>

                            <small class="text-muted">Auto (current logged-in user)</small>

                            @error('raised_by')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>


                            <div class="col-md-6 mb-3">
                                <label for="urgency" class="form-label">Urgency *</label>
                                <select class="form-control @error('urgency') is-invalid @enderror" 
                                        id="urgency" name="urgency" required>
                                    @foreach($urgencies as $key => $label)
                                        <option value="{{ $key }}" {{ old('urgency') == $key ? 'selected' : '' }}>
                                            {{ $label }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('urgency')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-muted" id="sla-info">SLA will be calculated based on urgency</small>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="category" class="form-label">Category</label>
                                <select class="form-control @error('category') is-invalid @enderror" 
                                        id="category" name="category">
                                    <option value="">Select Category</option>
                                    @foreach($categories as $key => $label)
                                        <option value="{{ $key }}" {{ old('category') == $key ? 'selected' : '' }}>
                                            {{ $label }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('category')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            {{-- ✅ Status: only Admin can choose; others forced OPEN --}}
                            <div class="col-md-6 mb-3">
                                <label for="status" class="form-label">Status *</label>

                                @if($isAdmin)
                                    <select class="form-control @error('status') is-invalid @enderror" 
                                            id="status" name="status" required>
                                        @foreach($statuses as $key => $label)
                                            <option value="{{ $key }}" {{ old('status') == $key ? 'selected' : '' }}>
                                                {{ $label }}
                                            </option>
                                        @endforeach
                                    </select>
                                @else
                                    <input type="text" class="form-control" value="Open" readonly>
                                    <input type="hidden" name="status" value="OPEN">
                                @endif

                                @error('status')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="sla_due" class="form-label">SLA Due Date</label>
                                <input type="datetime-local" class="form-control @error('sla_due') is-invalid @enderror" 
                                       id="sla_due" name="sla_due" value="{{ old('sla_due') }}">
                                @error('sla_due')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <!--<small class="text-muted">Leave empty for auto-calculation based on urgency</small>-->
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="checklist_item_id" class="form-label">Related Checklist Item</label>
                                <select class="form-control @error('checklist_item_id') is-invalid @enderror" 
                                        id="checklist_item_id" name="checklist_item_id">
                                    <option value="">Select Checklist Item</option>
                                    @foreach($checklistItems as $item)
                                        <option value="{{ $item->id }}" {{ old('checklist_item_id') == $item->id ? 'selected' : '' }}>
                                            {{ $item->task_title }} - {{ $item->checklist->mosque->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('checklist_item_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            {{-- ✅ Assign To: only Admin can choose; others read-only blank --}}
                            <div class="col-md-6 mb-3">
                                <label for="assigned_to" class="form-label">Assign To</label>

                              
                                    <select class="form-control @error('assigned_to') is-invalid @enderror" 
                                            id="assigned_to" name="assigned_to">
                                        <option value="">Select User</option>

                                        {{-- ✅ Use $assignees list (admin/supervisor/maintenance/vendor only) --}}
                                        @foreach(($assignees ?? $users) as $user)
                                            <option value="{{ $user->id }}" {{ old('assigned_to') == $user->id ? 'selected' : '' }}>
                                                {{ $user->name }}
                                            </option>
                                        @endforeach
                                    </select>
                              
                                @error('assigned_to')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-12 mb-3">
                                <label for="message" class="form-label">Message *</label>
                                <textarea class="form-control @error('message') is-invalid @enderror" 
                                          id="message" name="message" rows="4" 
                                          placeholder="Describe the issue or request..." required>{{ old('message') }}</textarea>
                                @error('message')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-muted">Maximum 1000 characters</small>
                                <div class="mt-1">
                                    <span id="charCount">0</span> / 1000 characters
                                </div>
                            </div>

                            <div class="col-md-12 mb-3">
                                <label for="resolution_note" class="form-label">Resolution Note</label>
                                <textarea class="form-control @error('resolution_note') is-invalid @enderror" 
                                          id="resolution_note" name="resolution_note" rows="3" 
                                          placeholder="Enter resolution notes if applicable...">{{ old('resolution_note') }}</textarea>
                                @error('resolution_note')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="mt-4">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> Create Ticket
                            </button>
                            <a href="{{ route('tickets.index') }}" class="btn btn-secondary">Cancel</a>
                        </div>
                    </form>
                @else
                    <div class="alert alert-danger">
                        <i class="fas fa-ban"></i> You don't have permission to create tickets.
                    </div>
                @endcan
            </div>
        </div>
    </div>
@endsection

@push('script')
<script>
$(document).ready(function() {
    // Character counter for message
    $('#message').on('input', function() {
        var length = $(this).val().length;
        $('#charCount').text(length);
        
        if (length > 1000) {
            $('#charCount').addClass('text-danger');
        } else {
            $('#charCount').removeClass('text-danger');
        }
    });

    // Update SLA info based on urgency
    $('#urgency').on('change', function() {
        var urgency = $(this).val();
        var slaInfo = '';
        
        switch(urgency) {
            case 'URGENT':
                slaInfo = 'SLA: 4 hours (Auto-calculated if not specified)';
                break;
            case 'HIGH':
                slaInfo = 'SLA: 12 hours (Auto-calculated if not specified)';
                break;
            case 'NORMAL':
                slaInfo = 'SLA: 2 days (Auto-calculated if not specified)';
                break;
            case 'LOW':
                slaInfo = 'SLA: 7 days (Auto-calculated if not specified)';
                break;
            default:
                slaInfo = 'SLA will be calculated based on urgency';
        }
        
        $('#sla-info').text(slaInfo);
    });

    // Auto-calculate SLA date if not set
    $('#urgency').on('change', function() {
        if (!$('#sla_due').val()) {
            var urgency = $(this).val();
            var now = new Date();
            var slaDate = new Date();
            
            switch(urgency) {
                case 'URGENT':
                    slaDate.setHours(now.getHours() + 4);
                    break;
                case 'HIGH':
                    slaDate.setHours(now.getHours() + 12);
                    break;
                case 'NORMAL':
                    slaDate.setDate(now.getDate() + 2);
                    break;
                case 'LOW':
                    slaDate.setDate(now.getDate() + 7);
                    break;
            }
            
            // Format for datetime-local input
            var formattedDate = slaDate.toISOString().slice(0, 16);
            $('#sla_due').val(formattedDate);
        }
    });

    // Initial calculation
    $('#urgency').trigger('change');
    $('#message').trigger('input');
});
</script>
@endpush