@extends('layouts.app')

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card mt-n4 mx-n4">
                    <div class="bg-warning-subtle">
                        <div class="card-body px-4 pb-0">
                            <div class="row mb-3">
                                <div class="col-md">
                                    <div class="row align-items-center g-3">
                                        <div class="col-md">
                                            <div>
                                                <h4 class="fw-bold">{{ $content->title }}</h4>
                                                <div class="hstack flex-wrap gap-3">
                                                    <div>{!! nl2br($content->caption) !!}</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-auto">
                                    <div class="hstack flex-wrap gap-1">
                                        {{-- @can('content.changeStatus') --}}
                                            <a href="javascript:void(0);" class="btn btn-success" data-bs-toggle="modal"
                                                data-bs-target="#contentApproveModal">
                                                <i class="ri-timer-line me-1 align-bottom"></i> Schedule Now
                                            </a>
                                        {{-- @endcan --}}
                                    </div>
                                </div>
                            </div>

                            <ul class="nav nav-tabs-custom border-bottom-0" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <a class="nav-link active fw-semibold" data-bs-toggle="tab" href="#project-overview"
                                        role="tab" aria-selected="true">Overview</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-12">
                        <div class="tab-content text-muted">
                            <div class="tab-pane fade show active" id="project-overview" role="tabpanel">
                                <div class="row">
                                    <div class="col-xl-9 col-lg-8">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="text-muted">
                                                    <h6 class="fw-semibold text-uppercase mb-3">Summary</h6>
                                                    <table class="table table-borderless mb-0">
                                                        <tbody>
                                                            <tr>
                                                                <th><span class="fw-medium">Product</span></th>
                                                                <td>{{ $content->product?->name }}</td>
                                                            </tr>
                                                            <tr>
                                                                <th><span class="fw-medium">Client</span></th>
                                                                <td>{{ $content->product?->client?->name }}</td>
                                                            </tr>
                                                            <tr>
                                                                <th><span class="fw-medium">Category</span></th>
                                                                <td>{{ $content->category?->title }}</td>
                                                            </tr>
                                                            <tr>
                                                                <th><span class="fw-medium">Description</span></th>
                                                                <td>{!! $content->caption !!}</td>
                                                            </tr>
                                                            <tr>
                                                                <th><span class="fw-medium">Status</span></th>
                                                                <td>{!! $content->status_name !!}</td>
                                                            </tr>
                                                            <tr>
                                                                <th><span class="fw-medium">Schedule Detail</span></th>
                                                                <td>
                                                                    @if (config('constants.content_status_options')[$content->status] == 'Scheduled')
                                                                        <span>{{ $content->release_date }}</span>
                                                                        <span>{{ \Carbon\Carbon::parse($content->release_time)?->format('h:i A') }}</span>
                                                                    @else
                                                                        <span class="text-danger">Not Scheduled</span>
                                                                    @endif
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-xl-3 col-lg-4">
                                        <div class="card">
                                            <div class="card-header align-items-center d-flex border-bottom-dashed">
                                                <h4 class="card-title flex-grow-1 mb-0">Attachment</h4>
                                            </div>

                                            <div class="card-body text-center">
                                                @if ($content->creative)
                                                    @php
                                                        $fileExtension = pathinfo(
                                                            $content->creative,
                                                            PATHINFO_EXTENSION,
                                                        );
                                                        $isImage = in_array(strtolower($fileExtension), [
                                                            'jpg',
                                                            'jpeg',
                                                            'png',
                                                            'gif',
                                                            'bmp',
                                                            'webp',
                                                        ]);
                                                    @endphp

                                                    @if ($isImage)
                                                        <img src="{{ asset('storage/' . $content->creative) }}"
                                                            alt="Attachment Image" height="100" id="attachmentImage"
                                                            style="cursor: pointer;">
                                                    @else
                                                        <i class="ri-file-line" style="font-size: 50px;"></i>
                                                    @endif

                                                    <div class="mt-3">
                                                        <!-- Download Button -->
                                                        <a href="{{ asset('storage/' . $content->creative) }}" download
                                                            class="btn btn-primary btn-sm">
                                                            <i class="ri-download-2-line"></i> Download
                                                        </a>

                                                        <!-- Zoom-In Button -->
                                                        @if ($isImage)
                                                            <button class="btn btn-secondary btn-sm" id="zoomInButton"
                                                                data-bs-toggle="modal" data-bs-target="#zoomModal">
                                                                <i class="ri-zoom-in-line"></i> Zoom In
                                                            </button>
                                                        @endif
                                                    </div>
                                                @else
                                                    <p class="text-muted">No Attachment Available</p>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="zoomModal" tabindex="-1" aria-labelledby="zoomModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                </div>
                <div class="modal-body text-center">
                    <img src="{{ asset('storage/' . $content->creative) }}" alt="Zoomed Attachment" class="img-fluid"
                        id="zoomedImage">
                </div>
            </div>
        </div>
    </div>
    <x-approve-modal :data="$content" route="{{ route('content.schedule') }}" name="content" :statusList="$statusList" />
@endsection

@push('js')
    <script>
        $(document).ready(function() {
            $('#zoomInButton').on('click', function() {
                let src = $('#attachmentImage').attr('src');
                $('#zoomedImage').attr('src', src);
            });
        });
    </script>
@endpush