@extends('layouts.app') {{-- Include the layout --}}

@section('content')


<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Manage Sub-Category</div>
                <div class="card-body">
                    @if (session('success'))
                    <div class="alert alert-success custom-alert">
                        {{ session('success') }}
                    </div>
                    @endif

                    @if (session('error'))
                    <div class="alert alert-danger custom-alert">
                        {{ session('error') }}
                    </div>
                    @endif

                    @if (isset($error_message))
                    <div class="alert alert-danger custom-alert">
                        {{ isset($error_message) ? $error_message : '' }}
                    </div>
                    @endif

                    <form method="POST" action="{{ route('updateSubCategory') }}">
                        @csrf

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="moduleid">Module <span class="text-danger">*</span></label>
                                    <select name="moduleid" id="moduleid" class="form-control" required>
                                        <option label="" sequence="" value="">Select Module</option>

                                        @foreach($modulelist as $list)

                                        @php
                                        $select = (isset($moduleid) && $moduleid == $list->id) ? 'selected' : '';
                                        @endphp

                                        <option value="{{ $list->id }}" label="{{ $list->label }}"
                                            sequence="{{ $list->sequence }}" {{ $select }}>{{ $list->label }}</option>
                                        @endforeach

                                    </select>
                                    <div class="invalid-feedback">
                                        Please select a Module.
                                    </div>

                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="categoryid">Category <span class="text-danger">*</span></label>
                                    <select name="categoryid" id="categoryid" class="form-control" required>
                                        <option value="">Select Category</option>
                                        @isset($subcatoptions)
                                        @foreach($subcatoptions as $cap)

                                        @php
                                        $select = (isset($categoryid) && $categoryid == $cap->id) ? 'selected' : '';
                                        @endphp

                                        <option value="{{ $cap->id }}" {{ $select }}>{{ $cap->label }}</option>
                                        @endforeach
                                        @endisset

                                    </select>
                                    <div class="invalid-feedback">
                                        Please select a Category.
                                    </div>

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

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="catname">Name <span class="text-danger">*</span></label>
                                    <input type="text" id="catname" name="catname" class="form-control"
                                        value="{{ isset($label) ? $label : '' }}" required>
                                    <div class="invalid-feedback">
                                        Please enter the Sub Category Name.
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="urltext">URL <span class="text-danger">*</span></label>
                                    <input type="text" id="urltext" name="urltext" class="form-control"
                                        value="{{ isset($url) ? $url : '' }}" required>
                                    <div class="invalid-feedback">
                                        Please enter URL.
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="component">Component <span class="text-danger">*</span></label>
                                    <input type="text" id="component" name="component" class="form-control"
                                        value="{{ isset($component) ? $component : '' }}" required>
                                    <div class="invalid-feedback">
                                        Please enter Component.
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="catsequence">Sequence <span class="text-danger">*</span></label>
                                    <input type="number" id="catsequence" name="catsequence" class="form-control"
                                        value="{{ isset($sequence) ? $sequence : '' }}" required>
                                    <div class="invalid-feedback">
                                        Please enter the Module Sequence.
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="caticon">Icon <span class="text-danger">*</span>

                                        <a href="#" title="Add Icons" onclick="showIconModal()">
                                            <i class="fa-solid fa-plus text-success border border-success"></i>
                                        </a>

                                    </label>
                                    <select name="caticon" id="caticon" class="form-control" required>
                                        <option value="">Select Icon</option>
                                        @foreach($iconlist as $ilist)

                                        @php
                                        $select = (isset($icon) && $icon == $ilist->value) ? 'selected' : '';
                                        @endphp

                                        <option value="{{ $ilist->value }}" {{ $select }}>{{ $ilist->name }}</option>
                                        @endforeach
                                    </select>
                                    <div class="invalid-feedback">
                                        Please select an Icon.
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="menutype">Menu Type <span class="text-danger">*</span></label>
                                    <select name="menutype" id="menutype" class="form-control" required>
                                        @foreach($menutypelist as $mlist)

                                        @php
                                        $select = (isset($menutype) && $menutype == $mlist->id) ? 'selected' : '';
                                        @endphp

                                        <option value="{{ $mlist->id }}" {{ $select }}>{{ $mlist->type }}</option>
                                        @endforeach
                                    </select>
                                    <div class="invalid-feedback">
                                        Please select a Menu Type.
                                    </div>

                                </div>
                            </div>

                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="addmodal">Add Modal ID (if exist)</label>
                                    <input type="text" id="addmodal" name="addmodal" class="form-control"
                                        value="{{ isset($modal) ? $modal : '' }}">

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

                        <fieldset>
                            <legend class="w-auto" style="font-size: 18px;">Shortcut Bar</legend>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="shortcuticon"> Shortcut Bar Icon <span class="text-danger">*</span>

                                            <a href="#" title="Add Icons" onclick="showIconModal()">
                                                <i class="fa-solid fa-plus text-success border border-success"></i>
                                            </a>

                                        </label>
                                        <select name="shortcuticon" id="shortcuticon" class="form-control" required>
                                            <option value="">Select Icon</option>
                                            @foreach($iconlist as $ilist)

                                            @php
                                            $select = (isset($shortcuticon) && $shortcuticon == $ilist->value) ?
                                            'selected' :
                                            '';
                                            @endphp

                                            <option value="{{ $ilist->value }}" {{ $select }}>{{ $ilist->name }}
                                            </option>
                                            @endforeach
                                        </select>
                                        <div class="invalid-feedback">
                                            Please select an Icon.
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="color">Color </label>
                                        <select name="color" id="color" class="form-control">
                                            
                                            <option value="text-primary"
                                                {{ isset($color) && $color == 'text-primary' ? 'selected' : '' }}>
                                                Primary
                                            </option>
                                            <option value="text-secondary"
                                                {{ isset($color) && $color == 'text-secondary' ? 'selected' : '' }}>
                                                Secondary
                                            </option>
                                            <option value="text-success"
                                                {{ isset($color) && $color == 'text-success' ? 'selected' : '' }}>
                                                Success
                                            </option>
                                            <option value="text-danger"
                                                {{ isset($color) && $color == 'text-danger' ? 'selected' : '' }}>Danger
                                            </option>
                                            <option value="text-warning"
                                                {{ isset($color) && $color == 'text-warning' ? 'selected' : '' }}>
                                                Warning
                                            </option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="color">Abbreviation  <span class="text-danger">*</span></label>
                                        <input type="text" id="abbreviation" name="abbreviation" class="form-control" value="{{ isset($abbreviation) ? $abbreviation : '' }}" required>
                                        <div class="invalid-feedback">
                                            Please add abbreviation .
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                

                <div style="text-align:right">
                    <a href="{{ route('subcategory') }}"><button type="button" class="btn btn-primary">Back</button></a>
                    <button type="submit" class="btn btn-success"
                        id="savebtn">{{ isset($subcategoryid) ? 'Update' : 'Add' }}</button>

                </div>

                <input type="hidden" name="subcategoryid" value="{{ isset($subcategoryid) ? $subcategoryid : '' }}">

                </form>

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


