@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.cultivations') }}
@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.cultivations') }}</h4>
            </div>
        </div>
    </div>
</div>
@endsection

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

{{-- alerts --}}
@if ($errors->any())
<div class="alert alert-danger">
    <ul>
        @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
        @endforeach
    </ul>
</div>
@endif

@if (session()->has('create_department'))
<div class="alert alert-success">
    {{ session()->get('create_department') }}
</div>
@endif

{{-- form --}}
<div class="card mb-4">
<div class="card-body">

<form method="POST" action="{{ route('cultivations.store') }}">
    @csrf

    <div class="row">
        <div class="col-md-3">
            <label>{{ __('home.mohor_name') }}</label>
            <select name="mohor_id" class="form-control" required>
                <option value="">-- اختر المحور --</option>
                @foreach($mohors as $mohor)
                    <option value="{{ $mohor->id }}">{{ $mohor->mohor_name }} (المتاح: {{ $mohor->available_area }})</option>
                @endforeach
            </select>
        </div>

        <div class="col-md-3">
            <label>{{ __('home.crop_name') }}</label>
            <input type="text" name="crop_name" class="form-control" required>
        </div>
        {{-- الحقل الجديد: مسؤول الزرعة --}}
        <div class="col-md-3">
            <label>مسؤول الزرعة</label>
            <select name="emp_id" class="form-control" required>
                <option value="">-- اختر المسؤول --</option>
                @foreach(App\Models\employee::all() as $emp) {{-- أو ابعته من الكنترولر باسم $employees --}}
                    <option value="{{ $emp->id }}">{{ $emp->name_ar }}</option>
                @endforeach
            </select>
        </div>

        <div class="col-md-3">
            <label>{{ __('home.area_hktar') }}</label>
            <input type="number" step="0.01" name="area_huktar" class="form-control" required>
        </div>
    </div>

    <div class="row mt-3">
        <div class="col-md-8">
            <label>{{ __('home.notesClient') }}</label>
            <textarea name="notes" class="form-control" rows="3" placeholder="أضف أي تفاصيل إضافية هنا..."></textarea>
        </div>

        <div class="col-md-4">
            <label>{{ __('home.pariod_status') }}</label>
            <select name="status" class="form-control">
                <option value="active">نشط</option>
                <option value="inactive">غير نشط</option>
            </select>
        </div>
    </div>

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

{{-- table --}}
<div class="table-responsive">
<table class="table table-bordered table-hover text-center">
    <thead>
        <tr>
            <th>#</th>
            <th>{{ __('home.mohor_name') }}</th> 
            <th>{{ __('home.emp_name') }}</th> 
            <th>{{ __('home.crop_name') }}</th>
            <th>{{ __('home.area_hktar') }}</th> 
            <th>{{ __('home.notesClient') }}</th>
            <th>{{ __('home.date') }}</th>
            <th>{{ __('home.pariod_status') }}</th>
        </tr>
    </thead>

    <tbody>
       @foreach (App\Models\Cultivation::with('mohor')->orderBy('id','desc')->get() as $i => $item)
<tr>
    <td>{{ $i+1 }}</td>
    <td>{{ $item->mohor->mohor_name ?? 'N/A' }}</td>
    <td>
                <span class="badge badge-info">
                    {{ $item->employee->name_ar ?? 'غير محدد' }}
                </span>
            </td>
    <td>{{ $item->crop_name }}</td>
    <td>{{ $item->area_huktar }}</td>
   
    <td>{{ $item->notes }}</td>
    <td>{{ $item->created_at->format('Y-m-d') }}</td>
     <td>
        <form action="{{ route('cultivations.toggle', $item->id) }}" method="POST" id="finish-form-{{ $item->id }}">
            @csrf
            <button type="button" 
                    onclick="confirmFinish({{ $item->id }})" 
                    class="btn btn-sm {{ $item->status == 'active' ? 'btn-success' : 'btn-secondary' }}"
                    {{ $item->status != 'active' ? 'disabled' : '' }}>
                
                {{ $item->status == 'active' ? 'نشط (إنهاء؟)' : 'منتهي' }}
            </button>
        </form>
    </td>
</tr>
@endforeach
    </tbody>
</table>
</div>

</div>
</div>


@endsection

@section('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@if(session('swal_error'))
    <script>
        Swal.fire({
            title: 'عفواً!',
            text: "{{ session('swal_error') }}",
            icon: 'error',
            confirmButtonText: 'حسناً',
            confirmButtonColor: '#3085d6',
        });
    </script>
@endif

{{-- كود الـ SweetAlert للنجاح يفضل لوحده --}}
@if(session('success'))
    <script>
        Swal.fire({
            title: 'تم بنجاح',
            text: "{{ session('success') }}",
            icon: 'success',
            timer: 3000,
            showConfirmButton: false
        });
    </script>
@endif

{{-- الفنكشن الأساسية لازم تكون بره أي شرط عشان الزرار يشوفها --}}
<script>
function confirmFinish(id) {
    Swal.fire({
        title: 'هل تريد إنهاء الدورة؟',
        text: "بمجرد التأكيد، سيتم إخلاء المساحة وإرجاعها للمحور!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#28a745',
        cancelButtonColor: '#d33',
        confirmButtonText: 'نعم، تم الحصاد!',
        cancelButtonText: 'إلغاء'
    }).then((result) => {
        if (result.isConfirmed) {
            // تنفيذ الإرسال
            document.getElementById('finish-form-' + id).submit();
        }
    })
}
</script>

@endsection