@extends('layouts.master')
@section('content')
    <style>
    .sibling-card{
    border-radius:12px;
    transition:all .25s ease;
    }
    .sibling-card:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 20px rgba(0,0,0,0.08);
    }
    .sibling-icon{
    font-size:16px;
    margin-right:3px;
    }
    .discount-badge{
    font-size:12px;
    padding:6px 10px;
    border-radius:20px;
    }
    </style>
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="col-xxl">
            <div class="row">
                <div class="col-md-12">

                    <div class="card shadow-sm mb-4">
                        <div class="card-header">
                            <h5 class="mb-0">Sibling</h5>
                        </div>
                        <div class="card-body">
                            <form id="siblingForm" method="post" action="{{route('admin.sibling.store')}}">
                                @csrf
                                <input type="hidden" id="sibling_id" name="id">
                                <div class="row g-3 align-items-end">
                                    <div class="col-md-4">
                                        <label class="form-label">Quantity<span class="text-danger">*</span></label>
                                        <select class="form-select text-capitalize" required name="quantity" id="quantity">
                                            <option value="" selected disabled="">Select Quantity</option>
                                            @for($i=2;$i<5;$i++)
                                                <option value="{{$i}}">{{$i}}</option>
                                            @endfor
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">Discount (%) <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" name="discount" id="discount" required placeholder="Enter Discount">
                                    </div>
                                    <div class="col-md-3">
                                        <button type="submit" id="submitSiblingBtn" class="btn btn-primary w-100">
                                            <i class="fa fa-plus me-1"></i> Add
                                        </button>
                                    </div>
                                </div>
                            </form>

                        </div>
                    </div>
                    <div class="row mt-4">
                        @forelse($siblings as $sibling)
                            <div class="col-md-3 mb-3" id="sibling_{{ $sibling->id }}">
                                <div class="card shadow-sm border-0 sibling-card h-100">
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between align-items-start">
                                            <div>
                                                <h6 class="fw-bold mb-2 text-dark">
                                                    {{ $sibling->quantity }} {{ $sibling->quantity > 1 ? 'Siblings' : 'Sibling' }}
                                                </h6>
                                                <div class="mb-2">
                                                    @for($i=1; $i <= $sibling->quantity; $i++)
                                                        <i class="fa fa-user text-primary sibling-icon"></i>
                                                    @endfor
                                                </div>
                                                <span class="badge bg-success discount-badge">
                                                    {{ $sibling->discount }}% Discount
                                                </span>
                                            </div>
                                            <div class="dropdown">
                                                <button class="btn btn-sm btn-light" data-bs-toggle="dropdown">
                                                    <i class="fa fa-ellipsis-v"></i>
                                                </button>
                                                <ul class="dropdown-menu dropdown-menu-end">
                                                    <li>
                                                        <a class="dropdown-item editSibling"
                                                           data-id="{{ $sibling->id }}"
                                                           data-quantity="{{ $sibling->quantity }}"
                                                           data-discount="{{ $sibling->discount }}">
                                                            <i class="fa fa-edit me-2"></i>Edit
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <button class="dropdown-item text-danger deleteSibling"
                                                                data-id="{{ $sibling->id }}">
                                                            <i class="fa fa-trash me-2"></i>Delete
                                                        </button>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="col-12">
                                <div class="alert alert-info text-center">
                                    No Siblings Added Yet
                                </div>
                            </div>
                        @endforelse
                    </div>

                </div>
            </div>
        </div>
    </div>
    <script>
        var siblingDeleteUrl = "{{ route('admin.sibling.delete') }}";
        var siblingUpdateUrl = "{{ route('admin.sibling.update') }}";
        var siblingStoreUrl = "{{ route('admin.sibling.store') }}";
        var CSRF_TOKEN = "{{ csrf_token() }}";
    </script>
@endsection