@extends('layouts.main')

@section('content')
<div class="flex justify-center mb-6 px-4"> <!-- Add px-4 for mobile padding -->
    <div class=" mt-10 w-full">

        @if(session('success'))
            <div class="bg-green-100 text-green-800 px-4 py-2 rounded mb-4">
                {{ session('success') }}
            </div>
        @endif

        <div class=" w-full bg-white p-6 rounded shadow">
            <h2 class="text-2xl font-bold mb-4">Add Margin</h2>

            <form action="{{ route('margins.store') }}" method="POST" class="space-y-4">
                @csrf

                <div>
                    <label class="block text-sm font-medium">From Price</label>
                    <input type="number" step="0.01" name="from_price" class="w-full border border-gray-300 px-3 py-2 rounded" required>
                </div>

                <div>
                    <label class="block text-sm font-medium">To Price</label>
                    <input type="number" step="0.01" name="to_price" class="w-full border border-gray-300 px-3 py-2 rounded" required>
                </div>

                <div>
                    <label class="block text-sm font-medium">Percentage (%)</label>
                    <input type="number" step="0.01" name="percentage_price" class="w-full border border-gray-300 px-3 py-2 rounded" required>
                </div>

                <div class="flex justify-end">
                    <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
                        Add Margin
                    </button>
                </div>
            </form>
        </div>

        @if($margins->count())
            <h3 class="text-xl font-semibold mt-8">Existing Margins</h3>
            <div class="overflow-x-auto"> <!-- Make table scrollable on small screens -->
                <table class="w-full mt-4 border-collapse">
                    <thead>
                        <tr class="bg-gray-100">
                            <th class="border px-4 py-2">From</th>
                            <th class="border px-4 py-2">To</th>
                            <th class="border px-4 py-2">Percentage</th>
                            <th class="border px-4 py-2">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($margins as $margin)
                            <tr class="text-center">
                                <td class="border px-4 py-2">{{ $margin->from_price }}</td>
                                <td class="border px-4 py-2">{{ $margin->to_price }}</td>
                                <td class="border px-4 py-2">{{ $margin->percentage_price }}%</td>
                                <td class="border px-4 py-2">
                                    <form action="{{ route('margins.destroy', $margin->id) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this margin?');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="bg-red-600 text-white px-3 py-1 rounded hover:bg-red-700">
                                            Delete
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>
</div>
@endsection