@extends('layouts.app')

@section('content')
<div class="mb-4 d-flex">
    <h3 class="text-muted my-auto"><b><i class="fas fa-list-ol mr-2"></i>Modules</b></h3>
    <a href="javascript:void();" onclick="showFormBar()" class="btn btn-primary ml-auto">Add Module</a>
</div>
<div class="card">
    <div class="card-body">
        <table class="table">
            <thead>
                <tr>
                    <th>Icon</th>
                    <th>Name</th>
                    <th>Route</th>
                    <th>Permission Front Name</th>
                    <th class="text-right">Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach($modules as $module)
                <tr>
                    <td><i class="{{ $module->icon }} mr-2"></i>{{ $module->icon }}</td>
                    <td>{{ $module->name }}</td>
                    <td>{{ $module->route }}</td>
                    <td>{{ $module->permission_front_name }}</td>
                    <td class="text-right">
                        <div class="d-flex">
                            <a href="{{ route('modules.edit', $module->id) }}" class="btn btn-primary btn-sm ml-auto mr-2">Edit</a>
                            <form action="{{ route('modules.destroy', $module->id) }}" method="POST">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-primary btn-sm ml-auto">Delete</button>
                            </form>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
        <div class="mt-4">
            {{ $modules->links() }}
        </div>
    </div>
</div>
@endsection

@section('form-bar')
<h4>Add Module</h4>
<form action="{{ isset($id)? route('modules.update', $id) : route('modules.store') }}" method="POST">
    @csrf
    @if(isset($id))
        @method('PUT')
    @endif
    <div class="form-group">
        <label for="">Name</label>
        <input type="text" name="name" class="form-control" value="{{ isset($id)? $_module->name : '' }}" required>
    </div>
    <div class="form-group">
        <label for="">Route</label>
        <input type="text" name="route" class="form-control" value="{{ isset($id)? $_module->route : '' }}" required>
    </div>
    <div class="form-group">
        <label for="">Icon</label>
        <input type="text" name="icon" class="form-control" value="{{ isset($id)? $_module->icon : '' }}">
    </div>
    <div class="form-group">
        <label for="">Permission Front Name</label>
        <input type="text" name="permission_front_name" class="form-control" value="{{ isset($id)? $_module->permission_front_name : '' }}">
    </div>
    <button type="submit" class="btn btn-primary">Save</button>
    <a @if(isset($id)) href="{{ route('modules.index') }}" @else onclick="hideFormBar();" @endif class="btn btn-primary ml-auto text-light">Close</a>
</form>
@endsection

@section('script')
<script>
    $(document).ready(function(){
        
    });
</script>
@if(isset($id))
<script>
    $(document).ready(function(){
        var formBar = $('.form-bar');
        var formBarOverlay = $('.form-bar-overlay');

        formBar.addClass('show-form-bar'); 
        formBarOverlay.addClass('show-form-bar-overlay');
    });
</script>
@endif
@endsection