@extends('layouts.app')
@section('stitle',  __('messages.Combos'))
@section('title',  __('messages.Combos'))

@section('content')
<div class="app-content content ">
    <div class="content-overlay"></div>
    <div class="header-navbar-shadow"></div>
    <div class="content-wrapper container-xxl p-0">

        <div class="content-header row">
            <div class="content-header-left col-md-6 col-12 mb-2">
                <div class="row breadcrumbs-top">
                    <div class="col-12">
                        <h2 class="content-header-title float-left mb-0">@yield('title')</h2>
                    </div>
                </div>
            </div>
            <div class="content-header-right text-md-right col-md-6 col-12 d-md-block d-none">
                <button class="btn btn-secondary waves-effect waves-float waves-light " type="button" onclick="location.href='{{ route('combos.list') }}'"><i data-feather='chevron-left' class="mr-1"></i>{{ __('messages.Back')}}</button>
            </div>
        </div>
        <div class="content-body" >

            <!-- Start: Combo-Main -->
            <div class="row" id="table-hover-animation">
                <div class="col-12">
                    <div class="card" >

                        <div class="card-body">
                            <div class="row">
                                <div class="col-6">
                                    <label>{{ __('messages.name')}}</label>
                                    <h5 class="mt-1">{{$combo->name}}</h5>
                                <hr>
                                </div>
                                <div class="col-6">
                                <label>{{ __('messages.CATEGORY')}}</label>
                                    <h5 class="mt-1">{{$combo->getCategory->name}}</h5>
                                <hr>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-6">
                                    <label>{{ __('messages.SKU')}}</label>
                                    <h5 class="mt-1">{{ $combo->sku ?? 'NIL' }}</h5>
                                <hr>
                                </div>
                                <div class="col-6">
                                <label>{{ __('messages.BARCODE')}}</label>
                                    <h5 class="mt-1">{{ $combo->barcode ?? 'NIL' }}</h5>
                                <hr>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <!-- End: Combo-Main -->


            <!-- Start: Products-Top-Section -->
            <div class="content-header row mt-3">
                <div class="content-header-left col-md-6 col-12 mb-2">
                    <div class="row breadcrumbs-top">
                        <div class="col-12">
                            <h5 class=" float-left mb-0 pt-1">{{ __('messages.Products')}}</h5>
                        </div>
                    </div>
                </div>
                <div id="productDiv" class="content-header-right text-md-right col-md-6 col-12 d-md-block d-none">
                    <div class="form-group breadcrumb-right mb-1">
                        <button class="getPro btn btn-primary waves-effect waves-float waves-light" type="button"
                        data-toggle="modal" data-target="#addSizeModal">{{ 'Add Size' }}</button>
                    </div>
                </div>
            </div>
            <!-- End: Products-Top-Section -->

            <!-- Start: Products -->
            <div class="card">
                @if(count($combo_sizes) == 0)
                    <div class="card-body default-pro-text">
                        <p class="card-text text-center mt-3 mb-3">
                            Add your combo sizes first, such as Regular, Medium, Large. And link your menu products to the options inside the combo groups.
                        </p>
                    </div>
                @else
                    <form class="products_form">
                        <table id="products_table" class="products_list_table table">
                            <thead>
                                <tr>
                                    <th></th>
                                    @foreach($combo_sizes as $combo_size)
                                        <th>
                                            <a href="#updateSizeModal" class="update_size" data-toggle="modal" data-target="#updateSizeModal" data-size_id="{{$combo_size->id}}">
                                                {{$combo_size->name}}
                                            </a>
                                        </th>
                                    @endforeach
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($combo_groups as $combo_group)
                                    <tr>
                                        <td>
                                            <a href="#" class="updateGroup" data-toggle="modal" data-target="#updateGroupModal" data-group_id="{{ $combo_group->id }}">{{$combo_group->name}}</a><br>
                                            @foreach($combo_group->getOptions as $option)
                                            &nbsp;&nbsp;&nbsp;&nbsp;<a href="#" class="update_option" data-toggle="modal" data-target="#updateOptionModal"  data-combo_id="{{ $combo_group->combo_id }}" data-group_id="{{ $combo_group->id }}" data-option_id="{{ $option->id }}">{{$option->name}}</a><br>
                                            @endforeach
                                        &nbsp;&nbsp;&nbsp;&nbsp;<a href="#" class="add_option" data-toggle="modal" data-target="#addOptionModal" data-group_id="{{ $combo_group->id }}">Add Option</a>
                                        </td>
                                        @foreach($combo_sizes as $combo_size)
                                            <td data-group_id="{{$combo_group->id}}" data-size_id="{{$combo_size->id}}" data-cell="{{$loop->iteration}}"></td>
                                        @endforeach
                                    </tr>
                                @endforeach
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td colspan="100%">
                                        <a href="javascript:void(0);" class="add_group">Add Group</a>
                                    </td>
                                </tr>
                            </tfoot>
                        </table>
                        <input type="hidden" class="combo_id" name="combo_id" value="{{ $combo->id }}">
                    </form>
                @endif
            </div>
            <!-- End: Products -->


            <div class="row proUpdate">
                <div class="col-10"></div>
                <div class="col-2 text-right">
                    <button class="btn btn-success allProUpdate">{{__('messages.Update')}}</button>
                </div>
            </div>


            <!-- Start: Add-Size-Modal -->
            <div class="modal fade" id="addSizeModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <form action="{{ route('combos.add_size') }}" method="POST" class="addSizeModal-form">
                            @csrf
                            <div class="modal-header">
                                <h5 class="modal-title" id="addSizeModal-title">Add Size</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <div class="form-group mt-1 mb-1">
                                    <label for="combo_size">Name</label>
                                    <input type="text" id="combo_size" class="form-control" name="size" value="">
                                    <input type="hidden" class="combo_id" name="combo_id" value="{{ $combo->id }}">
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="submit" id="addSizeModal-save" class="btn btn-primary">Save</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <!-- End: Add-Size-Modal -->

            <!-- Start: Update-Size-Modal -->
            <div class="modal fade" id="updateSizeModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <form action="{{ route('combos.update_size') }}" method="POST" class="updateSizeModal-form">
                            @csrf
                            <div class="modal-header">
                                <h5 class="modal-title" id="updateSizeModal-title">Update Size</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <div class="form-group mt-1 mb-1">
                                    <label for="update_combo_size">Name</label>
                                    <input type="text" id="update_combo_size" class="form-control" name="size" value="">
                                    <input type="hidden" class="combo_id" name="combo_id" value="{{ $combo->id }}">
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="submit" id="updateSizeModal-save" data-dismiss="true" class="btn btn-primary">Save</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <!-- End: Update-Size-Modal -->

            <!-- Start: Update-Group-Modal -->
            <div class="modal fade" id="updateGroupModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <form action="{{ route('combos.add_group') }}" method="POST" class="updateGroupModal-form">
                            @csrf
                            <div class="modal-header">
                                <h5 class="modal-title" id="updateGroupModal-title">Update Combo Group</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <div class="form-group mt-1 mb-1">
                                    <label for="update_combo_group">Name</label>
                                    <input type="text" id="update_combo_group" class="form-control" name="group" value="">
                                    <input type="hidden" class="combo_id" name="combo_id" value="{{ $combo->id }}">
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="submit" id="updateGroupModal-save" data-dismiss="true" class="btn btn-primary">Save</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <!-- End: Update-Group-Modal -->

            <!-- Start: Add-Group-Option-Modal -->
            <div class="modal fade" id="addOptionModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <form action="{{ route('combos.add_group_options') }}" method="POST" class="addOptionModal-form">
                            @csrf
                            <div class="modal-header">
                                <h5 class="modal-title" id="addOptionModal-title">Add Options</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <div class="form-group mt-1 mb-1">
                                    <label for="option_name">Name</label>
                                    <input type="text" id="option_name" class="form-control" name="option_name" value="">
                                </div>
                                @foreach($combo_sizes as $combo_size)
                                <div class="form-group mt-1 mb-1">
                                    <label for="product_id">Size: {{$combo_size->name}}</label>
                                    <select class="select2 form-control" id="product_id_{{ $loop->iteration }}" name="prod[{{$combo_size->name}}][prod_id]" tabindex="-1" aria-hidden="true">
                                        @foreach($products as $product)
                                            <option value="{{$product->id}}">{{$product->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group mt-1 mb-1">
                                    <label for="price">Price: {{Auth::user()->business->currency->name}}</label>
                                    <input type="number" id="price" class="form-control" name="prod[{{$combo_size->name}}][price]" value="" placeholder="100.00">
                                </div>
                                <input type="hidden" class="combo_id" name="prod[{{$combo_size->name}}][size_id]" value="{{ $combo_size->id }}">
                                @endforeach
                            </div>
                            <div class="modal-footer">
                                <button type="submit" id="addOptionModal-save" data-dismiss="true" class="btn btn-primary">Save</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <!-- End: Add-Group-Option-Modal -->


            <!-- Start: Update-Group-Option-Modal -->
            <div class="modal fade" id="updateOptionModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <form action="{{ route('combos.update_group_options') }}" method="POST" class="updateOptionModal-form">
                            @csrf
                            <div class="modal-header">
                                <h5 class="modal-title" id="updateOptionModal-title">Update Options</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <div class="form-group mt-1 mb-1">
                                    <label for="update_option_name">Name</label>
                                    <input type="text" id="update_option_name" class="form-control" name="option_name" value="">
                                </div>
                                @foreach($combo_sizes as $combo_size)
                                    <div class="form-group mt-1 mb-1">
                                        <label for="update_product_id__{{ $combo_size->id }}">Size: {{$combo_size->name}}</label>
                                        <select class="select2 form-control update_product_select" id="update_product_id_{{ $combo_size->id }}" data-size_id="{{$combo_size->id}}" name="prod[{{$combo_size->name}}][prod_id]" tabindex="-1" aria-hidden="true">
                                            @foreach($products as $product)
                                                <option value="{{$product->id}}">{{$product->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="form-group mt-1 mb-1 price_group">
                                        <label for="update_price">Price: {{Auth::user()->business->currency->name}}</label>
                                        <input type="number" data-size_id="{{ $combo_size->id }}" id="update_price_{{ $combo_size->id }}" class="form-control update_price" name="prod[{{$combo_size->name}}][price]" value="" placeholder="100.00">
                                    </div>
                                    <input type="hidden" class="size_id" name="prod[{{$combo_size->name}}][size_id]" value="{{ $combo_size->id }}">
                                    <input type="hidden" data-size_id="{{ $combo_size->id }}" class="option_value_id" name="prod[{{$combo_size->name}}][option_value_id]" value="">
                                @endforeach
                            </div>
                            <div class="modal-footer">
                                <button type="submit" id="updateOptionModal-save" data-dismiss="true" class="btn btn-primary">Save</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <!-- End: Update-Group-Option-Modal -->

@endsection
@push('my_scripts')
<script>
    $(function(){

        // Add Combo Size
        $('#addSizeModal-save').on('click', function(e){
            e.preventDefault();

            const method = 'POST';
            const url = "{{ route('combos.add_size') }}";
            const headers = {
                'X-CSRF-TOKEN': $('input[name="_token"]').val()
            };

            const data = $('.addSizeModal-form').serializeArray();
            // $('#products_table thead tr th a').each(function(){
            //     data.push({name: 'size_ids[]', value: $(this).data('size_id') });
            // });

            $.ajax({
                method,
                url,
                headers,
                data, // data to be sent to server
                dataType: 'json', // type of data expecting back from server
                success: function (data) {
                    const { status, message, combo_size } = data;
                    console.log(combo_size);
                    if(combo_size){
                        // const product_table_head = $('#products_table thead tr');
                        // product_table_head.append(
                        //     `<th>
                        //         <a href="#updateSizeModal" data-target="#updateSizeModal" data-toggle="modal" data-size_id="${combo_size.id}">
                        //             ${combo_size.name}
                        //         </a>
                        //     </th>`
                        // );
                        $('#addSizeModal').modal('hide');
                        window.location.reload();

                        // $('.default-pro-text').addClass('d-none');
                        // $('.products_form').removeClass('d-none');
                    }
                },
                error: function (data) {
                    console.log(data);
                }
            });
        });



        // Update Combo Size
        $('.update_size').on('click', function(){

            let size_id = $(this).data('size_id');
            $('#update_combo_size').val($(this).text().trim());

            $('#updateSizeModal-save').on('click', function(e){
                e.preventDefault();
                const method = 'POST';
                const url = "{{ route('combos.update_size') }}";
                const headers = {
                    'X-CSRF-TOKEN': $('input[name="_token"]').val()
                };
                const data = $('.updateSizeModal-form').serializeArray();
                data.push({name: 'size_id', value: size_id });

                $.ajax({
                    method,
                    url,
                    headers,
                    data, // data to be sent to server
                    dataType: 'json', // type of data expecting back from server
                    success: function (data) {
                        const { status, message, combo_size } = data;
                        console.log(combo_size);
                        if(combo_size){
                            $('#updateSizeModal').modal('hide');
                            window.location.reload();
                        }
                    },
                    error: function (data) {
                        console.log(data);
                    }
                });
            });
        });

        // Add Combo Group
        $('.add_group').on('click', function(){
            let combo_id = $('.combo_id').val().trim();
            const method = 'POST';
            const url = "{{ route('combos.add_group') }}";
            const headers = { 'X-CSRF-TOKEN': $('input[name="_token"]').val() };
            const data = { combo_id };
            $.ajax({
                method,
                url,
                headers,
                data, // data to be sent to server
                dataType: 'json', // type of data expecting back from server
                success: function (data) {
                    const { status, message, combo_group } = data;
                    console.log(combo_group);
                    window.location.reload();
                },
                error: function (data) {
                    console.log(data);
                }
            });
        });

        // Update Combo Group
        $('.updateGroup').on('click', function(){

            let group_id = $(this).data('group_id');
            $('#update_combo_group').val($(this).text().trim());

            $('#updateGroupModal-save').on('click', function(e){
                e.preventDefault();
                const method = 'POST';
                const url = "{{ route('combos.update_group') }}";
                const headers = {
                    'X-CSRF-TOKEN': $('input[name="_token"]').val()
                };

                const data = $('.updateGroupModal-form').serializeArray();
                data.push({name: 'group_id', value: group_id });

                $.ajax({
                    method,
                    url,
                    headers,
                    data, // data to be sent to server
                    dataType: 'json', // type of data expecting back from server
                    success: function (data) {
                        const { status, message, combo_group } = data;
                        console.log(combo_group);
                        $('#updateGroupModal').modal('hide');
                        window.location.reload();
                    },
                    error: function (data) {
                        console.log(data);
                    }
                });
            });
        });

        // Get sizes for app_option
        let combo_sizes = null;
        let group_id = null;
        let combo_id = null;
        $('.add_option').on('click', function(){
            combo_id = $('.combo_id').val();
            group_id = $(this).data('group_id');
            const method = 'POST';
            const url = "{{ route('combos.get_size') }}";
            const headers = { 'X-CSRF-TOKEN': $('input[name="_token"]').val() };
            const data = { combo_id };
            $.ajax({
                method,
                url,
                headers,
                data, // data to be sent to server
                dataType: 'json', // type of data expecting back from server
                success: function (data) {
                    combo_sizes = data.combo_sizes;

                },
                error: function (data) {
                    console.log(data);
                }
            });
        });

        // Add Combo Group Options
        $('#addOptionModal-save').on('click', function(e){
            e.preventDefault();
            const method = 'POST';
            const url = "{{ route('combos.add_group_options') }}";
            const headers = { 'X-CSRF-TOKEN': $('input[name="_token"]').val() };
            const data = $('.addOptionModal-form').serializeArray();
            data.push({name: 'combo_id', value: combo_id });
            data.push({name: 'group_id', value: group_id });
            $.ajax({
                method,
                url,
                headers,
                data, // data to be sent to server
                dataType: 'json', // type of data expecting back from server
                success: function (data) {
                    const { status, message, combo_group_options } = data;
                    console.log(combo_group_options);
                    if(combo_group_options){
                        window.location.reload();
                    }
                },
                error: function (data) {
                    console.log(data);
                }
            });
        });

        // Update Cells Data
        const method = 'POST';
        const url = "{{ route('combos.get_cell_data') }}";
        const headers = { 'X-CSRF-TOKEN': $('input[name="_token"]').val() };
        const data = { combo_id: $('.combo_id').val().trim() };
        $.ajax({
            method,
            url,
            headers,
            data, // data to be sent to server
            dataType: 'json', // type of data expecting back from server
            success: function (data) {
                const { combo_group_options } = data;
                console.log(combo_group_options);
                if(combo_group_options.length > 0){
                    $('#products_table tbody tr td').each(function(){
                        let group_id = $(this).data('group_id');
                        let size_id  = $(this).data('size_id');
                        if(group_id && size_id){
                            let output = ``;
                            combo_group_options.forEach((cgo) => {
                                if(group_id == cgo.group_id && size_id == cgo.size_id){
                                    output += `${cgo.prod_name} (${cgo.price})<br>`;
                                }
                            })
                            // console.log(output);
                            $(this).html(output);
                        }
                    });
                }
            },
            error: function (data) {
                console.log(data);
            }
        });

        // Update Combo Group Options
        $('.update_option').on('click', function(){
            let $this = $(this);
            let combo_id = $(this).data('combo_id');
            let group_id = $(this).data('group_id');
            let option_id = $(this).data('option_id');
            const method = 'POST';
            const url = "{{ route('combos.get_group_option_data') }}";
            const headers = { 'X-CSRF-TOKEN': $('input[name="_token"]').val() };
            const data = {
                combo_id,
                group_id,
                option_id
            }
            $.ajax({
                method,
                url,
                headers,
                data, // data to be sent to server
                dataType: 'json', // type of data expecting back from server
                success: function (data) {
                    const { cgov } = data;
                    $("#update_option_name").val($this.text().trim()); // Option Name
                    cgov.forEach((cgo) => {
                        $('.update_product_select').each(function(){
                            if($(this).data('size_id') == cgo.size_id){
                                $(this).val(cgo.product_id);
                                $(this).trigger('change');
                            }
                        })
                        $('.update_price').each(function(){
                            if($(this).data('size_id') == cgo.size_id){
                                $(this).val(cgo.price);
                            }
                        })
                        $('.option_value_id').each(function(){
                            if($(this).data('size_id') == cgo.size_id){
                                $(this).val(cgo.id);
                            }
                        })
                    });
                },
                error: function (data) {
                    console.log(data);
                }
            });

            $('#updateOptionModal-save').on('click', function(e){
                e.preventDefault();
                const method = 'POST';
                const url = "{{ route('combos.update_group_options') }}";
                const headers = { 'X-CSRF-TOKEN': $('input[name="_token"]').val() };
                const data = $('.updateOptionModal-form').serializeArray();
                data.push({name: 'option_id', value: $($this).data('option_id') });
                data.push({name: 'group_id', value: $($this).data('group_id') });
                data.push({name: 'combo_id', value: $('.combo_id').val().trim() });
                $.ajax({
                    method,
                    url,
                    headers,
                    data, // data to be sent to server
                    dataType: 'json', // type of data expecting back from server
                    success: function (data) {
                        const { combo_group_options } = data;
                        window.location.reload();
                        console.log(combo_group_options);
                    },
                    error: function (data) {
                        console.log(data);
                    }
                });
            })
        });

    });
</script>
@endpush