@extends('Admin.layout')

@section('content')

<style>
    .policy-card {
        border: 0;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    }

    .policy-status-active {
        color: #28c76f;
        background-color: rgba(40, 199, 111, 0.12);
        border: 1px solid #28c76f;
    }

    .policy-status-inactive {
        color: #ea5455;
        background-color: rgba(234, 84, 85, 0.12);
        border: 1px solid #ea5455;
    }

    .policy-status-badge {
        display: inline-block;
        padding: 4px 10px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 600;
    }

    .policy-content {
        white-space: normal;
        word-break: break-word;
        line-height: 1.7;
    }
</style>



<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h5 class="mb-0">
          <a href="{{ route('company_policies') }}"
    class="btn btn-icon bg-white waves-effect me-2"
    style="box-shadow: 0 9px 12px -2px #66328E1F;">
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="#000"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                >
                    <path stroke="none" d="M0 0h24v24H0z"></path>
                    <path d="M15 6l-6 6l6 6"></path>
                </svg>
            </a>

            Company Policy
        </h5>
    </div>
</div>

<div class="row justify-content-center">
    <div class="col-lg-8 col-md-10 col-12">

        <div class="card policy-card mb-4">
            <div class="card-body p-4">

                <h6 class="mb-4">
                    Add Company Policy
                </h6>

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

                    <div class="mb-3">
                        <label
                            for="policies"
                            class="form-label"
                        >
                            Company Policy
                            <span class="text-danger">*</span>
                        </label>

                        <textarea
                            name="policies"
                            id="policies"
                            class="form-control @error('policies') is-invalid @enderror"
                            rows="8"
                            minlength="10"
                            maxlength="10000"
                            placeholder="Enter company policies"
                            required
                        >{{ old('policies') }}</textarea>

                        <div class="d-flex justify-content-between mt-1">
                            <div>
                                @error('policies')
                                    <small class="text-danger">
                                        {{ $message }}
                                    </small>
                                @enderror
                            </div>

                            <small class="text-muted">
                                <span id="policyCharacterCount">0</span>
                                / 10000
                            </small>
                        </div>
                    </div>

                    <div class="mb-4">
                        <label class="form-label d-block">
                            Status
                            <span class="text-danger">*</span>
                        </label>

                        {{-- Hidden value ensures 0 is submitted --}}
                        <input
                            type="hidden"
                            name="is_active"
                            value="0"
                        >

                        <div class="form-check form-switch">
                            <input
                                type="checkbox"
                                class="form-check-input"
                                name="is_active"
                                id="is_active"
                                value="1"
                                {{ old('is_active', 1) == 1 ? 'checked' : '' }}
                            >

                            <label
                                class="form-check-label"
                                for="is_active"
                                id="statusText"
                            >
                                Active
                            </label>
                        </div>

                        @error('is_active')
                            <small class="text-danger">
                                {{ $message }}
                            </small>
                        @enderror
                    </div>

                    <div class="text-center">
                        <button
                            type="reset"
                            class="btn btn-label-secondary me-2"
                            id="resetPolicyButton"
                        >
                            Reset
                        </button>

                        <button
                            type="submit"
                            class="btn btn-primary"
                            id="submitPolicyButton"
                        >
                            Add Policy
                        </button>
                    </div>

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

    </div>
</div>



<script>
document.addEventListener('DOMContentLoaded', function () {
    const policyField = document.getElementById('policies');
    const characterCount = document.getElementById(
        'policyCharacterCount'
    );

    const statusCheckbox = document.getElementById('is_active');
    const statusText = document.getElementById('statusText');

    const policyForm = document.getElementById(
        'companyPolicyForm'
    );

    const submitButton = document.getElementById(
        'submitPolicyButton'
    );

    const resetButton = document.getElementById(
        'resetPolicyButton'
    );

    function updateCharacterCount() {
        characterCount.textContent =
            policyField.value.length;
    }

    function updateStatusText() {
        statusText.textContent =
            statusCheckbox.checked
                ? 'Active'
                : 'Inactive';
    }

    updateCharacterCount();
    updateStatusText();

    policyField.addEventListener(
        'input',
        updateCharacterCount
    );

    statusCheckbox.addEventListener(
        'change',
        updateStatusText
    );

    resetButton.addEventListener('click', function () {
        setTimeout(function () {
            policyField.value = '';
            statusCheckbox.checked = true;

            updateCharacterCount();
            updateStatusText();

            policyField.classList.remove('is-invalid');
        }, 0);
    });

    policyForm.addEventListener('submit', function (event) {
        const policyValue = policyField.value.trim();

        if (policyValue.length < 10) {
            event.preventDefault();

            policyField.classList.add('is-invalid');
            policyField.focus();

            alert(
                'Company policy must contain at least 10 characters.'
            );

            return;
        }

        if (policyValue.length > 10000) {
            event.preventDefault();

            policyField.classList.add('is-invalid');
            policyField.focus();

            alert(
                'Company policy must not exceed 10,000 characters.'
            );

            return;
        }

        submitButton.disabled = true;
        submitButton.innerText = 'Submitting...';
    });
});
</script>

@endsection