@extends('layouts.user_type.auth')

@section('ticketSupport')
    <div class="row">
        <div class="col-12">

            @include('components.alert')

            <div class="card mb-4 mx-4">
                <div class="card p-3">
                    <div class="d-flex flex-row justify-content-between">

                        <h5 class="mb-0">Tickets</h5>

                        <button type="button" class="btn btn-primary btn-sm mb-0" data-bs-toggle="modal"
                            data-bs-target="#createTicketModal">+ Ticket</button>

                    </div>
                    <div class="card-body px-0 pt-0 pb-2">
                        <div class="table-responsive p-0">
                            <table class="table align-items-center mb-0">
                                <thead>
                                    <tr>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">No
                                        </th>
                                        <th
                                            class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                            Ticket Number</th>
                                        <th
                                            class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                            Company Name</th>
                                        <th
                                            class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                            Subject</th>
                                        <th
                                            class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                            Priority</th>
                                        <th
                                            class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                            Status</th>
                                        <th
                                            class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                            Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($tickets as $index => $ticket)
                                        <tr>
                                            <td class="ps-4">
                                                <p class="text-xs font-weight-bold mb-0">
                                                    {{ $tickets->firstItem() + $index }}</p>
                                            </td>
                                            <td class="text-center">
                                                <p class="text-xs font-weight-bold mb-0">{{ $ticket->ticket_number }}</p>
                                            </td>
                                            <td class="text-center">
                                                <p class="text-xs font-weight-bold mb-0">
                                                    {{ $ticket->companyProfile->company_name }}</p>
                                            </td>
                                            <td class="text-center">
                                                <p class="text-xs font-weight-bold mb-0">{{ $ticket->subject }}</p>
                                            </td>
                                            <td class="text-center">
                                                <p
                                                    class="text-xs font-weight-bold mb-0 
                                                @if ($ticket->priority == 'Low') badge bg-gradient-success
                                                @elseif($ticket->priority == 'Medium')
                                                    badge bg-gradient-warning
                                                @elseif($ticket->priority == 'High')
                                                    badge bg-gradient-danger
                                                @elseif($ticket->priority == 'Urgent')
                                                    badge bg-gradient-dark @endif">
                                                    {{ ucfirst($ticket->priority) }}
                                                </p>
                                            </td>
                                            <td class="text-center">
                                                <p
                                                    class="text-xs font-weight-bold mb-0 
                                                @if ($ticket->status == 'Open') badge bg-gradient-primary
                                                @elseif($ticket->status == 'In Progress')
                                                    badge bg-gradient-warning
                                                @elseif($ticket->status == 'Resolved')
                                                    badge bg-gradient-success
                                                @elseif($ticket->status == 'Closed')
                                                    badge bg-gradient-secondary @endif">
                                                    {{ ucfirst($ticket->status) }}
                                                </p>
                                            </td>
                                            <td class="text-center">
                                                <a
                                                    href="{{ route('ticketSupport.individual.show', $ticket->ticket_number) }}"><i
                                                        class="fa fa-eye text-secondary"></i></a>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="7" class="text-center py-5">
                                                <img src="{{ asset('assets/img/no_data_found.png') }}" alt="No Data Found"
                                                    style="width: 200px; opacity: 0.6;">
                                                <p class="mt-2 text-muted">No data Found</p>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                            @include('components.pagination', [
                                'paginator' => $tickets->appends(request()->query()),
                            ])
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Create Ticket Modal -->
    <div class="modal fade" id="createTicketModal" tabindex="-1" aria-labelledby="createTicketModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <form action="{{ route('ticketSupport.store') }}" id="createTicketForm" enctype="multipart/form-data"
                    method="POST">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title" id="createTicketModalLabel">Create Ticket</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row">

                            <div class="col-md-6">

                                <div class="mb-3">
                                    <label for="company" class="form-label">Company<span
                                            class="text-danger">*</span></label>
                                    <select name="company_id" id="company" class="form-control" required>
                                        <option value="">Select a Company</option>
                                        @foreach ($companyProfile as $company)
                                            <option value="{{ $company->id }}" data-tenant-id="{{ $company->tenant_id }}">
                                                {{ $company->company_name }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="mb-3">
                                    <label for="subject" class="form-label">Subject<span
                                            class="text-danger">*</span></label>
                                    <input type="text" name="subject" id="subject" class="form-control" required>
                                </div>

                                <div class="mb-3">
                                    <label for="file" class="form-label">Upload File</label>
                                    <input type="file" name="file" id="file" class="form-control"
                                        accept=".jpg,.jpeg,.png,.pdf,.xlsx,.xls,.doc,.docx,.txt">
                                </div>
                            </div>

                            <div class="col-md-6">

                                <div class="mb-3">
                                    <label for="customer" class="form-label">Customer<span
                                            class="text-danger">*</span></label>
                                    <select name="customer_id" id="customer" class="form-control" required>
                                        <option value="">Select a Customer</option>
                                        @foreach ($user as $customer)
                                            <option value="{{ $customer->id }}">{{ $customer->name }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="mb-3">
                                    <label for="message" class="form-label">Message<span
                                            class="text-danger">*</span></label>
                                    <input type="text" name="message" id="message" class="form-control" required>
                                </div>

                                <div class="mb-3">
                                    <label for="priority" class="form-label">Priority<span
                                            class="text-danger">*</span></label>
                                    <select name="priority" id="priority" class="form-control" required>
                                        <option value="Low">Low</option>
                                        <option value="Medium">Medium</option>
                                        <option value="High">High</option>
                                        <option value="Urgent">Urgent</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <input type="hidden" name="tenant_id" id="tenant_id">
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Create Ticket</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        document.getElementById('createTicketModal').addEventListener('hidden.bs.modal', function() {
            const form = document.getElementById('createTicketForm');
            form.reset();
        });
    </script>
@endsection