@extends('layouts.tenant.master')
@section('title', 'Quote Menu')

@section('css')
@endsection

@section('style')
@endsection

@section('breadcrumb-title')
    <h2>Quote<span>List </span></h2>
@endsection

@section('breadcrumb-items')
<li class="breadcrumb-item active">Quote</li>
    <li class="breadcrumb-item">List</li>
@endsection

@section('content')

<div class="p-2 mt-0 card-header no-border">
    {{-- <a href="{{ route('tenant_quotes_create') }}" class="text-white btn btn-info btn-sm" data-toggle="tooltip"
        title="Create a new Quote in the system">
        <i class="icofont icofont-plus"></i> Create Quote
    </a>

    <a   href="{{ route('tenant_deleted_quotes_list') }}" class="btn btn-success btn-sm" data-toggle="tooltip" title="Restore a previously deleted Quote">
        <i class="icofont icofont-spinner-alt-3"></i> Restore Quote
    </a>
    <a href="{{ url()->current() }}" class="btn btn-light btn-sm" data-toggle="tooltip" title="Refresh this Page.">
        <i class="icofont icofont-refresh fa fa-spin"></i>&nbsp; Refresh
    </a>
    <div class=" pull-right">
        <button class="btn btn-primary btn-sm" data-toggle="tooltip" title="Export user data to a file">
            <i class="text-white icofont icofont-upload-alt"></i> Export
        </button>

        <button class="btn btn-dark btn-sm" data-toggle="tooltip" title="Import user data from a file">
            <i class="text-white icofont icofont-download-alt"></i> Import
        </button>
    </div> --}}
</div>


<div class="pt-0 card-body">
    <div class="table-responsive table-sm">
        <table id="example1" class="table table-bordered dataTable  p-0 m-0 display table-striped table-sm" cellspacing="0" width="100%" aria-describedby="example1_info" style="width: 100%;">
        <thead>
            <tr role="row">
                <th class="sorting_desc" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1"
                    colspan="1" aria-sort="descending" aria-label="ID: activate to sort column ascending"
                    style="width: 37.7778px;">ID</th>
                <th class="sorting" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1"
                    colspan="1" aria-label="Bill Name: activate to sort column ascending" style="width: 77.7778px;">
                    Bill Name</th>
                <th class="sorting" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1"
                    colspan="1" aria-label="Job Name: activate to sort column ascending" style="width: 84.7778px;">
                    Job Name</th>
                <th class="sorting" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1"
                    colspan="1" aria-label="Company Name: activate to sort column ascending" style="width: 96.7778px;">
                    Company Name</th>
                <th class="sorting" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1"
                    colspan="1" aria-label="Created Date: activate to sort column ascending" style="width: 46.7778px;">
                    Created Date</th>
                <th class="sorting" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1"
                    colspan="1" aria-label="Completion Date: activate to sort column ascending" style="width: 53.7778px;">
                    Completion Date</th>
                <th class="sorting" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1"
                    colspan="1" aria-label="Is Approved: activate to sort column ascending" style="width: 126.778px;">
                    Is Approved</th>
                <th class="sorting" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1"
                    colspan="1" aria-label="Action: activate to sort column ascending" style="width: 250px;">
                    Action</th>
            </tr>
        </thead>

        <tbody role="alert" aria-live="polite" aria-relevant="all" id="">
            @if(!isset($all_quotes))
                <tr>
                    <td colspan="12">No stock check requests found.</td>
                </tr>
            @else
                @foreach($all_quotes as $request)
                    <tr>
                        <td>{{ $request->id }}</td>
                        <td>{{ $request->user->name ?? 'N/A' }}</td> <!-- Bill Name -->
                        <td>{{ $request->job_name ?? 'N/A' }}</td>
                        <td>{{ $request->user->company_name ?? 'N/A' }}</td>
                        <td>{{ $request->created_at ? $request->created_at->format('M d, Y') : 'N/A' }}</td>
                        <td>{{ $request->updated_at ? \Carbon\Carbon::parse($request->completion_date)->format('M d, Y') : 'N/A' }}</td>
                        <td>
                            @if($request->status == 1)
                                <span class="badge bg-success">Yes</span>
                            @else
                                <span class="badge bg-warning">No</span>
                            @endif
                        </td>
                        <td>
                            <a href="{{ route('tenant_quotes_show', ['id' => $request->id]) }}">View</a> ||
                            <a href="#" id="print_btn">Print</a>
                        </td>
                    </tr>
                    <div id="quote_request_list" style="display: none;">
                        <h3>Quote Request List</h3>
                        <div class="stock-check-item">
                            <p><strong>Request ID:</strong> {{ $request->id }}</p>
                            <p><strong>Job Name:</strong> {{ $request->job_name }}</p>
                            @php
                                $rooms = json_decode($request->rooms, true); // already an array
                            @endphp

                            @foreach ($rooms as $room)
                                <p><strong>Room:</strong> {{ $room['room_name'] ?? 'Unnamed Room' }}</p>
                                @if (!empty($room['products']))
                                    <ul>
                                        @foreach ($room['products'] as $product)
                                            <li>Product ID: {{ $product['product_id'] }}</li>
                                        @endforeach
                                    </ul>
                                @else
                                    <p>No products in this room.</p>
                                @endif
                            @endforeach

                        </div>
                    </div>
                @endforeach
            @endif
        </tbody>
    </table>
    </div>
     
