@include('layouts.main')
<style>
    .hidden {
        display: none;
    }
    input {
        width: 100%;
    }
    .form-group{
        margin-bottom : 10px;
    }
    body {
        font-family: Arial, sans-serif;
        margin: 20px;
        background-color: #f4f4f4;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        margin: 25px 0;
        font-size: 18px;
        text-align: left;
        background-color: #ffffff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    th, td {
        padding: 12px 15px;
    }

    th {
        background-color: #009879;
        color: #ffffff;
        text-transform: uppercase;
    }

    tr {
        border-bottom: 1px solid #dddddd;
    }

    tr:nth-of-type(even) {
        background-color: #f3f3f3;
    }

    tr:hover {
        background-color: #f1f1f1;
    }

    caption {
        font-size: 24px;
        margin-bottom: 15px;
        font-weight: bold;
        color: #333;
    }
</style>
<div class="container">
    <a href="{{ route('help-category.index') }}">Back</a>

    <h2 style="text-align: center">Update Category</h2>
    <form method="POST" action="{{ route('help-category.update', $helpCategory) }}" enctype="multipart/form-data">
    @csrf @method('PUT')
        <div class="form-group row">
            <div class="col-6">
                <h6>Title (English)</h6>
                <input type="text" name="title_en" class="form-control" value="{{ $helpCategory->title_en }}" required>
            </div>
            <div class="col-6">
                <h6>Title (Arabic)</h6>
                <input type="text" name="title_ar" class="form-control" value="{{ $helpCategory->title_ar }}" required>
            </div>
        </div>
        <div class="form-group row">
            <div class="col-12">
                <h6>Icon</h6>
                <input type="file" name="icon" class="form-control" accept="image/*">
                @if ($helpCategory->icon)
                    <div>
                        <img src="{{ $helpCategory->icon }}" width="100">
                    </div>
                @endif

            </div>
        </div>
        <div class="form-group row">
            <div class="col-6">
                <h6>Button Sub-title (English)</h6>
                <input type="text" name="button_sub_title_en" class="form-control" value="{{ $helpCategory->button_sub_title_en }}">
            </div>
            <div class="col-6">
                <h6>Button Sub-title (Arabic)</h6>
                <input type="text" name="button_sub_title_ar" class="form-control" value="{{ $helpCategory->button_sub_title_ar }}">
            </div>
        </div>
        <div class="form-group row">
            <div class="col-6">
                <h6>Button Text (English)</h6>
                <input type="text" name="button_text_en" class="form-control" value="{{ $helpCategory->button_text_en }}">
            </div>
            <div class="col-6">
                <h6>Button Text (Arabic)</h6>
                <input type="text" name="button_text_ar" class="form-control" value="{{ $helpCategory->button_text_ar }}">
            </div>
        </div>
        <div class="form-group row">
            <div class="col-6">
                <h6>Redirection Type</h6>
                <select name="redirection_type" class="form-control">
                    <option value=""></option>
                    <option value="whatsapp"  >Whatsapp</option>
                    <option value="deeplink" >Deeplink</option>
                    <option value="web" >Web</option>
                </select>
            </div>
            <div class="col-6">
                <h6>Redirection Detail</h6>
                <input type="text" name="redirection_detail" class="form-control" value="{{$helpCategory->redirection_detail}}">
            </div>
        </div>

        <button type="submit" class="btn btn-primary">Update</button>
        <button type="reset" class="btn btn-warning">Cancel</button>
    </form>

    @if(count($questions) == 0)
        <div style="padding-top:30px;text-align:center">
            <a href="{{ route('help.create', $helpCategory->id) }}" class="btn btn-primary">Create Question</a>
        </div>
    @else
        <h2 style="text-align: center">Questions</h2>
        <div style="text-align: right;">
            <a href="{{ route('help.create', $helpCategory->id) }}" class="btn btn-primary">Create Question</a>
        </div>
        <table>
            <thead>
            <tr>
                <th>Question (English)</th>
                <th>Answer (English)</th>
                <th>Action</th>
            </tr>
            </thead>
            <tbody>
            @foreach($questions as $question)
                <tr>
                    <td>{{ $question->question_en }}</td>
                    <td>{{ $question->answer_en }}</td>
                    <td>
                        <a href="{{ route('help.edit', $question) }}" class="btn btn-info">Edit</a>
                        <form action="{{ route('question.delete', $question) }}" method="POST" style="display:inline">
                            @csrf @method('DELETE')
                            <button type="submit" class="btn btn-danger" onclick="return confirm('Are you sure to Delete?')">Delete</button>
                        </form>
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>
    @endif
</div>