@section('title', $title)
@section('description', $description)
@extends('layout.app')
@section('content')
    <div class="container-fluid mt-4">
        <fieldset>

            <div class="d-flex gap-2 my-3 " id="no-print">
                <a href="{{ url('/product/sold/download-pdf') . '/' . $order->id }}" class="btn btn-primary btn-sm">Download Invoice</a>
                <a href="{{ url('/download-folder') . '/' . $order->product?->attachment?->id }}" class="btn btn-default btn-sm">Download Attachment</a>
                <a onclick="printDiv('printSection')" class="btn btn-warning btn-sm">Print Sale</a>
                <a href="{{ url('/product/sold/download-pdf') . '/' . $order->id . '?accountdetails' }}" class="btn btn-secondary btn-sm">Download Account Pdf</a>
                <a href="#" class="btn btn-default btn-sm" data-bs-toggle="modal" data-bs-target="#new-project-modal">View Details</a>
                <div class="action-btn">


<!-- Modal -->
<div class="modal fade" id="new-project-modal" tabindex="-1" aria-labelledby="projectModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content radius-xl">
            <div class="modal-header">
                <h6 class="modal-title fw-500" id="projectModalLabel">Account Data</h6>
                <!-- Copy Button -->
                
                <button id="copyButton" class="btn btn-outline-secondary" title="Copy All Text">
                    <i class="fas fa-copy"></i> Copy All
                </button>
                
                
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <img src="{{ asset('assets/img/svg/x.svg') }}" alt="x" class="svg">
                </button>
                
            </div>
            <div class="modal-body">
                <div class="project-modal" id="projectContent">
                    <div class="container">
                        <!-- Header -->

                        <div class="header">
                            ║═══════════ {{ $order->product?->product_name }} ═══════════║
                        </div>

                        <!-- Email Access Details -->
                        <div class="section" style="margin-bottom: 20px;">
                            <div class="section-title">📧 *Email Access Details:*</div>
                            <div class="details" style="margin-top: 10px;">
                                <p>🔸Email: `{{ $order->product->email }}`</p>
                                <p>🔸Email Password: `{{ $order->product->password}}`</p>
                                @isset($order->product->recovery_email)
                                    <p>🔸Recovery Email: `{{ $order->product->recovery_email}}`</p>
                                @endisset
                            </div>
                        </div>

                        <!-- Account Access Details -->
                        <div class="section" style="margin-bottom: 20px;">
                            <div class="section-title">💼 *Account Access Details:*</div>
                            <div class="details" style="margin-top: 10px;">
                               
                                @isset($order->product->account_email)
                                     <p>🔸Account Email: `{{ $order->product->account_email}}`</p>
                                @endisset

                                @isset($order->product->account_password)
                                    <p>🔸Account Password: `{{ $order->product->account_password}}`</p>

                                @endisset
                                
                                @isset($order->product->passcode_pin)
                                    <p>🔸Passcode Or Pin: `{{ $order->product->passcode_pin}}`</p>
                                @endisset
                            </div>
                        </div>

                        <!-- Number Access Details -->
                        <div class="section" style="margin-bottom: 20px;">
                            <div class="section-title">📱 *Number Access Details:*</div>
                            <div class="details" style="margin-top: 10px;">
                                @isset($order->product->number_provider)
                                    <p>🔸Number Company: `{{ $order->product->number_provider}}`</p>
                                @endisset

                                @isset($order->product->number)
                                    <p>🔸Phone Number: `{{ $order->product->number}}`</p>
                                @endisset

                                @isset($order->product->number_email)
                                     <p>🔸Username Or Email: `{{ $order->product->number_email}}`</p>
                                @endisset
                               
                                @isset($order->product->number_password)
                                    <p>🔸Password For Number: `{{ $order->product->number_password}}`</p>
                                @endisset
                                
                            </div>
                        </div>

                        <!-- Additional Details -->
                        <div class="section" style="margin-bottom: 20px;">
                            <div class="section-title">📋 *Additional Details:*</div>
                            <div class="details" style="margin-top: 10px;">
                                @isset($order->product->attachment_id)
                                    <p>🔸{{ url('/download-folder/') }}/{{ $order->product->attachment_id }}</p>
                                @endisset

                                 @isset($order->product->note)
                                <p>🔸{{ $order->product->note}}</p>
                                 @endisset
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End Modal -->







                </div>
            </div>
        </fieldset>
        <fieldset id="printSection">
            <legend>Details Sale</legend>


            <div class="row">
                <div class="col-md-4">
                    <h5>Customer Info</h5>
                    <p>{{ $order->customer?->channel_name }}</p>
                    <p>{{ $order->customer?->description }}</p>
                </div>

                <div class="col-md-4">
                    <h5>Sale Info</h5>
                    <p><strong>Date:</strong> {{$order->created_at}}</p>
                    <p><strong>Reference:</strong> {{$order->id}} </p>
                    <p><strong>Payment Status:</strong> <span class="badge bg-success">Paid</span></p>
                    <p><strong>Payment Method:</strong> <span class="badge bg-success">{{$order->payment_mode}}</span></p>
                </div>
            </div>

            <h5 class="mt-4">Order Summary</h5>
            <table class="table table-bordered">
                <thead class="table-light">
                    <tr>
                        <th>Product Name</th>
                        <th>Product Cost</th>
                        <th>Quantity</th>
                        <th>Sales Price</th>
                        <th>Subtotal</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{{ $order->product?->product_name }}</td>
                        <td>{{ $order->product->product_cost }}</td>
                        <td>1 Pcs</td>
                        <td>${{ $order->amount }}</td>

                        <td>${{ $order->amount }}</td>
                    </tr>
                </tbody>
            </table>

            <div class="text-end">

                <p><strong>Paid:</strong> ${{ $order->amount }}</p>

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


    <script>

    document.getElementById('copyButton').addEventListener('click', function() {
        var modalContent = document.getElementById('projectContent');
        var text = "";

        var header = document.querySelector('.header').textContent.trim();

        text += header + '\n\n';

        var sections = modalContent.querySelectorAll('.section');
        sections.forEach(function(section) {
            var title = section.querySelector('.section-title').textContent.trim();
            var details = section.querySelector('.details').textContent.trim();

            details = details.replace(/\s*🔸/g, '\n🔸');
            details = details.trim();

            text += title + '\n' + details + '\n\n';
        });

        navigator.clipboard.writeText(text).then(function() {
            alert('All text copied to clipboard!');
        }).catch(function(err) {
            console.error('Error copying text: ', err);
            alert('Failed to copy text!');
        });
    });
        function printDiv(divId) {
            // Hide elements before printing
            document.getElementById('no-print').style.display = 'none';
            var printContents = document.getElementById(divId).innerHTML;
            var originalContents = document.body.innerHTML;



            // Set the printable content
            document.body.innerHTML = printContents;

            // Print the page
            window.print();

            // Restore the original content
            document.body.innerHTML = originalContents;
            
        }


      
  

    </script>
    <style>
        @media print {
            .no-print {
                display: none !important;
            }
        }

        .btn {
            border-radius: 5px;
            font-size: 0.7rem;
            padding: 2px 28px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .badge {
            -webkit-border-radius: unset;
            border-radius: 12%;
        }

        .container-fluid {
            background: #fff;
            padding: 20px;
            border-radius: 10px;
            font-size: 14px;
        }

        fieldset {
            border: 1px solid #ddd;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;

        }

        legend {
            font-size: 1.2rem;
            font-weight: bold;
            width: auto;
            padding: 0 10px;
            background: #fff;
            color: #6c757d;
        }

        /* For details modal */

        .container {
            width: 95%;
            max-width: 700px;
            background: #fff;
            margin: auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .header {
            text-align: center;
            font-weight: bold;
            padding: 10px;
            border-bottom: 2px solid #ddd;
            font-size: 16px;
        }

        .section {
            margin-top: 15px;
        }

        .section-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .details {
            font-size: 14px;
            line-height: 1.8;
        }

        .details i {
            color: #007bff;
            margin-right: 8px;
        }

        .secure {
            color: #ff0000;
            font-weight: bold;
        }

        .modal-body {
    padding: 20px;
}

.header {
    font-size: 16px;
    font-weight: bold;
}

.section-title {
    font-size: 14px;
    font-weight: bold;
    color: #007bff;
}

.details p {
    font-size: 12px;
    margin: 5px 0;
}

    </style>
@endsection