<?php $__env->startSection('content'); ?>
    <div class="w-full md:min-h-screen bg-gray-50 pt-[20px] pb-20">
        <div class=" mx-auto px-6">

            
            <div class="bg-white rounded-[20px]">

                
                <?php if (isset($component)) { $__componentOriginal1038c49ba30ba5d39ad311c8f546df99 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal1038c49ba30ba5d39ad311c8f546df99 = $attributes; } ?>
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => 'components.job-descriptions.stepper','data' => ['currentStep' => 5]] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('job-descriptions.stepper'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes(['currentStep' => 5]); ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal1038c49ba30ba5d39ad311c8f546df99)): ?>
<?php $attributes = $__attributesOriginal1038c49ba30ba5d39ad311c8f546df99; ?>
<?php unset($__attributesOriginal1038c49ba30ba5d39ad311c8f546df99); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal1038c49ba30ba5d39ad311c8f546df99)): ?>
<?php $component = $__componentOriginal1038c49ba30ba5d39ad311c8f546df99; ?>
<?php unset($__componentOriginal1038c49ba30ba5d39ad311c8f546df99); ?>
<?php endif; ?>

                
                <div class="px-6 md:px-10 pb-10 bg-[#f9fafb] pt-8"
                     x-data="{
                        copied: false,
                        exportingPdf: false,
                        exportingDocx: false,
                        pdfExported: false,
                        docxExported: false,
                        copyLink() {
                            const link = document.getElementById('shareable-link');
                            navigator.clipboard.writeText(link.value);
                            this.copied = true;
                            setTimeout(() => this.copied = false, 2000);
                        },
                        exportPdf() {
                            if (this.exportingPdf) return;
                            this.exportingPdf = true;
                            this.pdfExported  = false;
                            // Submit into the hidden iframe so the page does not navigate.
                            // The browser receives the file stream and saves it as a download
                            // while the iframe absorbs the response silently.
                            const form = document.getElementById('export-pdf-form');
                            form.target = 'export-iframe';
                            form.submit();
                            // Reset the spinner after enough time for the download to start.
                            // 4 s is generous — DomPDF usually responds in 1–3 s.
                            setTimeout(() => {
                                this.exportingPdf = false;
                                this.pdfExported  = true;
                                setTimeout(() => this.pdfExported = false, 3000);
                            }, 4000);
                        },
                        exportDocx() {
                            if (this.exportingDocx) return;
                            this.exportingDocx = true;
                            this.docxExported  = false;
                            const form = document.getElementById('export-docx-form');
                            form.target = 'export-iframe';
                            form.submit();
                            setTimeout(() => {
                                this.exportingDocx = false;
                                this.docxExported  = true;
                                setTimeout(() => this.docxExported = false, 3000);
                            }, 3000);
                        }
                    }">

                    <?php
                        $jd = $jobDescription ?? (object)[
                            'id' => 0,
                            'job_id' => 'JD-006',
                            'job_title' => 'Software Engineer',
                            'status' => 'approved',
                        ];
                    ?>

                    
                    <div x-show="pdfExported || docxExported" x-cloak style="display:none;"
                         x-transition:enter="transition ease-out duration-300"
                         x-transition:enter-start="opacity-0 transform translate-y-2"
                         x-transition:enter-end="opacity-100 transform translate-y-0"
                         x-transition:leave="transition ease-in duration-200"
                         x-transition:leave-start="opacity-100"
                         x-transition:leave-end="opacity-0"
                         class="fixed top-6 right-6 z-50 bg-white border border-green-200 rounded-xl shadow-lg p-4 max-w-sm">
                        <div class="flex items-start gap-3">
                            <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center shrink-0">
                                <svg class="w-4 h-4 text-green-600" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                                </svg>
                            </div>
                            <div>
                                <p class="text-sm font-semibold text-gray-900" x-text="pdfExported ? 'Job description exported as PDF' : 'Job description exported as DOCX'"></p>
                                <p class="text-xs text-gray-500">Your download has started</p>
                            </div>
                        </div>
                    </div>

                    
                    <div x-data="{ showPublishConfirm: false }" class="mb-6 flex items-center justify-end gap-4 pt-4">
                        <?php if($jd->status === 'approved'): ?>
                            <form id="publish-form" action="<?php echo e(route('dashboard.job-descriptions.do-publish', $jd->id)); ?>" method="POST">
                                <?php echo csrf_field(); ?>
                            </form>
                            <button @click="showPublishConfirm = true"
                                    class="inline-flex items-center justify-center gap-2 h-11 px-8 rounded-lg font-medium text-white bg-[#2F3D7E] hover:bg-[#1E2858] transition-colors">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                </svg>
                                Publish
                            </button>

                            
                            <div x-show="showPublishConfirm" x-cloak class="fixed inset-0 z-50 flex items-center justify-center p-4">
                                <div class="fixed inset-0 bg-black/50" @click="showPublishConfirm = false"></div>
                                <div class="relative bg-white rounded-2xl shadow-xl w-full max-w-sm p-6 text-center">
                                    <div class="w-12 h-12 bg-green-50 rounded-full flex items-center justify-center mx-auto mb-4">
                                        <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                        </svg>
                                    </div>
                                    <h4 class="text-lg font-semibold text-gray-900 mb-2">Publish Job Description?</h4>
                                    <p class="text-sm text-gray-500 mb-6">This will make the job description publicly accessible via a shareable link.</p>
                                    <div class="flex gap-3">
                                        <button @click="showPublishConfirm = false" class="flex-1 h-11 rounded-lg font-medium text-gray-700 border border-gray-200 hover:bg-gray-50 transition-colors text-sm">Cancel</button>
                                        <button @click="document.getElementById('publish-form').submit()" class="flex-1 h-11 rounded-lg font-medium text-white bg-[#2F3D7E] hover:bg-[#1E2858] transition-colors text-sm">Yes, Publish</button>
                                    </div>
                                </div>
                            </div>
                        <?php endif; ?>

                        <a href="<?php echo e(route('dashboard.job-descriptions.index')); ?>"
                        class="inline-flex items-center justify-center h-11 px-8 rounded-lg font-medium text-white bg-[#2F3D7E] hover:bg-[#1E2858] transition-colors">
                            Back to Library
                        </a>
                    </div>

                    
                    <?php if(session('success')): ?>
                        <div
                            x-data="{ show: true }"
                            x-show="show"
                            x-cloak
                            style="display:none;"
                            x-init="setTimeout(() => show = false, 4000)"
                            x-transition:enter="transition ease-out duration-300"
                            x-transition:enter-start="opacity-0 transform -translate-y-2"
                            x-transition:enter-end="opacity-100 transform translate-y-0"
                            x-transition:leave="transition ease-in duration-300"
                            x-transition:leave-start="opacity-100"
                            x-transition:leave-end="opacity-0"
                            class="bg-green-50 border border-green-100 rounded-2xl p-5 mb-8"
                        >
                            <div class="flex items-start gap-3">
                                <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center shrink-0">
                                    <svg class="w-5 h-5 text-green-600" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="text-sm font-bold text-gray-900"><?php echo e(session('success')); ?></h4>
                                    <p class="text-xs text-gray-600 mt-1">Your job description has been published.</p>
                                </div>
                            </div>
                        </div>
                    <?php endif; ?>

                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                        
                        <div class="bg-white flex gap-4 border border-gray-200 rounded-2xl p-6 text-center">
                            <div>
                                <div class="w-12 h-12 bg-red-50 rounded-xl flex items-center justify-center mx-auto mb-4">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M15 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V7L15 2Z" stroke="#E7000B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M14 2V6C14 6.53043 14.2107 7.03914 14.5858 7.41421C14.9609 7.78929 15.4696 8 16 8H20" stroke="#E7000B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M10 9H8" stroke="#E7000B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M16 13H8" stroke="#E7000B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M16 17H8" stroke="#E7000B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                </div>
                            </div>
                            <div class="text-left">
                                <h4 class="text-base font-semibold text-gray-900 mb-1">Export as PDF</h4>
                                <p class="text-sm text-gray-500 mb-4">Download a formatted PDF document ready for distribution</p>
                                <button @click="exportPdf()"
                                        :disabled="exportingPdf"
                                        <?php if(!$jd->isPublished()): ?> disabled title="Publish the JD first to enable export" <?php endif; ?>
                                        class="inline-flex items-center justify-center gap-2 w-full h-11 rounded-lg font-medium text-gray-700 border border-gray-200 hover:bg-gray-50 transition-colors text-sm disabled:opacity-50 disabled:cursor-not-allowed">
                                    <template x-if="!exportingPdf">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                                        </svg>
                                    </template>
                                    <template x-if="exportingPdf">
                                        <svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
                                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                        </svg>
                                    </template>
                                    <span x-text="exportingPdf ? 'Exporting...' : 'Download PDF'"></span>
                                </button>
                            </div>
                        </div>

                        
                        <div class="bg-white flex gap-4 border border-gray-200 rounded-2xl p-6 text-center">
                            <div>
                                <div class="w-12 h-12 bg-blue-50 rounded-xl flex items-center justify-center mx-auto mb-4">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M15 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V7L15 2Z" stroke="#155DFC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M14 2V6C14 6.53043 14.2107 7.03914 14.5858 7.41421C14.9609 7.78929 15.4696 8 16 8H20" stroke="#155DFC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M10 9H8" stroke="#155DFC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M16 13H8" stroke="#155DFC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M16 17H8" stroke="#155DFC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                </div>
                            </div>
                            <div class="text-left">
                                <h4 class="text-base font-semibold text-gray-900 mb-1">Export as DOCX</h4>
                                <p class="text-sm text-gray-500 mb-4">Download as Microsoft Word document for further editing</p>
                                <button @click="exportDocx()"
                                        :disabled="exportingDocx"
                                        <?php if(!$jd->isPublished()): ?> disabled title="Publish the JD first to enable export" <?php endif; ?>
                                        class="inline-flex items-center justify-center gap-2 w-full h-11 rounded-lg font-medium text-gray-700 border border-gray-200 hover:bg-gray-50 transition-colors text-sm disabled:opacity-50 disabled:cursor-not-allowed">
                                    <template x-if="!exportingDocx">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                                        </svg>
                                    </template>
                                    <template x-if="exportingDocx">
                                        <svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
                                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                        </svg>
                                    </template>
                                    <span x-text="exportingDocx ? 'Exporting...' : 'Download DOCX'"></span>
                                </button>
                            </div>
                        </div>
                    </div>

                    
                    <div class="bg-white border border-gray-200 rounded-2xl p-6 mb-8">
                        <div class="flex items-center gap-2 mb-6">
                            <svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
                            </svg>
                            <h3 class="text-lg font-semibold text-gray-900">Share</h3>
                        </div>

                        <div class="border bg-[#F8FAFC] border-gray-200 rounded-xl p-4 mb-4">
                            <div class="flex items-end justify-between gap-4">
                                <div class="flex-1">
                                    <div class="flex items-center gap-2 mb-1">
                                        <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
                                        </svg>
                                        <h4 class="text-sm font-semibold text-gray-900">Public Shareable Link</h4>
                                    </div>
                                    <p class="text-xs text-gray-500 mb-2">Anyone with this link can view the job description without logging in</p>
                                    <input id="shareable-link" type="text" readonly
                                           value="<?php echo e(url('/job-descriptions/' . ('JD-' . str_pad($jd->id ?? 0, 3, '0', STR_PAD_LEFT)) . '/' . \Illuminate\Support\Str::slug($jd->job_title ?? 'job'))); ?>"
                                           class="w-full px-3 py-2 bg-white border border-gray-200 rounded-lg text-xs text-gray-600 font-mono">
                                </div>
                                <button @click="copyLink()"
                                        class="inline-flex items-center gap-1.5 px-4 py-2 bg-white border border-gray-200 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors shrink-0">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
                                    </svg>
                                    <span x-text="copied ? 'Copied!' : 'Copy Link'"></span>
                                </button>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        
        <?php if($jd->isPublished()): ?>
            <form id="export-pdf-form"
                  action="<?php echo e(route('dashboard.job-descriptions.export', [$jd->id, 'pdf'])); ?>"
                  method="POST"
                  target="export-iframe"
                  style="display:none">
                <?php echo csrf_field(); ?>
            </form>
            <form id="export-docx-form"
                  action="<?php echo e(route('dashboard.job-descriptions.export', [$jd->id, 'docx'])); ?>"
                  method="POST"
                  target="export-iframe"
                  style="display:none">
                <?php echo csrf_field(); ?>
            </form>
            
            <iframe name="export-iframe"
                    style="display:none;width:0;height:0;border:0;position:absolute;">
            </iframe>
        <?php endif; ?>

    </div>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.dashboard', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /var/www/ratemypay_dev/resources/views/dashboard/job-descriptions/publish.blade.php ENDPATH**/ ?>