@extends('layouts.vertical', ["page_title"=> "Datatables"])

@section('css')
<!-- third party css -->
<link href="{{asset('assets/libs/datatables/datatables.min.css')}}" rel="stylesheet" type="text/css" />
<!-- third party css end -->
@endsection

@section('content')
<!-- Start Content-->
<div class="container-fluid">
<form method="post" id="form-availiblity" enctype="multipart/form-data">
    @csrf
    <!-- start page title -->
    <div class="row">
        <div class="col-md-6 p-2">
            <h4 class="page-title">{{$title}} Import</h4>
        </div>
        <div class="col-md-6 p-2">
            @if(isset($buttons))
                @foreach($buttons as $button)
                    <a href="{{$button['link']}}" class="btn btn-{{$button['title']=='Add New'?'success':'dark'}} waves-effect waves-light float-end me-2">{{$button['title']}}</a>
                @endforeach
            @endif
        </div>
    </div>
    <!-- end page title -->
@if(session()->has('message'))
    <div class="alert alert-success">
        {{ session()->get('message') }}
    </div>
@endif
@if(session()->has('error'))
    <div class="alert alert-danger">
        {{ session()->get('error') }}
    </div>
@endif
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <h4 class="page-title">Map input to {{$title}} fields</h4>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="float-end">
                                <a href="{{$base_url}}s" 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">
                            <div class="table-responsive">
                                <table class="table w-100 nowrap">
                                    <thead>
                                        <tr>
                                            @foreach($fields as $field => $props)
                                            <th>{{$props['title']}}</th>
                                            @endforeach
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($records as $record)
                                        <tr>
                                            @foreach($fields as $field => $props)
                                            <td style="min-width: 200px">
                                                @switch($props['type'])
                                                    @case('select')
                                                        <select class="form-control" name="{{$field}}[]" {{isset($props['required'])&&$props['required']?'required':'' }}>
                                                        <option value=""> -- Select {{$props['title']}} -- </option>
                                                        @foreach($props['values'] as $k => $v)
                                                        <option value="{{$k}}" {{ array_key_exists($field, $record) && ($record[$field] == $v || $record[$field] == $k) ? 'selected="selected"':''}}>{{$v}}</option>
                                                        @endforeach
                                                        </select>
                                                        @break
                                                    @case('text')
                                                    @default
                                                        <input type="{{$props['type']}}" name="{{$field}}[]" class="form-control" value="{{ array_key_exists($field, $record) ? preg_replace('/[^A-Za-z0-9. @-_\-]/', '', $record[$field]) : '' }}" {{isset($props['required'])&&$props['required']?'required':'' }}>
                                                        @break
                                                @endswitch
                                            </td>
                                            @endforeach
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="col-md-12 mb-3">
                            <div class="float-end">
                                <a href="{{$base_url}}s" 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-->
            </div> <!-- end card -->
        </div><!-- end col-->
    </div>
    <!-- end row-->
</form>
</div> <!-- container -->
<style type="text/css">
    .img-thumbnail { max-width: 100px }
</style>
@endsection

@section('script')
<!-- third party js -->

<!-- end demo js-->
@endsection