@extends('adminlte::page')
@push('css')
            <link rel="stylesheet" href="{{ asset('vendor/datepicker/datepicker.min.css') }}">
            <script>
                var dateAdded = {};

                function pushValueToRegion(date_picker_val, region_id) {
                    if (Array.isArray(dateAdded[region_id]))
                        dateAdded[region_id].push(date_picker_val);
                    else
                        dateAdded[region_id] = [ date_picker_val ];
                }

                function removeValueFromRegion(date_picker_val, region_id) {

                    dateAdded[region_id]= dateAdded[region_id].filter(function(ele){
                        return ele != date_picker_val;
                    });
                }
            </script>
@endpush
@section('title', 'Add New Category')
@section('content')
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Create Plan</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Home</a></li>
                    <li class="breadcrumb-item active">Create Plan</li>
                </ol>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card card-primary">
                    <div class="card-header">
                        <h3 class="card-title">Create Plan</h3>
                    </div>
                    <form method="POST" action="{{ route('admin.membership.store') }}">
                        @csrf
                        <div class="card-body">
                            <div class="form-group">
                                <label for="category_id">Category</label>
                                <select class="form-control select2" name="category_id">
                                    <option value="">Select Category</option>
                                    @foreach ($categories as $category)
                                        <option value="{{ $category->id }}" {{ (old('category_id') == $category->id ? 'selected' : '') }}>{{ $category->name }}</option>
                                    @endforeach
                                </select>
                                @error('category_id')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="row">
                                <ul class="nav nav-pills flex-column mt-3 col-md-3 col-sm-12 mt-3 justify-content-center">
                                    @foreach ($regions as $key => $region)
                                        <li class="nav-item">
                                            <a class="nav-link {{ validateMemberShipForm($key, $region->id, 'tab_link', $errors ) }}" href="#{{ 'tab-'.$region->id}}" data-toggle="tab">{{ $region->name }} </a>
                                        </li>
                                    @endforeach
                                </ul>
                                <div class="tab-content col-md-9 col-sm-12 mt-3 border p-3">
                                    @php $pricing_package = ['banner', 'offer', 'platinum', 'gold', 'silver']; @endphp
                                    @foreach ($regions as $key => $region)
                                        <div class="tab-pane {{ validateMemberShipForm($key, $region->id, 'tab', $errors ) }}" id="{{ 'tab-'.$region->id }}">

                                                <div class="col-md-12">
                                                    <label for="type">{{ $region->name }} Region</label>

                                                    @foreach($pricing_package as $package)
                                                        @if($package == 'banner' || $package == 'offer'))
                                                            <div class="row align-items-center">
                                                                <div class="col-md-3">
                                                                    {{ ucwords($package) }} / Per Day
                                                                </div>
                                                                <div class="col-md-9">
                                                                    <div class="form-group">
                                                                        <input type="number" class="form-control" name="{{ $package }}[{{ $region->id }}]" value="{{ old($package.".".$region->id) ? old($package.".".$region->id) : ''}}" min="1">
                                                                        @error('banner.'.$region->id)
                                                                            <span class="text-danger d-block">{{ $message }}</span>
                                                                        @enderror
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            @if($package != 'offer')
                                                                <div class="row align-items-center">
                                                                    <div class="col-md-3">
                                                                        {{ ucwords($package) }} / Extended Price By Date
                                                                    </div>
                                                                    <div class="col-md-3">
                                                                        <div class="form-group">
                                                                            <input id="form-now" autocomplete="off" type="number" class="form-control datepicker datepicker_{{ $region->id }}" min="1">

                                                                        </div>
                                                                    </div>
                                                                    <div class="col-md-3">
                                                                        <div class="form-group">
                                                                            <a href="javascript:void(0)" class="btn btn-primary" id="add__price" data-region-id="{{  $region->id }}"> Add Price For Date</a>
                                                                        </div>
                                                                    </div>

                                                                </div>

                                                                <div class="row extended_price_{{ $region->id }} ">
                                                                    @if(!empty(old('banner_extended.'.$region->id)))
                                                                        @foreach( old('banner_extended.'.$region->id.'.date') as $key => $val)
                                                                            <script>
                                                                                pushValueToRegion('{{ $val }}', '{{ $region->id }}')
                                                                            </script>
                                                                            <div class="col-md-12">
                                                                                <div class="row mb-2">
                                                                                    <div class="col-md-3 offset-3">
                                                                                        <input type="text" name="banner_extended[{{ $region->id }}][date][]" class="form-control" value = "{{ $val ? $val : '' }}" readonly>
                                                                                        @error('banner_extended.'.$region->id.'.date.'.$key)
                                                                                            <span class="text-danger d-block">{{ $message }}</span>
                                                                                        @enderror
                                                                                    </div>
                                                                                    <div class="col-md-3">
                                                                                        <input type="number" name="banner_extended[{{ $region->id }}][price][]" class="form-control"  value = "{{ old('banner_extended.'.$region->id.'.price.'.$key) ? old('banner_extended_price.'.$region->id.'.'.$key)  : '' }}" >
                                                                                        @error('banner_extended.'.$region->id.'.price.'.$key)
                                                                                            <span class="text-danger d-block">{{ $message }}</span>
                                                                                        @enderror
                                                                                    </div>
                                                                                    <div class="col-md-3">
                                                                                        <a href="javascript:void(0)" class="btn btn-danger remove_banner_date" data-region-id="{{ $region->id }}" data-date="{{ $val }}" onclick="return $(this).closest('.row').remove()"> <i class="fa fa-window-close"></i> </a>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        @endforeach
                                                                    @endif
                                                                </div>
                                                            @endif
                                                        @else
                                                            <div class="row mt-2 align-items-center">
                                                                <div class="col-md-3">
                                                                    {{ ucwords($package) }} Price
                                                                </div>
                                                                <div class="col-md-3">

                                                                    <input type="number" class="form-control" name="{{ $package }}[3][{{ $region->id }}]"  value="{{ old($package.".3.".$region->id) ? old($package.".3.".$region->id) : ''}}" min='1'>
                                                                    <span>3 Months</span>
                                                                    @error($package.'.3.'.$region->id)
                                                                            <span class="text-danger d-block">{{ $message }}</span>
                                                                    @enderror
                                                                </div>
                                                                <div class="col-md-3">
                                                                    <input type="number" class="form-control" name="{{ $package }}[6][{{ $region->id }}]"  value="{{ old($package.".6.".$region->id) ? old($package.".6.".$region->id) : ''}}" min='1'>
                                                                    <span>6 Months</span>
                                                                    @error($package.'.6.'.$region->id)
                                                                        <span class="text-danger">{{ $message }}</span>
                                                                    @enderror
                                                                </div>
                                                                <div class="col-md-3">
                                                                    <input type="number" class="form-control"  name="{{ $package }}[12][{{ $region->id }}]"  value="{{ old($package.".12.".$region->id) ? old($package.".12.".$region->id) : ''}}" min='1'>
                                                                    <span>12 Months</span>
                                                                    @error($package.'.12.'.$region->id)
                                                                        <span class="text-danger">{{ $message }}</span>
                                                                    @enderror
                                                                </div>
                                                            </div>
                                                        @endif
                                                    @endforeach


                                                </div>

                                        </div>
                                    @endforeach
                                </div>
                            </div>


                        </div>
                        <div class="card-footer">
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

