@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">Create Category</h2>

    <form method="POST" action="{{ route('help-category.store') }}" enctype="multipart/form-data">
        @csrf
        <div class="form-group row">
            <div class="col-6">
                <h6>Title (English)</h6>
                <input type="text" name="title_en" class="form-control" required>
            </div>
            <div class="col-6">
                <h6>Title (Arabic)</h6>
                <input type="text" name="title_ar" class="form-control" 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/*">
            </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">
            </div>
            <div class="col-6">
                <h6>Button Sub-title (Arabic)</h6>
                <input type="text" name="button_sub_title_ar" class="form-control">
            </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">
            </div>
            <div class="col-6">
                <h6>Button Text (Arabic)</h6>
                <input type="text" name="button_text_ar" class="form-control">
            </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">
            </div>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
        <button type="reset" class="btn btn-warning">Cancel</button>
    </form>
</div>