@extends('backend.admin.layouts.app')
@section('content')
    <div class="content-wrapper">

        <section class="content">
            <div class="container-fluid">

                <div class="row ">

                    <div class="col-lg-12">
                        <div class="card mt-2">
                            <div class="card-header">
                                <h5>Add New Product</h5>
                            </div>
                            <div class="card-body">
                                <form id="add_form" method="post" action="{{ route('products.store') }}" enctype="multipart/form-data">
                                    <div class="modal-body">
                                        @csrf

                                        <ul class="nav nav-tabs" id="myTab" role="tablist">
                                            <li class="nav-item">
                                                <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home"
                                                    role="tab" aria-controls="home" aria-selected="true">General</a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" id="profile-tab" data-toggle="tab" href="#variation"
                                                    role="tab" aria-controls="variation"
                                                    aria-selected="false">Variation</a>
                                            </li>

                                        </ul>
                                        <div class="tab-content" id="myTabContent">
                                            <div class="tab-pane fade show active" id="home" role="tabpanel"
                                                aria-labelledby="home-tab">
                                                <div class="row">
                                                    <div class="col">

                                                        <div class="form-group">
                                                            <label for="name">Product Name</label>
                                                            <input type="text" placeholder="Product Name" required
                                                                name="name" class="form-control">
                                                        </div>
                                                    </div>
                                                    <div class="col">
                                                        <div class="form-group">
                                                            <label for="vendor_id">Vendor/Shop</label><br>


                                                            <select name="vendor_id" required class="form-control"
                                                                id="">
                                                                <option value="">Please Select</option>
                                                                @foreach ($vendors as $vendor)
                                                                    <option {{ isset(request()->vendor_id) && request()->vendor_id == $vendor->id ? 'selected' : ''  }} value="{{ $vendor->id }}">
                                                                        {{ $vendor->name }}
                                                                    </option>
                                                                @endforeach
                                                            </select>


                                                        </div>
                                                    </div>

                                                </div>

                                                <div class="row">

                                                    <div class="col-4">
                                                        <div class="form-group">
                                                            <label for="name">Country</label><br>
                                                            <select required name="country_id" class="form-control"
                                                                id="country_id">
                                                                <option value="">Please Select</option>
                                                                @foreach ($countries as $key => $country)
                                                                    <option value="{{ $country->id }}">
                                                                        {{ Str::upper($country->name) }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>

                                                    <div class="col-4">
                                                        <div class="form-group">
                                                            <label for="name">Category</label><br>
                                                            <select required id="category"
                                                                class="form-control">
                                                                <option value="">Select</option>
                                                            </select>
                                                            {{-- <select required name="" class="form-control"
                                                                id="category">
                                                                <option value="">Please Select</option>
                                                                @foreach ($categories as $key => $category)
                                                                    <option value="{{ $category->id }}">
                                                                        {{ $category->name }}
                                                                    </option>
                                                                @endforeach
                                                            </select> --}}
                                                        </div>
                                                    </div>
                                                    <div class="form-group col-md-4">
                                                        <div class="form-group">
                                                            <label for="subcategory">Sub category</label>
                                                            <select required name="category_id" id="subcategory"
                                                                class="form-control">
                                                                <option value="">Select</option>
                                                            </select>
                                                        </div>
                                                    </div>

                                                </div>

                                                <div class="row">
                                                    <div class="form-group col-md-4">
                                                        <div class="form-group">
                                                            <label for="">Purchase Price</label>
                                                            <input type="text" name="purchase_price"
                                                                class="form-control">
                                                        </div>
                                                    </div>
                                                    <div class="form-group col-md-4">
                                                        <div class="form-group">
                                                            <label for="">Sale Price</label>
                                                            <input type="text" required name="sale_price" class="form-control">
                                                        </div>
                                                    </div>
                                                    <div class="form-group col-md-4">
                                                        <div class="form-group">
                                                            <label for="">Discount</label>
                                                            <input type="text" name="discount" value="0"
                                                                class="form-control">
                                                        </div>
                                                    </div>

                                                </div>


                                                <div class="row">
                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <label for="">Unit</label>
                                                            <select name="unit_id" class="form-control" id="">
                                                                <option value="">Please Select</option>
                                                                @foreach ($units as $unit)
                                                                    <option value="{{ $unit->id }}">
                                                                        {{ $unit->name }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <label for="">Weight</label>
                                                            <input type="text" name="weight" id=""
                                                                class="form-control">
                                                        </div>
                                                    </div>

                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <label for="">Size (optional)</label>
                                                            <input type="text" name="size" id=""
                                                                class="form-control">
                                                        </div>
                                                    </div>


                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <label for="">Stock</label>
                                                            <input type="text" name="stock" value="0"
                                                                id="" class="form-control">
                                                        </div>
                                                    </div>

                                                    {{-- <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label for="">Storage Capacity</label>
                                                        <input type="text" name="storage_capacity" id=""
                                                            class="form-control">
                                                    </div>
                                                </div> --}}

                                                    {{-- <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label for="">Memory</label>
                                                        <input type="text" name="memory" id=""
                                                            class="form-control">
                                                    </div>
                                                </div> --}}
                                                </div>


                                                <div class="row">
                                                    <div class="col">
                                                        <div class="form-group">
                                                            <label for="">Short Description</label>
                                                            <textarea name="short_description" id="" class="form-control"></textarea>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row">
                                                    <div class="col">
                                                        <div class="form-group">
                                                            <label for="">Long Description</label>
                                                            <textarea name="long_description" id="" class="form-control textarea"></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col">
                                                        <div class="form-group">
                                                            <label for="">Additional Information</label>
                                                            <textarea name="additional_information" id="" class="form-control textarea"></textarea>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row">
                                                    <div class="col-2">
                                                        <div class="form-group">
                                                            <label for="name">Is Required Delivery Date?</label> &nbsp;
                                                            <input type="checkbox" name="delivery_date">

                                                        </div>
                                                    </div>
                                                    {{-- <div class="col-2">
                                                        <div class="form-group">
                                                            <label for="name">Is Required Map?</label> &nbsp;
                                                            <input type="checkbox" name="map">

                                                        </div>
                                                    </div> --}}
                                                </div>


                                                <div class="form-group">
                                                    <label for="name">Thumbnail</label>
                                                    <input type="file" name="thumbnail"
                                                        class="form-control uploadFile" id="imageUpload">

                                                    <div class="row imagePreview"></div>
                                                </div>

                                                <div class="form-group">
                                                    <label for="name">Gallery Images</label>
                                                    <input type="file" multiple name="gallery_images[]"
                                                        class="form-control uploadFiles" id="imageUpload">

                                                    <div class="row imagePreviews"></div>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="variation" role="tabpanel"
                                                aria-labelledby="variation-tab">
                                                <div class="row">
                                                    <div class="col-12">
                                                        <h5 class="mt-3 font-weight-bold">Size</h5>
                                                        @foreach ($sizes as $key => $row)
                                                            <label class="inline-flex items-center mt-1">
                                                                <input type="checkbox"
                                                                    class="form-checkbox permission-checkbox"
                                                                    name="sizes[]" value="{{ $row->id }}">
                                                                <span class="ml-2 mr-2"> {{ $row->name }}</span>
                                                            </label>
                                                        @endforeach
                                                    </div>
                                                </div>
                                                <hr>

                                                <h5 class="font-weight-bold">Label</h5>
                                                <div class="row mb-1">
                                                    <div class="col-md-4">
                                                        <input type="text" class="form-control" placeholder="Variation Label" name="variation_label">
                                                    </div>
                                                </div>
                                                <table class="table table-bordered" id="dynamic_field">
                                                    <tr>
                                                        <th>Variation</th>
                                                        <th>Price</th>
                                                        <th>
                                                            <button type="button" name="add" id="add"
                                                                class="btn btn-success btn-sm">+</button>
                                                        </th>
                                                    </tr>
                                                    {{-- <tr>
                                                        <td>
                                                            <select name="weights[]" class="form-control" id="">
                                                                @foreach ($weights as $key => $weight)
                                                                    <option value="{{ $weight->id }}">
                                                                        {{ $weight->name }}</option>
                                                                @endforeach
                                                            </select>

                                                        </td>
                                                        <td>
                                                            <input type="text" name="weight_price[]" value=""
                                                                placeholder="Price" class="form-control name_list" />
                                                        </td>


                                                        <td><button type="button" name="add" id="add"
                                                                class="btn btn-success btn-sm">+</button></td>
                                                    </tr> --}}
                                                </table>
                                                <h5 class="font-weight-bold">Color Variation</h5>
                                                <table class="table table-bordered" id="dynamic_field1">
                                                    <tr>
                                                        <th>Color</th>
                                                        <th>Price</th>
                                                        <th>Image</th>
                                                        <th>+</th>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <select name="colors[]" class="form-control" id="" >
                                                                <option value="">Please Select</option>
                                                                @foreach ($colors as $key => $row)
                                                                <option value="{{ $row->id }}" style="background-color: {{ $row->code }};">
                                                                        {{ $row->name }}</option>
                                                                @endforeach
                                                            </select>

                                                        </td>
                                                        <td>
                                                            <input type="text" name="variant_price[]" value=""
                                                                placeholder="Price" class="form-control name_list" />
                                                        </td>
                                                        <td>
                                                            <input type="file" name="variant_images[]" value=""
                                                                class="form-control name_list" />
                                                        </td>

                                                        <td><button type="button" name="add" id="add1"
                                                                class="btn btn-success btn-sm">+</button></td>
                                                    </tr>
                                                </table>


                                            </div>
                                        </div>



                                    </div>
                                    <div class="modal-footer">
                                        <button type="submit" class="btn btn-primary btn_save">Save</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

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

    <script>
        var i = 0;

        $('#add').click(function() {
            i++;
            var weightDropdown = '<select name="weights[]" class="form-control">';
            @foreach ($weights as $weight)
            weightDropdown += '<option value="{{ $weight->id }}">{{ $weight->name }}</option>';
            @endforeach
            weightDropdown += '</select>';

            $('#dynamic_field').append('<tr id="row' + i + '"><td>' + weightDropdown +
                '<td><input type="text" name="weight_price[]" placeholder="Price" class="form-control" /></td>' +
                '<td><button type="button" name="remove" id="' + i +
                '" class="btn btn-danger btn-sm btn_remove">X</button></td></tr>');
        });

        $(document).on('click', '.btn_remove', function() {
            var button_id = $(this).attr("id");
            $('#row' + button_id).remove();
        });
    </script>

    <script>
        var j = 0;

        $('#add1').click(function() {
            j++;
            var colorsDropdown = '<select name="colors[]" class="form-control">';
            @foreach ($colors as $row)
                colorsDropdown += '<option style="background-color: {{ $row->code }}" value="{{ $row->id }}">{{ $row->name }}</option>';
            @endforeach
            colorsDropdown += '</select>';

            $('#dynamic_field1').append('<tr id="row1' + j + '"><td>' + colorsDropdown +
                '</td><td><input type="text" name="variant_price[]" placeholder="Price" class="form-control" /></td>' +
                '<td><input type="file" name="variant_images[]" class="form-control" /></td>' +
                '<td><button type="button" name="remove" id="' + j +
                '" class="btn btn-danger btn-sm btn_remove">X</button></td></tr>');
        });

        $(document).on('click', '.btn_remove', function() {
            var button_id = $(this).attr("id");
            $('#row1' + button_id).remove();
        });
    </script>
    <script>

$('#country_id').on('change', function() {
            var countryId = $(this).val();
            if (countryId) {
                $.ajax({
                    url: '{{ route('categories.byCountry') }}',
                    method: 'GET',
                    data: {
                        countryId: countryId
                    },
                    success: function(data) {
                        console.log(data)
                        $('#category').empty().append(
                            '<option value="">Select Category</option>');
                        $.each(data, function(key, category) {
                            $('#category').append('<option value="' + category.id + '">' +
                                category.name + '</option>');
                        });
                    }
                });
            } else {
                $('#category').empty().append('<option value="">Select Category</option>');
            }
        });

        $('#category').on('change', function() {
            var categoryId = $(this).val();
            if (categoryId) {
                $.ajax({
                    url: '{{ route('subcategories.byCategory') }}',
                    method: 'GET',
                    data: {
                        parent_id: categoryId
                    },
                    success: function(data) {
                        console.log(data)
                        $('#subcategory').empty().append(
                            '<option value="">Select Subcategory</option>');
                        $.each(data, function(key, subcategory) {
                            $('#subcategory').append('<option value="' + subcategory.id + '">' +
                                subcategory.name + '</option>');
                        });
                    }
                });
            } else {
                $('#subcategory').empty().append('<option value="">Select Subcategory</option>');
            }
        });

        $('#category1').on('change', function() {
            var categoryId = $(this).val();
            if (categoryId) {
                $.ajax({
                    url: '{{ route('subcategories.byCategory') }}',
                    method: 'GET',
                    data: {
                        parent_id: categoryId
                    },
                    success: function(data) {
                        console.log(data)
                        $('#subcategory1').empty().append(
                            '<option value="">Select Subcategory</option>');
                        $.each(data, function(key, subcategory) {
                            $('#subcategory1').append('<option value="' + subcategory.id +
                                '">' + subcategory.name + '</option>');
                        });
                    }
                });
            } else {
                $('#subcategory1').empty().append('<option value="">Select Subcategory</option>');
            }
        });

        $(".form-inline").submit(function() {

            return true;
        })


    </script>
@endsection