@extends('layouts.vertical', ["page_title"=> "Add & Edit Products"])

@section('css')
<!-- third party css -->
<link href="{{asset('assets/libs/select2/select2.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/libs/multiselect/multiselect.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{ URL::asset('assets/libs/dropify/dropify.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/libs/flatpickr/flatpickr.min.css')}}" rel="stylesheet" type="text/css" />
<!-- third party css end -->
@endsection

@section('content')
<!-- Start Content-->
<div class="container-fluid">   
    <!-- end page title -->
@if(session()->has('message'))
    <div class="alert alert-success mt-3">
        {{ session()->get('message') }}
    </div>
@endif
    <div class="row mt-3">
        <div class="col-xl-12">
            <div class="card">
                <form method="post" action="" id="form-availiblity" enctype="multipart/form-data">
                @csrf
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <h4 class="page-title">Manage Metrics for Contest: {{$item->name}}</h4>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="float-end">
                                <a href="/detailingcontests" class="btn btn-dark waves-effect waves-light">Back</a>
                                <button type="submit" class="btn btn-success waves-effect waves-light">Submit</button>
                            </div>
                        </div>
                        <div class="col-md-12 mb-3">
                            <label for="" class="form-label">Metrics Mapping Auth Key</label>
                            <input type="text" class="form-control" id="field-metric_mapping_auth_key" name="metric_mapping_auth_key" value="{{isset($item->metric_mapping_auth_key) ? $item->metric_mapping_auth_key : ''}}" required>
                        </div>
                        <div class="col-md-12 mb-3">
                        <label for="" class="form-label">Metrics Mapping</label>
                        <div><button type="button" class="btn btn-info btn-xs float-end" id="btn-add-mapping">Add Mapping</button></div>
                                    <table class="table mb-0" id="table-metrics">
                                        <thead>
                                        <tr>
                                            <th>Metric</th>
                                            <th>Parameter</th>
                                            <th>Action</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @if(isset($item->metrics))
                                        @foreach($item->metrics as $map)
                                        <tr>
                                            <td>
                                                <select class="form-control" name="metric[]" required>
                                                    <option value=""> -- Select Metric -- </option>
                                                    @foreach($metrics as $k => $v)
                                                    <option value="{{$k}}" {{$map->metric == $k ? 'selected="selected"':''}}>{{$v}}</option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td>
                                                <select name="parameter[]" class="form-control parameterdropdown">
                                                <option value=""> -- Select Parameter -- </option>
                                                @foreach($parameters as $k => $v)
                                                <option value="{{$k}}" {{$map->parameter == $k ? 'selected="selected"':''}}>{{$v}}</option>
                                                @endforeach
                                                </select>
                                            </td>
                                            <th><button type="button" class="btn btn-danger waves-effect waves-light btn-remove"><i class="mdi mdi-close"></i></button></th>
                                        </tr>
                                        @endforeach
                                        @endif
                                        </tbody>
                                    </table>
                        </div>
                        <div class="col-md-12 mb-3">
                            <div class="float-end">
                                <a href="/detailingcontests" class="btn btn-dark waves-effect waves-light">Back</a>
                                <button type="submit" class="btn btn-success waves-effect waves-light">Submit</button>
                            </div>
                        </div>
                    </div>
                </div> <!-- end card-body -->
                </form>
            </div> <!-- end card-->
        </div> <!-- end col -->
    </div>
</div>
<style type="text/css">
    .ms-container {max-width: 100%}
</style>
@endsection

@section('script')
<script src="{{asset('assets/libs/select2/select2.min.js')}}"></script>
<script src="{{asset('assets/libs/multiselect/multiselect.min.js')}}"></script>
<script src="{{asset('assets/libs/multiselect/jquery.quicksearch.js')}}"></script>
<script src="{{ URL::asset('assets/libs/dropify/dropify.min.js')}}"></script>
<script src="{{asset('assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.js')}}"></script>
<script src="{{asset('assets/libs/flatpickr/flatpickr.min.js')}}"></script>

<script type="text/javascript">
    $(document).ready(function(){
        $('[data-toggle="select2"]').select2();
        $('.dropify').dropify({
            messages: {
                'default': 'Drag and drop a file here or click',
                'replace': 'Drag and drop or click to replace',
                'remove': 'Remove',
                'error': 'Ooops, something wrong appended.'
            },
            error: {
                'fileSize': 'The file size is too big (500MB max).'
            }
        });

        $('.datetime').flatpickr({
            enableTime: true,
            dateFormat: "Y-m-d H:i"
        });

        $('#btn-add-mapping').click(function(){
            $('table#table-metrics tbody').append(`<tr>
                                        <td>
                                            <select class="form-control" name="metric[]" required>
                                                <option value=""> -- Select Metric -- </option>
                                                @foreach($metrics as $k => $v)
                                                <option value="{{$k}}">{{$v}}</option>
                                                @endforeach
                                            </select>
                                        </td>
                                        <td><select name="parameter[]" class="form-control" required>
                                            <option value=""> -- Select Parameter -- </option>
                                            @foreach($parameters as $k => $v)
                                            <option value="{{$k}}">{{$v}}</option>
                                            @endforeach
                                        </select></td>
                                        <th><button type="button" class="btn btn-danger waves-effect waves-light btn-remove"><i class="mdi mdi-close"></i></button></th>
                                    </tr>`);

            $('.btn-remove').unbind();
            $('.btn-remove').click(function(){
                $(this).parent().parent().remove();
            });
            $('.cust-date').unbind();
            $('.cust-date').flatpickr();
        });
    });
</script>
@endsection