@extends('layouts.master')

@section('title', 'Add Waste Type')

@section('content')
    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        @if(Session::has('error'))
            <div class="alert alert-danger">
                {{ Session::get('error') }}
            </div>
        @endif
        @if(Session::has('success'))
            <div class="alert alert-success">
                {{ Session::get('success') }}
            </div>
        @endif

        <form method="post" action="{{ route('admin.waste.store') }}">
        @csrf
        <div class="row">
            <div class="col-md-6">
                <div class="card card-primary">
                    <x-input-error :messages="$errors->get('name')" class="mt-2 alert-danger" />
                    <x-input-error :messages="$errors->get('can_put_in')" class="mt-2 alert-danger" />
                    <x-input-error :messages="$errors->get('cant_put_in')" class="mt-2 alert-danger" />
                    <x-input-error :messages="$errors->get('extra_hireage')" class="mt-2 alert-danger" />

                    <div class="card-body">
                        <div class="form-group">
                            <label for="addWasteName">Waste Type Name</label>
                            <x-text-input id="addWasteName" class="form-control block mt-1 w-full" type="text" name="name" :value="old('name')" required autofocus autocomplete="name" placeholder="Enter name" />
                        </div>

                        <div class="form-group">
                            <label for="addWastePutin">What you CAN put in</label>
                            <textarea id="addWastePutin" class="form-control block mt-1 w-full" type="text" name="can_put_in" :value="old('can_put_in')" required placeholder="Enter What you CAN put in" rows="3"></textarea>
                        </div>

                        <div class="form-group">
                            <label for="addWasteNotPutin">What you CAN'T put in</label>
                            <textarea id="addWasteNotPutin" class="form-control block mt-1 w-full" type="text" name="cant_put_in" :value="old('cant_put_in')" required placeholder="Enter What you CAN't put in" rows="3"></textarea>
                        </div>

                        <div class="row">

                            <label class="col-md-12 d-block">Base Price</label>
                            <div class="form-group col-md-6">
                                <div class="input-group block">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            $
                                        </span>
                                    </div>
                                    <input type="text" class="form-control block" name="base_price_7days" :value="old('base_price_7days')" required />
                                    <div class="input-group-append">
                                        <span class="input-group-text">
                                            7 Days
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group col-md-6">
                                <div class="input-group block">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            $
                                        </span>
                                    </div>
                                    <input type="text" class="form-control block" name="base_price_1day" :value="old('base_price_1day')" required />
                                    <div class="input-group-append">
                                        <span class="input-group-text">
                                            1 Day
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="enable-disable" class="d-block">Enable/Disable</label>
                            <input type="checkbox" name="status" checked data-bootstrap-switch data-off-color="danger" data-on-color="success" value="enable">
                        </div>
                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- /.card -->
            </div>

            <div class="col-md-6">
                <div class="card card-primary">
                    <div class="card-body">
                        <div class="form-group">
                            <label>Container Prices</label>
                            @if($containers)
                            <div>
                            @foreach($containers as $container)
                            <!--p>{{ $container->name }} :
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        $
                                    </span>
                                </div>
                                <x-text-input class="form-control block mt-1" type="text" name="container[{{$container->id}}]" :value="old('container[{{$container->id}}]')" required autofocus autocomplete="name" placeholder="Enter Price" />
                                <input type="text" class="form-control block" name="base_price_1day" :value="old('base_price_1day')" required />
                            </p-->

                            <div class="form-group">
                                <label>{{ $container->name }} : </label>
                                <div class="input-group block">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            $
                                        </span>
                                    </div>
                                    <input type="text" class="form-control block daterange_price" name="container[{{$container->id}}]" :value="old('container[{{$container->id}}]')" required />
                                </div>
                            </div>
                            @endforeach
                            </div>
                            @endif
                        </div>
                    </div>

                </div>
            </div>

            <div class="col-md-12">
                <div class="card card-primary">
                    <div class="card-body">

                        <div class="form-group">
                            <label>Extra Hireage</label>
                            <div class="d-flex align-center">
                                <span class="mx-1">$ </span> <x-text-input class="form-control block mt-1" type="text" name="extra_hireage_amount" :value="old('extra_hireage_amount')" required style="width:100px" /> <span class="mx-1"> extra hire per day after </span><x-text-input class="form-control block mt-1" type="text" name="extra_hireage_days" :value="old('extra_hireage_days')" required style="width:100px" /> <span class="mx-1">days</span>
                            </div>
                        </div>

                        <div class="form-group">
                            <label>Excess Weight</label>
                            <div class="d-flex align-center">
                                <span class="mx-1">$ </span> <x-text-input class="form-control block mt-1" type="text" name="excess_weight_amount" :value="old('excess_weight_amount')" required style="width:100px" /> <span class="mx-1"> per tonne additional customer charge for weights exceeding allowance of 150kg per cubic metre. </span>
                            </div>
                        </div>

                        <hr class="my-4" />

                        <div class="dateranger-repeater">
                            <div class="row">
                                <div class="form-group col-md-4">
                                    <label>Select Container Size's</label>
                                    <select name="daterange_prices[0][sizes][]" class="form-control select2 daterange_sizes" multiple="multiple" style="width: 100%;" data-placeholder="Select Container Size">
                                        @if($containers)
                                        @foreach($containers as $container)
                                        <option value="{{$container->id}}">{{ $container->name }}</option>
                                        @endforeach
                                        @endif
                                    </select>
                                </div>
                                <div class="form-group col-md-3">
                                    <label>Dates Between</label>
                                    <div class="input-group block">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">
                                                <i class="far fa-calendar-alt"></i>
                                            </span>
                                        </div>
                                        <input type="text" name="daterange_prices[0][dates]" class="form-control float-right daterange_dates" id="daterangepicker" :value="old('daterange_dates')">
                                    </div>
                                </div>

                                <div class="form-group col-md-3">
                                    <label>Price($)</label>
                                    <div class="input-group block">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">
                                                $
                                            </span>
                                        </div>
                                        <input type="text" class="form-control block daterange_price" name="daterange_prices[0][price]" :value="old('daterange_price')" />
                                    </div>
                                </div>

                                <div class="form-group col-md-2 mt-4"><i class="fa fa-plus text-lg text-success add-repeater-icon mr-4"></i></div>
                            </div>
                        </div>
                        <div class="more-dates"></div>
                    </div>
                </div>
            </div>

            <div class="col-md-12">
                <div class="card-footer text-center">
                    <button type="submit" class="btn btn-success btn-lg">Add Waste</button>
                </div>
            </div>
        </div>
        </form>
      </div>
    </section>
    <!-- /.content -->
