@extends('layouts.admin.app')

@section('page-title')
    {{ __('Tire Sizes') }}
@endSection

@section('page-nav-title')
    <div class="app-title">
        <div>
            <h1>{{ __('Tire Sizes') }}</h1>
            <p>{{ __('Create Previous Years') }}</p>
        </div>

        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
            <li class="breadcrumb-item"><a href="{{ route('admin.dashboard.index') }}">{{ __('Dashboard') }}</a></li>
            <li class="breadcrumb-item"><a href="{{ route('admin.Products.index', 1) }}">{{ __('Tire Sizes') }}</a></li>
            <li class="breadcrumb-item"><a href="{{ route('admin.Products.available-year', ['id' => $product, 'page' => request()->page]) }}">{{ __('Available Years') }}</a></li>
            <li class="breadcrumb-item"><a href="#">{{ __('Create') }}</a></li>
        </ul>
    </div>
@endsection

@section('css-links')
    {{-- Add any CSS links here if required --}}
@endsection

@section('content')
    @include('includes.dialog')

    <div class="row">
        <div class="col-lg-10 m-auto">
            <div class="tile">
                <h3 class="tile-title">{{ __('Add Years') }}</h3>
                <div class="tile-body">
                    <form method="post" action="{{ route('admin.Products.store-available-years', ['id' => $product, 'page' => request()->page]) }}" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-lg-12">
                                <input type="hidden" value="1" id="counter">

                                <div>
                                    <div class="row" id="RowService">
                                        <div class="col-lg-4">
                                            <div class="form-group">
                                                <label class="control-label">{{ __('Year') }}</label>
                                                <input class="date-own form-control" data-counter="1" id="datepicker1" name="years[]" placeholder="{{ __('Enter Year Available') }}" required>
                                            </div>
                                        </div>
                                        <div class="col-lg-4">
                                            <div class="form-group">
                                                <label class="control-label">{{ __('Discount In (%)') }}</label>
                                                <input class="form-control" type="number" step="0.01" name="discounts[]" placeholder="{{ __('Enter Discount in (%)') }}" required>
                                            </div>
                                        </div>

                                        <div class="col-lg-3" style="margin-top: 28.5px;">
                                            <span data-id="" class="addService btn btn-success btn-sm">
                                                <i class="fas fa-plus"></i> {{ __('Add Year') }}
                                            </span>
                                            <span data-id="" class="removeService btn btn-danger btn-sm">
                                                <i class="fas fa-minus"></i> {{ __('Remove Year') }}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="tile-footer">
                            <button class="btn btn-primary" type="submit"><i class="fa fa-fw fa-lg fa-check-circle"></i> {{ __('Create') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    {{-- Include necessary scripts --}}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://netdna.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.2.0/js/bootstrap-datepicker.min.js"></script>

    {{-- Add custom scripts --}}
    <script>
        $(document).ready(function() {
            // Initialize datepicker
            $(".date-own").datepicker({
                format: "yyyy",
                viewMode: "years",
                minViewMode: "years",
                autoclose: true
            });

            // Add service
            $(document).on("click", ".addService", function() {
                var counter = $("#counter").val();
                $("#counter").val(++counter);

                // Clone the template row
                var htmlElement = $("#RowTemplate").html();
                $("#RowService").append($(htmlElement));

                // Initialize datepicker for the new row
                $("#datepicker" + counter).datepicker({
                    format: "yyyy",
                    viewMode: "years",
                    minViewMode: "years",
                    autoclose: true
                });
            });

            // Remove service
            $(document).on("click", ".removeService", function() {
                var counter = $("#counter").val();
                if (counter <= 1) {
                    return;
                }
                $("#RowService").children().last().remove();
                $("#counter").val(--counter);
            });

        });
    </script>

    {{-- Include any other scripts --}}
    @include('admin.product.template')
@endsection