@extends('layouts.master')

@section('title', 'Add Container')

@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.container.store') }}" enctype="multipart/form-data">
        @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('description')" class="mt-2 alert-danger" />
                    <x-input-error :messages="$errors->get('image')" class="mt-2 alert-danger" />

                        <div class="card-body">
                            <div class="form-group">
                                <label for="addContainerName">Size</label>
                                <x-text-input id="addContainerName" 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="addContainerQuantity">Quantity</label>
                                <x-text-input id="addContainerQuantity" class="form-control block mt-1 w-full" type="number" name="quantity" :value="old('quantity')" required autofocus autocomplete="name" placeholder="Enter Quantity" />
                            </div-->

                            <div class="form-group">
                                <label for="addContainerDescription">Description</label>
                                <textarea id="addContainerDescription" class="form-control block mt-1 w-full" type="text" name="description" required placeholder="Enter Description" />{{ old('description') }}</textarea>
                            </div>

                            <div class="form-group">
                                <label for="addContainerImage">Image</label>
                                <input id="addContainerImage" class="form-control mt-1 w-full" type="file" name="image" :value="old('image')" placeholder="Enter Image" /></textarea>
                            </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 class="card-footer">
                            <button type="submit" class="btn btn-primary">Add Size</button>
                        </div>
                </div>
                <!-- /.card -->
            </div>

            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <label>Waste Types</label>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            @if($wastes)
                            <div>
                            @foreach($wastes as $waste)
                            <div class="row">
                                <label class="col-md-12 d-block">{{ $waste->name }} : </label>
                                <div class="form-group col-md-6">
                                    <div class="input-group block">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">
                                                Total Qty
                                            </span>
                                        </div>
                                        <input type="number" class="form-control block" name="wastes_qty[{{$waste->id}}][total]" :value="old('wastes_qty[{{$waste->id}}]')" />
                                    </div>
                                </div>
                                <div class="form-group col-md-6">
                                    <div class="input-group block">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">
                                                Available Qty
                                            </span>
                                        </div>
                                        <input type="number" class="form-control block" name="wastes_qty[{{$waste->id}}][avl]" :value="old('wastes_qty[{{$waste->id}}]')" />
                                    </div>
                                </div>
                            </div>
                            @endforeach
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>


        </form>
      </div>
    </section>
    <!-- /.content -->
@endsection

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