@extends('layouts.users.app')

@section('content')
    <div class="content-wrapper">
        <div class="container-xxl flex-grow-1 container-p-y">
            <div class="card">
                <div class="card-header">
                    <div class="row">
                        <div class="col-12 col-md-6 mb-3 mb-md-0">
                            {{-- Breadcrumb Component --}}
                            <x-breadcrumb :links="$breadcrumbLinks"/>
                        </div>
                        <div class="col-12 col-md-6 d-flex justify-content-start justify-content-md-end">
                            <div class="d-flex gap-3">
                                <a href="{{ url()->previous() }}" class="btn btn-secondary btn-sm">
                                    <i class="fas fa-arrow-left me-1"></i>{{ __('Back') }}
                                </a>
                                <x-print-button
                                    targetId="printable-content"
                                    title="Ticket Details"
                                    :logoUrl="asset('/images/main/logo-short/logo-main.png')"
                                    logoHeight="60px"
                                    class="btn btn-primary"
                                />
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-body" id="printable-content">
                    <h1 class="card-title mb-4">{{__('Sale ticket details')}}</h1>
                    <div class="mb-4">
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <tbody>
                                <tr>
                                    <th class="bg-light" style="width: 200px;">{{ __('Ticket ID') }}</th>
                                    <td>{{ $ticket->id }}</td>
                                </tr>
                                <tr>
                                    <th class="bg-light">{{ __('User') }}</th>
                                    <td>
                                        @if($ticket->user)
                                            {{ $ticket->user->name }} ({{ $ticket->user->email }})
                                        @else
                                            {{ __('No User Assigned') }}
                                        @endif
                                    </td>
                                <tr>
                                    <th class="bg-light" style="width: 200px;">{{ __('Stage') }}</th>
                                    <td><span
                                            class="badge {{ $ticket->stage->color() }}">{{ $ticket->stage->label() }}</span>
                                    </td>
                                </tr>
                                <tr>
                                    <th class="bg-light">{{ __('Approved At') }}</th>
                                    <td>
                                        @if ($ticket->approvet_at)
                                            {{ \Carbon\Carbon::parse($ticket->approvet_at)->format('d/m/Y H:i') }}
                                        @else
                                            Not Approved
                                        @endif
                                    </td>
                                <tr>
                                    <th class="bg-light" style="width: 200px;">{{ __('Status') }}</th>
                                    <td><span
                                            class="badge {{ $ticket->status->color() }}">{{ $ticket->status->label() }}</span>
                                    </td>
                                </tr>
                                <tr>
                                    <th class="bg-light">{{ __('Created At') }}</th>
                                    <td>{{ $ticket->created_at->format('d/m/Y H:i') }}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <tr>
                                <th colspan="2"
                                    class="bg-light text-left text-sm font-semibold text-center uppercase px-4 py-2 border-t">
                                    {{ __('General Machine Information') }}
                                </th>
                            </tr>

                            @if(!empty($ticket->request->machine_details['generalInfo']))
                                @foreach($ticket->request->machine_details['generalInfo'] as $key => $value)
                                    <tr>
                                        <th class="bg-light capitalize px-4 py-2">{{ __(str_replace('_', ' ', $key)) }}</th>
                                        <td class="px-4 py-2">{{ $value }}</td>
                                    </tr>
                                @endforeach
                            @endif

                            <tr>
                                <th colspan="2"
                                    class="bg-light text-left text-sm font-semibold text-center uppercase px-4 py-2 border-t">
                                    {{ __('Technical Information') }}
                                </th>
                            </tr>

                            @if(!empty($ticket->request->machine_details['techDetail']))
                                @foreach($ticket->request->machine_details['techDetail'] as $key => $value)
                                    <tr>
                                        <th class="bg-light capitalize px-4 py-2">{{ __(str_replace('_', ' ', $key)) }}</th>
                                        <td class="px-4 py-2">{{ $value }}</td>
                                    </tr>
                                @endforeach
                            @endif

                            <tr>
                                <th colspan="2"
                                    class="bg-light text-left text-sm font-semibold text-center uppercase px-4 py-2 border-t">
                                    {{ __('Price Information') }}
                                </th>
                            </tr>

                            @foreach($ticket->request->machine_details['priceInfo'] as $key => $value)
                                <tr>
                                    <th class="bg-light capitalize px-4 py-2">{{ __(str_replace('_', ' ', $key)) }}</th>
                                    <td class="px-4 py-2">
                                        @if($key === 'currency_id')
                                            {{ \App\Models\Currency::getLabelById($value) }}
                                        @else
                                            {{ $value }}
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </table>
                    </div>
                </div>

                <div class="px-5 pt-4">
                    @if($ticket->media->isNotEmpty())
                        <div class="mt-4">
                            @if($images->isNotEmpty())
                                <div class="mb-4">
                                    <h4 class="mb-3">{{ __('Images') }}</h4>
                                    <div class="row g-3">
                                        @foreach($images as $media)
                                            <div class="col-6 col-md-4 col-lg-3">
                                                <a href="{{  Storage::url($media->media_path) }}"
                                                   class="glightbox"
                                                   data-gallery="ticket-gallery">
                                                    <img src="{{  Storage::url($media->media_path) }}"
                                                         class="img-fluid rounded border"
                                                         alt="Ticket Image"
                                                         style="object-fit: cover; width: 100%; height: 150px;">
                                                </a>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @endif
                            @if($video)
                                <div>
                                    <h4 class="mb-3">{{ __('Video') }}</h4>
                                    <div class="row g-3">
                                        <div class="col-12 col-md-6">
                                            <video controls class="w-100 rounded border">
                                                <source src="{{  Storage::url($video->media_path) }}"
                                                        type="video/mp4">
                                                {{ __('Your browser does not support the video tag.') }}
                                            </video>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>
                    @else
                        {{-- Mensaje si no hay media asociada --}}
                        <div class="mt-4">
                            <h3 class="card-title mb-4">{{ __('Media') }}</h3>
                            <p>{{ __('No media available for this ticket.') }}</p>
                        </div>
                    @endif
                </div>



            </div>
        </div>
    </div>
@endsection


@push('styles')
    {{-- Estilos para GLightbox --}}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css"/>
@endpush

@push('scripts')
    {{-- Script de GLightbox --}}
    <script src="https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const lightbox = GLightbox({
                selector: '.glightbox',
                touchNavigation: true,
                loop: true,
                gallery: 'ticket-gallery'
            });
        });
    </script>
@endpush