@extends('layouts.layout')

@section('title', $title_site)

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

@section('css')
<link rel="stylesheet" href="{{ asset('/css/dashboard.css') }}">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<style type="text/css">
    .centered-title {
        text-align: center;
    }
    .radio-box {
    border: 1px solid #ccc;
    padding: 10px;
    display: inline-block;
    border-radius: 5px;
    background-color: #f5f5f5;
    }
</style>
@yield('head')
@endsection

@section('body_content')
<div class="container body">
    <div class="main_container">
        @include('includes.sidebar')
        <div class="right_col" role="main">
            @include("pages.lakuhoki.inc.inc_title", ['title_page' => $title_page])

            {{-- Main page content - start --}}
            <div class="col-xs-12">
                <div class="container">
                    <div class="x_panel">
                        <div class="x_title">
                            <ul class="nav navbar-right panel_toolbox">
                                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                    {{-- {{ dd($data) }} --}}
                    <div class="x_content">
                        <div class="row">
                            <div class="col-md-6 col-sm-8 col-xs-12">
                                <form id="form_filter" method="POST" action="/lakuhoki/operational/add_stock_reward" class="form-horizontal">
                                    {{ csrf_field() }}
                                    <div class="form-group">
                                        <label class="col-xs-12 col-sm-3 control-label" style="text-align: left;">Select Reward</label>
                                        <div class="col-xs-12 col-sm-3">
                                            <select id="reward" name="reward" class="form-control">
                                                @if(isset($data['data_dropdown']->data->ddl))
                                                @foreach($data['data_dropdown']->data->ddl as $reward)
                                                    <option value="{{ $reward->val }}">{{ $reward->txt }}</option>
                                                @endforeach
                                                @endif
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-xs-12 col-sm-3 control-label" style="text-align: left;">Mutasi</label>
                                        <div class="col-xs-12 col-sm-8">
                                            <div class="radio-box">
                                                <label class="radio-label">
                                                    <input type="radio" name="increment" value="1" required> Tambah
                                                </label>
                                                <label class="radio-label">
                                                    <input type="radio" name="increment" value="0" style="margin-left: 20px" required> Kurang
                                                </label>
                                            </div>
                                        </div>
                                    </div>  
                                    <div class="form-horizontal">
                                        <label class="col-xs-3 control-label" style="text-align: left;">Quantity</label>
                                        <div class="col-xs-9">
                                            <input type="text" name="quantity" pattern="[0-9]+" class="form-control" style="width: 60px;" required>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-xs-12 col-sm-offset-2 col-sm-10">
                                            <div class="alert_placeholder"></div>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        {{-- <label for="buy_price" class="col-sm-3 col-form-label text-right"></label> --}}
                                        <div class="col-sm-9 ">
                                        <button style="width: 100px; height: 35px; margin-bottom: 20px; margin-left: 194px" id="updated" class="btn btn-warning btn-xs" disabled>
                                                <i class="fa fa-id-card" aria-hidden="true"></i> Update
                                            </button>                           
                                        </div>
                                    </div>  
                                </form>
                            </div>
                            
                            <div class="col-md-6 col-sm-4 col-xs-12">
                                <div class="table-responsive">
                                    <div class="form-group">
                                        <div class="centered-title">
                                            <h2>Current Stock</h2>
                                        </div>
                                        <div>
                                            <table id="stockTable" class="table table-bordered table-striped">
                                                <thead>
                                                    <tr>
                                                        <th class="text-center">Title</th>
                                                        <th class="text-center">Qty</th>
                                                        <th class="text-center">Exclusive</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @if ($data['data_list_rewards'])
                                                    @foreach ($data['data_list_rewards']->data->rewards as $reward)
                                                    <tr>
                                                        <td class="text-center">
                                                            {{ $reward->is_exclusive ? '* ' . $reward->title : $reward->title }}
                                                        </td>
                                                        <td class="text-center">{{ $reward->qty }}</td>
                                                        <td class="text-center">{{ $reward->is_exclusive ? 'Yes' : 'No' }}</td>
                                                    </tr>
                                                    @endforeach
                                                    @else
                                                    <tr>
                                                        <td colspan="3" class="text-center">No rewards data available.</td>
                                                    </tr>
                                                    @endif
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    </div>
                </div>
            </div>
            {{-- Main page content - end --}}
            <div class="col-xs-12">
                <div class="table-responsive">
                    {{-- <div class="centered-title">
                        <h2>Data Stock Reward</h2>
                    </div> --}}
                    <div class="x_content">
                        <table id="Table" class="table table-bordered table-striped" style="zoom: 0.9;">
                            <thead>
                                <tr>
                                    <th class="text-center" style="font-size: 12px;">No</th>
                                    <th class="text-center" style="font-size: 12px;">Nama Reward</th>
                                    <th class="text-center" style="font-size: 12px;">Qty Sebelumnya</th>
                                    <th class="text-center" style="font-size: 12px;">Mutasi</th>
                                    <th class="text-center" style="font-size: 12px;">Qty Sesudahnya</th>
                                    <th class="text-center" style="font-size: 12px;">Updated By</th>
                                    <th class="text-center" style="font-size: 12px;">Date/Time</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if ($data['data_history'] && $data['data_history']->status == 1)
                                @foreach ($data['data_history']->data->history as $index => $reward)
                                <tr>
                                    <td class="text-center" style="font-size: 12px;">{{ $index + 1 }}</td>
                                    <td class="text-center" style="font-size: 12px;">{{ $reward->reward_name }}</td>
                                    <td class="text-center" style="font-size: 12px;">{{ $reward->qty_before }}</td>
                                    <td class="text-center" style="font-size: 12px;">{{ $reward->qty }}</td>
                                    <td class="text-center" style="font-size: 12px;">{{ $reward->qty_after }}</td>
                                    <td class="text-center" style="font-size: 12px;">{{ $reward->created_by }}</td>
                                    <td class="text-center" style="font-size: 12px;">{{ $reward->created_at }}</td>
                                </tr>
                                @endforeach
                                @else
                                <tr>
                                    <td colspan="7" class="text-center" style="font-size: 12px;">No rewards data available.</td>
                                </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.css" />
  <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.js"></script>


