@include('Admin.Includes.header')
@php
    use Illuminate\Support\Facades\Auth;
    $logged_in_user = Auth::user();
@endphp

<div class="page-content">
    <div class="card shadow-sm mb-4">
        <div class="p-3 d-flex justify-content-between align-items-center flex-wrap">
            <div class="clearfix">
                <div class="pd-t-5 pd-b-5">
                    <h1 class="fs-4 pd-0 mg-0 tx-20 tx-dark">{{ __('Assembly Settings') }}</h1>
                </div>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb bg-transparent p-0 m-0 align-items-center">
                        <li class="breadcrumb-item">
                            <a href="{{ route('Admin.Dashboard') }}" class="link-primary text-decoration-none">
                                <i class="fa-solid fa-house me-1"></i> Dashboard
                            </a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="#" class="link-primary text-decoration-none">Categories</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">
                            Assembly Settings
                        </li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    @if (session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if ($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <div class="row">
        <div class="col-xxl-5">
            <!-- Basic Category Information Card -->
            <div class="card mb-4">
                <div class="card-header">
                    <h6 class="card-title mb-0">Create/Edit Assembly Setting</h6>
                </div>
                <div class="card-body">
                    <form autocomplete="off" method="POST"
                        action="{{ route('admin.assemble-disassemble-categories.store') }}"
                        enctype="multipart/form-data" id="categoryForm">
                        @csrf
                        <input type="hidden" name="category_id" id="category_id">
                        <div id="update_success_message"></div>
                        <div id="saveform_errList" role="alert"></div>

                        <div class="row">
                            <!-- Name -->
                            <div class="col-12">
                                <div class="mb-3">
                                    <label for="category_name" class="form-label">Category Name<span
                                            class="text-danger">*</span></label>
                                    <input type="text" id="category_name" name="name" required
                                        class="form-control" placeholder="Enter Category Name">
                                    <div class="invalid-feedback">Please enter a category name.</div>
                                </div>
                            </div>

                            <!-- Description -->
                            <div class="col-12">
                                <div class="mb-3">
                                    <label for="category_description" class="form-label">Description</label>
                                    <textarea id="category_description" name="description" class="form-control" rows="3"
                                        placeholder="Enter category description"></textarea>
                                </div>
                            </div>

                            <!-- Image -->
                            <div class="col-12">
                                <div class="mb-3">
                                    <label for="category_image" class="form-label">Image</label>
                                    <input type="file" id="category_image" name="image" class="form-control"
                                        accept="image/*" onchange="previewImage(this)">
                                    <div id="image_preview" class="mt-2" style="display: none;">
                                        <img id="preview_img" src="" alt="Preview"
                                            style="max-width: 200px; max-height: 150px; border-radius: 5px;">
                                    </div>
                                </div>
                            </div>

                            <!-- Assemble Price -->
                            <div class="col-4">
                                <div class="mb-3">
                                    <label for="assemble_price" class="form-label">Assemble Price<span
                                            class="text-danger">*</span></label>
                                    <input type="number" id="assemble_price" name="assemble_price" required
                                        class="form-control" step="0.01" min="0" placeholder="0.00">
                                </div>
                            </div>

                            <!-- Disassemble Price -->
                            <div class="col-4">
                                <div class="mb-3">
                                    <label for="disassemble_price" class="form-label">Disassemble Price<span
                                            class="text-danger">*</span></label>
                                    <input type="number" id="disassemble_price" name="disassemble_price" required
                                        class="form-control" step="0.01" min="0" placeholder="0.00">
                                </div>
                            </div>

                            <!-- Both Price -->
                            <div class="col-4">
                                <div class="mb-3">
                                    <label for="both_price" class="form-label">Both Price<span
                                            class="text-danger">*</span></label>
                                    <input type="number" id="both_price" name="both_price" required
                                        class="form-control" step="0.01" min="0" placeholder="0.00">
                                </div>
                            </div>

                            <!-- Assemble Time -->
                            <div class="col-4">
                                <div class="mb-3">
                                    <label for="assemble_time_minutes" class="form-label">Assemble Time
                                        (minutes)</label>
                                    <input type="number" id="assemble_time_minutes" name="assemble_time_minutes"
                                        class="form-control" min="1" placeholder="60">
                                </div>
                            </div>

                            <!-- Disassemble Time -->
                            <div class="col-4">
                                <div class="mb-3">
                                    <label for="disassemble_time_minutes" class="form-label">Disassemble Time
                                        (minutes)</label>
                                    <input type="number" id="disassemble_time_minutes"
                                        name="disassemble_time_minutes" class="form-control" min="1"
                                        placeholder="30">
                                </div>
                            </div>

                            <!-- Both Time -->
                            <div class="col-4">
                                <div class="mb-3">
                                    <label for="both_time_minutes" class="form-label">Both Time (minutes)</label>
                                    <input type="number" id="both_time_minutes" name="both_time_minutes"
                                        class="form-control" min="1" placeholder="90">
                                </div>
                            </div>

                            <!-- Status -->
                            <div class="col-6">
                                <div class="mb-3">
                                    <label for="category_status" class="form-label">Status</label>
                                    <select id="category_status" name="is_active" class="form-select">
                                        <option value="1">Active</option>
                                        <option value="0">Inactive</option>
                                    </select>
                                </div>
                            </div>

                            <!-- Sort Order -->
                            <div class="col-6">
                                <div class="mb-3">
                                    <label for="category_sort_order" class="form-label">Sort Order</label>
                                    <input type="number" id="category_sort_order" name="sort_order"
                                        class="form-control" value="0" min="0">
                                </div>
                            </div>
                        </div>

                        <div class="d-flex justify-content-end">
                            <button type="button" class="btn btn-light me-2" onclick="resetForm()">Reset</button>
                            <button type="submit" class="btn btn-success" id="submitBtn">Save Assembly Setting</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-xxl-7">
            <!-- Categories List Card -->
            <div class="card">
                <div class="card-header d-flex justify-content-between">
                    <h5 class="card-title mb-0">Assembly Settings Table</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="data_Table" class="table table-borderless">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Assemble Price</th>
                                    <th>Disassemble Price</th>
                                    <th>Both Price</th>
                                    <th>Status</th>
                                    <th>Sort Order</th>
                                    <th width="180px">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                            @forelse($categories as $category)
    <tr class="align-middle">
        <td>
            <div class="d-flex align-items-center">
                @if ($category->image)
                    <img src="{{ asset($category->image) }}"
                        alt="{{ $category->name }}" class="rounded me-2"
                        style="width: 30px; height: 30px; object-fit: cover;">
                @endif
                <div>
                    <div class="fw-medium">{{ $category->name }}</div>
                    @if ($category->description)
                        <small class="text-muted">{{ Str::limit($category->description, 50) }}</small>
                    @endif
                </div>
            </div>
        </td>
        <td>${{ number_format($category->assemble_price, 2) }}</td>
        <td>${{ number_format($category->disassemble_price, 2) }}</td>
        <td>${{ number_format($category->both_price, 2) }}</td>
        <td class="status-cell" data-category-id="{{ $category->id }}">
            @if ($category->is_active)
                <span class="badge bg-success-subtle text-success px-3 py-2">Active</span>
            @else
                <span class="badge bg-danger-subtle text-danger px-3 py-2">Inactive</span>
            @endif
        </td>
        <td>{{ $category->sort_order }}</td>
        <td>
            <div class="dropdown">
                <button class="btn btn-sm text-dark rounded shadow-sm" type="button"
                    data-bs-toggle="dropdown" aria-expanded="false"
                    style="background-color: #c2d6e7;">
                    &#8942;
                </button>
                <ul class="dropdown-menu">
                    <li>
                        <button class="dropdown-item"
                            onclick="editCategory({{ $category->id }})">
                            <i class="bi bi-pencil-square me-2"></i>Edit
                        </button>
                    </li>
                    <li>
                        <button class="dropdown-item"
                            onclick="updateStatus({{ $category->id }}, '{{ $category->is_active ? 0 : 1 }}', this)">
                            <i class="fa fa-{{ $category->is_active ? 'ban' : 'check' }} me-2"></i>{{ $category->is_active ? 'Inactive' : 'Active' }}
                        </button>
                    </li>
                    <li>
                        <button class="dropdown-item text-danger"
                            data-bs-toggle="modal"
                            data-bs-target="#deleteConfirmModal{{ $category->id }}">
                            <i class="bi bi-trash me-2"></i>Delete
                        </button>
                    </li>
                </ul>
            </div>
        </td>
    </tr>
@empty
    {{-- Don't use colspan when no data - instead use individual cells --}}
    <tr class="no-data-row">
        <td></td>
        <td></td>
        <td></td>
        <td class="text-center text-muted py-4">No data</td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
@endforelse
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th>Name</th>
                                    <th>Assemble Price</th>
                                    <th>Disassemble Price</th>
                                    <th>Both Price</th>
                                    <th>Status</th>
                                    <th>Sort Order</th>
                                    <th width="180px">Actions</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Delete Modals for each category --}}
@foreach ($categories as $category)
    @include('Admin.Components.delete-modal', [
        'id' => $category->id,
        'name' => $category->name,
        'route' => 'admin.assemble-disassemble-categories.destroy',
        'routeParam' => $category->id,
    ])
@endforeach

@include('Admin.Includes.footer')

<script>
    // Image preview
    function previewImage(input) {
        if (input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('preview_img').src = e.target.result;
                document.getElementById('image_preview').style.display = 'block';
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    // Reset form
    function resetForm() {
        document.getElementById('categoryForm').reset();
        document.getElementById('category_id').value = '';
        document.getElementById('image_preview').style.display = 'none';
        document.getElementById('submitBtn').textContent = 'Save Assembly Setting';
        loadNextCategorySortOrder();
    }

    // Load next sort order for categories
    function loadNextCategorySortOrder() {
        $.ajax({
            url: "{{ route('admin.assemble-disassemble-categories.getNextSortOrder') }}",
            type: "GET",
            success: function(response) {
                $('#category_sort_order').val(response.next_sort_order);
            },
            error: function() {
                $('#category_sort_order').val('1');
            }
        });
    }

    // Edit category
    function editCategory(id) {
        fetch(`/admin/assemble-disassemble-categories/edit_category?id=${id}`)
            .then(response => response.json())
            .then(data => {
                document.getElementById('category_id').value = data.id;
                document.getElementById('category_name').value = data.name;
                document.getElementById('category_description').value = data.description || '';
                document.getElementById('assemble_price').value = data.assemble_price;
                document.getElementById('disassemble_price').value = data.disassemble_price;
                document.getElementById('both_price').value = data.both_price;
                document.getElementById('assemble_time_minutes').value = data.assemble_time_minutes || '';
                document.getElementById('disassemble_time_minutes').value = data.disassemble_time_minutes || '';
                document.getElementById('both_time_minutes').value = data.both_time_minutes || '';
                document.getElementById('category_status').value = data.is_active ? '1' : '0';
                document.getElementById('category_sort_order').value = data.sort_order || 0;
                document.getElementById('submitBtn').textContent = 'Update Assembly Setting';

                // Show current image if exists
                if (data.image) {
                    document.getElementById('preview_img').src = `{{ asset('') }}${data.image}`;
                    document.getElementById('image_preview').style.display = 'block';
                }

                // Scroll to form
                document.getElementById('categoryForm').scrollIntoView({
                    behavior: 'smooth'
                });
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Error loading assembly setting data');
            });
    }

    // Update status function
    function updateStatus(categoryId, status, element) {
        const statusText = status === '1' ? 'Active' : 'Inactive';

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $.ajax({
            url: `/admin/assemble-disassemble-categories/update_category/${categoryId}`,
            type: 'POST',
            data: {
                is_active: status,
                _token: '{{ csrf_token() }}'
            },
            beforeSend: function() {
                $(element).prop('disabled', true);
            },
            success: function(response) {
                Swal.fire({
                    icon: 'success',
                    title: 'Status Updated',
                    text: 'Assembly setting status updated successfully',
                    timer: 1500,
                    showConfirmButton: false
                });

                const row = $(element).closest('tr');
                const statusCell = row.find('.status-cell');

                if (status === '1') {
                    statusCell.html(
                        '<span class="badge bg-success-subtle text-success px-3 py-2">Active</span>');
                } else {
                    statusCell.html(
                        '<span class="badge bg-danger-subtle text-danger px-3 py-2">Inactive</span>');
                }
                setTimeout(function() {
                    window.location.reload();
                }, 1000); 
            },
            error: function(xhr) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Failed to update assembly setting status'
                });
            },
            complete: function() {
                $(element).prop('disabled', false);
            }
        });
    }

    // Initialize DataTable properly
    $(document).ready(function() {
    // Load next sort order on page load
    loadNextCategorySortOrder();

    // Destroy existing DataTable if it exists
    if ($.fn.DataTable.isDataTable('#data_Table')) {
        $('#data_Table').DataTable().destroy();
    }

    // Count actual data rows (not empty message row)
    const dataRows = $('#data_Table tbody tr').filter(function() {
        return $(this).find('td[colspan]').length === 0;
    });

    // Only initialize DataTable if we have actual data
    if (dataRows.length > 0) {
        try {
            $('#data_Table').DataTable({
                responsive: true,
                autoWidth: false,
                searching: true,
                paging: true,
                info: true,
                columnDefs: [
                    { 
                        orderable: false, 
                        targets: [-1] // Disable sorting on Actions column only
                    }
                ],
                language: {
                    searchPlaceholder: 'Search...',
                    sSearch: '',
                    emptyTable: 'No assembly settings found',
                    zeroRecords: 'No matching records found'
                },
                order: [[5, "asc"]], // Sort by Sort Order column
                pageLength: 10
            });
        } catch (error) {
            console.error('DataTable initialization error:', error);
        }
    }
});
</script>