@extends('main.layouts.app')
@section('content')

<div class="page-header ">
    <h1 class="page-title">Product Page</h1>
    <ol class="breadcrumb">
        <!-- <li class="breadcrumb-item"><a href="dashboard">Home</a></li> -->
        <li class="breadcrumb-item active" aria-current="page"><a href="{{ route('admin.create-product') }}" class="btn btn-primary">Add Product</a></li>
    </ol>
</div>

<div class="card-body p-0">
    <div class="row row-sm">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Product List</h3>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered text-nowrap border-bottom" id="photos_table">
                            <thead>
                                <tr>
                                    <td>ID</td>
                                    <td>Product Title</td>
                                    <td>Images</td>
                                    <td>Product URL</td>
                                    <td>Category ID</td>
                                    <td>Price</td>
                                    <td>Offers</td>
                                    <td>Actions</td>
                                </tr>
                            </thead>
                            <tbody>
                                @if($products->isNotEmpty())
                                @foreach ($products as $items)
                                <tr>
                                    <td>{{ $items->id }}</td>
                                    <td>{{ $items->product_title }}</td>
                                    <td><img src="{{ $items->images }}" style="width:100px;"></td>
                                    <td>{{ $items->product_url }}</td>
                                    <td>{{ $items->category }}</td>
                                    <td>{{ $items->price }}</td>
                <td>
    <input type="checkbox" class="toggle-offer" 
           data-id="{{ $items->id }}" 
           {{ $items->is_offer ? 'checked' : '' }}>

    <div class="offer-dates mt-2" style="{{ $items->is_offer ? '' : 'display:none;' }}">
        <input type="datetime-local" class="offer-start" data-id="{{ $items->id }}" 
               value="{{ $items->offer_start ? \Carbon\Carbon::parse($items->offer_start)->format('Y-m-d\TH:i') : '' }}">
        <input type="datetime-local" class="offer-end" data-id="{{ $items->id }}" 
               value="{{ $items->offer_end ? \Carbon\Carbon::parse($items->offer_end)->format('Y-m-d\TH:i') : '' }}">
        <button class="btn btn-sm btn-success save-offer" data-id="{{ $items->id }}">Save</button>
    </div>
</td>


                                    <td>
                                        <a href="{{ route('admin.edit-product', $items->id) }}" class="btn btn-primary">Edit</a>
                                        
                                        <a href="{{ route('admin.destroy-product', $items->id) }}" class="btn btn-danger"
                                           onclick="event.preventDefault(); document.getElementById('delete-form-{{ $items->id }}').submit();">Delete</a>
                                        <form id="delete-form-{{ $items->id }}" action="{{ route('admin.destroy-product', $items->id) }}" method="POST" style="display: none;">
                                            @csrf
                                            @method('DELETE')
                                        </form>
    
 
                                    <a href="{{ route('variants.create', $items->id) }}" class="btn btn-success">Add Variant</a>
                                       <!-- Add Variant Button -->
                                        {{-- <a href="{{ route('variants.add', $items->id) }}" class="btn btn-success">Add Variant</a> --}}
    
                                        <!-- Show Variants Button -->
                                        <!-- <a href="{{ route('admin.show-variants', $items->id) }}" class="btn btn-info">Show Variants</a> -->
                                    </td>
                                </tr>
                                @endforeach
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).on('change', '.toggle-offer', function() {
    let productId = $(this).data('id');
    let isOffer = $(this).is(':checked') ? 1 : 0;

    let row = $(this).closest('td');
    if(isOffer){
        row.find('.offer-dates').show();
    } else {
        row.find('.offer-dates').hide();
        // remove dates if unchecked
        $.ajax({
            url: "{{ route('products.toggleOffer') }}",
            type: "POST",
            data: {
                id: productId,
                is_offer: 0,
                offer_start: null,
                offer_end: null,
                _token: "{{ csrf_token() }}"
            },
            success: function(response) {
                alert("Offer disabled for product " + productId);
            }
        });
    }
});

$(document).on('click', '.save-offer', function() {
    let productId = $(this).data('id');
    let startDate = $(this).closest('.offer-dates').find('.offer-start').val();
    let endDate = $(this).closest('.offer-dates').find('.offer-end').val();

    $.ajax({
        url: "{{ route('products.toggleOffer') }}",
        type: "POST",
        data: {
            id: productId,
            is_offer: 1,
            offer_start: startDate,
            offer_end: endDate,
            _token: "{{ csrf_token() }}"
        },
        success: function(response) {
            alert("Offer updated successfully with dates!");
        }
    });
});

</script>

<script>
    $(document).ready(function() {
        $('#photos_table').DataTable();
    });
</script>
@endsection