@extends('admin.layout.index')
@section('title')
    {{ __('messages.add_complaint_type') }}
@endsection
@section('content')
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">{{ __('messages.add_complaint_type') }}</h1>
                </div>
            </div>
        </div>
    </div>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">{{ __('messages.complaint_type_details') }}</h3>
                        </div>

                        <form method="POST" action="{{ route('admin.complaint.types.store') }}">
                            @csrf
                            <div class="card-body">
                                <!-- Nav tabs -->
                                <ul class="nav nav-tabs nav-fill" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link {{ session('back') == null ? 'active' : '' }} {{ session('back') != null && session('back')['open'] == 1 ? 'active' : '' }}"
                                            data-toggle="tab" href="#arabic" role="tab">
                                            <span><i class="flag-icon flag-icon-eg mr-1"></i></span>
                                            <span class="hidden-xs-down ml-15">{{ __('messages.lang-ar') }}</span>
                                            @if (session('back') != null && isset(session('back')['error_ar']))
                                                <span style="color: orangered"><i class="fa fa-times mr-1"></i></span>
                                            @endif
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link {{ session('back') != null && session('back')['open'] == 2 ? 'active' : '' }}"
                                            data-toggle="tab" href="#english" role="tab">
                                            <span><i class="flag-icon flag-icon-gb mr-1"></i></span>
                                            <span class="hidden-xs-down ml-15">{{ __('messages.lang-en') }}</span>
                                            @if (session('back') != null && isset(session('back')['error_en']))
                                                <span style="color: orangered"><i class="fa fa-times mr-1"></i></span>
                                            @endif
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link {{ session('back') != null && session('back')['open'] == 3 ? 'active' : '' }}"
                                            data-toggle="tab" href="#types" role="tab">
                                            <span class="hidden-xs-down ml-15">{{ __('messages.types') }}</span>
                                            @if (session('back') != null && isset(session('back')['error_types']))
                                                <span style="color: orangered"><i class="fa fa-times mr-1"></i></span>
                                            @endif
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" data-toggle="tab" href="#users" role="tab">
                                            <span class="hidden-xs-down ml-15">{{ __('messages.users') }}</span>
                                            @if (session('back') != null && isset(session('back')['error_users']))
                                                <span style="color: orangered"><i class="fa fa-times mr-1"></i></span>
                                            @endif
                                        </a>
                                    </li>
                                </ul>

                                <!-- Tab panes -->
                                <div class="tab-content tabcontent-border">
                                    <div class="tab-pane {{ session('back') == null ? 'active' : '' }} {{ session('back') != null && session('back')['open'] == 1 ? 'active' : '' }}"
                                        id="arabic" role="tabpanel">
                                        <div class="p-15">
                                            <div class="form-group">
                                                <label for="name_ar">{{ __('messages.name_ar') }} <span
                                                        class="danger">*</span></label>
                                                <input type="text"
                                                    class="form-control @error('name_ar') is-invalid @enderror"
                                                    id="name_ar" name="name_ar" value="{{ old('name_ar') }}">
                                                @error('name_ar')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                            <div class="form-group">
                                                <label for="status">{{ __('messages.status') }}</label>
                                                <select class="form-control" id="status" name="status">
                                                    <option value="active"
                                                        {{ old('status', $complaintType->status ?? 'active') == 'active' ? 'selected' : '' }}>
                                                        {{ __('messages.active') }}
                                                    </option>
                                                    <option value="inactive"
                                                        {{ old('status', $complaintType->status ?? 'active') == 'inactive' ? 'selected' : '' }}>
                                                        {{ __('messages.inactive') }}
                                                    </option>
                                                </select>
                                                @error('status')
                                                    <span class="invalid-feedback d-block" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane {{ session('back') != null && session('back')['open'] == 2 ? 'active' : '' }}"
                                        id="english" role="tabpanel">
                                        <div class="p-15">
                                            <div class="form-group">
                                                <label for="name_en">{{ __('messages.name_en') }} <span
                                                        class="danger">*</span></label>
                                                <input type="text"
                                                    class="form-control @error('name_en') is-invalid @enderror"
                                                    id="name_en" name="name_en" value="{{ old('name_en') }}">
                                                @error('name_en')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane {{ session('back') != null && session('back')['open'] == 3 ? 'active' : '' }}"
                                        id="types" role="tabpanel">
                                        <div class="p-15">
                                            <div class="form-group">
                                                <label>{{ __('messages.available_for') }} <span
                                                        class="danger">*</span></label>
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="checkbox" id="employee"
                                                                name="types[]" value="employee"
                                                                {{ in_array('employee', old('types', [])) ? 'checked' : '' }}>
                                                            <label class="form-check-label" for="employee">
                                                                {{ __('messages.employee') }}
                                                            </label>
                                                        </div>
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="checkbox"
                                                                id="service_provider" name="types[]"
                                                                value="service_provider"
                                                                {{ in_array('service_provider', old('types', [])) ? 'checked' : '' }}>
                                                            <label class="form-check-label" for="service_provider">
                                                                {{ __('messages.service_provider') }}
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="checkbox"
                                                                id="resource_supplier" name="types[]"
                                                                value="resource_supplier"
                                                                {{ in_array('resource_supplier', old('types', [])) ? 'checked' : '' }}>
                                                            <label class="form-check-label" for="resource_supplier">
                                                                {{ __('messages.resource_supplier') }}
                                                            </label>
                                                        </div>
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="checkbox"
                                                                id="client" name="types[]" value="client"
                                                                {{ in_array('client', old('types', [])) ? 'checked' : '' }}>
                                                            <label class="form-check-label" for="client">
                                                                {{ __('messages.client') }}
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                                @error('types')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane" id="users" role="tabpanel">
                                        <div class="p-15">
                                            <div class="form-group">
                                                <label>{{ __('messages.assigned_users') }}</label>
                                                <select class="form-control select2" multiple="multiple" name="users[]" style="width: 100%;">
                                                    @foreach($users as $user)
                                                        <option value="{{ $user->id }}" {{ in_array($user->id, old('users', [])) ? 'selected' : '' }}>
                                                            {{ $user->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                                @error('users')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="card-footer">
                                <button type="submit" class="btn btn-primary">
                                    {{ __('messages.save') }}
                                </button>
                                <a href="{{ route('admin.complaint.types.index') }}"
                                    class="btn btn-secondary float-right">
                                    {{ __('messages.cancel') }}
                                </a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('js')
    <script>
        $(document).ready(function() {
            // Initialize iCheck for checkboxes if needed
            $('input[type="checkbox"]').iCheck({
                checkboxClass: 'icheckbox_minimal-blue',
                radioClass: 'iradio_minimal-blue',
                increaseArea: '20%' // optional
            });

            // Auto-switch to tab with errors if validation fails
            @if (session('back'))
                $('.nav-tabs a[href="#{{ session('back')['open'] == 1 ? 'arabic' : (session('back')['open'] == 2 ? 'english' : 'types') }}"]')
                    .tab('show');
            @endif
        });
    </script>
@endsection