<div class="modal" id="iconModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Icons</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="closeModal()">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="iconForm">
                    <div class="form-group">
                        <label for="iconName">Icon Name:</label>
                        <input type="text" class="form-control" id="iconName" required>
                    </div>
                    <div class="form-group">
                        <label for="iconClass">Icon Class:</label>
                        <input type="text" class="form-control" id="iconClass" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="saveIcon()">Save</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal"
                    onclick="closeModal()">Close</button>
            </div>
        </div>
    </div>
</div>

<script>
$('#savebtn').on('click', function(event) {
    var form = event.target.form;

    if (!form.checkValidity()) {
        event.preventDefault();
    }

    $(form).addClass('was-validated');

});


$("#moduleid").change(function() {

    var moduleid = $('#moduleid').val();

    if (moduleid > 0) {
        $.ajax({
            url: 'category-option-list/' + moduleid, // The route to fetch the data
            type: 'GET',
            success: function(data) {
                $('#categoryid').empty();
                $('#categoryid').append(data);
            },
            error: function() {
                alert('Error loading data.');
            }
        });
    }

});

function showIconModal() {
    $('#iconModal').modal('show');
}

function closeModal() {
    $('#iconModal').modal('hide');
}

function saveIcon() {
    const iconName = $('#iconName').val();
    const iconClass = $('#iconClass').val();

    if (iconName === '' || iconClass === '') {
        Swal.fire({
            title: 'Please add Icon Name & Class!',
            icon: 'error',
            width: '300px',
            customClass: {
                title: 'swal-title'
            }
        });
        return false;
    } else {
        const formData = {
            iconName: iconName,
            iconClass: iconClass
        };

        $.ajax({
            type: 'POST',
            url: '{{ route("addIcons") }}',
            data: formData, // Send form data
            dataType: 'json',
            success: function(response) {
                if (response.status === 'error') {

                    Swal.fire({
                        title: response.message,
                        icon: 'error',
                        width: '300px',
                        customClass: {
                            title: 'swal-title'
                        }
                    });
                } else {
                    // Icon saved successfully
                    Swal.fire({
                        title: 'Icon Saved Successfully!',
                        icon: 'success',
                        width: '300px',
                        customClass: {
                            title: 'swal-title'
                        }
                    });

                    const newOption = $('<option>', {
                        value: iconClass,
                        text: iconName
                    });
                    $('#caticon').append(newOption);
                    $('#shortcuticon').append(newOption);

                    $('#iconModal').modal('hide');

                    $('#iconName').val('');
                    $('#iconClass').val('');
                }
            },
            error: function(xhr, status, error) {
                Swal.fire({
                    title: 'Error occurred while saving icon!',
                    icon: 'error',
                    width: '300px',
                    customClass: {
                        title: 'swal-title'
                    }
                });
            }
        });


    }
}
</script>

@endsection