@extends('layouts.master')

@section('css')
    <!-- Internal Select2 css -->
    <link href="{{ URL::asset('assets/plugins/select2/css/select2.min.css') }}" rel="stylesheet">

    <style>
        /* ==========================================================
            Increase or Deduction Modern UI
            ========================================================== */
        body {
            background-color: #f1f5f9;
            font-family: 'Segoe UI', Tahoma, 'Inter', sans-serif;
        }

        .invoices-main-card {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 14px;
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
            margin-bottom: 24px;
            overflow: visible !important;
        }

        .invoices-main-card .card-header {
            background-color: #ffffff;
            border-bottom: 1px solid #f1f5f9;
            padding: 16px 20px;
            font-size: 15px;
            font-weight: 800;
            color: #0f172a;
            border-top-left-radius: 14px;
            border-top-right-radius: 14px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .filter-title-label {
            font-size: 13.5px;
            font-weight: 800;
            color: #334155;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .form-control-filter {
            border: 1.5px solid #cbd5e1 !important;
            border-radius: 9px !important;
            font-size: 14px !important;
            font-weight: 700 !important;
            padding: 9px 12px !important;
            color: #0f172a !important;
            height: 44px !important;
            transition: all 0.2s ease;
        }

        .form-control-filter:focus {
            border-color: #3b82f6 !important;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
            background: #ffffff !important;
        }

        .type-selection-card {
            display: flex;
            gap: 15px;
            margin-bottom: 25px;
        }

        .custom-radio-box {
            flex: 1;
            position: relative;
        }

        .custom-radio-box input[type="radio"] {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            width: 100%;
            height: 100%;
            z-index: 2;
        }

        .radio-tile {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 14px 20px;
            border-radius: 10px;
            border: 2px solid #e2e8f0;
            background-color: #f8fafc;
            font-size: 15px;
            font-weight: 800;
            color: #475569;
            transition: all 0.2s ease;
            cursor: pointer;
        }

        .custom-radio-box input[value="1"]:checked + .radio-tile {
            border-color: #10b981;
            background-color: #ecfdf5;
            color: #047857;
            box-shadow: 0 4px 10px rgba(16, 185, 129, 0.15);
        }

        .custom-radio-box input[value="2"]:checked + .radio-tile {
            border-color: #ef4444;
            background-color: #fef2f2;
            color: #b91c1c;
            box-shadow: 0 4px 10px rgba(239, 68, 68, 0.15);
        }

        .select2-container .select2-selection--single {
            border: 1.5px solid #cbd5e1 !important;
            border-radius: 9px !important;
            height: 44px !important;
            padding-top: 6px !important;
        }

        .select2-container .select2-selection--single .select2-selection__rendered {
            font-size: 13.5px !important;
            font-weight: 700 !important;
            color: #0f172a !important;
            line-height: 30px !important;
        }

        .select2-container .select2-selection--single .select2-selection__arrow {
            top: 9px !important;
        }
    </style>
@endsection

@section('title')
    {{ __('hr.Increaseـor deductionـforـtheـemployee') }}
@stop

@section('page-header')
<div class="main-parent">
    <div class="breadcrumb-header justify-content-between mb-3">
        <div class="my-auto">
            <div class="d-flex align-items-center">
                <div class="bg-primary text-white rounded d-flex align-items-center justify-content-center mr-2" style="width: 38px; height: 38px; border-radius: 10px !important;">
                    <i class="las la-hand-holding-usd" style="font-size: 22px;"></i>
                </div>
                <div>
                    <h4 class="content-title mb-0 font-weight-bold" style="color: #0f172a;">{{ __('hr.Increaseـor deductionـforـtheـemployee') }}</h4>
                    <span class="text-muted tx-13 font-weight-bold">تسجيل العمليات المالية المباشرة على راتب الموظف (مكافأة أو خصم)</span>
                </div>
            </div>
        </div>
        <div class="d-flex my-xl-auto right-content">
            <a class="btn btn-secondary px-3 font-weight-bold shadow-sm" style="border-radius: 9px;" href="{{ url('/' . ($page = 'show_employees')) }}">
                <i class="fa fa-arrow-right ml-1"></i> رجوع للموظفين
            </a>
        </div>
    </div>
</div>
@endsection

@section('content')

@if (count($errors) > 0)
    <div class="alert alert-danger font-weight-bold shadow-sm" style="border-radius: 10px;">
        <button aria-label="Close" class="close" data-dismiss="alert" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
        <strong>خطأ</strong>
        <ul class="mb-0 mt-1">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

@if (session()->has('create_department'))
    <div class="alert alert-success alert-dismissible fade show font-weight-bold shadow-sm" style="border-radius: 10px;" role="alert">
        <strong><i class="fa fa-check-circle ml-1"></i> تم بنجاح:</strong> {{ session()->get('create_department') }}
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
@endif

<!-- row -->
<div class="row">
    <div class="col-lg-12 col-md-12">
        <form class="parsley-style-1" id="selectForm2" autocomplete="off" name="selectForm2"
              action="{{ url(Mcamara\LaravelLocalization\Facades\LaravelLocalization::getCurrentLocale() . '/' . ($page = 'Increaseـor_deduction')) }}"
              method="post">
            {{ csrf_field() }}

            <div class="invoices-main-card mb-4 p-4">

                <div class="card-header px-0 pt-0 mb-4">
                    <i class="fa fa-calculator text-primary"></i>
                    <span>بيانات العملية المالية</span>
                </div>

                <!-- 1. اختيار نوع العملية (مكافأة / خصم) -->
                <div class="row justify-content-center">
                    <div class="col-md-8 col-lg-6">
                        <div class="type-selection-card">
                            <!-- راديو المكافأة -->
                            <div class="custom-radio-box">
                                <input checked name="rdio" type="radio" value="1" id="type_div" class="real-radio">
                                <label for="type_div" class="radio-tile mb-0">
                                    <i class="fa fa-plus-circle text-success" style="font-size: 20px;"></i>
                                    <span>{{ __('hr.bouns') }} (إضافة)</span>
                                </label>
                            </div>

                            <!-- راديو الخصم -->
                            <div class="custom-radio-box">
                                <input name="rdio" value="2" type="radio" id="type_discount" class="real-radio">
                                <label for="type_discount" class="radio-tile mb-0">
                                    <i class="fa fa-minus-circle text-danger" style="font-size: 20px;"></i>
                                    <span>{{ __('hr.discount') }} (استقطاع)</span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 2. تفاصيل الموظف والمبلغ -->
                <div class="row mb-3">

                    <!-- اختيار الموظف -->
                    <div class="col-lg-6 mb-3">
                        <label class="filter-title-label">
                            <i class="fa fa-user text-primary"></i> {{ __('hr.searchby_name_Id') }} <span class="text-danger">*</span>
                        </label>
                        <select name="department" id="department" class="form-control select2" style="width: 100% !important;" required>
                            <option value="" disabled selected>اختر الموظف...</option>
                            @foreach (App\Models\employee::get() as $employee)
                                <option value="{{ $employee->id }}">
                                    {{ $employee->name_ar }} - (هوية: {{ $employee->personal_identification }})
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- مبلغ المكافأة -->
                    <div class="col-lg-6 mb-3" id="fnWrapper">
                        <label class="filter-title-label text-success" id="increasValuelabel">
                            <i class="fa fa-money text-success"></i> {{ __('hr.increasValue') }} <span class="text-danger">*</span>
                        </label>
                        <input class="form-control form-control-filter text-center font-weight-bold text-success"
                               name="increasValue" id="increasValue" required type="text"
                               onkeyup="increasValueconvert()" value="0" style="font-size: 16px !important;">
                    </div>

                    <!-- مبلغ الخصم (يظهر عند اختيار الخصم) -->
                    <div class="col-lg-6 mb-3" id="lnWrapper">
                        <label class="filter-title-label text-danger" id="decreaseValuelabel">
                            <i class="fa fa-minus-circle text-danger"></i> {{ __('hr.decreaseValue') }} <span class="text-danger">*</span>
                        </label>
                        <input class="form-control form-control-filter text-center font-weight-bold text-danger"
                               data-parsley-class-handler="#lnWrapper" name="decreaseValue" id="decreaseValue"
                               type="text" onkeyup="decreaseValueconvert()" value="0" style="font-size: 16px !important;">
                    </div>

                    <!-- الملاحظات والسبب -->
                    <div class="col-lg-12 mb-3">
                        <label class="filter-title-label">
                            <i class="fa fa-sticky-note-o text-muted"></i> الملاحظات والسبب
                        </label>
                        <textarea class="form-control form-control-filter" style="height: auto !important;"
                                  name="notes" id="notes" rows="3" placeholder="اكتب تفاصيل أو سبب العملية المالية هنا..."></textarea>
                    </div>

                </div>

                <!-- زر الإضافة والحفظ -->
                <div class="d-flex justify-content-center mt-4">
                    <button class="btn btn-primary px-5 py-2 font-weight-bold shadow-sm" type="submit"
                            style="border-radius: 9px; font-size: 15px; background: linear-gradient(135deg, #0284c7, #0369a1) !important; border: none;">
                        <i class="fa fa-check-circle ml-1"></i> {{ __('home.Add') }}
                    </button>
                </div>

            </div>
        </form>
    </div>
</div>
<!-- row closed -->

@endsection

@section('js')
    <!-- Internal Select2 js -->
    <script src="{{ URL::asset('assets/plugins/select2/js/select2.min.js') }}"></script>
    <!-- Internal Parsley.min js -->
    <script src="{{ URL::asset('assets/plugins/parsleyjs/parsley.min.js') }}"></script>
    <!-- Internal Form-validation js -->
    <script src="{{ URL::asset('assets/js/form-validation.js') }}"></script>

    <script>
        function increasValueconvert() {
            var input = document.getElementById("increasValue");
            if (input) {
                input.value = toEnglishNumber(input.value);
            }
        }

        function decreaseValueconvert() {
            var input = document.getElementById("decreaseValue");
            if (input) {
                input.value = toEnglishNumber(input.value);
            }
        }

        function toEnglishNumber(strNum) {
            var ar = '٠١٢٣٤٥٦٧٨٩'.split('');
            var en = '0123456789'.split('');
            strNum = strNum.replace(/[٠١٢٣٤٥٦٧٨٩]/g, x => en[ar.indexOf(x)]);
            return strNum;
        }

        $(document).ready(function() {
            if ($.fn.select2) {
                $('.select2').select2({
                    placeholder: 'اختر الموظف...',
                    allowClear: true
                });
            }

            // الإعداد الافتراضي: إخفاء حقول الخصم وإظهار المكافأة
            $('#decreaseValuelabel').hide();
            $('#decreaseValue').hide();
            $('#lnWrapper').hide();
            $('#decreaseValue').removeAttr('required');

            // التبديل عند الضغط على نوع العملية باستخدام القيمة value بدلاً من الـ ID
            $('input[name="rdio"]').on('change', function() {
                if ($(this).val() == '1') {
                    // وضع المكافأة (إضافة)
                    $('#increasValue').show().attr('required', 'required');
                    $('#increasValuelabel').show();
                    $('#fnWrapper').show();

                    $('#decreaseValue').hide().removeAttr('required');
                    $('#decreaseValuelabel').hide();
                    $('#lnWrapper').hide();
                } else {
                    // وضع الخصم (استقطاع)
                    $('#decreaseValue').show().attr('required', 'required');
                    $('#decreaseValuelabel').show();
                    $('#lnWrapper').show();

                    $('#increasValue').hide().removeAttr('required');
                    $('#increasValuelabel').hide();
                    $('#fnWrapper').hide();
                }
            });

            setTimeout(function() {
                $('.alert').fadeOut(500);
            }, 4000);
        });
    </script>
@endsection