@extends('admin.layouts.masterlayout')
@section('content')

<script type="text/javascript">
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
});
</script>

<!--*************** Content body start ******************-->
<div class="content-wrapper">
    <div class="row page-titles mx-0" data-aos="fade-up">
        <div class="col-sm-6 p-md-0"></div>
        <div class="col-sm-6 p-md-0 justify-content-sm-end mt-2 mt-sm-0 d-flex">
            <ol class="breadcrumb">
                <li class="breadcrumb-item active"><a href="{{ route($modelName.'.view') }}">View all Sub Admin</a></li>
                <li class="breadcrumb-item">Add Sub Admin</li>
            </ol>
        </div>
    </div>

    <!-- row -->
    <div class="row">
        <div class="col-xl-12 col-xxl-12">
            <div class="card" data-aos="fade-up">
                <div class="card-header">
                    <h4 class="card-title">Add Sub Admin</h4>
                </div>
                <div class="card-body">
                    <div class="basic-form">
                        {{ Form::open(['role' => 'form','id'=>'AddForm','route'=>[$modelName.'.add'],'files' => true]) }}
                        {{ csrf_field() }}
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label class="lbl_frm py-2">Name</label>
                                <input id="name" name="name" type="text" required placeholder="Enter sub admin name" class="form-control in_text" value="{{ old('name') }}" autocomplete="off">
                                <div class="error-message help-inline">{{ $errors->first('name') }}</div>
                            </div>
                            <div class="form-group col-md-6">
                                <label class="lbl_frm py-2">Email</label>
                                <input id="email" name="email" type="text" required placeholder="Enter sub admin email" class="form-control in_text" value="{{ old('email') }}" autocomplete="off">
                                <div class="error-message help-inline">{{ $errors->first('email') }}</div>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label class="lbl_frm py-2">Phone No</label>
                                <input id="mobile" name="mobile" type="number" maxlength="10" required placeholder="Enter sub admin mobile no" class="form-control in_text" value="{{ old('mobile') }}" autocomplete="off">
                                <div class="error-message help-inline">{{ $errors->first('mobile') }}</div>
                            </div>
                            <div class="form-group col-md-6">
                                <label class="lbl_frm py-2">Password</label>
                                <input id="password" name="password" type="password" required placeholder="Enter sub admin password" class="form-control in_text" autocomplete="off">
                                <div class="error-message help-inline">{{ $errors->first('password') }}</div>
                            </div>
                        </div>
                        <div class="form-group col-md-6 pl-1 overflow-hidden">
                            <label class="lbl_frm py-2">Module</label>
                            <select class="form-control in_text" id="model_id[]" name="model_id[]" multiple="multiple" autocomplete="off" onchange="viewAction(event)">
                                @if(isset($sub_models) && !empty($sub_models))
                                    @foreach($sub_models as $model_val)
                                        <option value="{{ $model_val->id }}">{{ $model_val->model_name }}</option>
                                    @endforeach
                                @endif
                            </select>
                            <div class="error-message help-inline">{{ $errors->first('model_id[]') }}</div>
                        </div>

                        <!-- Actions will be appended here -->
                        <div id="model-actions-container" class="form-row mt-3"></div>

                    </div>
                </div>
                <div class="card-footer py-4">
                    <button type="submit" class="btn btn-primary mr-2 submit-from">Submit</button>
                    <button class="btn btn-gray" id="cancel_btn" type="button">Cancel</button>
                </div>
                {{ Form::close() }}
            </div>
        </div>
    </div>
</div>
<!--**********************************
Content body end
***********************************-->

<script type="text/javascript">
let loadedModels = new Set();

function viewAction(event) {
    let selectedIds = $("select[name='model_id[]'] option:selected").map(function () {
        return $(this).val();
    }).get();

    // Remove unselected model action checkboxes
    loadedModels.forEach(id => {
        if (!selectedIds.includes(id)) {
            $(`#model-action-${id}`).remove();
            loadedModels.delete(id);
        }
    });

    // Fetch and append new model actions
    selectedIds.forEach(modelId => {
        if (loadedModels.has(modelId)) return;

        $.ajax({
            url: "{{ url('Sub_admin/get-model-action') }}",
            type: "POST",
            data: {
                model_id: modelId,
                _token: "{{ csrf_token() }}"
            },
            success: function (response) {
                if (response.html && !$(`#model-action-${modelId}`).length) {
                    $('#model-actions-container').append(`<div id="model-action-${modelId}" class="form-group col-md-12 checkbox-group">${response.html}</div>`);
                    loadedModels.add(modelId);
                }
            },
            error: function () {
                console.error('Failed to fetch model actions.');
            }
        });
    });
}

$(document).ready(function () {
    $(document).on("click", "#cancel_btn", function () {
        window.location.href = $(".breadcrumb-item.active a").attr("href");
    });
});
</script>

@endsection