@extends('app-new')

@push('head-script') 
@endpush 

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">Service</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">Home</a></li>
                    <li class="breadcrumb-item">Service</li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@push('prev-next-head')
    
    <div class="form-group breadcrumb-right">
        <button onClick="javascript: history.go(-1)" class="btn btn-secondary btn-sm"><i data-feather="arrow-left-circle"></i> Back</button>  
        <button type="submit"  class="btn btn-primary btn-sm ms-1" data-request="ajax-submit" 
                    data-target="[role=post-data]"><i data-feather="check-circle"></i> Update</button>
    </div>
    
@endpush

@section('content')
<!-- BEGIN: Content-->
<section id="basic-datatable">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body customernewsection-form">
                <form class="ajax-input-form" id="menuForm" action="{{ route('admin.service.update',$service->id) }}" method="POST" redirect="{{ route('admin.services') }}" enctype="multipart/form-data" role="post-data">
                @csrf
                @method('PUT') 
                    <div class="row">
                        <div class="col-md-12">
                            <div class="newheader border-bottom mb-2 pb-25">
                                <h4 class="card-title text-theme">Basic Information</h4>
                                <p class="card-text">Edit the details</p>
                            </div>
                        </div>

                        <div class="col-md-9">
                            <div class="row align-items-center mb-1">
                                <div class="col-md-3">
                                    <label class="form-label">Name</label>
                                </div>
                                <div class="col-md-5">
                                    <input type="text" name="name" class="form-control" value="{{ old('name', $service->name) }}" required />
                                </div>
                            </div>
                            <!-- Feather Icon -->
                            <div class="row align-items-center mb-1 hsn" >
                                <div class="col-md-3">
                                    <label class="form-label">Icon <span class="text-danger">*</span></label>
                                </div>
                                <div class="col-md-4">
                                    <div class="input-group">
                                        <span id="icon-view" class="input-group-text"><i data-feather='{{ old('icon', $service->icon) }}'></i>
                                        </span>
                                        
                                        <input type="text" class="form-control" name="icon" id="icon-input"  value="{{ old('icon', $service->icon) }}"placeholder="Enter icon name (e.g., edit-3)" style="display: none" />

                                        <div class="input-group-append">
                                            <a href="#search-icon" data-bs-toggle="modal" class="voucehrinvocetxt mt-0">
                                                <i data-feather="search"></i> Search Icon
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                

                            </div>

                            
                        </div>

                        <div class="col-md-3 border-start">
                            <div class="row align-items-center mb-2">
                                <div class="col-md-12">
                                    <label class="form-label text-primary"><strong>Status</strong></label>
                                    <div class="demo-inline-spacing">
                                        <div class="form-check form-check-primary mt-25">
                                            <input type="radio" id="status_active" name="status" value="active" class="form-check-input" {{ $service->status == 'active' ? 'checked' : '' }}>
                                            <label class="form-check-label fw-bolder" for="status_active">Active</label>
                                        </div>
                                        <div class="form-check form-check-primary mt-25">
                                            <input type="radio" id="status_inactive" name="status" value="inactive" class="form-check-input" {{ $service->status == 'inactive' ? 'checked' : '' }}>
                                            <label class="form-check-label fw-bolder" for="status_inactive">Inactive</label>
                                        </div>
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

    <div class="sidenav-overlay"></div>
    <div class="drag-target"></div>

    <div class="modal fade" id="search-icon" tabindex="-1" aria-labelledby="searchIconLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" style="max-width: 1130px">
        <div class="modal-content">
            <div class="modal-header p-0 bg-transparent">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body px-sm-4 mx-50 pb-2">
                <h1 class="text-center mb-1" id="searchIconLabel">Search Icon</h1>
                <p class="text-center">Search from the below list.</p>
                <div class="row mt-2">
                    <section id="feather-icons">
                        <div class="row">
                            <div class="col-12">
                                <div class="icon-search-wrapper my-2 mx-auto">
                                    <div class="mb-1 input-group input-group-merge">
                                        <span class="input-group-text"><i data-feather="search"></i></span>
                                        <input type="text" class="form-control" id="icons-search" placeholder="Search Icons..." />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="pt-2" style="max-height: 300px; overflow-y: scroll">
                            <div class="d-flex flex-wrap" id="icons-container">
                                <!-- Dynamic icons will be appended here -->
                            </div>
                        </div>
                    </section>
                </div>
            </div>
            <div class="modal-footer justify-content-center">  
                <button type="button" class="btn btn-outline-secondary me-1" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="select-icon">Select</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('footer-script')
<script>
    $(document).ready(function() {
        let selectedIcon = '';
        function loadIcons() {
            const icons = feather.icons;
            console.log(icons);
            Object.keys(icons).forEach(icon => {
                $('#icons-container').append(`
                    <div class="card icon-card cursor-pointer text-center mb-2 mx-50" data-icon="${icon}">
                        <div class="card-body">
                            <span class="icon-name">${icon}</span>
                        </div>
                    </div>
                `);
            });
            bindIconClickEvents();
        }

        function bindIconClickEvents() {
            $('#icons-container').on('click', '.icon-card', function() {
                selectedIcon = $(this).data('bs-original-title');
                selectedIconhtml = $(this).data('icon');
                $('.icon-card').removeClass('selected');
                $(this).addClass('selected');
                $('#icon-input').val(selectedIcon);
                $('#search-icon').modal('hide');
                $("#icon-input").val(selectedIcon);
                $("#icon-view").html(selectedIconhtml);
                if (feather) {
                    feather.replace({
                        width: 14,
                        height: 14
                    });
                }
            });
        }
        loadIcons();

    });
</script>
@endpush