@extends('layouts.main')
@section('title', $data['title'])
@section('content')
    <style>
    </style>
    <div class="row align-items-center mb-4">
        <div class="col-auto">
            <h1 class="h5">All Products</h1>
        </div>

        <div class="col text-right">
            {{-- <a href="javascript:void(0);" id="AddProductBtn" class="btn-circle custom-btn">
            <span>Add Product</span>
        </a> --}}
            <a href="javascript:void(0);" id="AddProductBtn" class="button-custom"><span>Add Product</span></a>
        </div>
    </div>
    <div class="row card">
        <div class="card-header">
            <form method="GET" action="{{ route('dashboard') }}" class="row align-items-center w-100">
                <div class="col">
                    <div class="d-flex align-items-center flex-nowrap gap-2">
                        <label for="entries" class="text-muted mb-0">Show</label>
                        <select id="entries" name="entries" class="form-select form-select-sm custom-select"
                            onchange="this.form.submit()">
                            {{-- <option value="10" selected="">10</option>
                    <option value="20">20</option>
                    <option value="30">30</option>
                    <option value="50">50</option>
                    <option value="75">75</option>
                    <option value="4">
                        All</option> --}}
                            @foreach ([10, 20, 30, 50, 75, 100] as $count)
                                <option value="{{ $count }}" {{ request('entries') == $count ? 'selected' : '' }}>
                                    {{ $count }}</option>
                            @endforeach
                        </select>
                        <span class="text-muted mb-0">entries</span>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group mb-0">
                        <input type="text" class="form-control form-control-sm" name="search" placeholder="Type & Enter"
                            value="{{ request('search') }}" onkeydown="if(event.key === 'Enter') this.form.submit()">
                    </div>
                </div>
            </form>
        </div>
        <div class="card-body pb-2">
            <div class="table-responsive">
                <table class="table mb-0 table-hover table-nowrap">
                    <thead>
                        <tr class="text-center">
                            <th>#</th>
                            <th>Image</th>
                            <th>Product Name</th>
                            <th>Status</th>
                            <th>Price</th>
                            <th>Discount</th>
                            <th>Final Price</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($products as $key => $product)
                            <tr class="text-center">
                                <td>{{ $key + 1 }}</td>
                                <td>
                                    <img src="{{ asset($product->image) }}" alt="image" width="60" height="55"
                                        class="rounded-10">
                                </td>
                                <td>{{ $product->product_name }}</td>

                                <td>
                                    @if ($product->status != 0)
                                        <span class="badge bg-success">Active</span>
                                    @else
                                        <span class="badge bg-danger">Inactive</span>
                                    @endif
                                </td>
                                <td>{{ number_format($product->product_amount, 2) }}</td>
                                <td>
                                    {{ $product->discount_amount ?? '-' }}
                                </td>
                                <td>{{ number_format($product->final_amount, 2) }}</td>
                                <td>
                                    <a href="{{ route('product.view', $product->product_name) }}"
                                        class="btn btn-soft-success btn-icon btn-circle" title="Edit" target="_blank">
                                        <i class="fa-solid fa-eye"></i>
                                    </a>
                                    <a href="javascript:void(0);" class="btn btn-soft-info btn-icon btn-circle"
                                        title="Edit" onclick="editProduct({{ $product->id }})">
                                        <i class="fa-solid fa-pen-to-square"></i>
                                    </a>
                                    <a href="javascript:void(0);" class="btn btn-soft-danger btn-icon btn-circle"
                                        title="Delete" onclick="deleteProduct({{ $product->id }})">
                                        {{-- <i class='bx bxs-trash' ></i> --}}
                                        <i class='bx bx-trash-alt'></i>
                                    </a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="text-center text-muted">No records found.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
                <div class="d-flex justify-content-between flex-wrap border-top pt-2">
                    <p class="text-muted mb-0">
                        Showing
                        <strong>{{ $products->firstItem() }}</strong>
                        to
                        <strong>{{ $products->lastItem() }}</strong>
                        of
                        <strong>{{ $products->total() }}</strong>
                        entries
                    </p>
                    <div class="d-flex justify-content-end">
                        {{ $products->links('pagination::bootstrap-4') }}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="addProductModal" tabindex="-1" aria-labelledby="addProductModalLabel" aria-hidden="true"
        data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="product_title">Add Product</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="card-body pt-0">
                        <div id="create_loader" class="c-preloader text-center p-3" style="display: none;">
                            <i class="las la-spinner la-spin la-3x"></i>
                        </div>
                        <form id="productCreateForm" class="form-horizontal" action="{{ route('product.save') }}"
                            method="POST" enctype="multipart/form-data" style="width: auto;">
                            <div class="row">
                                @csrf
                                <input type="hidden" id="product_id" name="product_id" value="">
                                <div class="form-group row">
                                    <div class="col-md-4">
                                        <label class="col-form-label">Product Name</label>
                                        <input type="text" placeholder="Product Name" id="product_name"
                                            name="product_name" class="form-control" required="" value="">
                                    </div>
                                    <div class="col-md-4">
                                        <label class="col-form-label">category</label>
                                        <select class="form-control aiz-selectpicker" name="category"
                                            id="category">
                                            @foreach(product_category() as $key => $value)
                                            <option value="{{ $value['code'] }}">{{ $value['name'] }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="col-form-label">Image</label>
                                        <input type="file" placeholder="" id="image" name="image"
                                            class="form-control" onchange="previewImage(event)">
                                        <div style="margin-top: 10px;">
                                            <img id="image_preview" src="#" alt="Image Preview"
                                                style="max-width: 50%; max-height: 100px; display: none;" />
                                        </div>
                                    </div>

                                </div>
                                <div class="form-group row">
                                    <div class="col-md-4">
                                        <label class="col-form-label">Status</label>
                                        <select class="form-control aiz-selectpicker" name="status" id="status"
                                            required>
                                            <option value="1">Active</option>
                                            <option value="0">In Active</option>
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="col-form-label">Price</label>
                                        <input type="number" placeholder="Price" id="price" name="price"
                                            class="form-control" required="" value="">
                                    </div>
                                    <div class="col-md-4">
                                        <label class="col-form-label">Discount Amount</label>
                                        <input type="number" placeholder="Discount Amount" id="discount_amt"
                                            name="discount_amt" class="form-control" value="">
                                    </div>
                                    <div class="col-md-4">
                                        <label class="col-form-label">Discount Type</label>
                                        <select class="form-control aiz-selectpicker" name="discount_type"
                                            id="discount_type">
                                            <option value="1">Flat</option>
                                            <option value="0">Percentage</option>
                                        </select>
                                    </div>
                                </div>
                                {{-- <div class="form-group row">
                            <div class="col-md-6">
                                <label class="col-form-label">Product Drive Folder Id</label>
                                <input type="text" placeholder="Product Drive Folder Id" id="google_drive_folder_id" name="google_drive_folder_id" class="form-control" value="">
                            </div>
                        </div> --}}
                                <div class="form-group row">
                                    <label class="col-form-label">Main Description</label>
                                    <textarea id="main_desc" name="main_desc" required>{{ old('main_desc') }}</textarea>
                                </div>
                                <div class="form-group row">
                                    <label class="col-form-label">Sub Description</label>
                                    <textarea id="sub_desc" name="sub_desc" required>{{ old('sub_desc') }}</textarea>
                                </div>
                                <!-- Container that holds all rows -->
                                <div id="drive-access-container" class="px-0">
                                    <div class="drive-access-row">
                                        <div class="form-group row align-items-end">
                                            <div class="col-md-3">
                                                <label>Email</label>
                                                <input type="email" name="access[0][email]" class="form-control"
                                                    placeholder="Email">
                                            </div>
                                            <div class="col-md-3">
                                                <label>Drive Folder ID</label>
                                                <input type="text" name="access[0][drive_folder_id]"
                                                    class="form-control" placeholder="Product Drive Folder Id">
                                            </div>
                                            <div class="col-md-3">
                                                <label>JSON File</label>
                                                <input type="file" name="access[0][json_file]" class="form-control"
                                                    accept=".json">
                                            </div>
                                            <div class="col-md-1">
                                                <button type="button" class="btn btn-soft-danger remove-access-row"
                                                    style="display: none;" title="Remove">
                                                    <i class="fa fa-times" aria-hidden="true"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 px-0">
                                    <button type="button" id="add-access" class="button-custom mt-4"
                                        style="padding: 13px 2.2rem;"><span>+ Add Access</span></button>

                                </div>
                            </div>
                            <br>
                            <div class="form-group mb-0 text-right">
                                <button type="submit" class="button-custom"><span>Save</span></button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection('content')
@section('custom-scripts')
    {{-- <script src="https://cdn.ckeditor.com/4.20.1/standard/ckeditor.js"></script> --}}
    <script src="https://cdn.ckeditor.com/4.22.1/standard/ckeditor.js"></script>
    <script>
        let accessIndex = 1;

        $(document).ready(function() {
            $('#AddProductBtn').click(function() {
                $('#productCreateForm')[0].reset();
                $('#product_id').val(0);
                $('#image_preview').hide().attr('src', '#');
                if (typeof CKEDITOR !== "undefined") {
                    for (let instanceName in CKEDITOR.instances) {
                        CKEDITOR.instances[instanceName].setData('');
                    }
                }

                $('#drive-access-container').html(`
                <div class="drive-access-row">
                    <div class="form-group row align-items-end">
                        <div class="col-md-3">
                            <label>Email</label>
                            <input type="email" name="access[0][email]" class="form-control" placeholder="Email">
                        </div>
                        <div class="col-md-3">
                            <label>Drive Folder ID</label>
                            <input type="text" name="access[0][drive_folder_id]" class="form-control" placeholder="Drive Folder ID">
                        </div>
                        <div class="col-md-3">
                            <label>JSON File</label>
                            <input type="file" name="access[0][json_file]" class="form-control" accept=".json">
                        </div>
                        <div class="col-md-1">
                            <button type="button" class="btn btn-soft-danger remove-access-row" style="display: none;" title="Remove">
                                <i class="fa fa-times" aria-hidden="true"></i>
                            </button>
                        </div>
                    </div>
                </div>
            `);
                $('#addProductModal').modal('show');
                $('#product_title').text('Add Product');
            });

            $('#add-access').click(function() {
                let rowHtml = `
                    <div class="drive-access-row">
                        <div class="form-group row align-items-end">
                            <div class="col-md-3">
                                <label>Email</label>
                                <input type="email" name="access[${accessIndex}][email]" class="form-control" placeholder="Email">
                            </div>
                            <div class="col-md-3">
                                <label>Drive Folder ID</label>
                                <input type="text" name="access[${accessIndex}][drive_folder_id]" class="form-control" placeholder="Drive Folder ID">
                            </div>
                            <div class="col-md-3">
                                <label>JSON File</label>
                                <input type="file" name="access[${accessIndex}][json_file]" class="form-control" accept=".json">
                            </div>
                            <div class="col-md-1">
                                <button type="button" class="btn btn-soft-danger remove-access-row" title="Remove">
                                    <i class="fa fa-times" aria-hidden="true"></i>
                                    </button>
                            </div>
                        </div>
                    </div>
                `;
                $('#drive-access-container').append(rowHtml);
                accessIndex++;
            });

            $(document).on('click', '.remove-access-row', function() {
                $(this).closest('.drive-access-row').remove();
            });


            $('#productCreateForm').on('submit', function(e) {
                e.preventDefault();

                var formData = new FormData(this);

                $.ajax({
                    url: $(this).attr('action'),
                    type: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    beforeSend: function() {
                    },
                    success: function(response) {

                        flasher.success(response.message);
                        let modal = bootstrap.Modal.getInstance(document.getElementById(
                            'addProductModal'));
                        if (modal) {
                            modal.hide();
                        }
                        $('#image_preview').hide().attr('src', '#');

                        if (typeof CKEDITOR !== "undefined") {
                            for (let instanceName in CKEDITOR.instances) {
                                CKEDITOR.instances[instanceName].setData('');
                            }
                        }

                        $('#productCreateForm')[0].reset();
                        setTimeout(function() {
                            $('#flasher-message').fadeOut();
                            window.location.reload();
                        }, 4000);
                    },
                    error: function(xhr) {
                        if (xhr.status === 422) {
                            let response = xhr.responseJSON;

                            if (response.errors) {
                                for (let key in response.errors) {
                                    if (response.errors[key] && response.errors[key][0]) {
                                        flasher.error(response.errors[key][0]);
                                        break;
                                    }
                                }
                            } else if (response.message) {
                                flasher.error(response.message);
                            } else {
                                flasher.error('Validation failed.');
                            }
                        } else {
                            flasher.error('Error saving product.');
                        }
                    }
                });
            });
        });

        function previewImage(event) {
            const input = event.target;
            const preview = $('#image_preview');

            if (input.files && input.files[0]) {
                const reader = new FileReader();

                reader.onload = function(e) {
                    preview.attr('src', e.target.result);
                    preview.show();
                };

                reader.readAsDataURL(input.files[0]);
            } else {
                preview.attr('src', '#');
                preview.hide();
            }
        }

        function editProduct(id) {
            $.ajax({
                url: '{{ route('product.edit') }}',
                method: 'GET',
                data: {
                    id: id
                },
                success: function(response) {
                    if (response.status) {
                        let data = response.data;

                        $('#product_title').text('Edit Product');
                        $('#product_id').val(data.id);
                        $('#product_name').val(data.product_name);
                        $('#category').val(data.category).trigger('change');
                        $('#price').val(data.product_amount);
                        $('#discount_amt').val(data.discount_value);
                        $('#discount_type').val(data.discount_type);
                        $('#status').val(data.status);
                        $('#google_drive_folder_id').val(data.drive_folder_id);

                        let imageUrl = '{{ asset('') }}' + data.image;
                        $('#image_preview').attr('src', imageUrl).show();

                        if (typeof CKEDITOR !== 'undefined') {
                            CKEDITOR.instances['main_desc'].setData(data.main_desctiption);
                            CKEDITOR.instances['sub_desc'].setData(data.sub_description);
                        } else {
                            $('#main_desc').val(data.main_desctiption);
                            $('#sub_desc').val(data.sub_description);
                        }

                        // Clear existing access rows
                        $('#drive-access-container').html('');

                        if (response.access && response.access.length > 0) {
                            response.access.forEach((item, index) => {
                                accessIndex = response.access.length
                                let baseAssetUrl = "{{ asset('') }}";
                                let rowHtml = `
                        <div class="drive-access-row">
                            <div class="form-group row align-items-end">
                                <div class="col-md-3">
                                    <label>Email</label>
                                    <input type="email" name="access[${index}][email]" class="form-control" placeholder="Email" value="${item.email}">
                                </div>
                                <div class="col-md-3">
                                    <label>Drive Folder ID</label>
                                    <input type="text" name="access[${index}][drive_folder_id]" class="form-control" placeholder="Drive Folder ID" value="${item.drive_folder_id}">
                                </div>
                                <div class="col-md-3">
                                    <label>JSON File</label>
                                    <input type="file" name="access[${index}][json_file]" class="form-control" accept=".json">
                                    <input type="hidden" name="access[${index}][existing_json_file]" value="${item.json_file_path ?? ''}">
                                </div>
                                <div class="col-md-2">
                                    <button type="button" class="mt-1 btn btn-soft-danger remove-access-row" style="margin-right:20px;" title="Remove">
                                      <i class="fa fa-times" aria-hidden="true"></i>
                                    </button>

                                ${item.json_file_path ? `
                                        <a href="${baseAssetUrl + item.json_file_path}" download="account_credentials.json" download class="mt-1 btn btn-soft-info" title="Download File">
                                            <i class="fa-solid fa-download"></i>
                                                </a>
                                    ` : ''}
                            </div>
                        </div>`;
                                $('#drive-access-container').append(rowHtml);
                            });
                        } else {
                            // Append one empty row if no access exists
                            $('#drive-access-container').html(`
                        <div class="drive-access-row">
                            <div class="form-group row align-items-end">
                                <div class="col-md-4">
                                    <label>Email</label>
                                    <input type="email" name="access[0][email]" class="form-control" placeholder="Email">
                                </div>
                                <div class="col-md-4">
                                    <label>Drive Folder ID</label>
                                    <input type="text" name="access[0][drive_folder_id]" class="form-control" placeholder="Drive Folder ID">
                                </div>
                                <div class="col-md-3">
                                    <label>JSON File</label>
                                    <input type="file" name="access[0][json_file]" class="form-control" accept=".json">
                                </div>
                                <div class="col-md-1">
                                    <button type="button" class="btn btn-soft-danger remove-access-row" style="display: none;" title="Remove">
                                      <i class="fa fa-times" aria-hidden="true"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    `);
                        }

                        $('#addProductModal').modal('show');
                    } else {
                        flasher.error('Failed to load product data.');
                    }
                },
                error: function() {
                    flasher.error('Failed to load product data.');
                }
            });
        }

        function deleteProduct(id) {
            Swal.fire({
                title: 'Are you sure To Delete?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!',
                cancelButtonText: 'No, cancel!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: '{{ route('product.delete') }}',
                        method: 'Post',
                        data: {
                            _token: '{{ csrf_token() }}',
                            id: id,
                        },
                        success: function(response) {
                            if (response.status) {
                                flasher.success('Product deleted successfully!');

                                setTimeout(function() {
                                    $('#flasher-message').fadeOut();
                                    window.location.reload();
                                }, 3000);
                            } else {
                                flasher.error('There was an issue deleting the product.');
                            }
                        },
                        error: function() {
                            flasher.error('There was an error with the request.');
                        }
                    });
                }
            });
        }

        document.addEventListener("DOMContentLoaded", function() {
            if (typeof CKEDITOR !== "undefined") {
                // Initialize CKEditors
                CKEDITOR.replace('main_desc');
                CKEDITOR.replace('sub_desc');

                document.querySelector('#productCreateForm').addEventListener('submit', function(event) {
                    // Set CKEditor content back into textarea before form submit
                    for (let instanceName in CKEDITOR.instances) {
                        CKEDITOR.instances[instanceName].updateElement();
                    }
                });
            }
        });


        // document.addEventListener("DOMContentLoaded", function () {
        //     if (typeof CKEDITOR !== "undefined") {
        //         CKEDITOR.replace('main_desc');

        //         document.querySelector('#productCreateForm').addEventListener('submit', function (event) {
        //             var editorContent = CKEDITOR.instances.rules.getData();

        //             if (editorContent === '') {
        //                 editorContent = 'No content provided';
        //             }
        //             document.querySelector('[name="main_desc"]').value = editorContent;
        //         });
        //     }
        //     if (typeof CKEDITOR !== "undefined") {
        //         CKEDITOR.replace('sub_desc');

        //         document.querySelector('#productCreateForm').addEventListener('submit', function (event) {
        //             var editorContent = CKEDITOR.instances.rules.getData();

        //             if (editorContent === '') {
        //                 editorContent = 'No content provided';
        //             }
        //             document.querySelector('[name="sub_desc"]').value = editorContent;
        //         });
        //     }
        // });
    </script>
@endsection('custom-scripts')