@extends('layouts.master')

@section('css')
<!-- Internal Nice-select css  -->
<link href="{{ URL::asset('assets/plugins/jquery-nice-select/css/nice-select.css') }}" rel="stylesheet" />

<style>
/* --------- جدول الفترات --------- */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: #f9fafb;
}
.table-hover tbody tr:hover {
    background-color: #e0f2fe;
}
.table th, .table td {
    vertical-align: middle;
    text-align: center;
}

/* --------- Toggle Switch --------- */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 30px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f44336; /* أحمر افتراضي */
  transition: 0.4s;
  border-radius: 30px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 24px;
  width: 24px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #4CAF50; /* أخضر إذا مفعل */
}

input:checked + .slider:before {
  transform: translateX(30px);
}

/* --------- تحسينات النموذج --------- */
.parent-label {
    font-weight: 600;
    margin-bottom: 5px;
}

.parent-input {
    border-radius: 8px;
    padding: 8px;
}

.btn-main-primary {
    background-color: #2563eb;
    border: none;
    font-weight: 600;
    transition: 0.3s;
}

.btn-main-primary:hover {
    background-color: #1e40af;
}

/* --------- صندوق التواريخ --------- */
.fc-datepicker {
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 7px;
}
</style>
@endsection

@section('title')
{{ __('home.periods') }}
@endsection

@section('page-header')
<div class="main-parent">
    <div class="breadcrumb-header justify-content-between parent-heading">
        <div class="my-auto">
            <div class="d-flex">
                <h4 class="content-title mb-0 my-auto">{{ __('home.periods') }}</h4>
            </div>
        </div>
    </div>
</div>
@endsection

@section('content')
<div class="row">
    <div class="col-lg-12 col-md-12">

        {{-- رسائل الخطأ --}}
        @if ($errors->any())
            <div class="alert alert-danger alert-dismissible fade show">
                <button aria-label="Close" class="close" data-dismiss="alert" type="button">
                    <span aria-hidden="true">&times;</span>
                </button>
                <strong>خطأ</strong>
                <ul>
                    @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" role="alert">
                <strong>{{ session()->get('create_department') }}</strong>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        @endif

        {{-- نموذج إضافة فترة --}}
        <div class="card shadow-sm mb-4">
            <div class="card-body pb-0 pt-3">
                <form class="parsley-style-1" id="selectForm2" autocomplete="off"
                      action="{{ url(LaravelLocalization::getCurrentLocale() . '/create_period') }}"
                      method="post">
                    @csrf
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="parent-label">{{ __('home.pariod_name') }} <span class="tx-danger">*</span></label>
                            <input class="form-control parent-input" name="pariod_name" required type="text">
                        </div>

                        <div class="col-md-4">
                            <label class="parent-label">{{ __('home.pariod_status') }}</label>
                            <select style="direction: rtl" name="pariod_status" class="form-control parent-input">
                                <option value="1">{{ __('users.active') }}</option>
                                <option value="0">{{ __('users.disactive') }}</option>
                            </select>
                        </div>

                        <div class="col-md-4">
                            <label class="parent-label">{{ __('home.notesClient') }}</label>
                            <input type="text" class="form-control parent-input" name="notes" value="-">
                        </div>
                    </div>

                    <div class="row g-3 mt-2">
                        <div class="col-md-3">
                            <label>{{ __('home.pariod_start') }}</label>
                            <input class="form-control parent-input fc-datepicker" name="pariod_start" placeholder="YYYY-MM-DD" required>
                        </div>

                        <div class="col-md-3">
                            <label>{{ __('home.pariod_end') }}</label>
                            <input class="form-control parent-input fc-datepicker" name="pariod_end" placeholder="YYYY-MM-DD" required>
                        </div>
                    </div>

                    <div class="text-center mt-3">
                        <button class="btn btn-main-primary" type="submit">
                            {{ __('home.Add') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>

        {{-- جدول عرض الفترات --}}
        <div class="table-responsive hoverable-table">
            <table class="table table-hover table-bordered table-striped" id="example1" data-page-length='50'>
                <thead class="table-light">
                    <tr>
                        <th>#</th>
                        <th>{{ __('home.pariod_name') }}</th>
                        <th>{{ __('home.pariod_status') }}</th>
                        <th>{{ __('home.pariod_start') }}</th>
                        <th>{{ __('home.pariod_end') }}</th>
                        <th>{{ __('home.notesClient') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (App\Models\Period::get() as $i => $period)
                        <tr>
                            <td>{{ $i+1 }}</td>
                            <td>{{ $period->pariod_name }}</td>
                            <td>
                                <label class="switch">
                                    <input type="checkbox" class="period-toggle" id="period_toggle" data-id="{{ $period->id }}" {{ $period->pariod_status == 1 ? 'checked' : '' }}>
                                    <span class="slider"></span>
                                </label>
                            </td>
                            <td>{{ $period->pariod_start }}</td>
                            <td>{{ $period->pariod_end }}</td>
                            <td>{{ $period->notesClient }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

    </div>
</div>
@endsection

@section('js')


<script>
        // AJAX لتغيير الحالة
    $('.period-toggle').change(function() {
        var status = $(this).is(':checked') ? 1 : 0;
        var id = $(this).data('id');
        var $checkbox = $(this);
        var url = " {{ URL::to('periodtoggle') }}";

        $.ajax({
            url: url,
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                id: id,
                status: status
            },
            success: function(response) {
                if(response.success){
                    var stateText = response.status == 1 ? 'نشطة' : 'غير نشطة';
                    
                    // console
                    console.log('ID: ' + response.id + ', الحالة: ' + stateText);

                    // رسالة Toast
                    var toastColor = response.status == 1 ? '#4CAF50' : '#f44336';
                    showToast('تم تحديث الحالة: ' + stateText, toastColor);

                } else {
                    showToast('حدث خطأ، لم يتم تحديث الحالة', '#f44336');
                    // إعادة checkbox للوضع السابق
                    $checkbox.prop('checked', !status);
                }
            },
            error: function() {
                showToast('حدث خطأ في الاتصال', '#f44336');
                $checkbox.prop('checked', !status);
            }
        });
    });

    // دالة عرض Toast
    function showToast(message, bgColor) {
        var $toast = $('<div></div>').text(message).css({
            position: 'fixed',
            bottom: '20px',
            right: '20px',
            background: bgColor,
            color: '#fff',
            padding: '10px 20px',
            'border-radius': '6px',
            'box-shadow': '0 2px 6px rgba(0,0,0,0.2)',
            'z-index': 9999,
            display: 'none'
        });

        $('body').append($toast);
        $toast.fadeIn(400).delay(2000).fadeOut(400, function() {
            $(this).remove();
        });
    }

$(document).ready(function() {

    // اختفاء الرسائل تلقائيًا بعد 4 ثواني
    $('.alert').delay(4000).fadeOut(500);

    // تهيئة التاريخ
    $('.fc-datepicker').datepicker({
        dateFormat: 'yy-mm-dd'
    });


});
</script>

@endsection