@extends('admin.layouts.app')

@push('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <nav aria-label="breadcrumb" class="d-flex align-items-center justify-content-between mb-5">
            <ol class="breadcrumb breadcrumb-style1  m-0">
                <li class="breadcrumb-item">
                    <a href="{{ route('admin.dashboard') }}">Dashboard</a>
                </li>
                <li class="breadcrumb-item">
                    <a href="{{ route('admin.members.index') }}">Members</a>
                </li>
                <li class="breadcrumb-item active">Create</li>
            </ol>

            <div class="breadcrumb-item">
                <span id="liveClock" class="text-muted" style="font-size: 0.9rem;"></span>
            </div>
        </nav>
        <form action="{{ route('admin.table_generate.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body ">
                            <div class="row">
                                <div class="mb-5 col-md-6">
                                    <label for="table_name" class="form-label"><b>Table Name</b> <b
                                            class="text-danger">*</b></label>
                                    <input type="text" class="form-control border-radius-5" id="table_name"
                                        name="table_name" placeholder="Table Name" required>
                                </div>
                                <div class="mb-5 col-md-6 mt-5">

                                    <input type="checkbox" id="soft_delete" name="soft_delete" value="1">
                                    <label for="soft_delete">Enable Soft Deletes</label>
                                </div>
                            </div>
                            <div id="append_body">
                                <div class="row">
                                    <div class="mb-5 col-md-4">
                                        <label for="last_name" class="form-label"><b>Field Name</b> <b
                                                class="text-danger">*</b></label>
                                        <input type="text" class="form-control border-radius-5" name="fields[]" required
                                            placeholder="Field Name" required>
                                    </div>

                                    <div class="mb-5 col-md-2">
                                        <label for="types" class="form-label"><b>Field type</b> <b
                                                class="text-danger">*</b></label>
                                        <select name="types[]" data-placeholder="Select an option" class="form-select "
                                            required>
                                            <option value="integer">Integer</option>
                                            <option value="string">String</option>
                                            <option value="text">Text</option>
                                            <option value="boolean">Boolean</option>
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <label for="">Tables</label>
                                        <select name="table" class="select2 form-control table_list" id="">

                                        </select>
                                    </div>
                                </div>
                            </div>



                            <div class="row">
                                <div class="col-md-6">
                                    <button type="button" class="btn btn-success" onclick="addField()">Add Another
                                        Field</button>
                                    <button class="btn btn-primary" type="submit">Generate</button>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

        </form>

    </div>
@endpush

@push('scripts')
    <script>
        select2Dropdown(
            ".table_list",
            "{{ url('table_list') }}",
            "Table List",
        )

        function addField() {
            let fields = document.getElementById('append_body');
            let newField = document.createElement('div');
            newField.innerHTML = `<div class="row">
                                    <div class="mb-5 col-md-4">
                                        <label for="last_name" class="form-label"><b>Field Name</b> <b
                                                class="text-danger">*</b></label>
                                        <input type="text" class="form-control border-radius-5" name="fields[]" required
                                            placeholder="Field Name" required>
                                    </div>

                                    <div class="mb-5 col-md-4">
                                        <label for="types" class="form-label"><b>Field type</b> <b
                                                class="text-danger">*</b></label>
                                        <select name="types[]" data-placeholder="Select an option"
                                            class="form-select select2search" required>
                                            <option value="integer">Integer</option>
                                            <option value="string">String</option>
                                            <option value="text">Text</option>
                                            <option value="boolean">Boolean</option>
                                        </select>
                                    </div>
                                </div>

    `;
            fields.appendChild(newField);
        }
    </script>
@endpush