<script>
  document.addEventListener('DOMContentLoaded', function() {
    const updateButton = document.getElementById('updated');
    const quantityInput = document.querySelector('input[name="quantity"]');

    // // Add event listener to the Update button
    // updateButton.addEventListener('click', function() {
    //     Swal.fire({
    //         title: 'Are You Sure? ',
    //         text: "You won't be able to revert this!",
    //         icon: 'warning',
    //         showCancelButton: true,
    //         confirmButtonText: 'Yes, update it!',
    //         cancelButtonText: 'No, cancel!',
    //         reverseButtons: true,
    //         customClass: {
    //             confirmButton: 'btn btn-success',
    //             cancelButton: 'btn btn-danger',
    //             popup: 'my-swal-popup',
    //         },
    //     }).then((result) => {
    //         if (result.isConfirmed) {
    //             const form = document.getElementById('form_filter');
                
               
    //             const selectedRadio = document.querySelector('input[name="increment"]:checked');
    //             if (selectedRadio) {
    //                 const incrementValue = selectedRadio.value;
    //                 const message = (incrementValue === '1') ? 'Data successfully added.' : 'Data successfully reduced.';
                    
    //                 Swal.fire(
    //                     'Updated!',
    //                     message,
    //                     'success'
    //                 ).then(() => {
    //                     form.submit();
    //                 });
    //             } else {
    //                 Swal.fire(
    //                     'Error',
    //                     'Please select an increment option.',
    //                     'error'
    //                 );
    //             }
    //         } else if (result.dismiss === Swal.DismissReason.cancel) {
    //             Swal.fire(
    //                 'Cancelled',
    //                 'Your update was cancelled.',
    //                 'error'
    //             );
    //         }
    //     });
    // });

    // Validate quantity input
    quantityInput.addEventListener('input', function() {
        if (this.validity.valid && this.value > 0) {
            updateButton.removeAttribute('disabled');
        } else {
            updateButton.setAttribute('disabled', 'true');
        }
    });
});

$(document).ready(function () {
        $('#Table').DataTable();
    });

</script>
{{-- <style>
    
    .my-swal-popup {
        width: 50%; 
        height: 50%; 
    }
</style> --}}
@endsection