@extends('layouts.layout')

@section('body_class', 'nav-md')

@section('body_content')
    <div class="container body">
        <div class="main_container">
            @include('includes.sidebar')
            <div class="right_col" role="main">
                <div class="page-title">
                    <div class="title_left">
                        <div class="row">
                            <div class="col-xs-6 col-sm-6 col-md-6">
                                <h2 class="title-dashboard text-left">
                                    <h3><i class="fa fa-file-text"></i> Report Pembelian LM</h3>
                                </h2>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>
                <style>
                    .bottom-align {
                        vertical-align: bottom;
                    }
                </style>

                <div class="row">
                    <div class="col-xs-12 col-sm-12">
                        <div class="x_title">
                            Filter
                        </div>
                        <div class="x_content">
                            <form id="form-search" class="form-horizontal">
                                <div class="col-xs-12 col-sm-12">
                                    <div class="form-group">
                                        <label class="col-xs-12 col-sm-4 control-label">Date From</label>
                                        <div class="col-xs-8 col-sm-4">
                                            <input type="date" name="date_from" value="{{ $request['date_from'] }}" id="date_from" class="form-control">
                                            <input type="hidden" name="search" value="true">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-xs-12 col-sm-4 control-label">Date To</label>
                                        <div class="col-xs-8 col-sm-4">
                                            <input type="date" name="date_to" value="{{ $request['date_to'] }}" id="date_to" class="form-control">
                                        </div>
                                    </div>
                                    <div class="form-group" style="margin-top:20px">
                                        <div class="col-xs-12 col-sm-12 text-center">
                                            <button type="submit" class="btn btn-primary btn-search"><i class="fa fa-search"></i> Search</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>

                    </div>

                    <div class="row">
                        <div class="col-xs-12 col-sm-12">
                            <div class="x_panel">
                                <div class="x_content">
                                    <table id="table" class="table table-bordered table-striped table-hover">
                                        <thead>
                                            <tr>
                                                <th rowspan="2" class="text-center">Brand</th>
                                                <th rowspan="2" class="text-center">Fragment</th>
                                                <th colspan="2" class="text-center">FPP</th>
                                                <th colspan="3" class="text-center">PO</th>
                                                <th colspan="3" class="text-center">DO</th>
                                            </tr>
                                            <tr>
                                                <th class="text-right">QTY FPP</th>
                                                <th class="text-right">Berat FPP</th>
                                                <th class="text-right">QTY PO</th>
                                                <th class="text-right">Berat PO</th>
                                                <th class="text-right">Rupiah PO</th>
                                                <th class="text-right">Qty DO</th>
                                                <th class="text-right">Berat DO</th>
                                                <th class="text-right">Rupiah DO</th>
                                            </tr>
                                        </thead>
                                        @php
                                            $totalQty = 0; 
                                            $totalBerat = 0; 
                                        @endphp
                                        @foreach ($data_rekap as $row)
                                            <tr>
                                                <td>{{ $row->brand_emas }}</td>
                                                <td>{{ $row->pecahan_emas }}</td>
                                                <td class="text-right" style="cursor: pointer;" onclick="detail('{{ $row->pecahan_emas }}')">{{ number_format($row->qty_fpp) }}</td>
                                                <td class="text-right" style="cursor: pointer;" onclick="detail('{{ $row->pecahan_emas }}')">{{ number_format($row->berat_fpp) }}</td>
                                                <td class="text-right" style="cursor: pointer;" onclick="detailPO('{{ $row->pecahan_emas }}')">{{ number_format($row->qty_po) }}</td>
                                                <td class="text-right" style="cursor: pointer;" onclick="detailPO('{{ $row->pecahan_emas }}')">{{ number_format($row->berat_po) }}</td>
                                                <td class="text-right" style="cursor: pointer;" onclick="detailPO('{{ $row->pecahan_emas }}')">{{ number_format($row->rupiah_po) }}</td>
                                                <td class="text-right" style="cursor: pointer;" onclick="detailDO('{{ $row->pecahan_emas }}')">{{ number_format($row->qty_do) }}</td>
                                                <td class="text-right" style="cursor: pointer;" onclick="detailDO('{{ $row->pecahan_emas }}')">{{ number_format($row->berat_do) }}</td>
                                                <td class="text-right" style="cursor: pointer;" onclick="detailDO('{{ $row->pecahan_emas }}')">{{ number_format($row->rupiah_do) }}</td>
                                            </tr>
                                        @endforeach
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="detailModalLm" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" style="width: 80%;" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fa fa-cubes"></i> Detail FPP</h5>
                </div>
                
                <div class="modal-body">
                    <div class="x_panel">                        
                        <div class="x_content" id="detail_pembelian">
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="detailModalPO" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" style="width: 80%;" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fa fa-cubes"></i> Detail PO</h5>
                </div>
                
                <div class="modal-body">
                    <div class="x_panel">                        
                        <div class="x_content" id="detail_pembelian_po">
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>



    <div class="modal fade" id="detailModalDO" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" style="width: 80%;" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fa fa-cubes"></i> Detail DO</h5>
                </div>
                
                <div class="modal-body">
                    <div class="x_panel">                        
                        <div class="x_content" id="detail_pembelian_do">
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>



    
@endsection

@section('scripts')
<script>
function detail(pecahan_emas) {

    let date_from = $('#date_from').val(); 
    let date_to = $('#date_to').val();
    $.ajax({
        url: '{{ url("stock/report_pembelian_lm/detail_fpp") }}',
        method: "POST",
        data: { 
            'pecahan_emas': pecahan_emas,
            'date_from': $('#date_from').val(),
            'date_to': $('#date_to').val(),
        },
        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
        success: function(response) {
            $('#detail_pembelian').html(response);
            $('#item_name').html(pecahan_emas);
            $('#detailModalLm').modal('show');
        },
        error: function(response) {
            var response = response.responseJSON;
            alert(response.error);
        }
    });
}


function detailPO(pecahan_emas) {
    let date_from = $('#date_from').val(); 
    let date_to = $('#date_to').val();
    $.ajax({
        url: '{{ url("stock/report_pembelian_lm/detail_po") }}',
        method: "POST",
        data: { 
            'pecahan_emas': pecahan_emas,
            'date_from': $('#date_from').val(),
            'date_to': $('#date_to').val(),
        },
        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
        success: function(response) {
            $('#detail_pembelian_po').html(response);
            $('#item_name').html(pecahan_emas);
            $('#detailModalPO').modal('show');
        },
        error: function(response) {
            var response = response.responseJSON;
            alert(response.error);
        }
    });
}

function detailDO(pecahan_emas) {
    let date_from = $('#date_from').val(); 
    let date_to = $('#date_to').val();
    $.ajax({
        url: '{{ url("stock/report_pembelian_lm/detail_do") }}',
        method: "POST",
        data: { 
            'pecahan_emas': pecahan_emas,
            'date_from': $('#date_from').val(),
            'date_to': $('#date_to').val(),
        },
        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
        success: function(response) {
            $('#detail_pembelian_do').html(response);
            $('#item_name').html(pecahan_emas);
            $('#detailModalDO').modal('show');
        },
        error: function(response) {
            var response = response.responseJSON;
            alert(response.error);
        }
    });
}
</script>

@endsection