@extends('layouts.master')

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

<style>
/* ===== Toggle Switch ===== */
.switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 24px;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #dc3545;
    transition: .4s;
    border-radius: 24px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    transition: .4s;
    border-radius: 50%;
}
input:checked + .slider {
    background-color: #28a745;
}
input:checked + .slider:before {
    transform: translateX(22px);
}
</style>
@endsection

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

@section('page-header')
<div class="breadcrumb-header justify-content-between">
    <h4 class="content-title mb-0">{{ __('home.other_periods') }}</h4>
</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="{{ url(LaravelLocalization::getCurrentLocale().'/create_other_period') }}">
@csrf

<div class="row">
    <div class="col">
        <label>{{ __('home.crop_name') }}</label>
        <input type="text" name="crop_name" class="form-control" required>
    </div>

    <div class="col">
        <label>{{ __('home.Implant_number') }}</label>
        <input type="text" name="Implant_number" class="form-control" required>
    </div>

    <div class="col">
        <label>{{ __('home.cop_name') }}</label>
        <input type="text" name="cop_name" class="form-control" required>
    </div>
</div>

<div class="row mt-2">
    <div class="col">
        <label>{{ __('home.pariod_name') }}</label>
        <input type="text" name="pariod_name" class="form-control" required>
    </div>

    <div class="col">
        <label>{{ __('home.seed_name') }}</label>
        <input type="text" name="seed_name" class="form-control" required>
    </div>

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

<div class="row mt-2">
    <div class="col-md-3">
        <label>{{ __('home.date_start') }}</label>
        <input type="text" name="date_start" class="form-control fc-datepicker" required>
    </div>

    <div class="col-md-3">
        <label>{{ __('home.date_end') }}</label>
        <input type="text" name="date_end" class="form-control fc-datepicker" required>
    </div>

    <div class="col-md-3">
        <label>{{ __('home.pariod_status') }}</label>
        <select name="status" class="form-control">
            <option value="1">{{ __('users.active') }}</option>
            <option value="0">{{ __('users.disactive') }}</option>
        </select>
    </div>
</div>

<div class="text-center mt-3">
    <button class="btn btn-primary">{{ __('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.crop_name') }}</th>
    <th>{{ __('home.Implant_number') }}</th>
    <th>{{ __('home.pariod_name') }}</th>
    <th>{{ __('home.pariod_status') }}</th>
    <th>{{ __('home.date_start') }}</th>
    <th>{{ __('home.date_end') }}</th>
    <th>{{ __('home.seed_name') }}</th>
    <th>{{ __('home.notesClient') }}</th>
</tr>
</thead>

<tbody>
@foreach (App\Models\other_period::get() as $i => $period)
<tr>
    <td>{{ $i+1 }}</td>
    <td>{{ $period->crop_name }}</td>
    <td>{{ $period->Implant_number }}</td>
    <td>{{ $period->period_name }}</td>

    <td>
        <label class="switch">
            <input type="checkbox"
                   class="period-toggle"
                   data-id="{{ $period->id }}"
                   {{ $period->pariod_status == 1 ? 'checked' : '' }}>
            <span class="slider"></span>
        </label>
    </td>

    <td>{{ $period->date_start }}</td>
    <td>{{ $period->date_end }}</td>
    <td>{{ $period->seed_name }}</td>
    <td>{{ $period->notes }}</td>
</tr>
@endforeach
</tbody>
</table>
</div>

</div>
</div>
@endsection

@section('js')

<script>
$(document).ready(function () {

    $('.alert').delay(4000).fadeOut(500);

    $(document).on('change', '.period-toggle', function () {
        let status = $(this).is(':checked') ? 1 : 0;
        let id = $(this).data('id');

        console.log('ID:', id, 'STATUS:', status);
        var url = " {{ URL::to('other_periodtoggle') }}";

        $.ajax({
            url: url,
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                id: id,
                status: status
            },
                error: function(response) {
                    console.log(response)
                    alert("{{ __('home.sorryerror') }}")

                }
        });

    });
});
</script>
@endsection