@extends('layouts.master')

@section('content')
@php
    $rola   = auth()->user()->rola->nazwa;
    $prefix = match ($rola) {
        'Administrator' => 'admin',
        'Moderator'     => 'moderator',
        'Serwisant'     => 'serwisant',
        default         => 'admin'
    };
@endphp

@push('styles')
<style>
  /* --- Glass container --- */
  .glass-box {
    backdrop-filter: blur(12px);
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    transition: background .3s, border-color .3s;
    display: flex;
    flex-direction: column;
  }
  body.dark-mode .glass-box {
    background: rgba(30,30,40,0.6);
    border: 1px solid rgba(255,255,255,0.1);
  }

  /* --- Override .bg-light inside glass --- */
  .glass-box .bg-light {
    background: rgba(255,255,255,0.9) !important;
    color: inherit;
  }
  body.dark-mode .glass-box .bg-light {
    background: rgba(50,50,70,0.6) !important;
    color: #ddd !important;
  }

  /* --- Table inside glass --- */
  .glass-box .table {
    background: transparent;
  }
  .glass-box .table th,
  .glass-box .table td {
    background: transparent;
    color: inherit;
  }

  /* --- Form controls inside glass --- */
  .glass-box .form-select,
  .glass-box .form-control {
    border-radius: .375rem;
    transition: background .3s, color .3s, border-color .3s;
  }
  body.light-mode .glass-box .form-select,
  body.light-mode .glass-box .form-control {
    background: #fff !important;
    color: #333 !important;
    border: 1px solid #ccc !important;
  }
  body.dark-mode .glass-box .form-select,
  body.dark-mode .glass-box .form-control {
    background: #2c2c3c !important;
    color: #e0e0e0 !important;
    border: 1px solid #555 !important;
  }

  /* --- Chat window --- */
  #chat-window {
    flex: 1;
    overflow-y: auto;
    background: transparent;
    padding: 1rem;
  }

  /* --- Chat bubbles --- */
  .bubble-client {
    background: #fff;
    border: 1px solid #ddd;
  }
  body.dark-mode .bubble-client {
    background: #2a2a2a;
    border: 1px solid #444;
  }
  .bubble-admin {
    background: #0d6efd;
    color: #fff;
  }
  body.dark-mode .bubble-admin {
    background: #90caf9;
    color: #000;
  }

  /* --- Reply area + inputs --- */
  .reply-area {
    background: #fff;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 .5rem .5rem;
    padding: 1rem;
  }
  body.dark-mode .reply-area {
    background: #2a2a2a;
    border-color: #444;
  }
  /* override textarea and file input */
  .reply-area .form-control,
  .reply-area .form-control-sm {
    transition: background .3s, color .3s, border-color .3s;
  }
  body.light-mode .reply-area .form-control,
  body.light-mode .reply-area .form-control-sm {
    background: #fff !important;
    color: #333 !important;
    border: 1px solid #ccc !important;
  }
  body.dark-mode .reply-area .form-control,
  body.dark-mode .reply-area .form-control-sm {
    background: #2c2c3c !important;
    color: #e0e0e0 !important;
    border: 1px solid #555 !important;
  }

  .file-icon { font-size: 1.5rem; }
</style>
@endpush

