@extends('layouts.horizontal', ['title' => 'Branch Requisitions', 'topbarTitle' => 'Branch Requisitions'])

@section('css')
@vite(['node_modules/datatables.net-bs5/css/dataTables.bootstrap5.min.css',
'node_modules/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css',
'node_modules/datatables.net-fixedcolumns-bs5/css/fixedColumns.bootstrap5.min.css',
'node_modules/datatables.net-fixedheader-bs5/css/fixedHeader.bootstrap5.min.css',
'node_modules/datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css',
'node_modules/datatables.net-select-bs5/css/select.bootstrap5.min.css',])
@endsection

@section('content')

<style>
     tr.strike-through > td {text-decoration:line-through !important; color:red;} 
</style>
<div class="Requisition-page">
     <div class="container-fluid">
    <!-- start page title -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="page-title-box d-flex align-items-center justify-content-between">
                <h2 class="mb-0">Branch Requisitions</h2>
                <div class="page-title-right">
                    <a href="{{ route('branch_requisitions.add_new_requisition') }}" class="btn btn-sm btn-success me-3a">
                        <iconify-icon icon="mdi:plus" width="16" height="16" class="me-1"></iconify-icon>
                        Add New Requisition
                    </a>
                     {{ session('user_role') }}
                </div>
            </div>
        </div>
    </div>
    <!-- end page title -->
    @if(session('ho')=="Yes")
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="card-title">Filter Products</div>
                    <form id="filterform">
                        <div class="row gap-1">          
                            <div class="col-md-3">
                                <input type="hidden" name="ho" id="ho" value="{{ $ho }}">
                                <label class="form-label" for="business_type">Select  Branch Type</label>
                                <select id="business_type" name="business_type_id" class="form-select">  
                                    <option value="">-- All Business Types --</option>                                  
                                    @foreach($business_types as $type)
                                        <option value="{{ $type->id_business_type }}" @if($type->id_business_type == $business_type_id) selected @endif>{{ $type->business_type }}</option>
                                    @endforeach
                                </select>
                            </div>                           
                                              
                            <div class="col-md-3">
                                <label class="form-label" for="branch_id">Select  Branch</label>
                                <select id="branch_id" name="business_id" class="form-select">  
                                    <option value="">-- All Branches --</option>                                  
                                    @foreach($branches as $branch)
                                        <option value="{{ $branch->id_business }}" @if($branch->id_business == $business_id) selected @endif>{{ $branch->business_name }}</option>
                                    @endforeach
                                </select>
                            </div>                           
                            
                            <div class="col-md-3 d-flex align-items-end">
                                <button type="button" id="filterButton" class="btn btn-ghost-primary btn-icon rounded-circle btn-sm mt-3">
                                    <iconify-icon icon="mdi:refresh" width="30px" ></iconify-icon>
                                </button>
                            </div>                           
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div> <!-- end row-->
    @endif

    
   

    <!-- Requisitions Table -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <table id="branchRequisitionsTable" class="table table-bordered table-sm dt-responsive fs-13 w-100">
                        <thead>
                            <tr>
                                <th>Req.#</th>                                
                                <th>Branch</th>
                                <th>Requested By</th>
                                <th>Requisition Date</th>
                                <th>Required Total</th>
                                <th>Transferred Total</th>
                                <th>Pending Total</th>
                                <th>Requisition Status</th>
                                <th>Details</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Data will be populated via DataTables AJAX -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!-- end row-->
</div>


@endsection

@section('scripts')
<script>

    document.addEventListener('DOMContentLoaded', function () {
        var business_type_id = '{{ $business_type_id }}';
        var business_id = '{{ $business_id }}';

        var table = $('#branchRequisitionsTable').DataTable({
            processing: true,
            serverSide: true,
            responsive: false,
            ajax: {
                url: '{{ route("branch_requisitions.get_requisitions_data") }}',
                data: {
                    business_type_id: business_type_id,
                    business_id: business_id
                }
            },
            columns: [
                { data: 'requisition_number', name: 'requisition_number' },                
                { data: 'to_branch', name: 'to_branch' },
                { data: 'requested_by', name: 'requested_by' },
                { data: 'requisition_date', name: 'requisition_date' },
                { data: 'required_qty', name: 'required_total' },
                { data: 'transfered_qty', name: 'transfered_total' },
                { data: null, name: 'pending_total',
                    render: function (data, type, row) {
                        return row.required_qty - row.transfered_qty;
                    }   
                },
                { data: 'requisition_status', name: 'requisition_status' },
                { data: null, name: 'details', orderable: false, searchable: false,
                    render: function (data, type, row) {
                        
                            url1 = '{{ route("branch_requisitions.ho_requisition_transfer", ":id") }}';
                            url1 = url1.replace(':id', row.requisition_number);
                        
                            url = '{{ route("branch_requisitions.get_requisition_details", ":id") }}';
                            url = url.replace(':id', row.requisition_number);
                        
                        if($('#ho').val()=='Yes'){
                            return `<a href="` + url1 + `"  title="Process" data-bs-toggle="tooltip" data-bs-placement="top" class="btn btn-sm btn-success view-details btn-icon fs-12 me-1" data-id="` + row.requisition_number + `">
                                <iconify-icon icon="mdi:transfer" class="fs-18"></iconify-icon>
                            </a>
                            <a href="` + url + `" title="Details" data-bs-toggle="tooltip" data-bs-placement="top" class="btn btn-sm btn-secondary view-details btn-icon fs-12 me-1" data-id="` + row.requisition_number + `">
                                <iconify-icon icon="mdi:eye" class="fs-18"></iconify-icon>
                            </a>
                            `;
                        }else{
                            return `<a href="` + url + `" title="Details" data-bs-toggle="tooltip" data-bs-placement="top" class="btn btn-sm btn-secondary view-details btn-icon fs-12 me-1" data-id="` + row.requisition_number + `">
                                <iconify-icon icon="mdi:eye" class="fs-18"></iconify-icon>
                            </a>
                            `;
                        }
                    }
                }
            ],
           rowCallback: function(row, data, index) {                                 
                // add class text-danger if difference is greater than 0
                if (data.required_qty - data.transfered_qty > 0) {
                    $('td:eq(6)', row).addClass('text-danger').removeClass('text-success');
                } else {
                    $('td:eq(6)', row).addClass('text-success').removeClass('text-danger');
                }
            },
            drawCallback: function(settings, json) {
               var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
                var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl)
                })
            }
        });

    });

    document.getElementById('filterButton').addEventListener('click', function() {
        var business_type_id = document.getElementById('business_type').value;
        var business_id = document.getElementById('branch_id').value;

        var table = $('#branchRequisitionsTable').DataTable();
        table.ajax.url('{{ route("branch_requisitions.get_requisitions_data") }}' + '?business_type_id=' + business_type_id + '&business_id=' + business_id).load();
    });

</script>
@endsection