</div>


@endsection

@section('script')
<script>

    function viewOrgData(requestId) {
        const url = `{{ route('tenant_Stock_check_restore', ['id' => 'TEMP_ID']) }}`.replace('TEMP_ID', requestId);
        Swal.fire({
            title: 'Send Email To Warehouse',
            input: 'email',
            inputLabel: 'Email*',
            inputPlaceholder: 'type email...',
            showCancelButton: true,
            confirmButtonText: 'Submit',
            cancelButtonText: 'Cancel',
            preConfirm: (value) => {
                if (!value) {
                    Swal.showValidationMessage('Please enter a comment!');
                }
                return value;
            }
        }).then((result) => {
            if (result.isConfirmed) {
                fetch(url, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({ comment: result.value })
                })
                .then(res => res.json())
                .then(data => {
                    Swal.fire('Success', data.message || 'Restored successfully!', 'success');
                })
                .catch(() => {
                    Swal.fire('Error', 'Something went wrong.', 'error');
                });
            }
        });
    }
</script>

    {{-- sweet alert  start --}}
    <script>
        function deleteUser(userId) {
            // SweetAlert confirmation dialog
            Swal.fire({
                title: 'Are you sure?',
                text: 'You won\'t be able to revert this!',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!',
            }).then((result) => {
                if (result.isConfirmed) {
                    // If confirmed, submit the delete form
                    document.getElementById('deleteForm' + userId).submit();
                }
            });
        }
    </script>
    @if (session('success'))
        <script>
            Swal.fire({
                icon: 'success',
                title: 'Success!',
                text: '{{ session('success') }}',
                confirmButtonText: 'OK'
            });
        </script>
    @elseif(session('error'))
        <script>
            Swal.fire({
                icon: 'error',
                title: 'Oops...',
                text: '{{ session('error') }}',
                confirmButtonText: 'OK'
            });
        </script>
    @endif

    {{-- sweet alert  end --}}


    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const deleteButtons = document.querySelectorAll('.delete-button');

            deleteButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const form = this.closest('.delete-form');

                    Swal.fire({
                        title: 'Are you sure?',
                        text: "You can revert this within 60 days!",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#d33',
                        cancelButtonColor: '#3085d6',
                        confirmButtonText: 'Yes, delete it!'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            form.submit(); // Submit the form if confirmed
                        }
                    });
                });
            });
        });
    </script>
    <script>
        // Status change script
        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('.status-dropdown').forEach(function(dropdown) {
                dropdown.addEventListener('change', function() {
                    const userId = this.getAttribute('data-user-id');
                    const newStatus = this.value;
                    const previousValue = this.dataset.previousValue || this.value;

                    Swal.fire({
                        text: `You are about to change the user's status to ${newStatus}.`,
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Yes, change it!',
                    }).then((result) => {
                        if (result.isConfirmed) {
                            const csrfToken = document.querySelector(
                                'meta[name="csrf-token"]') ? document.querySelector(
                                'meta[name="csrf-token"]').getAttribute('content') : '';

                            if (!csrfToken) {
                                console.error('CSRF token not found!');
                                return; // Exit if the CSRF token is missing
                            }

                            // Get the route URL dynamically
                            const updateStatusUrl =
                                '{{ route('tenant_users_update_status', ':id') }}'.replace(
                                    ':id', userId);

                            fetch(updateStatusUrl, {
                                    method: 'POST',
                                    headers: {
                                        'Content-Type': 'application/json',
                                        'X-CSRF-TOKEN': csrfToken
                                    },
                                    body: JSON.stringify({
                                        status: newStatus
                                    })
                                })
                                .then(response => response.json())
                                .then(data => {
                                    if (data.success) {
                                        Swal.fire('Updated!',
                                            `The user's status has been updated to ${newStatus}.`,
                                            'success');
                                    } else {
                                        Swal.fire('Error!',
                                            'There was a problem updating the status.',
                                            'error');
                                        dropdown.value =
                                            previousValue; // Revert if error occurs
                                    }
                                })
                                .catch(error => {
                                    console.error('Error:', error);
                                    Swal.fire('Error!',
                                        'There was a problem updating the status.',
                                        'error');
                                    dropdown.value = previousValue; // Revert on error
                                });
                        } else {
                            dropdown.value = previousValue; // Revert if canceled
                        }
                    });

                    this.dataset.previousValue = newStatus; // Store previous value
                });
            });
        });
    </script>


    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Loop through all copy icons for users
            document.querySelectorAll('.fa-copy').forEach(copyIcon => {
                copyIcon.addEventListener('click', function() {
                    const userId = this.id.split('-')[
                        2]; // Extract the user ID from the copy icon ID
                    const emailText = document.getElementById('email-' + userId)
                        .textContent; // Get the email using the user ID

                    // Use the Clipboard API to copy the email text
                    navigator.clipboard.writeText(emailText).then(function() {
                        // If the text is copied, show SweetAlert with the copied email
                        Swal.fire({
                            icon: 'success',
                            title: 'Copied!',
                            text: 'Email: ' +
                                emailText, // Show the copied email in the SweetAlert message
                            showConfirmButton: false,
                            timer: 3000,
                        });
                    }).catch(function(err) {
                        // If an error occurs while copying, show an error message
                        console.error('Error copying text: ', err);
                        Swal.fire({
                            icon: 'error',
                            title: 'Oops!',
                            text: 'Failed to copy the email.',
                            confirmButtonText: 'Try Again'
                        });
                    });
                });
            });
        });

        function printPage() {
            const contentToPrint = document.getElementById('quote_request_list').innerHTML;

            // Open the print window and print the content
            const newWindow = window.open('', '', 'width=700,height=800');
            newWindow.document.write(`
                <html>
                    <head>
                        <title>Print Quote Request</title>
                        <style>
                            /* Add any styles to customize the print appearance */
                            body {
                                font-family: Arial, sans-serif;
                                margin: 20px;
                            }
                            .stock-check-request {
                                border: 1px solid #ddd;
                                padding: 15px;
                            }
                            /* Add more styling as necessary */
                        </style>
                    </head>
                    <body>
                        <div class="stock-check-request">
                            ${contentToPrint}
                        </div>
                    </body>
                </html>
            `);
            newWindow.document.close();
            newWindow.print();
        }

        // Handle print button click
        $(document).on("click", "#print_btn", function(event) {
            event.preventDefault(); // Prevent default action

            printPage(); // Print only the stock check request content
        });

    </script>
@endsection


{{-- sweet alert link start --}}

{{--
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"
    integrity="sha512-AA1Bzp5Q0K1KanKKmvN/4d3IRKVlv9PYgwFPvm32nPO6QS8yH1HO7LbgB1pgiOxPtfeg5zEn2ba64MUcqJx6CA=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script> --}}

{{-- sweet alert link end --}}