@extends('user-layouts.user_template')
@section('content')
    <style>
        .hide-bullets {
            list-style: none;
            margin-left: -40px;
            margin-top: 20px;
        }
    </style>


    <div class="content-wrapper" id="viewStoreItem" style="min-height: 916px;">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                @{{ title }}
                <small>{{ $product_array[0]->ProductName }}</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="{{ url('user') }}"><i class="fa fa-home"></i> Home</a></li>
                <li><a href="{{ url('user/store-items') }}"><i class="fa fa-th"></i> Store Items</a></li>
                <li class="active">{{ $product_array[0]->ProductName }}</li>
            </ol>
        </section>
        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-md-7">
                    <div class="box box-primary">
                        <div class="box-header with-border">
                            <button type="button" class="btn btn-default pull-right" data-toggle="modal"
                                data-target="#myModal">Re-arrange / Delete thumbnail</button>
                            <button type="button" class="btn btn-danger pull-right" id="btn_delete_store_id"
                                style="margin-right: 5px;" data-id="{{ $product_array[0]->Id }}">Delete this
                                Item</button>
                        </div>
                        <div class="box-body custom-box-body">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="row">
                                        <div class="col-md-12 text-center">
                                            @foreach ($thumbnails_array as $thumbnail)
                                                @if ($thumbnail->ImageClass == 'active')
                                                    <img style="height:400px"
                                                        src="{{ config('site_config.images_url') }}/{{ $thumbnail->Image . '?t=' . time() }}"
                                                        id="main-thumbnail">
                                                @endif
                                            @endforeach
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <ul class="hide-bullets">
                                                <li class="col-sm-3 col-xs-4">
                                                    <a class="thumbnail btn-add-thumbnail"
                                                        style="border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; margin-bottom: -28px; cursor: pointer;">
                                                        <!-- <span class="close">&times;</span> -->
                                                        <img class="img img-responsive product-center "
                                                            style="height: 65.45px;"
                                                            src="{{ asset('/public/images/add-new-img.svg') }}" />
                                                        <!-- <p class="center">Add Image</p> -->
                                                        <p class="text-center">
                                                            Add Image
                                                        </p>
                                                    </a>
                                                </li>
                                                @foreach ($thumbnails_array as $thumbnail)
                                                    <li class="col-sm-3 col-xs-4">
                                                        <a class="thumbnail a_thumbnail {{ $thumbnail->ImageClass }}"
                                                            style="border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; margin-bottom: -28px;">
                                                            <!-- <span class="close">&times;</span> -->
                                                            <img class="img img-responsive product-center image-thumbnails"
                                                                style="height: 59.45px;"
                                                                src="{{ config('site_config.images_url') }}/{{ $thumbnail->Image . '?t=' . time() }}" />
                                                        </a>
                                                        <div class="funkyradio">
                                                            <div class="funkyradio-primary">
                                                                <input type="radio" id="{{ 'radio-' . $thumbnail->Id }}"
                                                                    data-product-id="{{ $product_array[0]->Id }}"
                                                                    data-id="{{ $thumbnail->Id }}" name="setActive"
                                                                    @if ($thumbnail->ImageClass != null) checked @endif />
                                                                <label for="{{ 'radio-' . $thumbnail->Id }}"
                                                                    style="border-top-left-radius: 0px; border-top-right-radius: 0px;">active</label>
                                                            </div>
                                                        </div>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <!-- <div class="col-md-5">
                                                                    asdasdadadsaad
                                                                </div> -->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-5">
                    <div class="box box-primary">
                        <div class="box-header with-border">
                            <h3 class="box-title">
                                Item Details
                            </h3>
                        </div>
                        <form id="frm-item-details">
                            <!-- <input type="hidden" name="design_code" class="form-control" value=""> -->
                            <div class="box-body custom-box-body">
                                <div class="row">
                                    <div class="col-md-12">
                                        <input type="hidden" class="form-control" name="item_url"
                                            value="{{ $product_array[0]->ProductURL }}" placeholder="Item Name">
                                        <div class="form-group">
                                            <label>SKU</label>
                                            <input type="text" class="form-control" name="sku"
                                                value="{{ $product_array[0]->ProductCode }}" placeholder="SKU">
                                        </div>
                                        <div class="form-group">
                                            <label>Item Name</label>
                                            <input type="text" class="form-control" name="itemName"
                                                value="{{ $product_array[0]->ProductName }}" placeholder="Item Name">
                                        </div>
                                        <div class="form-group">
                                            <label>Item Desription</label>
                                            <textarea class="form-control" name="itemDescription">{{ $product_array[0]->ProductDescription }}</textarea>
                                        </div>
                                        <!-- <div class="form-group">
                                                                        
                                                                <div class="checkbox checkbox-inline">
                                                                    <input type="checkbox" class="styled" id="sale_chk" name="sale_chk" checked >
                                                                    <label for="sale_chk"> Sell Item</label>
                                                                </div>
                                                            
                                                                <div class="checkbox checkbox-inline">
                                                                    <input type="checkbox" class="styled" id="publish_chk" name="publish_chk" >
                                                                    <label for="publish_chk"> Publish Design</label>
                                                                </div>
                                                                
                                                            </div> -->
                                        <div class="form-group">
                                            <label>Item Price</label>
                                            <input id="item_price" name="item_price" class="form-control price_format"
                                                type="text" value="{{ $product_array[0]->ProductPrice }}"
                                                data-error="#err-price" />
                                        </div>
                                        <div class="form-group">
                                            <label>Item Form</label>
                                            <select class="form-control" name="itemForm" v-model="itemFormSelected"
                                                @change="handleSelectItemForm">
                                                <option value="jersey-and-shorts-form"
                                                    @if ($product_array[0]->ProductForm == 'jersey-and-shorts-form') selected @endif>Jersey and Shorts
                                                    Form</option>
                                                <option value="tshirt-form"
                                                    @if ($product_array[0]->ProductForm == 'tshirt-form') selected @endif>T-Shirt Form
                                                </option>
                                                <option value="quantity-form"
                                                    @if ($product_array[0]->ProductForm == 'quantity-form') selected @endif>Quantity Form
                                                </option>
                                                <option value="name-number-form"
                                                    @if ($product_array[0]->ProductForm == 'name-number-form') selected @endif>Name and Number
                                                    Form</option>
                                                <option value="name-number-size-form"
                                                    @if ($product_array[0]->ProductForm == 'name-number-size-form') selected @endif>Name, Number and
                                                    Size Form</option>
                                                <option value="number-size-form"
                                                    @if ($product_array[0]->ProductForm == 'number-size-form') selected @endif>Number and Size
                                                    Form</option>
                                                <option value="number-form"
                                                    @if ($product_array[0]->ProductForm == 'number-form') selected @endif>Number Only Form
                                                </option>
                                                <option value="name-size-form"
                                                    @if ($product_array[0]->ProductForm == 'name-size-form') selected @endif>Name and Size Form
                                                </option>
                                                <option value="jersey-and-shorts-quantity-form"
                                                    @if ($product_array[0]->ProductForm == 'jersey-and-shorts-quantity-form') selected @endif>Jersey, Shorts
                                                    and Quantity Form</option>
                                                <option value="number-jersey-shorts-form"
                                                    @if ($product_array[0]->ProductForm == 'number-jersey-shorts-form') selected @endif>Number, Jersey
                                                    and Shorts Form</option>
                                                <option value="roster-name-number-size-form"
                                                    @if ($product_array[0]->ProductForm == 'roster-name-number-size-form') selected @endif>Roster and Size
                                                    Form</option>
                                            </select>
                                        </div>

                                        <div class="form-group d-flex"
                                            v-if="itemFormSelected == 'roster-name-number-size-form'">
                                            <button type="button" class="btn btn-success btn-sm"
                                                @click="addRosterModal">
                                                <i class="fa fa-plus"></i> Add Roster
                                            </button>
                                            <button type="button" class="btn btn-warning btn-sm"
                                                @click="viewRosterModal">
                                                <i class="fa fa-eye"></i> View Roster
                                            </button>
                                        </div>
                                        <div class="form-group">
                                            <label>Available Size</label>
                                            <select class="form-control select2" data-error="#err_available_size"
                                                data-placeholder="Select Size" name="available_size[]"
                                                multiple="multiple" required>
                                                <option value="toddler"
                                                    @if (in_array('toddler', $available_size)) selected @endif>Toddler</option>
                                                <option value="youth" @if (in_array('youth', $available_size)) selected @endif>
                                                    Youth</option>
                                                <option value="adult" @if (in_array('adult', $available_size)) selected @endif>
                                                    Adult</option>
                                                <option value="mask" @if (in_array('mask', $available_size)) selected @endif>
                                                    Mask</option>
                                                <option value="gaiter" @if (in_array('gaiter', $available_size)) selected @endif>
                                                    Gaiter</option>
                                                <option value="buckethat"
                                                    @if (in_array('buckethat', $available_size)) selected @endif>Buckethat
                                                </option>
                                                <option value="none" @if (in_array('none', $available_size)) selected @endif>
                                                    None</option>
                                            </select>
                                            <span id="err_available_size"></span>
                                        </div>
                                        <div class="form-group">
                                            <label>Item Quantity <small>(Optional)</small></label>
                                            <input id="item_quantity" name="item_quantity" class="form-control"
                                                type="number" min="0"
                                                value="{{ $product_array[0]->ProductAvailableQty }}"
                                                data-error="#err-quantity" />
                                        </div>
                                        {{-- {{ var_dump($product_array[0]) }} --}}
                                        <div class="form-group">
                                            <label>Item Privacy</label>
                                            <select class="form-control" name="item_privacy">
                                                <option value="public" @if ($product_array[0]->PrivacyStatus == 'public') selected @endif>
                                                    Public</option>
                                                <option value="private"
                                                    @if ($product_array[0]->PrivacyStatus == 'private') selected @endif>Private</option>
                                            </select>
                                        </div>

                                        <div class="form-group">
                                            <label>Select Shipping Category</label>
                                            <select class="form-control" name="shipping_cost" required>
                                                <option value="0">None</option>
                                                @foreach ($shipping_cost as $sc)
                                                    <option value="{{ $sc->Id }}"
                                                        @if ($sc->Id == $product_array[0]->ShippingCostId) selected @endif>
                                                        {{ $sc->DisplayName }}</option>
                                                @endforeach
                                            </select>
                                            <span id="err_available_size"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="box-footer">
                                <!-- <button type="submit" class="btn btn-default">Cancel</button> -->
                                <button type="submit" class="btn btn-primary pull-right">Save changes</button>
                            </div>
                        </form>
                    </div>
                </div>

            </div>
        </section>
        <!-- /.content -->

        <!-- Modal -->
        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Item Images</h4>
                    </div>
                    <div class="modal-body">
                        <table class="table table-bordered table-condensed">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th>Image</th>
                                    <th class="col-sm-2 text-center">Action</th>
                                </tr>
                            </thead>
                            <tbody id="sortable">
                                @foreach ($thumbnails_array as $thumbnail)
                                    <tr id="{{ 'item-' . $thumbnail->Id }}">
                                        <td class="text-center" style="width: 50px"><i class="fa fa-bars"></i></td>
                                        <td><img class="img img-responsive product-center" style="height: 59.45px;"
                                                src="{{ config('site_config.images_url') }}/{{ $thumbnail->Image . '?t=' . time() }}" />
                                        </td>
                                        <td class="text-center">
                                            <!-- <button class="btn btn-default btn-xs btn-edit-clipart" data-id="#"><i class="fa fa-edit"></i></button> -->
                                            <button class="btn btn-default btn-sm btn-delete-item-image"
                                                data-id="{{ $thumbnail->Id }}" data-filename="{{ $thumbnail->Image }}"
                                                title="Delete Image"><i class="fa fa-trash"></i></button>
                                        </td>
                                    </tr>
                                @endforeach


                            </tbody>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" id="btn_save_thumbnail_sorting">Save
                            Changes</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>


        <div class="modal fade" id="modal_add_thumbnail" role="dialog">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <form id="frm_add_new_images">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Add Image</h4>
                        </div>
                        <div class="modal-body">
                            <div class="row grid-divider">
                                <div class="col-sm-4">
                                    <div class="col-padding">
                                        <h3>Select Image(s)</h3>
                                        <div class="form-group">
                                            <input type="hidden" name="_id" value="{{ $product_array[0]->Id }}" />
                                            <input type="file" class="form-control" id="upload_images"
                                                name="upload_images[]" multiple accept="image/*" />
                                        </div>
                                        <div class="form-group">
                                            <button type="button" id="clear_frm_add_new_images"
                                                class="btn btn-default btn-block">Clear</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-8">
                                    <div class="col-padding">
                                        <h3>Preview</h3>
                                        <div class="col-md-12">
                                            <ul class="hide-bullets small-preview-thumb">
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" id="btn_submit_new_item_image" class="btn btn-primary">Submit</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="modal fade" id="modalAddRoster" role="dialog" data-backdrop="static" data-keyboard="false">
            <div class="modal-dialog">
                <div class="modal-content">
                    {{-- @{{ roster }} --}}
                    <form @submit.prevent="onRosterSubmit">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Add Roster</h4>
                        </div>
                        <div class="modal-body">
                            <table class="table">
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Number</th>
                                    <th></th>
                                </tr>
                                <tr v-for="(item, i) in roster" :key="i">
                                    <td style="padding: 0px 0px 0px 8px;">@{{ i + 1 }}</td>
                                    <td style="padding: 0px 0px 0px 8px;"><input type="text" placeholder="Player Name"
                                            v-model="roster[i]['Name']" class="form-control"></td>
                                    <td style="padding: 0px 8px 0px 0px;"><input type="text"
                                            placeholder="Player Number" v-model="roster[i]['Number']" maxlength="2"
                                            class="form-control"></td>
                                    <td style="padding: 0px 8px 0px 0px; text-align: end;">
                                        <button type="button" @click="removeRosterRow(i)" :disabled="roster.length <= 1"
                                            class="btn btn-danger"><i class="fa fa-times-circle-o"></i></button>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="4" style="padding: 8px 8px 0px 8px; text-align: end;">
                                        <button type="button" @click="addRosterRow" class="btn btn-primary">Add
                                            Row</button>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary" :disabled="isSubmit">
                                <i v-if="isSubmit" class="fa fa-spinner fa-spin"></i> Submit

                            </button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="modal fade" id="modalViewRoster" role="dialog" data-backdrop="static" data-keyboard="false">
            <div class="modal-dialog">
                <div class="modal-content">
                    <form @submit.prevent="onRosterUpdate">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Roster</h4>
                        </div>
                        <div class="modal-body">
                            <div style="text-align: end;">
                                <button type="button" @click.prevent="getRoster" class="btn btn-success" :disabled="isRefresh">
                                    <i v-if="isRefresh" class="fa fa-spinner fa-spin"></i> Refresh
    
                                </button>
                            </div>
                            <table class="table">
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Number</th>
                                    <th></th>
                                </tr>
                                <tr v-for="(item, i) in currentRoster" :key="i">
                                    <td style="padding: 0px 0px 0px 8px;">@{{ i + 1 }}</td>
                                    <td style="padding: 0px 0px 0px 8px;"><input type="text" placeholder="Player Name"
                                            v-model="currentRoster[i]['Name']" class="form-control"></td>
                                    <td style="padding: 0px 8px 0px 0px;"><input type="text" maxlength="2"
                                            placeholder="Player Number" v-model="currentRoster[i]['Number']"
                                            class="form-control"></td>
                                    <td style="padding: 0px 8px 0px 0px; text-align: end;">
                                        <button type="button" @click="deleteRoster(i, item)" class="btn btn-danger"><i
                                                class="fa fa-trash-o"></i></button>
                                    </td>
                                </tr>
                                {{-- <tr>
                                    <td colspan="4" style="padding: 8px 8px 0px 8px; text-align: end;">
                                        <button type="button" @click="addRosterRow" class="btn btn-primary">Add
                                            Row</button>
                                    </td>
                                </tr> --}}
                            </table>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary" :disabled="isSubmit">
                                <i v-if="isSubmit" class="fa fa-spinner fa-spin"></i> Update

                            </button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>



    <script>
        new Vue({
            el: '#viewStoreItem',
            data: {
                title: "Store Item", // Passing Laravel data to Vue
                showAddRoster: false,
                itemFormSelected: {!! json_encode($product_array[0]->ProductForm) !!},
                roster: [{
                    Name: "",
                    Number: "",
                    ProductId: {!! json_encode($product_array[0]->Id) !!}
                }],

                currentRoster: {!! json_encode($roster) !!},
                toBeDeletedRoster: [],
                isSubmit: false,
                isRefresh: false
            },

            methods: {
                handleSelectItemForm() {
                    console.log('Selected option:', this.itemFormSelected);
                },

                addRosterRow() {
                    this.roster.push({
                        Name: "",
                        Number: "",
                        ProductId: {!! json_encode($product_array[0]->Id) !!}
                    })
                },

                deleteRoster(i, item) {
                    this.currentRoster.splice(i, 1);
                    this.toBeDeletedRoster.push(item.Id);
                },

                async onRosterUpdate() {
                    // this.isSubmit = true;

                    if (this.toBeDeletedRoster.length > 0) {
                        this.postDeleteRoster();
                    }

                    await this.updateRoster();

                    // this.isSubmit = false;
                },

                async postDeleteRoster() {

                    const token = $('meta[name="csrf_token"]').attr('content')
                    axios.post("{{ url('user/roster-delete') }}", {
                            data: this.toBeDeletedRoster
                        }, {
                            headers: {
                                "Content-Type": "application/json",
                                'X-CSRF-TOKEN': token
                            }
                        })
                        .then(response => {
                            this.isSubmit = false;
                            console.log(response.data);
                            // alert("Roster is successfully saved.");
                            // $('#modalAddRoster').modal('hide');
                            // this.roster = [{
                            //     Name: "",
                            //     Number: "",
                            //     ProductId: {!! json_encode($product_array[0]->Id) !!}
                            // }]

                        })
                        .catch(error => {
                            console.error(error); // Handle error
                            this.isSubmit = false; // Hide loading indicator
                        });
                },

                async onRosterSubmit() {
                    this.isSubmit = true;
                    const token = $('meta[name="csrf_token"]').attr('content')
                    axios.post("{{ url('user/roster') }}", {
                            data: this.roster
                        }, {
                            headers: {
                                "Content-Type": "application/json",
                                'X-CSRF-TOKEN': token
                            }
                        })
                        .then(response => {
                            this.isSubmit = false;
                            console.log(response.data);

                            const res = response.data;

                            if (!res.status) {
                                alert(res.message);
                                return
                            }

                            alert(res.message);
                            $('#modalAddRoster').modal('hide');
                            this.roster = [{
                                Name: "",
                                Number: "",
                                ProductId: {!! json_encode($product_array[0]->Id) !!}
                            }]

                        })
                        .catch(error => {
                            console.error(error); // Handle error
                            this.isSubmit = false; // Hide loading indicator
                        });
                },

                async updateRoster() {
                    this.isSubmit = true;
                    const token = $('meta[name="csrf_token"]').attr('content')
                    axios.post("{{ url('user/roster-update') }}", {
                            data: this.currentRoster
                        }, {
                            headers: {
                                "Content-Type": "application/json",
                                'X-CSRF-TOKEN': token
                            }
                        })
                        .then(response => {
                            this.isSubmit = false;
                            console.log(response.data);
                            alert("Roster is successfully updated.");
                            $('#modalViewRoster').modal('hide');


                        })
                        .catch(error => {
                            console.error(error); // Handle error
                            this.isSubmit = false; // Hide loading indicator
                        });
                },

                async getRoster() {
                    this.isRefresh = true;
                    const productId = {!! json_encode($product_array[0]->Id) !!}
                    const token = $('meta[name="csrf_token"]').attr('content')
                    axios.get("{{ url('user/roster') }}", {
                            params: {
                                'product-id': productId
                            }
                        }, {
                            headers: {
                                "Content-Type": "application/json",
                                'X-CSRF-TOKEN': token
                            }
                        })
                        .then(response => {
                            this.isRefresh = false;
                            console.log("getRoster", response)
                            this.currentRoster = response.data;
                        })
                        .catch(error => {
                            console.error(error); // Handle error
                            this.isRefresh = false;
                        });
                },

                removeRosterRow(i) {
                    this.roster.splice(i, 1);
                },

                addRosterModal() {
                    $('#modalAddRoster').modal('show');
                },

                viewRosterModal() {
                    $('#modalViewRoster').modal('show');
                    // this.getRoster()
                }


            },
        });
    </script>
@endsection