@extends('layout.layout')

@section('content')
    <div class="card container-fluid">
        <div class="row justify-content-center">
            <div class="col-md-10">
                <form action="{{ route('track-pricing-plan.store', ['id' => $track->id]) }}" method="POST">
                    @csrf
                    <div class="card h-100 border-0 shadow-sm overflow-hidden">
                        <div class="card-header border-bottom py-3 px-4 d-flex justify-content-between align-items-center">
                            <h6 class="mb-0">Pricing Plan</h6>
                            <div class="mt-3 text-end" id="submit-button">
                                <button type="submit" class="btn btn-primary">
                                    Add <i class="fa fa-plus ms-1"></i>
                                </button>
                            </div>
                        </div>

                        <div class="card-body p-4">

                            <input type="hidden" name="track_id" value="{{ $track->id }}">

                            <div class="table-responsive">
                                <table class="table table-bordered table-sm table bordered-table sm-table mb-0">
                                    <thead class="table-light">
                                        <tr class="text-center">
                                            <th style="min-width: 160px;">Pricing Plan Type</th>
                                            @foreach ($tracktypes as $item)
                                                <th>{{ $item->name }}</th>
                                            @endforeach
                                            <th>Discount Plan</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($pricing_plan_types as $plan)
                                            <tr>
                                                <td class="align-middle text-center fw-semibold">
                                                    {{ $plan->name }}
                                                </td>
                                                @foreach ($tracktypes as $tracktype)
                                                    <td>
                                                        <input type="text"
                                                            name="pricing[{{ $plan->id }}][{{ $tracktype->id }}]"
                                                            class="form-control form-control-sm price-input text-center"
                                                            value="{{ $pricing_data[$plan->id][$tracktype->id] ?? '' }}">
                                                    </td>
                                                @endforeach
                                                <td>
                                                    <select name="pricing[{{ $plan->id }}][discount_plan_id]"
                                                        class="form-select form-select-sm">
                                                        <option value="">Select...</option>
                                                        @foreach ($discount_plans as $dp)
                                                            <option value="{{ $dp->id }}"
                                                                {{ isset($pricing_data[$plan->id]['discount_plan_id']) && $pricing_data[$plan->id]['discount_plan_id'] == $dp->id ? 'selected' : '' }}>
                                                                {{ $dp->name_en }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            function checkInputValues() {
                let hasValue = false;
                $('.price-input').each(function() {
                    const value = $(this).val().trim();
                    if (value !== '') {
                        hasValue = true;
                        return false;
                    }
                });

                if (hasValue) {
                    $('#submit-button').html(
                        "<button type='submit' class='btn btn-danger'>Update</button>"
                    );
                } else {
                    $('#submit-button').html(
                        "<button type='submit' class='btn btn-primary'>Add <i class='fa fa-plus ms-1'></i></button>"
                    );
                }
            }

            checkInputValues();
        });
    </script>
@endpush