@extends('admin.admin_dashboard')
@section('admin')

<div class="page-content">
    <div class="d-flex flex-row align-items-center justify-content-between mb-4 p-3 bg-light rounded shadow-sm">
        <div class="d-flex align-items-center">
            <i class="bx bx-coffee fs-3" style="color: #6f4f1f;"></i>
            <h4 class="mb-0">Add Coffee Sale</h4>
        </div>
    </div>

    <div class="card">
        <div class="card-body p-4">
            @if(session('success'))
                <div class="alert alert-success">{{ session('success') }}</div>
            @elseif(session('error'))
                <div class="alert alert-danger">{{ session('error') }}</div>
            @endif

            <form action="{{ route('add.coffee.sale.store') }}" method="POST">
                @csrf
     <!-- Buyer Select Dropdown + Add Button -->
<div class="row mb-3">
    <label class="col-sm-3 col-form-label">Buyer</label>
    <div class="col-sm-9">
        <div class="input-group">
            <select class="form-select select2" id="single-select-field" name="buyer_id" required>
                <option value="">Select a Buyer</option>
                @foreach($buyers as $buyer)
                    <option value="{{ $buyer->id }}">{{ $buyer->name }}</option>
                @endforeach
            </select>
            <button type="button" class="btn btn-primary d-flex align-items-center" data-bs-toggle="modal" data-bs-target="#addBuyerModal" id="add-buyer-btn">
                <i class="bx bx-plus fs-5"></i>
            </button>
        </div>
    </div>
</div>
            

                <div class="row mb-3">
                    <label class="col-sm-3 col-form-label">Gross Weight</label>
                    <div class="col-sm-9">
                        <input type="text" name="gross_weight" class="form-control" required>
                    </div>
                </div>

                <div class="row mb-3">
                    <label class="col-sm-3 col-form-label">Samples</label>
                    <div class="col-sm-9">
                        <input type="text" name="samples" class="form-control">
                    </div>
                </div>

                <div class="row mb-3">
                    <label class="col-sm-3 col-form-label">Dry Loss/Gain</label>
                    <div class="col-sm-9">
                        <input type="text" name="dry_loss_gain" class="form-control">
                    </div>
                </div>

                <div class="row mb-3">
                    <label class="col-sm-3 col-form-label">MC Deduction</label>
                    <div class="col-sm-9">
                        <input type="text" name="mc_deduction" class="form-control">
                    </div>
                </div>

                <div class="row mb-3">
                    <label class="col-sm-3 col-form-label">MC Percent</label>
                    <div class="col-sm-9">
                        <input type="text" name="mc_percent" class="form-control">
                    </div>
                </div>

                <div class="row mb-3">
                    <label class="col-sm-3 col-form-label">Selling Price</label>
                    <div class="col-sm-9">
                        <input type="number" step="0.01" name="selling_price" class="form-control" required>
                    </div>
                </div>

                <div class="row mb-3">
                    <label class="col-sm-3 col-form-label">Date Sold</label>
                    <div class="col-sm-9">
                        <input type="date" name="date_sold" class="form-control datepicker" required>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-9 offset-sm-3">
                        <button type="submit" class="btn" style="background-color: #6f4f1f; color: white; padding: 10px 30px;">
                            Add Sale
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Add Buyer Modal -->
<div class="modal fade" id="addBuyerModal" tabindex="-1" aria-labelledby="addBuyerModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addBuyerModalLabel">Add New Buyer</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="addBuyerForm">
                    @csrf
                    <div class="mb-3">
                        <label for="buyer_name" class="form-label">Buyer Name</label>
                        <input type="text" class="form-control" id="buyer_name" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label for="company_name" class="form-label">Company Name</label>
                        <input type="text" class="form-control" id="company_name" name="company_name">
                    </div>
                    <div class="mb-3">
                        <label for="contact_number" class="form-label">Contact Number</label>
                        <input type="text" class="form-control" id="contact_number" name="contact_number" required>
                    </div>
                    <button type="submit" class="btn btn-primary w-100">Save Buyer</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- AJAX Script to Submit and Update Select -->
<script>
    $(document).ready(function () {
        $('#addBuyerForm').submit(function (e) {
            e.preventDefault();

            $.ajax({
                url: "{{ route('add.buyer.store') }}", // Ensure this route exists
                method: "POST",
                data: $(this).serialize(),
                success: function (response) {
                    if (response.success) {
                        // Append new buyer to dropdown
                        $('#single-select-field').append(`<option value="${response.buyer.id}" selected>${response.buyer.name}</option>`).trigger('change');

                        // Reset form fields
                        $('#addBuyerForm')[0].reset();

                        // Close modal
                        $('#addBuyerModal').modal('hide');

                        // Show success message
                        Swal.fire("Success!", "Buyer added successfully.", "success");
                    } else {
                        Swal.fire("Error!", response.message, "error");
                    }
                },
                error: function (xhr) {
                    let errorMsg = "Something went wrong.";
                    if (xhr.responseJSON && xhr.responseJSON.errors) {
                        errorMsg = Object.values(xhr.responseJSON.errors).flat().join("\n");
                    }
                    Swal.fire("Error!", errorMsg, "error");
                }
            });
        });

        // Clear modal form when modal is hidden
        $('#addBuyerModal').on('hidden.bs.modal', function () {
            $('#addBuyerForm')[0].reset(); // Reset form when modal is closed
        });
    });
</script>


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

<script>
    document.addEventListener("DOMContentLoaded", function() {
        var addBuyerBtn = document.getElementById('add-buyer-btn');

        // Apply tooltip manually using Bootstrap
        var tooltip = new bootstrap.Tooltip(addBuyerBtn, {
            title: "Add Buyer", 
            placement: "top", 
            trigger: "hover"
        });
    });
</script>

@endsection