@extends('Admin.layout')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<!-- SweetAlert2 CSS added for Toasts -->

<style>
.toolbar-card {
    border: none;
    border-radius: 14px;
    box-shadow: 0 2px 14px rgba(30, 41, 59, 0.06);
}

.toolbar-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.search-cluster {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
    flex: 1 1 auto;
}

.search-field {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 50px;
    min-width: 150px;
    height: 42px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid #e5e9f0;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.search-field i {
    flex: 0 0 auto;
    font-size: 15px;
    line-height: 1;
    color: #94a3b8;
    pointer-events: none;
}

.search-field input {
    flex: 1 1 auto;
    min-width: 0;
    height: 50px !important;
    border: none;
    background: transparent;
    padding: 0;
    font-size: 0.875rem;
    color: #1e293b;
}

.search-field input:focus {
    outline: none;
    box-shadow: none;
}

.search-field:focus-within {
    background: #fff;
    border-color: #696cff;
    box-shadow: 0 0 0 3px rgba(105, 108, 255, 0.12);
}

.btn-search {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 10px;
    border: none;
    background: #696cff !important;
    color: #fff !important;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background 0.15s ease, transform 0.1s ease;
}

.btn-search:hover {
    background: #5f61e6;
    color: #fff;
    transform: translateY(-1px);
}

.toolbar-divider {
    width: 1px;
    align-self: stretch;
    background: #eceef3;
    margin: 0 0.25rem;
}

