@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="Machine 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">{{__('Used Machine Details')}}</h1>
                    <div class="mb-4">
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <tbody>
                                <tr>
                                    <th class="bg-light" style="width: 200px;">{{ __('Name') }}</th>
                                    <td>{{ $machine->name }}</td>
                                </tr>
                                <tr>
                                    <th class="bg-light">{{ __('Brand') }}</th>
                                    <td>{{ $machine->brand }}</td>
                                </tr>
                                <tr>
                                    <th class="bg-light">{{ __('Model') }}</th>
                                    <td>{{ $machine->model }}</td>
                                </tr>
                                <tr>
                                    <th class="bg-light">{{ __('Year') }}</th>
                                    <td>{{ $machine->year }}</td>
                                </tr>
                                <tr>
                                    <th class="bg-light">{{ __('Type of Machine') }}</th>
                                    <td>{{ $machine->type_of_machine }}</td>
                                </tr>
                                <tr>
                                    <th class="bg-light">{{ __('Status') }}</th>
                                    <td><span
                                            class="badge {{ $machine->sale_status->color() }}">{{ $machine->sale_status->label() }}</span>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-bordered">
                            @if(!empty($machine->general_information))
                                <tr>
                                    <th colspan="2"
                                        class="bg-light text-left text-sm font-semibold text-center uppercase px-4 py-2 border-t">
                                        {{ __('General Information') }}
                                    </th>
                                </tr>
                                @foreach(json_decode($machine->general_information, true) 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

                            @if(!empty($machine->technical_details))
                                <tr>
                                    <th colspan="2"
                                        class="bg-light text-left text-sm font-semibold text-center uppercase px-4 py-2 border-t">
                                        {{ __('Technical Details') }}
                                    </th>
                                </tr>
                                @foreach(json_decode($machine->technical_details, true) 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

                            @if(!empty($machine->formatted_pricing_details))
                                <tr>
                                    <th colspan="2"
                                        class="bg-light text-left text-sm font-semibold text-center uppercase px-4 py-2 border-t">
                                        {{ __('Pricing Details') }}
                                    </th>
                                </tr>
                                @foreach($machine->formatted_pricing_details 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

                            @if(!empty($machine->additional_information))
                                <tr>
                                    <th colspan="2"
                                        class="bg-light text-left text-sm font-semibold text-center uppercase px-4 py-2 border-t">
                                        {{ __('Additional Information') }}
                                    </th>
                                </tr>
                                <tr>
                                    <td colspan="2" class="px-4 py-2">{!! $machine->additional_information !!}</td>
                                </tr>
                            @endif
                        </table>
                    </div>


                </div>


                @if($machine->media && $machine->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">
                                            {{-- Enlace GLightbox para la galería --}}
                                            <a href="{{  Storage::url($media->media_path) }}"
                                               class="glightbox"
                                               data-gallery="machine-gallery">
                                                <img src="{{  Storage::url($media->media_path) }}"
                                                     alt="Machine Image"
                                                     class="img-fluid rounded border"
                                                     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($media->media_path) }}" type="video/mp4">
                                            {{ __('Your browser does not support the video tag.') }}
                                        </video>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                @endif

                @if($machine->promo_flyer_path)
                    <div class="mt-4">
                        <h3 class="mb-3">{{ __('Promotional Flyer') }}</h3>
                        <div class="relative aspect-square" wire:key="promo_flyer_preview"
                             style="width: 300px; height: auto">
                            <a href="{{ Storage::url($machine->promo_flyer_path) }}" class="glightbox"
                               data-gallery="gallery">
                                <img src="{{ Storage::url($machine->promo_flyer_path) }}"
                                     alt="Promotional Flyer"
                                     class="object-cover w-full h-full rounded-lg"
                                >
                            </a>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <!-- Lightbox for images -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css">
@endpush


@push('scripts')

    <!--  Lightbox for images-->
    <script src="https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"></script>
    <script>
        document.addEventListener('livewire:initialized', () => {
            const lightbox = GLightbox({
                touchNavigation: true,
                loop: true,
                autoplayVideos: true
            });
        });
    </script>
@endpush