@extends('layouts.admin')

@section('title', 'MSKU List')
@section('content-header', 'MSKU List')
@section('content-actions')
    <a href="{{route('pdf', 1)}}" class="btn btn-primary">PDF</a>
    <a href="{{route('import.create')}}" class="btn btn-primary">Import SKU</a>
    <a href="{{route('msku.create')}}" class="btn btn-primary">Create SKU</a>
@endsection

@section('content')
    <div class="card">
        <div class="card-body">

            <div class="form-group">
                <label for="branch">Branch</label>
                <select name="branch" class="form-control @error('branch') is-invalid @enderror" id="branch"
                        onchange="set_dashboard_branch()">
                    <option value="ALL">ALL BRANCH</option>
                    @foreach ($branch_access as $key => $value)
                        @if (strtoupper($BID) == $value)
                            <option value="{{ $value }}" selected>{{ $value }}</option>
                        @else
                            <option value="{{ $value }}">{{ $value }}</option>
                        @endif
                    @endforeach
                </select>
            </div>

            <table class="table table-bordered table-striped" id="datatable">
                <thead>
                <tr>
                    <th>SKUID</th>
                    <th>Parent SKUID</th>
                    <th>Branch ID</th>
                    <th>Name</th>
                    <th>Cost (RM)</th>
                    <th>Price (RM)</th>
                    <th>Quantity</th>
                    <th>Status</th>
                    <th>Created At</th>
                    <th>Updated At</th>
                    <th>Actions</th>
                </tr>
                </thead>
                <tbody>
                @foreach ($msku as $sku)
                    <tr>
                        <td>{{$sku->SKUID}}</td>
                        <td>{{$sku->Parent_SKUID}}</td>
                        <td>{{$sku->BID}}</td>
                        <td>{{$sku->Sdesc}}</td>
                        <td>{{number_format((double)$sku->Lcost, 2, '.', '')}}</td>
                        <td>
                            Normal: {{number_format((double)$sku->LnetCost, 2, '.', '')}}<br>
                            Take Away: {{number_format((double)$sku->sell_price_take_away, 2, '.', '')}}<br>
                            Delivery: {{number_format((double)$sku->sell_price_delivery, 2, '.', '')}}<br>
                        </td>
                        <td>{{$sku->Uqty}}</td>
                        <td>
                            <span class="right badge badge-{{ $sku->Actflag ? 'success' : 'danger' }}">{{$sku->Actflag ? 'Active' : 'Inactive'}}</span>
                        </td>
                        <td>{{$sku->created_at}}</td>
                        <td>{{$sku->updated_at}}</td>
                        <td>
                            <a href="{{ route('msku.edit', $sku->SKUID) }}" class="btn btn-primary"><i class="fa-solid fa-pen-to-square nav-icon"></i></a>
                            {{--                        <a href="{{ route('msku.reinsert_skuid', $sku->SKUID) }}" class="btn btn-warning"><i class="fa-solid fa-refresh nav-icon"></i></a>--}}
                            <button class="btn btn-danger btn-delete" data-url="{{route('msku.destroy', $sku)}}"><i class="fa-solid fa-trash nav-icon-a"></i></button>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>
@endsection

@section('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/11.7.5/sweetalert2.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap4.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.2.6/js/responsive.bootstrap4.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.2.6/js/responsive.bootstrap4.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.3.2/js/dataTables.buttons.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables.net-buttons-bs4/2.3.3/buttons.bootstrap4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/vfs_fonts.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables-buttons/2.2.0/js/buttons.html5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables-buttons/2.2.0/js/buttons.print.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables-buttons/2.2.0/js/buttons.colVis.min.js"></script>
    <script>
        $(document).ready(function () {
            $(document).on('click', '.btn-delete', function () {
                $this = $(this);
                const swalWithBootstrapButtons = Swal.mixin({
                    customClass: {
                        confirmButton: 'btn btn-success',
                        cancelButton: 'btn btn-danger'
                    },
                    buttonsStyling: false
                })

                swalWithBootstrapButtons.fire({
                    title: 'Are you sure?',
                    text: "Do you really want to delete this product?",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, delete it!',
                    cancelButtonText: 'No',
                    reverseButtons: true
                }).then((result) => {
                    if (result.value) {
                        $.post($this.data('url'), {_method: 'DELETE', _token: '{{csrf_token()}}'}, function (res) {
                            $this.closest('tr').fadeOut(500, function () {
                                $(this).remove();
                            })
                        })
                    }
                })
            })
        })

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $(function () {
            $("#datatable").DataTable({
                "paging": true,
                "lengthChange": true,
                "searching": true,
                "ordering": true,
                "info": true,
                "autoWidth": true,
                "responsive": true,
            })
        });

        function set_dashboard_branch() {

            const branch = $('#branch').val();
            console.log(branch);

            $.ajax({
                url: "{{ route('home.set_dashboard_branch') }}",
                type: "POST",
                data: {
                    branch: branch,
                },
                success: function (response) {
                    console.log(response);
                    window.location.reload();
                },
                error: function (error) {
                    console.log(error);
                }
            });
        }
    </script>
@endsection