@extends('layout.app')
@section('title', 'Stock Inward')

@push('header_script')
    <link rel="stylesheet" href="{{asset('theme/assets/vendor/datatables/dataTables.bs5.css')}}">
    <link rel="stylesheet" href="{{asset('theme/assets/vendor/datatables/dataTables.bs5-custom.css')}}">
    <link rel="stylesheet" href="{{asset('theme/assets/vendor/datatables/buttons/dataTables.bs5-custom.css')}}">
    <link rel="stylesheet" href="{{asset('theme/assets/sweetalert/sweet-alert.css') }}" type="text/css">
 
    <style>
        .hover-shadow:hover {
            box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
            border-color: #c75c10 !important;
        }
    </style>
@endpush

@section('content')
<div class="app-hero-header d-flex align-items-center">
     <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="javascript:void(0);">Stock Inward</a>
        </li>
    </ol>
    <div class="ms-auto d-lg-flex flex-row">
        <div class="d-flex flex-row gap-1 day-sorting">
            <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#createInwardModal">
                <i class="ri-add-circle-fill"></i> Add
            </button>
        </div>
    </div>
</div>

<div class="app-body">
    <div class="row gx-3">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table truncate m-0 align-middle" id="stockInwardTable">
                            <thead>
                                <tr>
                                    <th>S.no.</th>
                                    <th>Date</th>
                                    <th>Reference</th>
                                    <th>Supplier</th>
                                    <th>Items</th>
                                    <th>Amount</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<!-- Selection Modal -->
<div class="modal fade" id="createInwardModal" tabindex="-1" aria-labelledby="createInwardModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-header bg-white border-bottom py-3">
                <div>
                    <h5 class="modal-title fw-bold text-dark" id="createInwardModalLabel">Create Stock Inward</h5>
                    <p class="mb-0 text-muted small mt-1">How was this stock purchased?</p>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-4 bg-light">
                <div class="row g-3">
                    <!-- Option 1: From Purchase Voucher -->
                    <div class="col-md-6">
                        <a href="{{ route('stock-inward.create') }}" class="card h-100 border text-decoration-none hover-shadow transition">
                            <div class="card-body p-4 d-flex align-items-start">
                                <div class="bg-soft-primary p-3 rounded me-3 text-primary">
                                    <i class="ri-file-list-3-line fs-3 text-warning"></i>
                                </div>
                                <div>
                                    <h6 class="fw-bold text-dark mb-1">From Purchase Voucher</h6>
                                    <p class="text-muted small mb-0">Purchase Voucher already created. Invoice details are fetched automatically.</p>
                                </div>
                            </div>
                        </a>
                    </div>
                    
                    <!-- Option 2: Direct Purchase & Inward -->
                    <div class="col-md-6">
                        <a href="{{ route('purchase-voucher.create', ['redirect_to' => 'stock-inward']) }}" class="card h-100 border text-decoration-none hover-shadow transition">
                            <div class="card-body p-4 d-flex align-items-start">
                                <div class="bg-soft-success p-3 rounded me-3 text-success">
                                    <i class="ri-box-3-line fs-3 text-warning"></i>
                                </div>
                                <div>
                                    <h6 class="fw-bold text-dark mb-1">Direct Purchase & Inward</h6>
                                    <p class="text-muted small mb-0">No voucher exists yet. Redirect to create a Purchase Voucher first.</p>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('footer_script')
    <script src="{{asset('theme/assets/vendor/datatables/dataTables.min.js')}}"></script>
    <script src="{{asset('theme/assets/vendor/datatables/dataTables.bootstrap.min.js')}}"></script>
    <script src="{{asset('theme/assets/vendor/datatables/custom/custom-datatables.js')}}"></script>
    <script src="{{asset('theme/assets/sweetalert/sweet-alert.min.js')}}"></script>
<script>
    $(document).ready(function() {

        // ──────────────────────────────────────────────────
        //  DataTable
        // ──────────────────────────────────────────────────
        $('#stockInwardTable').DataTable({
            processing: true,
            serverSide: true,
            stateSave: true,
            responsive: true,
            ajax: "{{ route('stock-inward.getData') }}",
            columns: [
                {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
                {data: 'invoice_date', name: 'invoice_date'},
                {data: 'reference', name: 'reference'},
                {data: 'supplier', name: 'supplier'},
                {data: 'items_count', name: 'items_count', searchable: false},
                {data: 'invoice_amount', name: 'invoice_amount'},
                {data: 'action', name: 'action', orderable: false, searchable: false}
            ]
        });


    });
</script>
@endpush