@extends('layouts.master')
@section('css')
<!--  Owl-carousel css-->
<link href="{{ URL::asset('assets/plugins/owl-carousel/owl.carousel.css') }}" rel="stylesheet" />
<!-- Maps css -->
<link href="{{ URL::asset('assets/plugins/jqvmap/jqvmap.min.css') }}" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap" rel="stylesheet">
@endsection

@section('title')
{{ __('home.representatives') }}
@stop
@section('content')
<div class="container mt-4">
    <div class="card shadow-sm mb-4">
    <div class="card-header bg-primary text-white">
        <h5 class="mb-0" id="formTitle">{{ __('home.add_new_representative') }}</h5>
    </div>
    <div class="card-body">
      <form id="repForm">
            @csrf
            <input type="hidden" name="rep_id" id="rep_id">

            <div class="row g-3">
                <div class="col-md-3">
                    <label class="form-label fw-bold">{{ __('home.rep_name') }}</label>
                    <input type="text" name="name" id="name" class="form-control" required>
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-bold">{{ __('home.phone') }}</label>
                    <input type="text" name="phone" id="phone" class="form-control" required>
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-bold">{{ __('home.area') }}</label>
                    <input type="text" name="area" id="area" class="form-control">
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-bold">{{ __('home.commission_rate') }}</label>
                    <input type="number" step="0.01" name="commission_rate" id="commission_rate" class="form-control" required>
                </div>
            </div>

            <div class="row g-3 mt-2 align-items-end">
                <div class="col-md-8">
                    <label class="form-label fw-bold">{{ __('home.notes') }}</label>
                    <textarea name="notes" id="notes" class="form-control" rows="2" placeholder="{{ __('home.notes_placeholder') }}"></textarea>
                </div>
                <div class="col-md-4 d-flex">
                    <button type="submit" id="saveBtn" class="btn btn-success btn-lg w-100 me-2">
                        <i class="fas fa-save me-1"></i> {{ __('home.save_representative') }}
                    </button>
                    <button type="button" id="cancelBtn" class="btn btn-secondary btn-lg w-100 d-none">
                        <i class="fas fa-times me-1"></i> {{ __('home.cancel') }}
                    </button>
                </div>
            </div>
        </form>
        </div>
    </div>

    <div class="card shadow-sm">
        <div class="card-body">
         <table class="table table-bordered table-hover">
            <thead class="table-dark">
                <tr>
                    <th>{{ __('home.rep_name') }}</th>
                    <th>{{ __('home.phone') }}</th>
                    <th>{{ __('home.area') }}</th>
                    <th>{{ __('home.commission_rate') }}</th>
                    <th>{{ __('home.status') }}</th>
                    <th>{{ __('home.notes') }}</th>
                    <th>{{ __('home.actions') }}</th>
                </tr>
            </thead>
            <tbody id="repsTable">
                @foreach($reps as $rep)
                <tr id="row_{{ $rep->id }}">
                    <td>{{ $rep->name }}</td>
                    <td>{{ $rep->phone }}</td>
                    <td>{{ $rep->area }}</td>
                    <td>{{ $rep->commission_rate }}%</td>
                    <td>
                        @if($rep->status == 'active')
                            <span class="badge bg-success">{{ __('home.active') }}</span>
                        @else
                            <span class="badge bg-danger">{{ __('home.inactive') }}</span>
                        @endif
                    </td>
                    <td>{{ $rep->notes }}</td>
                    <td>
                        <button class="btn btn-sm btn-info editBtn" data-id="{{ $rep->id }}">
                            <i class="fa fa-edit"></i> {{ __('home.edit') }}
                        </button>
                        <button class="btn btn-sm btn-danger deleteBtn" data-id="{{ $rep->id }}">
                            <i class="fa fa-trash"></i> {{ __('home.delete') }}
                        </button>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
        </div>
    </div>
</div>

@endsection
@section('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
$(document).ready(function() {
    // 1. الحفظ (إضافة أو تحديث)
    $('#repForm').on('submit', function(e) {
        e.preventDefault();
        let id = $('#rep_id').val();
        let url = id ? "{{ route('reps.update') }}" : "{{ route('reps.store') }}";

        $.ajax({
            url: url,
            method: 'POST',
            data: $(this).serialize(),
            success: function(response) {
                Swal.fire('تم!', response.success, 'success');
                location.reload(); // لإعادة تحميل الجدول بالبيانات الجديدة
            }
        });
    });

    // 2. عند الضغط على تعديل (رفع الداتا للفورم)
    $(document).on('click', '.editBtn', function() {
        let id = $(this).data('id');
        $.get("/representatives/" + id + "/edit", function(data) {
            $('#formTitle').text('تعديل بيانات المندوب: ' + data.name);
            $('#rep_id').val(data.id);
            $('#name').val(data.name);
            $('#notes').val(data.notes);
            $('#phone').val(data.phone);
            $('#area').val(data.area);
            $('#commission_rate').val(data.commission_rate);

            $('#saveBtn').text('تحديث البيانات').removeClass('btn-success').addClass('btn-warning');
            $('#cancelBtn').removeClass('d-none');
            window.scrollTo(0, 0);
        });
    });

    // 3. إلغاء التعديل
    $('#cancelBtn').click(function() {
        $('#repForm')[0].reset();
        $('#notes').val('');
        $('#rep_id').val('');
        $('#formTitle').text('إضافة مندوب جديد');
        $('#saveBtn').text('حفظ المندوب').removeClass('btn-warning').addClass('btn-success');
        $(this).addClass('d-none');
    });

    // 4. الحذف
    $(document).on('click', '.deleteBtn', function() {
        let id = $(this).data('id');
        if(confirm('هل أنت متأكد من الحذف؟')) {
            $.ajax({
                url: "/representatives/" + id,
                type: 'DELETE',
                data: { _token: "{{ csrf_token() }}" },
                success: function(response) {
                    $('#row_' + id).remove();
                    Swal.fire('محذوف!', 'تم حذف المندوب', 'success');
                }
            });
        }
    });
});
</script>
@endsection