@extends(session('staff_logged_in') ? 'Staff.layout' : 'Admin.layout')

@section('content')
<div id="alertBox" style="display:none;"></div>
<div class="row align-items-center justify-content-between mb-3 mt-3">
    <div class="col-auto">
        <h5>
            <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                <a href="{{ route('medicines') }}">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="icon icon-tabler">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <path d="M15 6l-6 6l6 6" />
                    </svg>
                </a>
            </button>
            View Batch
        </h5>
    </div>
</div>

@if(session('error'))
<div class="alert alert-danger">{{ session('error') }}</div>
@endif

<div class="card border-0 shadow-lg">
    <div class="card-header py-3">
        <div class="d-flex align-items-center">
            <h5 class="mb-0 fw-bold me-2">Product Name :</h5>
            <h6 class="mb-0 text-muted">{{ $product->product_name }}</h6>
        </div>
    </div>

    <div class="card-body p-4">
        <form id="productForm" action="{{ route('store_product') }}" method="POST" enctype="multipart/form-data">
            @csrf


            <div class="section-title my-4">
                <h5><i class="ti tabler-building-warehouse me-2"></i>Batch Details</h5>
            </div>

            @foreach($batches as $batch)
            <div class="row">
                <div class="col-md-3 mb-3">
                    <label class="form-label">Batch Number</label>
                    <input type="text" class="form-control" value="{{ $batch->batch_number }}" readonly>
                </div>

                <div class="col-md-3 mb-3">
                    <label class="form-label">Total Quantity</label>
                    <input type="text" class="form-control" value="{{ $batch->quantity }}" readonly>
                </div>

                <div class="col-md-3 mb-3">
                    <label class="form-label">Currently Available</label>
                    <input type="text" class="form-control" value="{{ $batch->available_quantity }}" readonly>
                </div>
                <div class="col-md-3 mb-3">
                    <label class="form-label">Expiry Date</label>
                    <input type="text" class="form-control" value="{{\Carbon\Carbon::parse($batch->expiry_date)->format('d-m-Y')}}" readonly>
                </div>
            </div>
            @endforeach


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

<style>
.card {
    border-radius: 18px;
}

.form-control,
.form-select {
    min-height: 50px;
    border-radius: 12px;
}

.form-control:focus,
.form-select:focus {
    box-shadow: none;
    border-color: #696cff;
}

.section-title {
    border-left: 4px solid #696cff;
    padding-left: 12px;
}

.section-title h5 {
    margin: 0;
    font-weight: 700;
}

.card-header {
    border-bottom: 1px solid #edf1f7;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
$(function() {

    $('#productForm').on('submit', function(e) {

        const btn = $('#submitBtn');

        // Prevent multiple clicks
        if (btn.prop('disabled')) {
            e.preventDefault();
            return false;
        }

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

    });

});
</script>
@endsection