@extends('admin.layouts.master')

@section('content')
    <div class="setting-layout">
        <div class="setting-layout-wrapper">
            <div class="setting-layout-body">
                <div class="add-company">
                    <div class="add-company-header">
                        <a class="title" href="{{ route('admin.department.list') }}">
                            <i class="fa-solid fa-arrow-left"></i>
                            @lang('Department list')
                        </a>
                        <div class="add-company-header-button">
                            <button class="btn btn--base btn--sm saveBtn">@lang('Save')</button>
                            <a href="{{ route('admin.department.list') }}" class="btn btn-outline--secondary btn--sm ms-2">@lang('Cancel')</a>
                        </div>
                    </div>
                    <div class="add-company-body">
                        <form action="{{ route('admin.department.save', $department->id ?? '') }}" method="POST" class="add-department-form departmentForm">
                            @csrf
                            <div class="card style-two w-100">
                                <div class="card-header">
                                    <p class="card-title">@lang('Department Information')</p>
                                </div>
                                <div class="card-body">
                                    <div class="row c-gx-4 gy-3 gy-md-4">
                                        <div class="col-md-6">
                                            <label for="name" class="form--label style-two">
                                                @lang('Department Name') <span class="text--danger">*</span>
                                            </label>
                                            <input type="text" class="form--control md-style" name="name" value="{{ old('name', $department->name ?? '') }}" placeholder="@lang('e.g. Department Name')" required />
                                        </div>

                                        <div class="col-md-6">
                                            <label for="email" class="form--label style-two">
                                                @lang('Email')
                                            </label>
                                            <input type="email" class="form--control md-style" name="email" value="{{ old('email', $department->email ?? '') }}" placeholder="@lang('e.g. example@gmail.com')" />
                                            <small class="text--primary fs-12"><i class="las la-info-circle"></i>
                                                @lang('This email will appear in the field of replies.')
                                            </small>
                                        </div>
                                        <div class="col-12">
                                            <label for="description" class="form--label style-two">
                                                @lang('Description')
                                            </label>
                                            <textarea class="form--control md-style" name="description" placeholder="@lang('e.g. Description')">{{ old('description', $department->description ?? '') }}</textarea>
                                        </div>

                                        <div class="col-12">
                                            <div class="form--group">
                                                <div class="form--check">
                                                    <input class="form-check-input" name="agents_only" type="checkbox" @checked(old('agents_only', $department->agents_only ?? false)) />
                                                    <label class="form-check-label">
                                                        <span class="title">@lang('Agents Only')</span>
                                                        <span class="description">
                                                            @lang('When enabled, only support agents can create tickets in this department. Customers will not have access to submit tickets directly.')
                                                        </span>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-12">
                                            <div class="form--group">
                                                <div class="form--check">
                                                    <input class="form-check-input" name="pipe_only" type="checkbox" @checked(old('pipe_only', $department->pipe_only ?? false)) />
                                                    <label class="form-check-label">
                                                        <span class="title">@lang('Pipe Only')</span>
                                                        <span class="description">
                                                            @lang('When enabled, support tickets for this department can only be created via email piping. Web form submissions will be disabled.')
                                                        </span>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-12 pipeArea d-none">
                                            <div class="row c-gx-4 gy-3 gy-md-4">
                                                <div class="col-sm-6">
                                                    <label for="host" class="form--label style-two">
                                                        @lang('Host') <span class="text--danger">*</span>
                                                    </label>
                                                    <input type="text" class="form--control md-style" name="host" value="{{ old('host', $department->host ?? '') }}" placeholder="@lang('e.g. mail.example.com')" required />
                                                </div>
                                                <div class="col-sm-6">
                                                    <label for="port" class="form--label style-two">
                                                        @lang('Port') <span class="text--danger">*</span>
                                                    </label>
                                                    <input type="number" class="form--control md-style" name="port" value="{{ old('port', $department->port ?? '') }}" placeholder="@lang('e.g. 587')" required />
                                                </div>
                                                <div class="col-sm-6">
                                                    <label for="email_user" class="form--label style-two">
                                                        @lang('Email User') <span class="text--danger">*</span>
                                                    </label>
                                                    <input type="text" class="form--control md-style" name="email_user" value="{{ old('email_user', $department->email_user ?? '') }}" placeholder="@lang('e.g. user@example.com')" required />
                                                </div>
                                                <div class="col-sm-6">
                                                    <label for="email_password" class="form--label style-two">
                                                        @lang('Email Password') <span class="text--danger">*</span>
                                                    </label>
                                                    <input type="password" class="form--control md-style" name="email_password" value="{{ old('email_password', $department->email_password ?? '') }}" placeholder="@lang('Enter password')" required />
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-12">
                                            <div class="form--group">
                                                <div class="form--check">
                                                    <input class="form-check-input" name="auto_respond" type="checkbox" @checked(old('auto_respond', $department->auto_respond ?? false)) />
                                                    <label class="form-check-label">
                                                        <span class="title">@lang('Auto Respond')</span>
                                                        <span class="description">
                                                            @lang('When enabled, an automatic greeting message will be sent to the customer after a support ticket is created.') <a href="{{ route('admin.setting.response.auto') }}">@lang('response message')</a>
                                                        </span>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-12">
                                            <div class="form--group">
                                                <div class="form--check">
                                                    <input class="form-check-input" name="feedback_request" type="checkbox" @checked(old('feedback_request', $department->feedback_request ?? false)) />
                                                    <label class="form-check-label">
                                                        <span class="title">@lang('Feedback Request')</span>
                                                        <span class="description">
                                                            @lang('When enabled, a feedback request will be automatically sent to the customer when the ticket is closed.')
                                                        </span>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-12">
                                            <div class="form--group">
                                                <div class="form--check">
                                                    <input class="form-check-input" name="auto_close" type="checkbox" @checked(old('auto_close', $department->auto_close ?? false)) />
                                                    <label class="form-check-label">
                                                        <span class="title">@lang('Auto Close')</span>
                                                        <span class="description">
                                                            @lang('When enabled, tickets will be automatically closed after a period of inactivity.')
                                                        </span>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <button class="submitBtn d-none"></button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@push('script')
    <script>
        (function($) {
            "use strict";
            $('.saveBtn').on('click', function() {
                $('.submitBtn').click();
            });

            $('[name="pipe_only"]').on('change', function() {
                if ($(this).is(':checked')) {
                    $('[name="agents_only"]').prop('checked', false);
                }
                if ($(this).is(':checked')) {
                    $('.pipeArea').removeClass('d-none');
                    $('.pipeArea').find('input, textarea, select').attr('required', true);
                } else {
                    $('.pipeArea').addClass('d-none');
                    $('.pipeArea').find('input, textarea, select').removeAttr('required');
                }
            }).change();

            $('[name="agents_only"]').on('change', function() {
                if ($(this).is(':checked')) {
                    $('[name="pipe_only"]').prop('checked', false).trigger('change');
                }
            });

        })(jQuery);
    </script>
@endpush