@endsection

@section('pageJS')
<script>
    $(function () {
        $("input[data-bootstrap-switch]").each(function(){
            $(this).bootstrapSwitch('state', $(this).prop('checked'));
        });

        $('.select2').select2();


        $('#daterangepicker').daterangepicker();

        $(document).on('click',".add-repeater-icon",function(){
            var parent = $(".dateranger-repeater").html();
            var appendChild = $(".more-dates");
            appendChild.append(parent);
            $(".more-dates .row:last").find('input').val('');
            index_repeater_inputs();

            $(".more-dates .row").each(function() {
                var removeIcon = "<i class='fa fa-times text-lg text-danger remove-repeater-icon'></i>";
                if(!$(this).find(".col-md-2 .remove-repeater-icon").length) {
                    $(this).find(".col-md-2").append(removeIcon);
                }
            });

            $('.select2').select2();

            $(".more-dates .row .col-md-4 .select2:last-child").remove();
        });

        $(document).on('click',".remove-repeater-icon",function(){
            $(this).parent(".col-md-2").parent(".row").remove();
            index_repeater_inputs();
        });

        function index_repeater_inputs() {
            $(".more-dates .row").each(function(index) {
                $(this).find('.daterange_sizes').attr('name', 'daterange_prices[' + (index + 1) + '][sizes]');
                $(this).find('.daterange_dates').attr('name', 'daterange_prices[' + (index + 1) + '][dates]');
                $(this).find('.daterange_price').attr('name', 'daterange_prices[' + (index + 1) + '][price]');
            });

            $('.daterange_dates').daterangepicker();
        }
    });
</script>
@endsection

@section('pageCSS')
<style>
.dateranger-repeater .row, .more-dates .row {
	align-items: center;
}
</style>
@endsection