.btn-add-patient {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 10px;
    background: #22c55e !important;
    color: #fff !important;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(34, 197, 94, 0.25);
    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.btn-add-patient:hover {
    background: #1eab52;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(34, 197, 94, 0.3);
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
    .toolbar-wrap {
        flex-direction: column;
        align-items: stretch;
    }

    .search-cluster {
        flex-direction: column;
        width: 100%;
    }

    .search-field {
        width: 100%;
    }

    .btn-search,
    .btn-add-patient {
        width: 100%;
        justify-content: center;
    }

    .toolbar-divider {
        display: none;
    }
}

/* ---------- Tablet ---------- */
@media (min-width: 768px) and (max-width: 991px) {
    .search-field {
        flex: 1 1 45%;
    }
}
</style>

@section('content')

<div class="row align-items-center justify-content-between mb-4">
    <div class="col-auto">
        <h5 class="fw-bold mb-0">Medicines</h5>
    </div>
</div>

{{-- ============ Toolbar Card: Search + Add Medicine ============ --}}
<div class="card toolbar-card mb-4">
    <div class="card-body">
        <div class="toolbar-wrap">
        <div class="search-cluster">
            <div class="search-field">
                <i class="ti tabler-user"></i>
                <input type="text" id="nameSearch" placeholder="Medicine Name">
            </div>

            <button class="btn btn-secondary" id="resetBtn" type="button">
                <span>Reset</span>
            </button>
        </div>
            <div class="toolbar-divider"></div>

            <button class="btn btn-label-secondary">Export</button>

            <div class="toolbar-divider"></div>

            <a href="{{ route('add_medicine') }}" class="btn btn-add-patient">
                <i class="ti tabler-box"></i>
                <span>Add Medicine</span>
            </a>
        </div>
    </div>
</div>

<div class="card p-0">
    <div class="row mb-3 align-items-center p-3 g-2">
        <div class="col-auto">
            <select id="pageLength" class="form-select">
                <option value="10">10</option>
                <option value="25">25</option>
                <option value="50">50</option>
                <option value="100">100</option>
                <option value="All">All</option>
            </select>
        </div>
    </div>

    <div class="table-responsive pt-0 pb-2">
        <table class="table" id="productsTable">
            <thead>
                <tr>
                    <th>S.No</th>
                    <th>Medicine Name</th>
                    <th>Category</th>
                    <th>Stock</th>
                    <th>Batch</th>
                    <th>Purchase Price</th>
                    <th>Selling Price</th>
                    <th>Status</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

{{-- ==================== MODALS ==================== --}}

{{-- Stock Update Modal --}}
<div class="modal fade" id="stockUpdateModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Update Stock</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="stockUpdateForm" method="POST" action="{{ route('product.updateStock') }}">
                @csrf
                <div class="modal-body">
                    <input type="hidden" name="product_id" id="stockProductId" value="{{ old('product_id') }}">
                    <input type="hidden" name="product_name" id="hiddenProductName"
                        value="{{ old('product_name') }}">

                    <input type="hidden" name="current_stock" id="hiddenCurrentStock"
                        value="{{ old('current_stock') }}">
                    <div class="mb-3">
                        <label class="form-label">Product Name</label>
                        <input type="text" id="stockProductName" class="form-control bg-light"
                            value="{{ old('product_name') }}" readonly>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Current Stock</label>
                        <input type="text" id="stockCurrentStock" class="form-control bg-light"
                            value="{{ old('current_stock') }}" readonly>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Update Type</label>
                        <select class="form-select" id="stockType" name="type">
                            <option value="add">Add Stock</option>
                            <option value="remove">Remove Stock</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Quantity</label>
                        <!-- <input type="number" class="form-control" placeholder="Enter quantity"> -->
                        <input type="number" name="quantity" id="stockQuantity"
                            class="form-control @error('quantity') is-invalid @enderror" placeholder="Enter quantity"
                            value="{{ old('quantity') }}">
                        @error('quantity')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Batch Number *</label>
                        <input type="text" name="batch_number"
                            class="form-control @error('batch_number') is-invalid @enderror"
                            value="{{ old('batch_number') }}">
                        @error('batch_number')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3" id="expiryDateDiv">
                        <label class="form-label">Expiry Date *</label>
                        <input type="date" name="expiry_date"
                            class="form-control @error('expiry_date') is-invalid @enderror"
                            value="{{ old('expiry_date') }}">
                        @error('expiry_date')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Remarks</label>
                        <!-- <textarea class="form-control" rows="3" placeholder="Reason for stock update"></textarea> -->
                        <textarea name="remarks" id="stockRemarks"
                            class="form-control @error('remarks') is-invalid @enderror"
                            placeholder="Reason for stock update">{{ old('remarks') }}</textarea>
                        @error('remarks')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" id="updateStockText" class="btn btn-primary">Update Stock</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Delete Modal --}}
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">Delete Product</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                Are you sure you want to delete this product?
            </div>

            <div class="modal-footer">



                <form id="deleteForm" method="POST">
                    @csrf
                <button type="button"
                        class="btn btn-label-secondary"
                        data-bs-dismiss="modal">
                    Cancel
                </button>
                    <button type="submit"
                        class="btn btn-danger p-3 ms-2 fw-semibold"
                        id="deleteBtn">
                        <span id="deleteText">Yes, Sure</span>
                    </button>
                </form>

            </div>

        </div>
    </div>
</div>


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script>
$('#submit_btn').on('click', function () {

    $(this).prop('disabled', true);

    $('#submit_btn_text').html(`
        <span class="spinner-border spinner-border-sm me-1"></span>
        Processing...
    `);

    $('#deleteForm').submit();

});
</script>
<script>
$(document).ready(function() {

    const data = @json($products);

    const table = $('#productsTable').DataTable({
        data: data,
        pageLength: 10,
        lengthChange: false,
        searching: true,
        ordering: true,
        info: true,
        columnDefs: [
        {
            targets: '_all',
            className: 'text-nowrap'
        }
    ],
        columns: [{
                data: null,
                render: function(data, type, row, meta) {
                    return meta.row + 1;
                }
            },
            {
                data: 'product_name'
            },
            {
                data: 'category'
            },
            {
                data: 'stock',
                render: function(data) {
                    return `<span class="badge bg-label-info">${data}</span>`;
                }
            },
            {
                data: null,
                orderable: false,
                searchable: false,
                render: function(data, type, row) {
                    return `
                        <button
                            type="button"
                            class="btn btn-sm btn-label-warning view-batch-btn"
                            data-id="${row.id}">
                            View Batch
                        </button>
                    `;
                }
            },
            {
                data: 'purchase_price',
                render: function(data) {
                    return `₹${data}`;
                }
            },
            {
                data: 'selling_price',
                render: function(data) {
                    return `₹${data}`;
                }
            },

            {
                data: 'status',
                render: function(data) {
                    if (data === 'Active') {
                        return `<span class="badge bg-label-success">Active</span>`;
                    }
                    return `<span class="badge bg-label-danger">Inactive</span>`;
                }
            },
            {
                data: null,
                orderable: false,
                searchable: false,
                render: function(data, type, row) {
                    return `
            <div class="dropdown">
                <button class="btn btn-sm btn-icon" data-bs-toggle="dropdown">
                    <i class="ti tabler-dots-vertical"></i>
                </button>

                <ul class="dropdown-menu">

                    <li>
                        <a class="dropdown-item" href="{{ route('edit_medicine', '') }}/${row.id}">
                            <i class="ti tabler-edit me-2"></i> Edit
                        </a>
                    </li>

                    <li>
                        <button
                            type="button"
                            class="dropdown-item stock-btn"
                            data-bs-toggle="modal"
                            data-bs-target="#stockUpdateModal"
                            data-id="${row.id}"
                            data-name="${row.product_name}"
                            data-stock="${row.stock}">
                            <i class="ti tabler-package me-2"></i> Update Stock
                        </button>
                    </li>

                    <li>
                        <button
                            type="button"
                            class="dropdown-item delete-btn"
                            data-id="${row.id}"
                            data-bs-toggle="modal"
                            data-bs-target="#deleteModal">
                            <i class="ti tabler-trash me-2"></i> Delete
                        </button>
                    </li>

                </ul>
            </div>
        `;
                }
            }
        ]
    });

    // Page length
    $('#pageLength').on('change', function() {
        let length = $(this).val();
        if (length === 'All') {
            table.page.len(-1).draw();
        } else {
            table.page.len(parseInt(length)).draw();
        }
    });

// Medicine Name Search
$('#nameSearch').on('keyup', function () {
    table.column(1).search(this.value).draw();
});

// Reset
$('#resetBtn').on('click', function () {

    $('#nameSearch').val('');

    table.search('').columns().search('').draw();

});

    // Stock modal — fill product name and stock
    $('#productsTable').on('click', '.stock-btn', function () {

        $('#stockProductId').val($(this).data('id'));
        $('#stockProductName').val($(this).data('name'));
        $('#stockCurrentStock').val($(this).data('stock'));
        $('#hiddenProductName').val($(this).data('name'));
        $('#hiddenCurrentStock').val($(this).data('stock'));

    });

    // Delete modal — set form action
    $('#productsTable').on('click', '.delete-btn', function () {

        let id = $(this).data('id');

        $('#deleteForm').attr(
            'action',
            `{{ url('admin/product') }}/${id}/delete`
        );

    });

    $('#productsTable').on('click', '.view-batch-btn', function() {
        let id = $(this).data('id');
        window.location.href = "{{ url('admin/view_batch') }}/" + id;
    });


    $('#stockUpdateForm').on('submit', function () {

        let btn = $('#updateStockText');

        btn.prop('disabled', true);
        btn.html(`
            <span class="spinner-border spinner-border-sm me-1"></span>
            Processing...
        `);

    });


    function toggleStockFields() {

    let type = $('#stockType').val();

    if (type === 'add') {
        $('#expiryDateDiv').show();
        $('#expiryDate').prop('required', true);
    } else {
        $('#expiryDateDiv').hide();
        $('#expiryDate').prop('required', false).val('');
    }
}

toggleStockFields();

$('#stockType').on('change', function () {
    toggleStockFields();
});
});
</script>
@if ($errors->any() || session('error'))
<script>
$(function () {

    let modal = new bootstrap.Modal(document.getElementById('stockUpdateModal'));

    modal.show();

    let btn = $('#updateStockText');

    btn.prop('disabled', false);
    btn.html('Update Stock');

});
</script>
@endif
@endsection