@extends('layouts.main')

@push('styles')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
@endpush

@section('content')
<div class="content-wrapper">
    <div class="content-header">
        <div class="container-fluid p-0">
            <h1 class="h3 mb-3">Cement Purchases Management</h1>
        </div>
    </div>

   <!-- Create Purchase Modal -->
    <div class="modal fade" id="createPurchaseModal" tabindex="-1" aria-labelledby="createPurchaseModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-md">
            <form action="{{ route('cements.store') }}" method="POST">
                @csrf
                <div class="modal-content">
                    <div class="modal-header text-white">
                        <h5 class="modal-title" id="createPurchaseModalLabel">
                            <i class="fa fa-plus me-1"></i> Add Cement Purchase
                        </h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="supplier_id" class="form-label">Supplier</label>
                            <select name="supplier_id" id="supplier_id" class="form-select" required>
                                <option value="">-- Select Supplier --</option>
                                @foreach($suppliers as $supplier)
                                    <option value="{{ $supplier->id }}">{{ $supplier->name }} ({{ $supplier->cement_type }})</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="mb-3">
                            <label for="cement_type" class="form-label">Cement Type</label>
                            <input type="text" class="form-control" id="cement_type" name="cement_type" readonly>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="units" class="form-label">Units</label>
                                <input type="number" class="form-control" name="units" id="units" required min="1">
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="cost_per_unit" class="form-label">Cost per Unit</label>
                                <input type="number" step="0.01" class="form-control" name="cost_per_unit" id="cost_per_unit" required>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="total_cost" class="form-label">Total Cement Cost</label>
                            <input type="text" class="form-control" id="total_cost" name="total_cost" readonly>
                        </div>

                        <div class="mb-3">
                            <label for="purchases_date" class="form-label">Purchase Date & Time</label>
                            <input type="datetime-local" class="form-control" name="purchases_date" id="purchases_date" required>
                        </div>

                        <div class="mb-3">
                            <label for="payment_status" class="form-label">Payment Status</label>
                            <select name="payment_status" id="payment_status" class="form-select" required>
                                <option value="">-- Select Status --</option>
                                <option value="Paid">Paid</option>
                                <option value="Not Paid">Not Paid</option>
                            </select>
                        </div>

                        <div class="mb-3 d-none" id="remarks_group">
                            <label for="remarks" class="form-label">Reason / Remarks</label>
                            <textarea name="remarks" id="remarks" class="form-control" rows="2"></textarea>
                        </div>
                    </div>

                    <div class="modal-footer bg-light">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">
                            <i class="fa fa-save me-1"></i> Save Purchase
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

   <!-- Edit Purchase Modal -->
    <div class="modal fade" id="editPurchaseModal" tabindex="-1" aria-labelledby="editPurchaseModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-md">
            <form method="POST" id="editPurchaseForm">
                @csrf
                @method('PUT')
                <div class="modal-content">
                    <div class="modal-header text-white">
                        <h5 class="modal-title" id="editPurchaseModalLabel">
                            <i class="fa fa-edit me-1"></i> Edit Cement Purchase
                        </h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <div class="modal-body">
                        <input type="hidden" name="purchase_id" id="edit_purchase_id">

                        <div class="mb-3">
                            <label for="edit_supplier_id" class="form-label">Supplier</label>
                            <select name="supplier_id" id="edit_supplier_id" class="form-select" required>
                                <option value="">-- Select Supplier --</option>
                                @foreach($suppliers as $supplier)
                                    <option value="{{ $supplier->id }}" data-cement_type="{{ $supplier->cement_type }}">
                                        {{ $supplier->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="mb-3">
                            <label for="edit_cement_type" class="form-label">Cement Type</label>
                            <input type="text" class="form-control" id="edit_cement_type" name="cement_type" readonly>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="edit_units" class="form-label">Units</label>
                                <input type="number" class="form-control" name="units" id="edit_units" required min="1">
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="edit_cost_per_unit" class="form-label">Cost per Unit</label>
                                <input type="number" step="0.01" class="form-control" name="cost_per_unit" id="edit_cost_per_unit" required>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="edit_total_cost" class="form-label">Total Cement Cost</label>
                            <input type="text" class="form-control" id="edit_total_cost" readonly>
                        </div>

                        {{-- <div class="mb-3">
                            <label for="edit_purchases_date" class="form-label">Purchase Date & Time</label>
                            <input type="datetime-local" class="form-control" name="purchases_date" id="edit_purchases_date" required>
                        </div> --}}

                        <div class="mb-3">
                            <label for="edit_payment_status" class="form-label">Payment Status</label>
                            <select name="payment_status" id="edit_payment_status" class="form-select" required>
                                <option value="">-- Select Status --</option>
                                <option value="Paid">Paid</option>
                                <option value="Not Paid">Not Paid</option>
                            </select>
                        </div>

                        <div class="mb-3 d-none" id="edit_remarks_group">
                            <label for="edit_remarks" class="form-label">Reason / Remarks</label>
                            <textarea name="remarks" id="edit_remarks" class="form-control" rows="2"></textarea>
                        </div>
                    </div>

                    <div class="modal-footer bg-light">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-success">
                            <i class="fa fa-save me-1"></i> Update Purchase
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Delete Purchase Modal -->
    <div class="modal fade" id="deletePurchaseModal" tabindex="-1" aria-labelledby="deletePurchaseModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <form method="POST" id="deletePurchaseForm">
                @csrf
                @method('DELETE')
                <div class="modal-content">
                    <div class="modal-header text-white">
                        <h5 class="modal-title" id="deletePurchaseModalLabel">
                            <i class="fa fa-exclamation-triangle me-1"></i> Confirm Deletion
                        </h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p>Are you sure you want to delete this cement purchase? This action cannot be undone.</p>
                    </div>
                    <div class="modal-footer bg-light">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-danger">
                            <i class="fa fa-trash me-1"></i> Delete
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="container-fluid">
        <!-- Dashboard Summary Start -->
        <div class="row mb-4">
            <div class="col-md-4">
                <div class="card border-left-primary shadow-sm">
                    <div class="card-body">
                        <h6 class="text-muted">Total Purchases</h6>
                        <h4 class="mb-0">Tsh {{ number_format($totalPurchases, 2) }}</h4>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card border-left-success shadow-sm">
                    <div class="card-body">
                        <h6 class="text-muted">Total Paid</h6>
                        <h4 class="mb-0">Tsh {{ number_format($totalPaid, 2) }}</h4>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card border-left-danger shadow-sm">
                    <div class="card-body">
                        <h6 class="text-muted">Total Not Paid</h6>
                        <h4 class="mb-0">Tsh {{ number_format($totalUnpaid, 2) }}</h4>
                    </div>
                </div>
            </div>
        </div>
        <!-- Dashboard Summary End -->

        <!-- Purchases List Table -->
        <div class="row">
            <div class="col-md-12 col-xl-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">Purchases List</h5>
                        <a href="#" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#createPurchaseModal">
                            <i class="fa fa-plus me-1"></i> Create Purchase
                        </a>
                    </div>
                    <div class="card-body">
                        <table class="yajra-datatable table table-striped" style="width:100%" id="purchases-table">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Supplier</th>
                                    <th>Cement Type</th>
                                    <th>Units</th>
                                    <th>Cost Per Unit</th>
                                    <th>Total Cost</th>
                                    <th>Purchase Date</th>
                                    <th>Payment Status</th>
                                    <th>Record Created</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection

@push('scripts')
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

<script>
    $(function () {
        $('#purchases-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: '{{ route('cements.purchases') }}',
            columns: [
                { data: 'id', name: 'id' },
                { data: 'supplier.name', name: 'supplier.name' },
                { data: 'cement_type', name: 'cement_type' },
                { data: 'units', name: 'units' },
                { data: 'cost_per_unit', name: 'cost_per_unit' },
                { data: 'total_cost', name: 'total_cost' },
                { data: 'purchases_date', name: 'purchases_date' },
                { data: 'payment_status', name: 'payment_status' },
                { data: 'record_created', name: 'record_created' },
                { data: 'action', name: 'action', orderable: false, searchable: false }
            ]
        });
    });

    const supplierData = @json($suppliers);

    $('#supplier_id').on('change', function () {
        const selectedId = $(this).val();
        const selectedSupplier = supplierData.find(s => s.id == selectedId);
        $('#cement_type').val(selectedSupplier ? selectedSupplier.cement_type : '');
    });

    function formatNumber(number) {
        return new Intl.NumberFormat('en-US', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        }).format(number);
    }

    function calculateTotalCost() {
        const units = parseFloat(document.getElementById('units').value) || 0;
        const costPerUnit = parseFloat(document.getElementById('cost_per_unit').value) || 0;
        const total = units * costPerUnit;
        document.getElementById('total_cost').value = formatNumber(total);
    }

    document.getElementById('units').addEventListener('input', calculateTotalCost);
    document.getElementById('cost_per_unit').addEventListener('input', calculateTotalCost);

    $('#payment_status').on('change', function () {
        if ($(this).val() === 'Not Paid') {
            $('#remarks_group').removeClass('d-none');
        } else {
            $('#remarks_group').addClass('d-none');
            $('#remarks').val('');
        }
    });

    $(document).on('click', '.editPurchaseBtn', function () {
        const id = $(this).data('id');
        const supplierId = $(this).data('supplier_id');
        const cementType = $(this).data('cement_type');
        const units = $(this).data('units');
        const costPerUnit = $(this).data('cost_per_unit');
        const date = $(this).data('purchases_date');
        const paymentStatus = $(this).data('payment_status');
        const remarks = $(this).data('remarks');

        $('#editPurchaseForm').attr('action', `/cements/${id}`);
        $('#edit_purchase_id').val(id);
        $('#edit_supplier_id').val(supplierId).trigger('change');
        $('#edit_cement_type').val(cementType);
        $('#edit_cement_type').val($(this).data('cement_type'));
        $('#edit_units').val(units);
        $('#edit_cost_per_unit').val(costPerUnit);
        $('#edit_total_cost').val((units * costPerUnit).toLocaleString('en-US', { minimumFractionDigits: 2 }));
        $('#edit_purchases_date').val(date);
        $('#edit_payment_status').val(paymentStatus);

        if (paymentStatus === 'Not Paid') {
            $('#edit_remarks_group').removeClass('d-none');
            $('#edit_remarks').val(remarks);
        } else {
            $('#edit_remarks_group').addClass('d-none');
            $('#edit_remarks').val('');
        }

        $('#editPurchaseModal').modal('show');
    });

    $('#edit_supplier_id').on('change', function () {
        const type = $(this).find(':selected').data('cement_type');
        $('#edit_cement_type').val(type);
    });

    $('#edit_units, #edit_cost_per_unit').on('input', function () {
        const units = parseFloat($('#edit_units').val()) || 0;
        const cost = parseFloat($('#edit_cost_per_unit').val()) || 0;
        $('#edit_total_cost').val((units * cost).toLocaleString('en-US', { minimumFractionDigits: 2 }));
    });

    $('#edit_payment_status').on('change', function () {
        if ($(this).val() === 'Not Paid') {
            $('#edit_remarks_group').removeClass('d-none');
            $('#edit_remarks').attr('required', true);
        } else {
            $('#edit_remarks_group').addClass('d-none');
            $('#edit_remarks').removeAttr('required').val('');
        }
    });

    $(document).on('click', '.deletePurchaseBtn', function () {
        const purchaseId = $(this).data('id');
        $('#deletePurchaseForm').attr('action', `/cements/${purchaseId}`);
    });
</script>
@endpush