@extends('pharmacy.layout.app')

@section('content')
<div class="content-wrapper">
    <section class="content py-2">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-10">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">
                                <i class="fas fa-plus-circle"></i> Create Sale
                            </h3>
                        </div>
                        <form action="" method="POST">
                            @csrf
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <div class="d-flex justify-content-between">
                                                <label for="patient_id">Customer Name</label>
                                                <button type="button" data-target="#modal-add" data-toggle="modal" class="btn btn-sm btn-info mb-1">
                                                    <i class="fas fa-plus-circle"></i> Add Customer
                                                </button>
                                            </div>
                                            <select id="customer_id" name="customer_id" class="form-control select2"
                                                    data-placeholder="Select Select Customer">
                                                <option value="">Select</option>
                                                @foreach($customers as $customer)
                                                    <option
                                                        value="{{$customer->id}}" {{old('customer_id') == $customer->id?'selected':''}}>{{$customer->name}}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('customer_id')
                                            <span class="text-danger text-sm pull-right">{{$errors->first('customer_id')}}</span>
                                            @enderror
                                        </div>
                                        
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="date">Date</label>
                                            <input type="date" id="date" name="date" class="form-control"
                                                   value="{{old('date')}}"
                                                   placeholder="Enter Date">
                                            @error('date')
                                            <span class="text-danger text-sm pull-right">{{$errors->first('date')}}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <label>Select Product</label>
                                        <select id="product_id" name="product_id" class="form-control select2">
                                            <option value="">Select & Search</option>
                                            @foreach($products as $product)
                                                <option value="{{ $product->id }}"
                                                        data-rate="{{ $product->sale_rate }}"
                                                        {{ old('product_id') == $product->id ? 'selected' : '' }}>
                                                    {{ $product->name }} - {{ $product->pack_size }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <hr>
                                <table class="table table-bordered" id="itemsTable">
                                    <thead>
                                        <tr>
                                            <th>Product-Pack Size</th>
                                            <th>Qty</th>
                                            <th>Rate</th>
                                            <th>Subtotal</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                                <div class="row mt-3">
                                    <div class="col-md-3">
                                        <label>Total</label>
                                        <input type="number" id="grand_total" name="total" class="form-control"
                                               readonly>
                                    </div>

                                    <div class="col-md-3">
                                        <label>Paid</label>
                                        <input type="number" id="paid" name="paid" class="form-control"
                                               value="0">
                                    </div>

                                    <div class="col-md-3">
                                        <label>Remaining</label>
                                        <input type="number" id="remaining" class="form-control"
                                               readonly>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="mop">MOP</label>
                                            <input type="text" id="mop" name="mop" class="form-control"
                                                   value="{{old('mop')}}"
                                                   placeholder="Enter MOP">
                                            @error('mop')
                                            <span class="text-danger text-sm pull-right">{{$errors->first('mop')}}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer text-right">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save"></i> Save Record
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div id="modal-add" class="modal fade" role="dialog">
                <div class="modal-dialog modal-md">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">Add Customer</h4>
                            <button type="button" class="close"
                                data-dismiss="modal">&times;</button>
                        </div>
                        <form action="{{route('pharmacy.customer.store.custom')}}" method="post" enctype="multipart/form-data">
                            @csrf
                            <div class="modal-body">
                                <div class="row">
                                    <input type="hidden" value="modal" name="modal">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="region_id">Region id</label>
                                            <select id="region_id" name="region_id" class="form-control"
                                                    data-placeholder="Select Region id">
                                                <option value="">Select</option>
                                                @foreach($regions as $region)
                                                    <option
                                                        value="{{$region->id}}" {{old('region_id') == $region->id?'selected':''}}>{{$region->name}}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('region_id')
                                            <span class="text-danger text-sm pull-right">{{$errors->first('region_id')}}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="territory_id">Select Territory</label>
                                            <select id="territory_id" name="territory_id" class="form-control"
                                                    data-placeholder="Select Select Territory">
                                                <option value="">Select</option>
                                                @foreach($territories as $territory)
                                                    <option
                                                        value="{{$territory->id}}" {{old('territory_id') == $territory->id?'selected':''}}>{{$territory->name}}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('territory_id')
                                            <span class="text-danger text-sm pull-right">{{$errors->first('territory_id')}}</span>
                                            @enderror
                                        </div>
                                        
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="name">Name</label>
                                            <input type="text" id="name" name="name" class="form-control"
                                                value="{{old('name')}}"
                                                placeholder="Enter ">
                                            @error('name')
                                            <span class="text-danger text-sm pull-right">{{$errors->first('name')}}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="contact">Contact</label>
                                            <input type="number" id="contact" name="contact" class="form-control"
                                                value="{{old('contact')}}"
                                                placeholder="Enter ">
                                            @error('contact')
                                            <span class="text-danger text-sm pull-right">{{$errors->first('contact')}}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                          <label for="is_whole_sale">Is Whole Sale ?</label><br>
                                          <input type="hidden" name="is_whole_sale" value="0">
                                          <input type="checkbox" id="is_whole_sale" name="is_whole_sale"
                                                 class="bt-switch"
                                                 data-size="small" data-on-text="Yes" data-off-text="No"
                                                 value="1"
                                                 {{old('is_whole_sale')==1?'checked="checked"':''}}>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="submit" class="btn btn-sm btn-info">Save Record</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
@endsection
@push('script')
<script>
    $(document).ready(function () {
    $('.select2').select2();
    let row = 0;

    $('#product_id').on('change', function () {

        let productId = $(this).val();
        if (!productId) return;

        let selectedOption = $('#product_id option:selected');
        let itemName = selectedOption.text().trim();

        // ✅ Auto Fill Purchase Rate
        let rate = parseFloat(selectedOption.data('rate')) || 0;

        // Prevent duplicate
        if ($(`#itemsTable input[value="${productId}"]`).length) {
            alert('Product already added');
            $('#product_id').val('').trigger('change');
            return;
        }

        row++;

        let html = `
            <tr>
                <td>
                    <input type="hidden" name="products[${row}][product_id]" value="${productId}">
                    <input type="text" class="form-control" value="${itemName}" readonly>
                </td>

                <td><input type="number" name="products[${row}][quantity]" class="form-control qty" value="1" min="1" step="0.01"></td>

                <td><input type="number" name="products[${row}][rate]" class="form-control rate" value="${rate}" step="0.01"></td>

                <td><input type="number" name="products[${row}][subtotal]" class="form-control subtotal" readonly step="0.01"></td>

                <td>
                    <button type="button" class="btn btn-danger btn-sm remove w-100">Remove</button>
                </td>
            </tr>
        `;

        $('#itemsTable tbody').append(html);
        calculate();

        $('#product_id').val('').trigger('change');
    });

    $(document).on('input', '.qty, .rate, #paid', calculate);

    $(document).on('click', '.remove', function () {
        $(this).closest('tr').remove();
        calculate();
    });

    function calculate() {
        let total = 0;
        $('#itemsTable tbody tr').each(function () {
            let qty = parseFloat($(this).find('.qty').val()) || 0;
            let rate = parseFloat($(this).find('.rate').val()) || 0;
            let subtotal = qty * rate;

            $(this).find('.subtotal').val(subtotal.toFixed(2));
            total += subtotal;
        });

        $('#grand_total').val(total.toFixed(2));

        let paid = parseFloat($('#paid').val()) || 0;
        $('#remaining').val((total - paid).toFixed(2));
    }
});
</script>
@endpush