<div class="container-fluid">
  <div class="row g-4">

    {{-- LEFT COLUMN --}}
    <div class="col-lg-4">
      <h4 class="text-primary fw-bold mb-3">Zgłoszenie #{{ $ticket->id }}</h4>

      <div class="glass-box mb-4 p-4">
        <table class="table table-sm table-borderless mb-3">
          <tr><th>Kod:</th><td>{{ $ticket->ticket_code }}</td></tr>
          <tr><th>Firma:</th><td>{{ $ticket->company }}</td></tr>
          <tr><th>Temat:</th><td>{{ $ticket->subject }}</td></tr>
          <tr><th>E-mail:</th><td>{{ $ticket->email }}</td></tr>
          <tr><th>Priorytet:</th><td>{{ $ticket->priority }}</td></tr>
          <tr>
            <th>Status:</th>
            <td>
              <span class="badge text-white" style="background: {{ $ticket->status->kolor ?? '#0d6efd' }}">
                {{ $ticket->status->nazwa ?? 'Brak' }}
              </span>
            </td>
          </tr>
        </table>

        <h6 class="text-secondary">Opis:</h6>
        <div class="bg-light p-3 rounded mb-3 small">
          {!! nl2br(e($ticket->message)) !!}
        </div>

        @if($ticket->attachment)
          @php
            $ext   = strtolower(pathinfo($ticket->attachment,PATHINFO_EXTENSION));
            $icons = [
              'pdf'=>['fa-file-pdf','text-danger'],
              'doc'=>['fa-file-word','text-primary'],
              'docx'=>['fa-file-word','text-primary'],
              'xls'=>['fa-file-excel','text-success'],
              'xlsx'=>['fa-file-excel','text-success'],
              'jpg'=>['fa-file-image','text-warning'],
              'jpeg'=>['fa-file-image','text-warning'],
              'png'=>['fa-file-image','text-warning'],
              'zip'=>['fa-file-archive','text-secondary'],
            ];
            $icon = $icons[$ext] ?? ['fa-file','text-muted'];
          @endphp
          <a href="{{ route($prefix.'.tickets.download',$ticket) }}"
             class="d-inline-flex align-items-center gap-2 text-decoration-none">
            <i class="fas {{ $icon[0] }} {{ $icon[1] }} file-icon"></i>
            <span class="fw-semibold">Pobierz załącznik</span>
          </a>
        @endif
      </div>

      <div class="glass-box mb-4 p-3">
        <h6 class="text-primary mb-2">Zmień status</h6>
        <form method="POST" action="{{ route($prefix.'.tickets.changeStatus',$ticket) }}">
          @csrf
          <select name="id_status" class="form-select" onchange="this.form.submit()">
            @foreach(\App\Models\Status::whereNotIn('id_status',[2,3,6])->get() as $status)
              <option value="{{ $status->id_status }}"
                      @selected($ticket->id_status==$status->id_status)>
                {{ $status->nazwa }}
              </option>
            @endforeach
          </select>
        </form>
      </div>

      @unless($ticket->zamkniety)
        <div class="glass-box p-3">
          <h6 class="text-danger mb-2">Zamknij zgłoszenie</h6>
          <button class="btn btn-danger w-100" data-bs-toggle="modal" data-bs-target="#closeModal">
            Zamknij zgłoszenie
          </button>
        </div>
      @endunless
    </div>

    {{-- RIGHT COLUMN --}}
    <div class="col-lg-8 d-flex flex-column" style="height: calc(100vh - 100px);">
      <div class="glass-box flex-grow-1" id="chat-window">
        @foreach($ticket->messages->sortBy('created_at') as $msg)
          @php
            $admin = $msg->from_admin;
            $sender= $admin
                     ? 'Serwis – '.($msg->user->name??'Serwisant')
                     : ($ticket->name??'Klient');
            $align = $admin?'justify-content-end':'justify-content-start';
            $class = $admin?'bubble-admin':'bubble-client';
            $ext   = $msg->attachment
                     ? strtolower(pathinfo($msg->attachment,PATHINFO_EXTENSION))
                     : '';
            $icon  = match($ext) {
              'pdf'=>'fa-file-pdf',
              'doc','docx'=>'fa-file-word',
              'xls','xlsx'=>'fa-file-excel',
              'jpg','jpeg','png'=>'fa-file-image',
              'zip'=>'fa-file-archive',
              default=>'fa-file'
            };
          @endphp
          <div class="d-flex {{ $align }} mb-3 px-3">
            <div class="p-3 rounded {{ $class }} shadow-sm" style="max-width:75%">
              <div class="small fw-bold mb-1">{{ $sender }} — {{ $msg->created_at->format('Y-m-d H:i') }}</div>
              <div class="small">{!! nl2br(e($msg->message)) !!}</div>
              @if($msg->attachment)
                <div class="mt-2">
                  <a href="{{ route($prefix.'.tickets.message.download',['ticket'=>$ticket->id,'message'=>$msg->id]) }}"
                     class="d-inline-flex align-items-center gap-2 {{ $admin?'text-white':'text-dark' }}">
                    <i class="fas {{ $icon }} file-icon"></i>
                    <span class="fw-semibold">Pobierz</span>
                  </a>
                </div>
              @endif
            </div>
          </div>
        @endforeach
      </div>

      @unless($ticket->zamkniety)
        <form method="POST" action="{{ route($prefix.'.tickets.reply',$ticket) }}"
              enctype="multipart/form-data"
              class="mt-3 reply-area">
          @csrf
          <div class="input-group">
            <textarea name="message" class="form-control"
                      placeholder="Napisz wiadomość…" required></textarea>
            <button class="btn btn-primary" type="submit">
              <i class="fas fa-paper-plane"></i>
            </button>
          </div>
          <div class="mt-2">
            <input type="file" name="attachment"
                   class="form-control form-control-sm"
                   accept=".jpg,.jpeg,.png,.pdf,.doc,.docx,.zip">
          </div>
        </form>
      @endunless
    </div>
  </div>
</div>

{{-- Modal zamknięcia --}}
@if(!$ticket->zamkniety)
  <div class="modal fade" id="closeModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
      <form method="POST" action="{{ route($prefix.'.tickets.close',$ticket) }}"
            class="modal-content">
        @csrf
        <div class="modal-header">
          <h5 class="modal-title text-danger">Zamknij zgłoszenie</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <label class="form-label">Wiadomość końcowa:</label>
          <textarea name="message" class="form-control" rows="4" required>{{ old('message') }}</textarea>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" data-bs-dismiss="modal">Anuluj</button>
          <button class="btn btn-danger">Zamknij zgłoszenie</button>
        </div>
      </form>
    </div>
  </div>
@endif

@endsection