@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>
        body {
            font-family: Arial;
            background: #f4f6f8;
            direction: rtl;
        }

        .box {
            width: 300px;
            background: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px #ccc;
            margin-top: 10px;
        }

        h3 {
            text-align: center;
            color: #333;
        }

        label {
            display: block;
            padding: 10px;
            margin: 5px 0;
            background: #f1f1f1;
            border-radius: 5px;
            cursor: pointer;
            transition: 0.3s;
        }

        input[type="checkbox"] {
            margin-left: 10px;
        }

        label:hover {
            background: #dbeafe;
        }

        button {
            width: 100%;
            padding: 10px;
            margin-top: 10px;
            background: #2563eb;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        button:hover {
            background: #1e40af;
        }
    </style>
@endsection

@section('title')
    {{ __('home.mohor') }}
@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.mohor') }}</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">
            <div class="card-body pb-0 pt-2">
                <form class="parsley-style-1" id="selectForm2" autocomplete="off"
                      action="{{ url(LaravelLocalization::getCurrentLocale() . '/create_mohor') }}"
                      method="post">
                    @csrf
                    <div class="row">
                        <div class="col-lg-4">
                            <label class="parent-label">{{ __('home.mohor_name') }} <span class="tx-danger">*</span></label>
                            <input class="form-control parent-input form-control-sm mg-b-20" name="mohor_name" required type="text">
                        </div>

                        <div class="col-lg-4">
                            <label class="form-label parent-label" id="department">{{ __('home.msaol_mohor') }} <span class="tx-danger">*</span></label>
                            <select name="msaol_mohor" id="msaol_mohor" class="form-control parent-input">
                                @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-4">
                            <label class="parent-label">{{ __('home.area_hktar') }} <span class="tx-danger">*</span></label>
                            <input class="form-control parent-input form-control-sm mg-b-20" name="huktar_num" required type="text">
                        </div>
                        
                        
                        
                    </div>

                    {{-- اختيار الأبراج --}}
                    <div class="box">
                        <h3>{{ __('home.tower_choose') }}</h3>
                        @foreach (App\Models\towers::where('status',0)->get() as $item)
                            <label>
                                <input type="checkbox" name="towers[]" value="{{ $item->id }}"> {{ $item->tower_name }}
                            </label>
                        @endforeach
                    </div>

                    <div class="text-center">
                        <button class="btn btn-main-primary pd-x-20 print-style p-1" type="submit">
                            {{ __('home.Add') }}
                            <svg style="width: 20px" class="svg-icon-buttons" viewBox="0 0 20 20">
                                <path fill="none" d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
                            </svg>
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <br><br>

        {{-- جدول عرض الموهر --}}
        <div class="table-responsive hoverable-table">
            <table class="table table-hover table-bordered table-striped" id="example1" data-page-length="50" style="text-align: center;">
                <thead>
                    <tr>
                        <th class="wd-10p border-bottom-0">#</th>
                        <th class="wd-15p border-bottom-0">{{ __('home.mohor_name') }}</th>
                        <th class="wd-20p border-bottom-0">{{ __('home.msaol_mohor') }}</th>
                        <th class="wd-20p border-bottom-0">{{ __('home.area_hktar') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse (App\Models\Mohors::get() as $user)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>{{ $user->mohor_name }}</td>
                            <td>{{ $user->employee->name_ar }}</td>
                            <td>{{ $user->huktar_num }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="3">{{ __('home.no_data_found') }}</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

    </div>
</div>
@endsection

@section('js')
<!-- Internal Nice-select js-->
<script src="{{ URL::asset('assets/plugins/jquery-nice-select/js/jquery.nice-select.js') }}"></script>
<script src="{{ URL::asset('assets/plugins/jquery-nice-select/js/nice-select.js') }}"></script>

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

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

        // تهيئة التاريخ إذا كان موجود
        $('.fc-datepicker').datepicker({
            dateFormat: 'yy-mm-dd'
        });
    });
</script>
@endsection