<div class='price__clone d-none'>
    <div class="col-md-12">
        <div class="row mb-2">
            <div class="col-md-3 offset-3">
                <input type="text" class="form-control" id="" >
            </div>
            <div class="col-md-3">
                <input type="number" class="form-control"  >
            </div>
            <div class="col-md-3">
                <a href="javascript:void(0)" class="btn btn-danger remove_banner_date" onclick="return $(this).closest('.row').remove()"> <i class="fa fa-window-close"></i> </a>
            </div>
        </div>
    </div>

</div>
@endsection

@push('js')
    <script src="{{ asset('vendor/datepicker/datepicker.min.js') }}"></script>
    <script src="{{ asset('vendor/moment/moment.min.js') }}"></script>
@endpush

@section('js')
    <script>
        $(document).ready(function(){
            $('.datepicker').datepicker({
                    format: "yyyy-mm-dd",
                    autoclose: true
            });
        });


        $(document).on('click', '.remove_banner_date', function() {
            removeValueFromRegion($(this).data("date"), $(this).data("region-id"));
        });

        $(document).on('click', '#add__price', function() {

            let region_id = $(this).data('region-id');
            let date_picker_val = $('.datepicker_'+region_id).val();

            d = new Date(date_picker_val);

            if (Object.prototype.toString.call(d) === "[object Date]")
            {
                console.log(d);
                if (isNaN(d.getTime())) {
                    return toastr.error('Date Already Added Or Invalid Date');
                }
            }

            if ($.inArray(date_picker_val , dateAdded[region_id]) > -1 )
            {

                toastr.error('Date Already Added Or Invalid Date');
                return;
            }

            let clone = $('.price__clone').clone();

            $(clone).find("input:first").attr("value", date_picker_val);

            $(clone).find("input:first").prop("readonly", true);
            $(clone).find("input:first").attr("name", "banner_extended["+ region_id +"][date][]");
            $(clone).find("input:last").attr("name", "banner_extended["+ region_id +"][price][]");

            pushValueToRegion(date_picker_val, region_id);
            $(clone).find(".remove_banner_date").attr("data-date", date_picker_val);
            $(clone).find(".remove_banner_date").attr("data-region-id", region_id);

            $('.extended_price_'+ region_id).addClass(["border", "p-2"]);
            $('.extended_price_'+ region_id).append($(clone).html());
            date_picker_val = '';

        });
    </script>
@endsection