@extends('layouts.layout')
@section('content')
    <div class="page-body">
        <!-- Container-fluid starts-->
        <div class="container-fluid">
            <div class="page-header">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="page-header-left">
                            <h3>{{ $title }}
                                <small>Diamond Admin panel</small>
                            </h3>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <ol class="breadcrumb pull-right">
                            <li class="breadcrumb-item">
                                <a href="{{ route('admin.dashboard') }}">
                                    <i data-feather="home"></i>
                                </a>
                            </li>
                            <li class="breadcrumb-item">Sama price</li>
                            <li class="breadcrumb-item active">{{ $title }}</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <!-- Container-fluid Ends-->

        <!-- Container-fluid starts-->
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-header">

                            <button type="button" class="btn btn-primary mt-md-0 mt-2" data-bs-toggle="modal"
                                data-bs-target="#addPriceModal">Upload Sheet to check flag</button>

                            <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal"
                                data-bs-target="#addPriceafModal">Import Price <i class="fa fa-upload"></i></button>
                            {{-- <a href="{{ $viewurl }}" class="btn btn-primary mt-md-0 mt-2">Download Database price sheet for compare</a> --}}
                        </div>

                        <div class="card-body">
                            <div class="table-responsive table-desi">
                                <table class="all-package coupon-table table table-striped">
                                    <thead>
                                        <tr>
                                            <th>created at</th>
                                            <th>Status</th>

                                        </tr>
                                    </thead>

                                    <tbody>
                                        @foreach ($tasks as $task)
                                            <tr>
                                                <td>{{ date('M d ,Y  - H:i:sA', strtotime($task->created_at)) }}</td>
                                                <td>
                                                    @if ($task->status == 'completed')
                                                        <span class="badge bg-success">Completed</span>
                                                    @elseif($task->status == 'in_progress')
                                                        <span class="badge bg-info">In Progress <i class="fa fa-spinner fa-spin"></i></span>
                                                    @else
                                                        <span class="badge bg-warning">Pending</span>
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            <div class="dataTables_paginate paging_simple_numbers d-flex justify-content-between align-items-center">
								<div>
									Showing {{ $tasks->firstItem() }} to {{ $tasks->lastItem() }} of total {{$tasks->total()}} entries
								</div>
								<div class="float-end">
									<p>{{ $tasks->links() }}</p>
								</div>
							</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Container-fluid Ends-->
    </div>

    {{-- add price after flag check start  --}}
    <div class="modal fade" id="addPriceafModal" tabindex="-1" aria-labelledby="addPriceafModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addPriceafModalLabel">Add Price</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">X</button>
                </div>
                <form action="{{ route('import.after.check') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">

                        <div class="form-group">
                            <label for="">Price Csv <span>*</span></label>
                            <input type="file" name="product_csv" id="product_csv" required class="form-control"
                                accept=".xlsx, .xls, .csv">
                            <span class="errors"></span>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {{-- add price after flag check end  --}}

    {{-- add price model start  --}}
    <div class="modal fade" id="addPriceModal" tabindex="-1" aria-labelledby="addPriceModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addPriceModalLabel">Add Price</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">X</button>
                </div>
                <form action="{{ route('check.price.flag') }}" method="POST" enctype="multipart/form-data"
                    id="checkpriceFlag">
                    @csrf
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="">Price Csv <span>*</span></label>
                            <input type="file" name="uploaded_file" id="uploaded_file" required class="form-control"
                                accept=".xlsx, .xls, .csv">
                            <span class="errors"></span>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary save-btn">Save <i
                                class="fa fa-spinner fa-spin d-none"></i></button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {{-- add price model end  --}}


    <!-- Modal Structure -->
    <div class="modal fade" id="differencesModal" tabindex="-1" aria-labelledby="differencesModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="differencesModalLabel">Price Differences</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" >

                    <div id="priceSummaryPopup"style="">
                        <h2 style="font-size: 18px; margin-bottom: 10px;">Price Comparison Summary</h2>
                        <p style="margin: 10px 0; font-size: 16px;">Number of empty prices: <strong
                                id="emptyCount">0</strong></p>
                        <p style="margin: 10px 0; font-size: 16px;">Number of prices less than 10%: <strong
                                id="lowPriceCount">0</strong></p>
                        <p style="margin: 10px 0; font-size: 16px;">Number of prices greater than 10%: <strong
                            id="HightPriceCount">0</strong></p>

                    </div>

                    <!-- Table will be populated dynamically -->
                    {{-- <table class="table table-bordered" id="differencesTable">
                    <thead>
                        <tr>
                            <th>Row</th>
                            <th>Stored Data</th>
                            <th>Uploaded Data</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Data will be inserted here -->
                    </tbody>
                </table> --}}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>


    @push('scripts')
        <script>
            $("#checkpriceFlag").submit(function(e) {
                e.preventDefault();
                var formData = new FormData(this);
                $.ajax({
                    url: $(this).attr('action'), // Use the form's action URL
                    type: 'POST',
                    data: formData,
                    processData: false, // Prevent jQuery from processing the data
                    contentType: false, // Prevent jQuery from setting content-type header
                    beforeSend: function() {
                        // setting a timeout
                        $(".save-btn").attr('disabled', true);
                        $(".fa-spin").removeClass('d-none');
                    },
                    success: function(response) {
                        console.log(response);
                        if (response.res == 'success') {
                            $(".save-btn").attr('disabled',false);
                            $(".fa-spin").addClass('d-none');
                            $('#uploaded_file').val('');
                            $('#addPriceModal').modal('hide');
                            $('#differencesModal').modal('show');
                            $("#emptyCount").html(response.empty_price_count);
                            $("#lowPriceCount").html(response.less_than_10_percent_count);
                            $("#HightPriceCount").html(response.greater_than_10_percent_count);
                        }



                        // if(response.res === "success" && response.differences.length > 0) {
                        // Clear existing table rows
                        // $('#differencesTable tbody').empty();

                        // Iterate through the differences and create table rows
                        // response.differences.forEach(function(diff) {
                        //     var storedRowData = diff.stored_row.map(function(item) {
                        //         return item !== null ? item : ''; // If null, display an empty string
                        //     }).join('<br>'); // Join with line breaks for better readability

                        //     var uploadedRowData = diff.uploaded_row.map(function(item) {
                        //         return item !== null ? item : ''; // If null, display an empty string
                        //     }).join('<br>'); // Join with line breaks for better readability

                        //     var row = `
                //         <tr>
                //             <td>${diff.row}</td>
                //             <td>${storedRowData}</td>
                //             <td>${uploadedRowData}</td>
                //         </tr>
                //     `;

                        //     // Append the row to the table body
                        //     $('#differencesTable tbody').append(row);
                        // });

                        // Show the modal with the differences table
                        // $('#differencesModal').modal('show');
                        // $(".save-btn").attr('disabled',false);
                        // $(".fa-spin").addClass('d-none');
                        // } else {
                        //     alert('No differences found!');
                        //     $(".save-btn").attr('disabled',false);
                        //     $(".fa-spin").addClass('d-none');

                        // }
                    },
                    error: function(xhr, status, error) {
                        // Handle error (e.g., file upload error, validation error)
                        console.log('Error: ' + error);
                        alert('There was an error uploading the file.');
                    }
                });
            })
        </script>
    @endpush
@endsection