@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>Summary Stock</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">
                        <ol class="breadcrumb">
                            <li><a href="{{ route('dashboard') }}">Home</a></li>
                            <li><a href="{{ route('summary_stock') }}">Summary Stock</a></li>
                        </ol>
                    </div>
                </div>

                <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">Brand Emas:</label>
                                            <div class="col-xs-8 col-sm-4">
                                                <select name="brand" id="brand" class="form-control">
                                                    <option value="">-- Pilih Brand --</option>
                                                    @foreach ($brand as $data)
                                                    <option value="{{ $data->id }}"  @if (request()->brand == $data->id)
                                                        selected @endif>{{ $data->brand }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="col-xs-12 col-sm-4 control-label">Item :</label>
                                            <div class="col-xs-8 col-sm-4">
                                                <select name="item" id="item" class="form-control">
                                                    <option value="">-- Pilih Item --</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="col-xs-12 col-sm-4 control-label">Group Lokasi :</label>
                                            <div class="col-xs-8 col-sm-4">
                                                <select name="actual_groups" id="actual_groups" class="form-control">
                                                    <option value="">-- Pilih Lokasi --</option>
                                                    @foreach ($actual_groups as $data)
                                                        <option value="{{ $data->id }}" @if (request()->actual_groups == $data->id)
                                                            selected @endif>{{ $data->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="col-xs-12 col-sm-4 control-label">Lokasi :</label>
                                            <div class="col-xs-8 col-sm-4">
                                                <select name="toko" id="toko" class="form-control">
                                                    <option value="">-- Pilih Toko --</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="col-xs-12 col-sm-4 control-label">Keterangan :</label>
                                            <div class="col-xs-8 col-sm-4">
                                                <input type="text" class="form-control" name="sertifikat" placeholder="">
                                            </div>
                                        </div>

                                        <div class="form-group" style="margin-top:20px">
                                            <label class="col-xs-12 col-sm-5 control-label"></label>
                                            <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>
                                                {{-- <button type="button" id="reset_btn" class="btn btn-warning" id="reset_btn"><i
                                                        class="fa fa-trash"></i> Reset</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 class="table table-bordered table-striped">
                                        <thead>
                                            <tr>
                                                <th class="text-center">Group Lokasi</th>
                                                <th class="text-center">Lokasi</th>
                                                <th class="text-center">Brand</th>
                                                <th class="text-center">Item</th>
                                                {{-- <th class="text-center">sertifikat</th>
                                                <th class="text-center">plu code</th> --}}
                                                <th class="text-center">Qty</th> 
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @php
                                                $totalQty = 0;
                                            @endphp
                                            @foreach ($result as $data)
                                            <tr>
                                                    <td class="text-center" style="vertical-align: middle">{{ $data->group_name }}</td>
                                                    <td class="text-center" style="vertical-align: middle">{{ $data->code_al }} {{ $data->location_name }}</td>
                                                    <td class="text-center" style="vertical-align: middle">{{ $data->brand }}</td>
                                                    <td class="text-center" style="vertical-align: middle">{{ $data->pecahan }} Gram</td>
                                                    {{-- <td class="text-center" style="vertical-align: middle">{{ $data->certificate_code }} </td>
                                                    <td class="text-center" style="vertical-align: middle">{{ $data->plu_code }} </td> --}}
                                                    <td class="text-center" style="vertical-align: middle">{{ $data->total_qty }}</a></td>
                                                    <td class="text-center" style="vertical-align: middle"><a href="/summary_stock/detail/{{ $data->id_pecahan}}/{{$data->code_al}}" target="_blank" class="docs-creator"><i class="fa fa-ellipsis-v" aria-hidden="true"></i>
                                                    </a></td>
                                                </tr>
                                                @php
                                                    $totalQty += $data->total_qty;
                                                @endphp
                                            @endforeach
                                            <tfoot>
                                                <tr>
                                                    <td colspan="4" class="text-right">Total:</td>
                                                    <td class="text-center">{{ $totalQty }}</td>
                                                </tr>
                                            </tfoot>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('scripts')
<script>
   $(document).ready(function () {
    
    $('#brand').on('change', function () {
        updateItemDropdown($(this).val());
    });

    // Initial update when the page loads
    updateItemDropdown($('#brand').val());

    // Group Lokasi
    $('#actual_groups').on('change', function () {
        updateTokoDropdown($(this).val());
    });

    updateTokoDropdown($('#actual_groups').val());
});

function updateItemDropdown(brandId) {
    $.ajax({
        url: '/summary_stock/' + brandId,
        type: "GET",
        data: {
            "_token": "{{ csrf_token() }}"
        },
        dataType: "json",
        success: function (data) {
            if (data) {
                $('#item').empty();
                $('#item').append('<option value="">-- Pilih Item --</option>');
                $.each(data, function (key, emas) {
                    $('select[name="item"]').append('<option value="' +
                        emas.id + '">' + emas.pecahan + " Gram " +
                        '</option>');
                });
            } else {
                $('#item').empty();
            }
        }
    });
}

function updateTokoDropdown(actualGroups) {
    $.ajax({
        url: '/summary_stock_location/' + actualGroups,
        type: "GET",
        data: {
            "_token": "{{ csrf_token() }}"
        },
        dataType: "json",
        success: function (data) {
            if (data) {
                $('#toko').empty();
                $('#toko').append('<option value="">-- Pilih toko --</option>');
                $.each(data, function (key, toko) {
                    $('select[id="toko"]').append('<option value="' +
                        toko.code + '">' + toko.code + " - " + toko.name +
                        '</option>');
                });
            } else {
                $('#toko').empty();
            }
        }
    });
}
</script>
@endsection