@extends('layout.mainlayout')
@section('content')
<div class="page-wrapper">
    <div class="content">
        <div class="page-header">
            <div class="page-title">
                <h4>Sales Tracking</h4>
                <h6>Record and manage category-based sales</h6>
            </div>
            <div class="page-btn d-flex gap-2">
                <a href="#" class="btn btn-added" data-bs-toggle="modal" data-bs-target="#addSaleModal">
                    <img src="{{ asset('assets/img/icons/plus.svg') }}" alt="img" class="me-1">Add Sale
                </a>
                <a href="#" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#manageCategoriesModal">
                    <i data-feather="settings" class="me-1"></i>Categories
                </a>
            </div>
        </div>

        @if(session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif
        @if(session('error'))
            <div class="alert alert-danger">{{ session('error') }}</div>
        @endif

        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table datatable">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Category</th>
                                <th>Amount (Tsh)</th>
                                <th>Description</th>
                                <th>Recorded By</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($sales as $s)
                            <tr>
                                <td>{{ \Carbon\Carbon::parse($s->date)->format('d M Y') }}</td>
                                <td>{{ $s->category_name }}</td>
                                <td>{{ number_format($s->amount, 2) }}</td>
                                <td>{{ $s->description ?? '-' }}</td>
                                <td>{{ $s->user_name ?? 'System' }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</div>

<!-- Add Sale Modal -->
<div class="modal fade" id="addSaleModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Record New Sale</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('admin.sales.store') }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12 mb-3">
                            <label class="form-label">Category <span class="text-danger">*</span></label>
                            <select name="sales_category_id" class="form-select" required>
                                <option value="">Select Category</option>
                                @foreach($categories as $cat)
                                    <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12 mb-3">
                            <label class="form-label">Amount (Tsh) <span class="text-danger">*</span></label>
                            <input type="number" name="amount" class="form-control" min="0" step="0.01" required>
                        </div>
                        <div class="col-12 mb-3">
                            <label class="form-label">Date <span class="text-danger">*</span></label>
                            <input type="date" name="date" class="form-control" value="{{ date('Y-m-d') }}" required>
                        </div>
                        <div class="col-12 mb-3">
                            <label class="form-label">Description (Optional)</label>
                            <textarea name="description" class="form-control" rows="2" placeholder="Add extra details..."></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Sale</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Manage Categories Modal -->
<div class="modal fade" id="manageCategoriesModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Manage Sales Categories</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- Add New Category Form -->
                <h6>Add New Category</h6>
                <form action="{{ route('admin.sales.category.store') }}" method="POST" class="d-flex gap-2 mb-4">
                    @csrf
                    <input type="text" name="name" class="form-control" placeholder="Category Name" required>
                    <button type="submit" class="btn btn-primary">Add</button>
                </form>

                <hr>

                <!-- Categories Table -->
                <h6>Existing Categories</h6>
                <div class="table-responsive" style="max-height: 300px;">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Category Name</th>
                                <th class="text-end">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($categories as $cat)
                            <tr>
                                <td>{{ $cat->name }}</td>
                                <td class="text-end">
                                    <form action="{{ route('admin.sales.category.delete', $cat->id) }}" method="POST" onsubmit="return confirm('Note: Category can only be deleted if no sales are recorded under it. Proceed?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-danger btn-sm">
                                            <i data-feather="trash-2" style="width:14px;"></i>
                                        </button>
                                    </form>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection