@extends('Admin.Layout.Master')

@section('css')
    <style type="text/css">

    </style>
@endsection

@section('content-header')
    <div class="custom_breadcrumb p-2">
        <div class="row">
            <div class="col-lg-6">
                <div class="custom_breadcrumb_navigation">
                    <span class="badge bg-primary text-white">Master</span>
                    /
                    <span class="badge bg-primary text-white">Category</span>
                </div>
            </div>
            <div class="col-lg-6  text-center d-flex justify-content-end">
                <a href="{{ url($url . '/create') }}" class="btn btn-sm btn-primary">
                    <i class="fa fa-plus-circle" aria-hidden="true"></i>
                    Create
                </a>
            </div>
        </div>
    </div>
@endsection


@section('content')
    <form id="main-form" action="{{ !$id ? url($url) : url($url . '/' . $id) }}" method="post" enctype="multipart/form-data">
        @csrf
        @if ($id)
            @method('put')
        @endif

        <div class="card card-body">

            <div class="row m-0">
                <div class="col-md-3 text-right">
                    <label class="form-control-label"> Category : <span class="text-danger">*</span></label>
                </div>
                <div class="col-md-6 text-left">
                    <div class="form-group">
                        <input type="text" class="form-control form-control-sm alphaNumeric" 
                                id="category_name"
                                name="category_name"
                                value="{{ old('category_name') ? old('category_name') : ($category ? $category->category_name : '') }}"
                                oninput="generate_slug(this.value)"
                                required>
                        @error('category_name')
                            <small class="text-danger"><b>{{ $message }}</b></small>
                        @enderror
                    </div>
                </div>
            </div> <!--CATEGORY NAME-->

            <div class="row m-0">
                <div class="col-md-3 text-right">
                    <label class="form-control-label"> Slug : <span class="text-danger">*</span></label>
                </div>
                <div class="col-md-6 text-left">
                    <div class="form-group">
                        <input type="text" class="form-control form-control-sm alphaNumeric" 
                                id="slug"
                                name="slug"
                                value="{{ old('slug') ? old('slug') : ($category ? $category->slug : '') }}"
                                required>
                        @error('slug')
                            <small class="text-danger"><b>{{ $message }}</b></small>
                        @enderror
                    </div>
                </div>
            </div> <!--SLUG-->

            <div class="row m-0">
                <div class="col-md-3 text-right">
                    <label class="form-control-label"> Show On Website :</label>
                </div>
                <div class="col-md-3 text-left d-flex justify-content-start">
                    <div class="">
                        <input type="radio" id="show_on_website_1" name="show_on_website" value="1"
                            {{ $category ? ($category->show_on_website == 1 ? 'checked' : '') : 'checked' }}>
                        Yes
                    </div>
                    <div class="form-group ml-3">
                        <input type="radio" id="show_on_website_0" name="show_on_website" value="0"
                            {{ $category && $category->show_on_website == 0 ? 'checked' : '' }}>
                        No
                    </div>
                </div>
            </div> <!--SHOW ON WEBSITE-->
            
            <div class="row m-0">
                <div class="col-md-3 text-right">
                    <label class="form-control-label"> Show On Menu :</label>
                </div>
                <div class="col-md-3 text-left d-flex justify-content-start">
                    <div class="">
                        <input type="radio" id="show_on_menu_1" name="show_on_menu" value="1"
                            {{ $category && $category->show_on_menu == 1 ? 'checked' : '' }}
                            onchange="changeReadonlyForDisplayName(false,'display_name_on_menu')"
                        >
                        Yes
                    </div>
                    <div class="form-group ml-3">
                        <input type="radio" id="show_on_menu_0" name="show_on_menu" value="0"
                            {{ $category ? ($category->show_on_menu == 0 ? 'checked' : '') : 'checked' }}
                            onchange="changeReadonlyForDisplayName(true,'display_name_on_menu')"    
                            >
                        No
                    </div>
                </div>
                <div class="col-md-3">
                    <input type="text" class="form-control form-control-sm"
                        id="display_name_on_menu"
                        name="display_name_on_menu" 
                        value="{{ $category ? $category->display_name_on_menu : NULL}}"
                        placeholder="Display name on menu"
                        @if($category && $category->show_on_menu == 0)
                                readonly
                        @endif
                    >
                </div>
            </div> <!--SHOW ON MENU-->
            
            <div class="row m-0">
                <div class="col-md-3 text-right">
                    <label class="form-control-label"> Show On Services Menu :</label>
                </div>
                <div class="col-md-3 text-left d-flex justify-content-start">
                    <div class="">
                        <input type="radio" id="show_on_service_menu_1" name="show_on_service_menu" value="1"
                            {{ $category ? ($category->show_on_service_menu == 1 ? 'checked' : '') : 'checked' }}
                            onchange="changeReadonlyForDisplayName(false,'display_name_on_service_menu')"    
                        >
                        Yes
                    </div>
                    <div class="form-group ml-3">
                        <input type="radio" id="show_on_service_menu_0" name="show_on_service_menu" value="0"
                            {{ $category && $category->show_on_service_menu == 0 ? 'checked' : '' }}
                            onchange="changeReadonlyForDisplayName(true,'display_name_on_service_menu')"        
                        >
                        No
                    </div>
                </div>
                <div class="col-md-3">
                    <input type="text" class="form-control form-control-sm"
                            id="display_name_on_service_menu"
                            name="display_name_on_service_menu" 
                            value="{{$category ? $category->display_name_on_service_menu : NULL}}"
                            placeholder="Display name on Service Menu"
                            @if($category && $category->show_on_service_menu == 0)
                                readonly
                            @endif
                    >
                </div>
            </div> <!--SHOW ON SERVICE MENU-->

            <div class="row m-0">
                <div class="col-md-3 text-right">
                    <label class="form-control-label"> Show On Offerings :</label>
                </div>
                <div class="col-md-3 text-left d-flex justify-content-start">
                    <div class="">
                        <input type="radio" id="show_on_offering_1" name="show_on_offering" value="1"
                            {{ $category ? ($category->show_on_offering == 1 ? 'checked' : '') : 'checked' }}
                            onchange="changeReadonlyForDisplayName(false,'display_name_on_offering')"
                            >
                        Yes
                    </div>
                    <div class="form-group ml-3">
                        <input type="radio" id="show_on_offering_0" name="show_on_offering" value="0"
                            {{ $category && $category->show_on_offering == 0 ? 'checked' : '' }}
                            onchange="changeReadonlyForDisplayName(true,'display_name_on_offering')"
                            >
                        No
                    </div>
                </div>
                <div class="col-md-3">
                    <input type="text" class="form-control form-control-sm"
                            id="display_name_on_offering"
                            name="display_name_on_offering" 
                            value="{{$category ? $category->display_name_on_offering : NULL}}"
                            placeholder="Display name on Offering"
                            @if($category && $category->show_on_offering == 0)
                                readonly
                            @endif
                    >
                </div>
            </div> <!--SHOW ON OFFERING-->

        @if($id)
            <div class="row m-0">
                <div class="col-md-3 text-right">
                    <label class="form-control-label"> Status :</label>
                </div>
                <div class="col-md-3 text-left d-flex justify-content-start">
                    <div class="">
                        <input type="radio" id="is_active_1" name="is_active" value="1"
                            {{ $category ? ($category->is_active == 1 ? 'checked' : '') : 'checked' }}>
                        Active
                    </div>
                    <div class="form-group ml-3">
                        <input type="radio" id="is_active_0" name="is_active" value="0"
                            {{ $category && $category->is_active == 0 ? 'checked' : '' }}>
                        Deactive
                    </div>
                </div>
            </div> <!--STATUS-->
        @endif

            <div class="row m-0">
                <div class="col-md-3 text-right">
                    <label class="form-control-label">  Remark :</label>
                </div>
                <div class="col-md-6 text-left">
                    <div class="form-group">
                        <input type="text" class="form-control form-control-sm input_text alpha" id="remark"
                            name="remark" value="{{ old('remark') ? old('remark') : ($category ? $category->remark : '') }}">
                        @error('remark')
                            <small class="text-danger"><b>{{ $message }}</b></small>
                        @enderror
                    </div>
                </div>
            </div> <!--REMARK-->

        </div> <!--CARD-->


        <div class="card p-0 mt--4 p-0">
            <div class="card-body p-2 text-center">
                @if (!$id)
                    <button type="submit" name="button_type" value="SAVE" class="btn btn-primary btn-sm">Save</button>
                    <button type="submit" name="button_type" value="SAVE_AND_ADD_ANOTHER"
                        class="btn btn-primary btn-sm">Save & Add Another</button>
                @endif

                @if ($id)
                    <button type="submit" name="button_type" value="Update" class="btn btn-primary btn-sm">Update</button>
                @endif

                <a href="{{ url($url) }}" class="btn btn-danger btn-sm">Cancel</a>
            </div>
        </div>

    </form>
@endsection

@push('footer_scripts_after_init')
    <script>
        function changeReadonlyForDisplayName(readOnly,id){
            $('#'+id).attr('readonly',readOnly);
        }
        function generate_slug(name) {
            var slug = name.toLowerCase();
            slug = slug.replace(/\s+/g, '-');
            document.getElementById('slug').value = slug;
        }
    </script>
@endpush